flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-31 20:10:13 +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 [_] 25% Priority work
[_] 0% general todo [_] 50% general todo
[_] use modes (CSS) for thumbnail/page views... [X] use modes (CSS) for thumbnail/page views...
[_] vanquish opacity effects
| they slow everything down considerably!
[_] 50% stage 1 - basic features [_] 50% stage 1 - basic features
[X] real magazine structure
[_] issue browser structure [_] issue browser structure
[_] global navigation bar [_] global navigation bar
[X] real magazine structure
[X] 100% basic article navigation [X] 100% basic article navigation
[X] next page [X] next page
[X] prev page [X] prev page

24
index.html
View File

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

8
magazine.css
View File

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