mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 03:50:16 +00:00
added page-sets (still not fully deserializable) and fixed a bug in the CSS layout...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
a79ef10057
commit
f490224ca8
9
TODO.otl
9
TODO.otl
@ -1,11 +1,16 @@
|
||||
[_] 37% Priority work
|
||||
[_] 36% Priority work
|
||||
[_] 0% TouchSwipe issues...
|
||||
[_] BUG: swipe-back does not cancel a swipe... (TouchSwipe)
|
||||
| ...unless the finger is return to within the threshold of the
|
||||
| touchdown point.
|
||||
[_] BUG: no drag threshold on excludedElements (TouchSwipe)
|
||||
| stalled...
|
||||
[_] 67% general todo
|
||||
[_] 62% general todo
|
||||
[X] 100% add page sets..
|
||||
[X] general page navigation
|
||||
[X] serialization
|
||||
[X] PROBLEM: cover is not found within the page-set
|
||||
[X] PROBLEM: next/prev article navigation is broken
|
||||
[_] move some of the current configuration options to the magazine...
|
||||
| same idea as .no-resize class...
|
||||
[_] add transition-duration editors to config page (a-la PAGES_IN_RIBBON)...
|
||||
|
||||
26
index.html
26
index.html
@ -567,6 +567,32 @@ $(document).ready(function(){
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article">
|
||||
<!-- page set -->
|
||||
<div class="page-set" style="background: url(img.jpg) no-repeat right top; background-size: 100% 100%; color: white;">
|
||||
<div class="page cover no-resize page-align-left" style="background:none">
|
||||
<div class="content">
|
||||
<h1>Page Set Example</h1>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page no-resize" style="background:none">
|
||||
<div class="content">
|
||||
Page in set<br>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page no-resize page-align-right" style="background:none">
|
||||
<div class="content">
|
||||
Page in set<br>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article">
|
||||
<div class="cover page">
|
||||
<div class="content">
|
||||
|
||||
@ -8,11 +8,11 @@
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.magazine > .cover {
|
||||
.magazine .cover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.article > .cover {
|
||||
.article .cover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
@ -32,8 +32,6 @@ body {
|
||||
|
||||
width: auto;
|
||||
height: auto;
|
||||
/* XXX change to relative units... */
|
||||
margin-top: -300px;
|
||||
|
||||
/* XXX change to relative units... */
|
||||
font-size: 12px;
|
||||
@ -182,6 +180,7 @@ body {
|
||||
min-width: 200px;
|
||||
/* can we avoid setting the sizes in so many places? */
|
||||
height: 600px;
|
||||
margin-top: -300px;
|
||||
|
||||
/* this is minus half the page width */
|
||||
/* XXX change to relative units... */
|
||||
@ -211,8 +210,7 @@ body {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
/*top: -50%;*/
|
||||
top: -25%;
|
||||
top: 25%;
|
||||
|
||||
height: 300px;
|
||||
width: 600px;
|
||||
@ -243,6 +241,7 @@ body {
|
||||
|
||||
|
||||
/* magazine article, this can contain a cover and a number of pages */
|
||||
.page-set,
|
||||
.article {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
@ -255,7 +254,7 @@ body {
|
||||
color: silver;
|
||||
}
|
||||
|
||||
.article > .cover {
|
||||
.article .cover {
|
||||
}
|
||||
|
||||
|
||||
|
||||
88
magazine.js
88
magazine.js
@ -12,8 +12,21 @@
|
||||
var PAGES_IN_RIBBON = 4.0
|
||||
|
||||
// if true, expand a page to fit the whole view in single page mode...
|
||||
// NOTE: if .no-resize is set on a page then this will not have effect
|
||||
// on the that page...
|
||||
var FIT_PAGE_TO_VIEW = true
|
||||
|
||||
// if false, this will force all pages to be fit to screen size in full
|
||||
// page view...
|
||||
// XXX make this default and remove the option...
|
||||
// XXX will produce a bad transition on togglePageView to TN and back
|
||||
// after no-resize sized pages...
|
||||
// ...the most probable reason is that we waste too much time between
|
||||
// setting different values to elements...
|
||||
// need to keep wrights as tight as possible...
|
||||
var USE_REAL_PAGE_SIZES = true
|
||||
//var USE_REAL_PAGE_SIZES = false
|
||||
|
||||
// default page alignment in full view...
|
||||
// supported values:
|
||||
// - 'center'
|
||||
@ -21,7 +34,10 @@ var FIT_PAGE_TO_VIEW = true
|
||||
// - 'right'
|
||||
// NOTE: page local align values take priority over this.
|
||||
// NOTE: this has no effect on thumbnail view.
|
||||
// NOTE: this has no effect if FIT_PAGE_TO_VIEW is true.
|
||||
// NOTE: this has no effect if FIT_PAGE_TO_VIEW is true and a page has
|
||||
// no-resize class set.
|
||||
// also, USE_REAL_PAGE_SIZES if set to false will make this have
|
||||
// no effect.
|
||||
var FULL_PAGE_ALIGN = 'center'
|
||||
|
||||
// if true will make page resizes after window resize animated...
|
||||
@ -30,14 +46,6 @@ var ANIMATE_WINDOW_RESIZE = true
|
||||
// if false will disable page dragging in single page mode...
|
||||
var DRAG_FULL_PAGE = true
|
||||
|
||||
// XXX make this default and remove the option...
|
||||
// XXX will produce a bad transition on togglePageView to TN and back after no-resize sized pages...
|
||||
// ...the most probable reason is that we waste too much time between
|
||||
// setting different values to elements...
|
||||
// need to keep wrights as tight as possible...
|
||||
var USE_REAL_PAGE_SIZES = true
|
||||
//var USE_REAL_PAGE_SIZES = false
|
||||
|
||||
// if true this will make each page flip update the hash url...
|
||||
// if false, only direct linking will update the url.
|
||||
// NOTE: this can slow down navigation...
|
||||
@ -97,6 +105,28 @@ function updateView(){
|
||||
|
||||
/********************************************************* helpers ***/
|
||||
|
||||
function isPageResizable(page){
|
||||
if(page == null){
|
||||
page = $('.current.page')
|
||||
}
|
||||
if(!USE_REAL_PAGE_SIZES){
|
||||
return false
|
||||
}
|
||||
|
||||
var mag = $('.magazine')
|
||||
var article = page.parents('.article').first()
|
||||
|
||||
// first check the page...
|
||||
return (page.hasClass('no-resize') ? false
|
||||
// then the article...
|
||||
: article.hasClass('no-resize') ? false
|
||||
// then the magazine...
|
||||
: mag.hasClass('no-resize') ? false
|
||||
// now for default...
|
||||
: true)
|
||||
}
|
||||
|
||||
|
||||
// this will get the current active alignment...
|
||||
// NOTE: align can be set for:
|
||||
// - page
|
||||
@ -241,6 +271,7 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){
|
||||
var mag = $('.magazine')
|
||||
var pos = $('.navigator .bar .indicator')
|
||||
|
||||
// XXX make this drag pages that are larger than view before dragging outside...
|
||||
if(phase=='move'
|
||||
// see if wee need to drag the page and allways drag the ribbon...
|
||||
&& (DRAG_FULL_PAGE || !_PAGE_VIEW)
|
||||
@ -527,10 +558,10 @@ function goToMagazineEnd(){
|
||||
}
|
||||
function goToArticleCover(){
|
||||
// try and get the actual first cover...
|
||||
var cover = $('.current.page').parents('.article').children('.cover.page').first()
|
||||
if(cever.length == 0){
|
||||
var cover = $('.current.page').parents('.article').find('.cover.page').first()
|
||||
if(cover.length == 0){
|
||||
// no cover, get the first page...
|
||||
return setCurrentPage($('.current.page').parents('.article').children('.page').first())
|
||||
return setCurrentPage($('.current.page').parents('.article').find('.page').first())
|
||||
} else {
|
||||
return setCurrentPage(cover)
|
||||
}
|
||||
@ -560,7 +591,7 @@ function nextArticle(){
|
||||
var articles = $('.magazine .article')
|
||||
return setCurrentPage(
|
||||
$(articles[Math.min(articles.index(cur)+1, articles.length-1)])
|
||||
.children('.page')
|
||||
.find('.page')
|
||||
.first())
|
||||
}
|
||||
function prevArticle(){
|
||||
@ -574,7 +605,7 @@ function prevArticle(){
|
||||
var articles = $('.magazine .article')
|
||||
return setCurrentPage(
|
||||
$(articles[Math.max(articles.index(cur)-1, 0)])
|
||||
.children('.page')
|
||||
.find('.page')
|
||||
.first())
|
||||
}
|
||||
|
||||
@ -998,8 +1029,10 @@ var JSON_FORMAT_VERSION = 0.1
|
||||
// - explicit reader/writer, this will convert the data from html to JSON
|
||||
// data and back...
|
||||
JSONMetadata = {
|
||||
id: 'as-is',
|
||||
name: 'as-is',
|
||||
title: 'as-is',
|
||||
style: 'as-is',
|
||||
authors: {
|
||||
reader: function(data){
|
||||
// NOTE: this might look odd, but we are using JS .map instead
|
||||
@ -1060,12 +1093,20 @@ function buildJSON(export_bookmarks, export_position){
|
||||
content: elem.children('.content')[0].outerHTML
|
||||
}
|
||||
|
||||
// page-set...
|
||||
} else if(elem.hasClass('page-set')){
|
||||
var res = {
|
||||
type: 'page-set',
|
||||
'class': elem.attr('class'),
|
||||
pages: elem.children('.page').map(_getContent).toArray()
|
||||
}
|
||||
|
||||
// article...
|
||||
} else if(elem.hasClass('article')){
|
||||
var res = {
|
||||
type: 'article',
|
||||
'class': elem.attr('class'),
|
||||
pages: elem.children('.page').map(_getContent).toArray()
|
||||
pages: elem.children('.page, .page-set').map(_getContent).toArray()
|
||||
}
|
||||
|
||||
// other...
|
||||
@ -1112,6 +1153,17 @@ function loadJSON(data, load_user_data){
|
||||
.addClass(elem['class'])
|
||||
.appendTo(block)
|
||||
|
||||
// page-set...
|
||||
} else if(elem.type == 'page-set') {
|
||||
// buiold an article...
|
||||
var res = createEmptyPageSet()
|
||||
.addClass(elem['class'])
|
||||
.appendTo(block)
|
||||
// populate article with pages...
|
||||
$(elem.pages).each(function(_, e){
|
||||
_build(res, e)
|
||||
})
|
||||
|
||||
// article...
|
||||
} else if(elem.type == 'article') {
|
||||
// buiold an article...
|
||||
@ -1187,6 +1239,12 @@ function createMagazine(title, magazine_cover, article_cover){
|
||||
}
|
||||
|
||||
|
||||
// XXX do we need other page-set functions???
|
||||
function createEmptyPageSet(){
|
||||
return $('<div/>')
|
||||
.addClass('page-set')
|
||||
}
|
||||
|
||||
function createEmptyArticle(){
|
||||
return $('<div/>')
|
||||
.addClass('article')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user