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>

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)...

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">

magazine-custom.css

@@ -8,11 +8,11 @@
 	background: gray;
 }
 
-.magazine > .cover {
+.magazine .cover {
 	background: white;
 }
 
-.article > .cover {
+.article .cover {
 	background: white;
 }
 

magazine.css

@@ -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 {
 }
 
 

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()
+	var cover = $('.current.page').parents('.article').find('.cover.page').first()
-	if(cever.length == 0){
+	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')