updated editor...

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

TODO.otl

@@ -6,7 +6,7 @@
 		[_] BUG: no drag threshold on excludedElements (TouchSwipe)
 		| stalled...
 	[_] 75% general todo
-		[_] 0% add two main page themes:
+		[_] 0% add two main page themes (global/local applicable):
 			[_] light
 			[_] dark
 		[_] JSON: add page URLs as an alternative to direct content...
@@ -56,6 +56,13 @@
 		[_] 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] 100% templates
+			[X] page number
+			[X] current page
+			| this is not really a template...
+			|
+			| XXX should this be a real template...
+			[X] magazine title
 		[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.

editor.html

@@ -52,6 +52,10 @@ $(document).ready(function(){
 		.on('pageMoved articleMoved', resetNavigator)
 		.on('pageRemoved articleRemoved', resetNavigator)
 
+		// templates...
+		.on('pageCreated articleCreated magazineCreated ' +
+				'pageMoved pageRemoved articleMoved articleRemoved', runMagazineTemplates)
+
 		// user interactions...
 		.swipe({
 			swipeStatus: swipeHandler,
@@ -167,7 +171,9 @@ $(document).ready(function(){
 
 	<div class="top-toolbar">
 		<div class="left-set">
-			<div class="button cover title"><a href="#home">PortableMag Editor</a></div>
+			<div class="button cover title">
+				<a href="#home"><span class="magazine-title-text">PortableMag</span> <small>(editor)</small></a>
+			</div>
 		</div>
 		<div class="right-set">
 			<div class="button prev-bookmark">
@@ -271,6 +277,12 @@ $(document).ready(function(){
 			<div class="cover page">
 				<div class="content">
 					<h1 name="basics" style="color:gray;font-size:100px;">Templates...</h1>
+
+					Magazine title: <span class="magazine-title-text">[MAGAZINE NAME]</span><br>
+
+					<div class="article-index">[ARTICLE INDEX]</div>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 			<div class="page">
@@ -282,6 +294,8 @@ $(document).ready(function(){
 					<div contenteditable="true" style="float:left; width: 45%; height: 100%; padding: 10px;">
 						Column 2
 					</div>
+
+					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 		</div>

magazine.js

@@ -1172,6 +1172,8 @@ function createCoverPage(data){
 
 /*********************************************** editor: templates ***/
 
+// NOTE: for these to be self-aplicable they must only replace the content
+// 		of the matched elements and not touch the element itself.
 var MagazineTemplates = {
 
 	// setup titles...
@@ -1181,7 +1183,15 @@ var MagazineTemplates = {
 					|| 'PortableMag')
 	},
 
-	// index...
+	// setup page numbers...
+	'.page-number-text': function(elem){
+		elem.each(function(_, e){
+			var e = $(e)
+			e.text(getPageNumber(e.parents('.page')))
+		})
+	},
+
+	// magazine index...
 	'.article-index': function(elem){
 		var list = $('<ul/>')
 		var mag = $('.magazine')
@@ -1207,19 +1217,13 @@ var MagazineTemplates = {
 						|| 'Magazine')))
 		root.append(list)
 		elem
+			// remove the original content...
 			.html('')
 			// cover...
 			.append(root)
-	}, 
+	} 
+}
 
-	// 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(){