added JSON format version, basic template handling and two basic templates -- magazine title and page number...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

TODO.otl

@@ -1,12 +1,14 @@
-[_] 37% Priority work
+[_] 38% 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...
-	[_] 69% general todo
+	[_] 75% general todo
-		[_] JSON: store format version in the JSON file...
+		[_] 0% add two main page themes:
+			[_] light
+			[_] dark
 		[_] JSON: add page URLs as an alternative to direct content...
 		| use AJAX to get remote pages and their nested content
 		[_] JSON: add metadata section that can be downloaded separately...
@@ -40,12 +42,9 @@
 		[_] add default empty state to viewer, magazine and article...
 		| use it to trigger a "New Magazine", "New Cover"/"New Article" and
 		| "New Cover"/"New Page" actions...
-		[_] Editor: decide weather to make the editor toolbar oriented or floating bars around context...
 		[_] Editor: make the editor switchable...
 		| if it is imported it should be able to switch on and off on demand...
 		[_] Editor: make empty magazine and article visible in the editor...
-		[_] add in-page live templates...
-		| elements that will get generated content, like page numbers etc.
 		[_] 0% populate an example issue
 			[_] template photo page
 			[_] template 3x3 grid
@@ -57,6 +56,10 @@
 		[_] BUG: href to existing anchors will mess up layout...
 		| need to find out how can we disable anchor links from actually
 		| going to the anchor...
+		[X] Editor: decide weather to make the editor toolbar oriented or floating bars around context...
+		[X] add in-page live templates...
+		| elements that will get generated content, like page numbers etc.
+		[X] JSON: store format version in the JSON file...
 		[X] MINOR BUG: on loading a mag from JSON page widths get messed up...
 		| ...in cases where content elements have explicit widths pages do 
 		| not get stretched, this can be fixed by simply updating the view

editor.html

@@ -121,8 +121,7 @@ $(document).ready(function(){
 
 	// load state and setup everything that depends on it...
 	loadState()
-	setupNavigator()
+	loadMagazineChrome()
-	setupBookmarkTouchZones()
 
 	// set default view...
 	togglePageView('on')

index.html

@@ -105,9 +105,9 @@ $(document).ready(function(){
 
 
 	// load state and setup everything that depends on it...
+	// XXX load the data with loadJSON()
 	loadState()
-	setupNavigator()
+	loadMagazineChrome()
-	setupBookmarkTouchZones()
 
 	// set default view...
 	togglePageView('on')
@@ -153,7 +153,7 @@ $(document).ready(function(){
 
 	<div class="top-toolbar">
 		<div class="left-set">
-			<div class="button cover title"><a href="#home">PortableMag</a></div>
+			<div class="button cover title"><a href="#home" class="magazine-title-text">Magazine Title</a></div>
 		</div>
 		<div class="right-set">
 			<div class="button prev-bookmark">
@@ -224,7 +224,7 @@ $(document).ready(function(){
 
 <div class="scaler">
 <div class="aligner">
-	<div class="magazine" title="PortableMag Demo">
+	<div class="magazine" title="PortableMag">
 		<div class="cover page current">
 			<div class="content">
 				<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
@@ -248,6 +248,8 @@ $(document).ready(function(){
 				 </g>
 				</svg>
 					
+				<!-- if you do not want a page number just do not include it... -->
+				<!--div class="page-number-text">[PAGE NUMBER]</div-->
 			</div>
 		</div>
 
@@ -277,9 +279,11 @@ $(document).ready(function(){
 							</i>
 						</ul>
 					</big>
-					<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
+					<div style="position:absolute; bottom:10px; right:30px">
 						<a href="#next">get started...</a><br>
 					</div>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page">
@@ -329,7 +333,7 @@ $(document).ready(function(){
 						<a href="#back">Go back</a><br>
 						<a href="#forward">Go forward</a><br>
 					</div>
-					<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
+					<div style="position:absolute; right: 30px; bottom:10px;">
 						<a href="#config">configuration demo</a> <a href="#next">next page...</a><br>
 					</div>
 
@@ -338,6 +342,8 @@ $(document).ready(function(){
 						<h3>This is an example layer</h3>
 						<i>click or tap to hide</i>
 					</div>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 
@@ -402,11 +408,15 @@ $(document).ready(function(){
 					 </g>
 					</svg>
 
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page">
 				<div class="content" style="background: black; color: gray; padding-left: 20px; padding-right: 20px;">
 					<h1>The Page <i>content</i> has a fixed size...</h1>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page">
@@ -427,6 +437,8 @@ $(document).ready(function(){
 					<p>
 					NOTE: by default the overflow is visible (see <a href="#next">next page</a>), so be carefull.
 					</p>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page">
@@ -442,6 +454,8 @@ $(document).ready(function(){
 						You can see this by resizing the page in browser or rotating the device.
 						</p>
 					</div>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 		</div>
@@ -450,6 +464,8 @@ $(document).ready(function(){
 				<div class="content" name="ArticleAnchorExample">
 					<h1>Page Templates</h1>
 					<a href="#home">home</a><br>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 
@@ -462,26 +478,36 @@ $(document).ready(function(){
 					<div style="float:left; width: 45%; height: 100%; padding: 10px;">
 						Column 2
 					</div>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page no-resize">
 				<div class="content" style="background:gold">
 					Page
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page no-resize">
 				<div class="content" style="background:yellow; width: 600px">
 					Page
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page no-resize">
 				<div class="content" style="background:gold; width: 400px">
 					Page
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page no-resize">
 				<div class="content" style="background:orange; width: 200px">
 					Page
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 		</div>
@@ -490,18 +516,24 @@ $(document).ready(function(){
 				<div class="content">
 					<h1>Article Cover</h1>
 					<a href="#home">home</a><br>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 
 			<div class="page">
 				<div class="content">
 					Page
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page">
 				<div class="content">
 					Page<br>
 					<a href="#home">home</a><br>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 		</div>

magazine.css

@@ -449,6 +449,17 @@ body {
 
 
 /******************************************************* templates ***/
+
+.page-number-text {
+	position: absolute; 
+	bottom: 10px; 
+	right: 10px;
+	text-align: right;
+
+	color: gray;
+}
+
+
 /* XXX split these into seporate files... */
 .caption {
 	display: block;

magazine.js

@@ -947,6 +947,9 @@ function resetState(){
 *
 **********************************************************************/
 
+var JSON_FORMAT_VERSION = 0.1
+
+
 // there are two type of metadata handlers:
 // 	- 'as-is', this is a trivial read and write value
 // 	- explicit reader/writer, this will convert the data from html to JSON
@@ -1000,8 +1003,6 @@ function writeMetadata(elem, res, metadata){
 	return elem
 }
 
-var JSON_VERSION = 0.1
-
 function buildJSON(export_bookmarks, export_position){
 	function _getContent(_, elem){
 		elem = $(elem)
@@ -1042,7 +1043,7 @@ function buildJSON(export_bookmarks, export_position){
 	res.pages = $('.magazine > .page, .magazine > .article').map(_getContent).toArray(),
 	res.bookmarks = export_bookmarks ? buildBookmarkList() : []
 
-	res['format-version'] = JSON_VERSION
+	res['format-version'] = JSON_FORMAT_VERSION
 
 	if(export_position){
 		res.position = getPageNumber()
@@ -1090,7 +1091,7 @@ function loadJSON(data, ignore_chrome){
 	}
 
 	// XXX check version...
-	var version = data['json-version']
+	var version = data['format-version']
 	if(version != JSON_VERSION){
 		console.warn('WARNING: JSON Format Version Mismatch.')
 	}
@@ -1169,6 +1170,34 @@ function createCoverPage(data){
 
 
 
+/*********************************************** editor: templates ***/
+
+var MagazineTemplates = {
+
+	// setup titles...
+	'.magazine-title-text': function(elem){
+		elem.text($('.magazine').attr('title') 
+					|| $('.magazine').attr('name') 
+					|| 'PortableMag')
+	},
+
+	// setup page numbers...
+	'.page-number-text': function(elem){
+		elem.each(function(_, e){
+			var e = $(e)
+			e.text(getPageNumber(e.parents('.page')))
+		})
+	}
+}
+
+// XXX call this on page edits...
+function runMagazineTemplates(){
+	for(var tpl in MagazineTemplates){
+		MagazineTemplates[tpl]($(tpl))
+	}
+}
+
+
 /************************************************ editor: magazine ***/
 
 // load the data...
@@ -1181,13 +1210,17 @@ function loadMagazineData(mag){
 function loadMagazineChrome(position, bookmarks){
 	setupBookmarkTouchZones()
 	setupNavigator()
-	setCurrentPage(position)
+	if(position){
-	loadBookmarks(bookmarks != null ? bookmarks : [])
+		setCurrentPage(position)
+	}
+	if(bookmarks){
+		loadBookmarks(bookmarks != null ? bookmarks : [])
+	}
+	runMagazineTemplates()
 	// XXX do we need to cover this with a splash???
 	updateView()
 }
 
-
 // NOTE: we do not need to create any event handlers here specifically 
 // 		as all events are ahndled by the viewer...
 function loadMagazine(mag, position, bookmarks){