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

reverted to page morphing, needs more assessment...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-22 00:36:32 +04:00
parent 66460d13d0
commit 5f3f7caba5
3 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
TODO.otl
View File

@ -1,10 +1,12 @@
[_] 12% Priority work
[_] 0% general todo
[_] use modes (CSS) for thumbnail/page views...
[_] 25% Priority work
[_] 50% general todo
[X] use modes (CSS) for thumbnail/page views...
[_] vanquish opacity effects
| they slow everything down considerably!
[_] 50% stage 1 - basic features
[X] real magazine structure
[_] issue browser structure
[_] global navigation bar
[X] real magazine structure
[X] 100% basic article navigation
[X] next page
[X] prev page

40
index.html
View File

@ -26,9 +26,12 @@ $(document).ready(function(){
swipeDown: function(){
togglePageView('on')
},
// XXX for some reason this deos not bubble up the nested elements...
click: function(evt, elem){
if($(elem).hasClass('page')){
setCurrentPage(elem)
} else if($(elem).hasClass('content')){
setCurrentPage($(elem).parents('.page').first())
}
return true
}
@ -174,6 +177,8 @@ togglePageDragging = createCSSClassToggler(
'dragging')
var FIT_PAGE_TO_VIEW = true
togglePageView = createCSSClassToggler(
'.viewer',
'page-view-mode',
@ -182,18 +187,24 @@ togglePageView = createCSSClassToggler(
function(){
if(togglePageView('?') == 'on'){
PAGES_VISIBLE = 1
//fitPagesToViewer(PAGES_VISIBLE)
fitNPages(PAGES_VISIBLE)
// to prevent drag while zooming to affect
// the resulting position set it to current
// page...
// XXX now this is done by fitNPages
setCurrentPage()
if(FIT_PAGE_TO_VIEW){
fitPagesToViewer(PAGES_VISIBLE)
} else {
fitNPages(PAGES_VISIBLE)
// to prevent drag while zooming to affect
// the resulting position set it to current
// page...
// XXX now this is done by fitNPages
setCurrentPage()
}
} else {
PAGES_VISIBLE = PAGES_IN_RIBBON
// XXX this needs to be done before transitions...
//fitPagesToContent(PAGES_VISIBLE)
fitNPages(PAGES_VISIBLE)
if(FIT_PAGE_TO_VIEW){
// XXX this needs to be done before transitions...
fitPagesToContent(PAGES_VISIBLE)
} else {
fitNPages(PAGES_VISIBLE)
}
}
})
@ -221,12 +232,11 @@ function fitNPages(n){
setElementScale($('.scaler'), scale)
/*
/* XXX
fitPagesTo(null, n)
*/
}
/*
// NOTE: this is a single big function because we need to thread data
// through to avoid sampling while animating...
// XXX try and do the fitting with pure CSS...
@ -294,7 +304,6 @@ function fitPagesTo(elem, n){
// update position using the new width...
setCurrentPage(null, rW)
}
*/
function fitPagesToViewer(n){
@ -441,6 +450,9 @@ function createPage(article, template){
<body>
<div class="viewer">
<!-- XXX add toolbars here... -->
<div class="scaler">
<div class="aligner">
<div class="magazine">
@ -463,7 +475,7 @@ function createPage(article, template){
<!-- XXX do we need an Article Credits page??? -->
<div class="page">
<div class="content">
<div class="content" style="border:solid red 1px">
Page
</div>
</div>

8
magazine.css
View File

@ -136,22 +136,24 @@ body {
.page-view-mode.viewer {
background: white;
}
.page-view-mode .page .content {
opacity: 0;
}
.page-view-mode .current.page .content {
opacity: 1;
}
.page-view-mode.viewer.dragging {
/*
background: silver;
*/
}
.page-view-mode.dragging .page .content {
opacity: 1;
}
/* keep this at the end... */
.unanimated {
-webkit-transition: none;