more work on the editor...

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

TODO.otl

@@ -1,4 +1,4 @@
-[_] 30% Priority work
+[_] 28% 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 
@@ -183,20 +183,20 @@
 			[_] 0% issue download
 				[_] whole edition dowload and update (primary mode)
 				[_] seporate issue download (secondary)
-	[_] 46% stage 4 - editor and templating
-		[_] % template engine
-		[_] 46% edition editor / publisher
+	[_] 33% stage 4 - editor and templating
+		[_] 0% template engine
+		[_] 66% edition editor / publisher
 			[X] create/delete magazine
 			[X] cover
 			[_] 33% article
 				[X] add
 				[_] delete
 				[_] move
-			[_] 0% page
-				[_] add
+			[X] 100% page
+				[X] add
 				| from template
-				[_] delete
-				[_] move
+				[X] delete
+				[X] move
 			[_] 0% fill template field
 				[_] image
 				[_] text

magazine.css

@@ -179,6 +179,10 @@ body {
 	vertical-align: bottom;
 	top: 50%;
 
+	min-width: 200px;
+	/* can we avoid setting the sizes in so many places? */
+	height: 600px;
+
 	/* this is minus half the page width */
 	/* XXX change to relative units... */
 	margin-left: -400px;
@@ -189,6 +193,10 @@ body {
 	-ms-transition: all 0.2s ease;	
 	transition: all 0.2s ease;
 }
+/* XXX does not appear to work... (likely because :before/:after mess things up) */
+.magazine:empty {
+	background: silver;
+}
 .dragging .magazine {
 	-webkit-transition: none;
 	-moz-transition: none;
@@ -203,7 +211,8 @@ body {
 	display: inline-block;
 	text-align: center;
 
-	top: -50%;
+	/*top: -50%;*/
+	top: -25%;
 
 	height: 300px;
 	width: 600px;
@@ -240,6 +249,10 @@ body {
 	overflow: visible;
 	white-space: nowrap;
 	font-size: 0px;
+	min-width: 200px;
+}
+.article:empty {
+	color: silver;
 }
 
 .article > .cover {

magazine.js

@@ -946,25 +946,42 @@ function createArticleBefore(article, title){
 	if(article == null){
 		article = $('.current.page').parents('.article')
 	}
-	// XXX
+	// XXX fill the data...
+	var res = _createArticle().insertBefore(article)
+	setCurrentPage()
+	$('.viewer').trigger('articleCreated', res)
+	return res
 }
 function createArticleAfter(article, title){
 	if(article == null){
 		article = $('.current.page').parents('.article')
 	}
-	// XXX
+	// XXX fill the data...
+	var res = _createArticle().insertAfter(article)
+	setCurrentPage()
+	$('.viewer').trigger('articleCreated', res)
+	return res
 }
 function removeArticle(article){
-	// XXX
+	if(article == null){
+		article = $('.current.page').parents('.article')
+	}
+	article.remove()
+	setCurrentPage()
 	$('.viewer').trigger('articleRemoved', res)
+	return res
 }
 function shiftArticleLeft(article){
 	// XXX
+	setCurrentPage()
 	$('.viewer').trigger('articleMoved', res)
+	return res
 }
 function shiftArticleRight(article){
 	// XXX
+	setCurrentPage()
 	$('.viewer').trigger('articleMoved', res)
+	return res
 }
 
 
@@ -981,7 +998,6 @@ function createPageIn(article, template){
 	}
 	var res = _createPage(template).appendTo(article)
 	$('.viewer').trigger('pageCreated', res)
-
 	return res
 }
 // XXX the next two are almost identical...
@@ -990,11 +1006,8 @@ function createPageAfter(page, template){
 	if(page == null){
 		page = $('.current.page')
 	}
-
 	var res = _createPage(template).insertAfter(page)
-
 	$('.viewer').trigger('pageCreated', res)
-
 	return res
 }
 // XXX prevent this from working outside of an article....
@@ -1002,11 +1015,8 @@ function createPageBefore(page, template){
 	if(page == null){
 		page = $('.current.page')
 	}
-
 	var res = _createPage(template).insertBefore(page)
-
 	$('.viewer').trigger('pageCreated', res)
-
 	return res
 }
 function removePage(page){
@@ -1017,56 +1027,49 @@ function removePage(page){
 	var cur = getPageNumber()
 	page.remove()
 	setCurrentPage(cur)
-
 	$('.viewer').trigger('pageRemoved', page)
-
 	return page
 }
 
-// XXX should this move to before or after???
+// NOTE: on negative position this will position the element after the 
+// 		target, e.g. position -1 is the last element, etc.
+// XXX at this point there is no way to move something to either an 
+// 		article or a magazine that do not contain any pages directly...
+// 		...add special cases:
+// 			- if we are moving the page in the direction of an empty article
+// 			  push the page into the article...
+// 			- if we are moving page 0 left and the magazine has no cover 
+// 			  push it to the magazine...
 function movePageTo(page, position){
-	// XXX
+	if(page == null){
+		page = $('.current.page')
+	}
+	if(position >= $('.page').length){
+		position = -1
+	}
+	var target = getPageAt(position)
+	page.detach()
+	if(position >= 0){
+			page.insertBefore(target)
+	} else {
+			page.insertAfter(target)
+	}
+	setCurrentPage()
 	$('.viewer').trigger('pageMoved', page)
 	return page
 }
-// XXX make this push pages between articles...
-// 		or should it be a seporate method...
-// XXX should this contain a number of steps?
 function shiftPageLeft(page){
 	if(page == null){
 		page = $('.current.page')
 	}
-	var prev = page.prev()
-	if(prev.length == 0){
-		return page
-	}
-	page
-		.detach()
-		.insertBefore(prev)
-	setCurrentPage()
-
-	$('.viewer').trigger('pageMoved', page)
-
+	movePageTo(page, getPageNumber(page)-1)
 	return page
 }
-// XXX make this push pages between articles...
-// 		or should it be a seporate method...
-// XXX should this contain a number of steps?
 function shiftPageRight(page){
 	if(page == null){
 		page = $('.current.page')
 	}
-	var next = page.next()
-	if(next.length == 0){
-		return page
-	}
-	page
-		.detach()
-		.insertAfter(next)
-	setCurrentPage()
-
-	$('.viewer').trigger('pageMoved', page)
-
+	movePageTo(page, getPageNumber(page)+2)
 	return page
 }