flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-31 03:50:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

experementing with scroll on layout.html (magazine scaling over 1 will break the scrolling -- element is bigger than the scroll area)...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-12 02:23:29 +04:00
parent cbfdf94625
commit 3ce208b6c4
2 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
layout.html
View File

@ -22,10 +22,12 @@
z-index: 9000; z-index: 9000;
box-shadow: 10px 10px 150px -50px black; box-shadow: 10px 10px 150px -50px black;
} }
/*
.page:hover { .page:hover {
z-index: 9000; z-index: 9000;
box-shadow: 10px 10px 150px 0px black; box-shadow: 10px 10px 150px 0px black;
} }
*/
.page { .page {
-webkit-transition: none; -webkit-transition: none;
@ -84,6 +86,8 @@ $(document).ready(function(){
<body> <body>
<div class="viewer"> <div class="viewer">
<!--div class="_scaler">
<div class="_aligner"-->
<div class="magazine" name="PortableMag"> <div class="magazine" name="PortableMag">
<div class="cover page"> <div class="cover page">
@ -435,6 +439,11 @@ $(document).ready(function(){
</div> </div>
</div> </div>
<!--/div>
</div-->
</div>
</body> </body>
</html> </html>
<!-- vim:set ts=4 sw=4 nowrap : --> <!-- vim:set ts=4 sw=4 nowrap : -->

51
layout.js
View File

@ -4,6 +4,12 @@
* *
**********************************************************************/ **********************************************************************/
var NAVIGATE_RELATIVE_TO_VISIBLE = false
var USE_PAGE_ALIGN = true
/********************************************************** layout ***/ /********************************************************** layout ***/
var togglePageFitMode = createCSSClassToggler( var togglePageFitMode = createCSSClassToggler(
@ -13,7 +19,8 @@ var togglePageFitMode = createCSSClassToggler(
if(action == 'on'){ if(action == 'on'){
console.log('fitting pages to view...') console.log('fitting pages to view...')
var n = getPageNumber() var n = getPageNumber()
$('.page:not(.no-resize)').width($('.viewer').width()) var scale = getElementScale($('.magazine'))
$('.page:not(.no-resize)').width($('.viewer').width()/scale)
setCurrentPage(n) setCurrentPage(n)
} else { } else {
console.log('restoring page sizes...') console.log('restoring page sizes...')
@ -31,18 +38,22 @@ function getPageNumber(page){
if(page != null){ if(page != null){
return $('.page').index($(page)) return $('.page').index($(page))
} }
if(!NAVIGATE_RELATIVE_TO_VISIBLE){
var s = $('.viewer').scrollLeft() return $('.page').index($('.current.page'))
var W = $('.viewer').width() } else {
var cur = -1 var s = $('.viewer').scrollLeft()
var res = $('.page').map(function(i, e){ var W = $('.viewer').width()
e = $(e) var scale = getElementScale($('.magazine'))
var l = e.position().left var cur = -1
var w = e.width() var res = $('.page').map(function(i, e){
return Math.abs((l+(w/2)) - (s+(W/2))) e = $(e)
}) var l = e.position().left
cur = res.index(Math.min.apply(Math, res)) var w = e.width()*scale
return cur return Math.abs((l+(w/2)) - (s+(W/2)))
})
cur = res.index(Math.min.apply(Math, res))
return cur
}
} }
@ -53,6 +64,7 @@ function setCurrentPage(n){
if(n == null){ if(n == null){
n = getPageNumber() n = getPageNumber()
} }
var scale = getElementScale($('.magazine'))
var l = $('.page').length var l = $('.page').length
n = n < 0 ? l - n : n n = n < 0 ? l - n : n
n = n < -l ? 0 : n n = n < -l ? 0 : n
@ -60,7 +72,18 @@ function setCurrentPage(n){
$('.current.page').removeClass('current') $('.current.page').removeClass('current')
$($('.page')[n]).addClass('current') $($('.page')[n]).addClass('current')
var cur = $('.current.page') var cur = $('.current.page')
var offset = $('.viewer').width()/2 - cur.width()/2 if(USE_PAGE_ALIGN){
var align = getPageAlign()
} else {
var align = 'center'
}
if(align == 'left'){
var offset = 0
} else if(align == 'right'){
var offset = $('.viewer').width() - cur.width()*scale
} else {
var offset = $('.viewer').width()/2 - (cur.width()/2)*scale
}
cur.ScrollTo({ cur.ScrollTo({
offsetLeft: offset offsetLeft: offset
}) })