flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-12-22 03:22:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated scaling still a bit buggy, need to figure out a way to do this cleanly via CSS...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-21 19:43:05 +04:00
parent c9a34f74a6
commit e518e0bc65
2 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@ -221,14 +221,18 @@ function fitNPages(n){
fitPagesTo(null, n) fitPagesTo(null, n)
} }
// XXX this is a single big function because we need to thread data // NOTE: this is a single big function because we need to thread data
// through to avoid sampling while animating... // through to avoid sampling while animating...
// XXX try and do the fitting with pure CSS...
// XXX BUG: changing width when content is constrained only horizontally
// breaks this...
function fitPagesTo(elem, n){ function fitPagesTo(elem, n){
if(n==null){ if(n==null){
n = 1 n = 1
} }
var pages = $('.page') var pages = $('.page')
var view = $('.viewer') var view = $('.viewer')
var content = $('.content')
if(elem == null){ if(elem == null){
elem = view elem = view
} else { } else {
@ -238,35 +242,49 @@ function fitPagesTo(elem, n){
// sample data... // sample data...
var vW = view.width() var vW = view.width()
var vH = view.height() var vH = view.height()
var cW = content.width()
var cH = content.height()
var W = elem.width() var W = elem.width()
var H = elem.height() var H = elem.height()
var w = pages.width() var w = pages.width()
var h = pages.height() var h = pages.height()
var rW = w var rW = w
var rH = h
// NOTE: there must be no data sampling after this point... // NOTE: there must be no data sampling after this point...
// this is due to the fact that we will start changing stuff next // this is due to the fact that we will start changing stuff next
// and if CSS transitions are at play new samples will be off... // and if CSS transitions are at play new samples will be off...
// XXX fitting works ONLY in wone direction, if both sides need
// to be adjusted the this breaks everything...
// do the fitting... // do the fitting...
if(W-w/H-h > 1){ if(W-cW/H-cH > 1){
rW = W * (h/H) rW = W * (cH/H)
pages.width(rW) pages.width(rW)
pages.height(cH)
$('.magazine').css({ $('.magazine').css({
// NOTE: we can't use direct .width() here because of the transitions...
'margin-left': -rW/2 'margin-left': -rW/2
}) })
} }
if(W-w/H-h < 1){ if(W-cW/H-cH < 1){
pages.height(H * (w/W)) rH = H * (cW/W)
pages.height(rH)
pages.width(cW)
$('.page').css({
'margin-top': -rH/2
})
} }
// scale horizontally... // scale horizontally...
var scale = vW/(rW*n) var scale = vW/(rW*n)
// or scale vertically if needed... // or scale vertically if needed...
if(h*scale > vH){ // XXX broken
scale = vH/h /*
if(rH*scale > vH){
scale = vH/rH
} }
*/
setElementScale($('.scaler'), scale) setElementScale($('.scaler'), scale)
// update position using the new width... // update position using the new width...

4
magazine.css
View File

@ -38,6 +38,10 @@ body {
width: 800px; width: 800px;
height: 600px; height: 600px;
top: 50%;
/* change to relative units... */
margin-top: -300px;
border: solid red 1px; border: solid red 1px;
} }