added an editor concept...

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

index.html

@@ -59,6 +59,25 @@
 	display: block;
 }
 
+
+.current-page-indicator {
+	position: absolute;
+	box-sizing:border-box;
+	opacity: 0.8;
+
+	/*
+	border: solid blue 10px;
+	*/
+
+	/*
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-o-transition: all 0.2s ease;
+	-ms-transition: all 0.2s ease;
+	transition: all 0.2s ease;
+	*/
+}
+
 </style>
 
 <script src="ext-lib/jquery.js"></script>
@@ -74,11 +93,49 @@
 <script src="magazine.js"></script>
 <script src="layout.js"></script>
 <script src="navigator.js"></script>
+<script src="editor.js"></script>
 
 <script src="platform.js"></script>
 
 <script>
 
+function setupEditor(){
+	var indicator = $('.current-page-indicator')
+	// remove
+	$('<button>Remove</button>')
+		.appendTo(indicator)
+		.click(function(){
+			removePage()
+		})
+
+	$('<button>Shift Left</button>')
+		.appendTo(indicator)
+		.click(function(){
+			shiftPageLeft()
+		})
+	$('<button>Shift Right</button>')
+		.appendTo(indicator)
+		.click(function(){
+			shiftPageRight()
+		})
+
+}
+function clearEditor(){
+	$('.current-page-indicator').children().remove()
+}
+
+var toggleEditor = createCSSClassToggler(
+	'.chrome', 
+	'editor', 
+	function(action){
+		if(action == 'on'){
+			setupEditor()
+		} else {
+			clearEditor()
+		}
+	})
+
+
 $(document).ready(function(){
 	// general window behavior...
 	$(window)
@@ -92,30 +149,29 @@ $(document).ready(function(){
 				title: 'Global',
 				doc: '',
 
-				36: firstPage, 											//	Home
-				35: lastPage, 											//	End
-				37: {
-					'default': prevPage,								//	Left
-					'ctrl': prevArticle,								//	ctrl-Left
+				Home: firstPage,
+				End: lastPage, 
+				Left: {
+					default: prevPage,
+					ctrl: prevArticle,
 				},
-				39: {
-					'default': nextPage,								//	Right
-					'ctrl': nextArticle,								//	ctrl-Right
+				Right: {
+					default: nextPage,
+					ctrl: nextArticle,
 				},
-				32:	{
-					'default': nextPage,								//	Space
-					'shift': prevPage									//	shift-Space
+				Space:	{
+					default: nextPage,
+					shift: prevPage	
 				},
 				// combined navigation with actions..
-				38: function(){togglePageView()},						//	Up
-				40: function(){togglePageView()},						//	Down
+				Up: function(){togglePageView()},
+				Down: function(){togglePageView()},
 
-				70: function(){											//	F
-					togglePageFitMode()
-				},
-				66: {
-					'default': toggleBookmark,							//	B
-					'ctrl': function(){toggleThemes()},					//	ctrl-B
+				F: function(){ togglePageFitMode() },
+				E: function(){ toggleEditor() },
+				B: {
+					default: toggleBookmark,
+					ctrl: function(){ toggleThemes() },
 				},
 			}
 		}, 
@@ -144,6 +200,24 @@ $(document).ready(function(){
 		.on('magazineDataLoaded', loadMagazineChrome)
 
 
+		// move the page indicator...
+		// NOTE: this is to be used for page-specific toolbars etc.
+		.on('pageChanged', function(){
+			var cur = $('.current.page')
+			var indicator = $('.current-page-indicator')
+			var shift = getElementShift($('.magazine'))
+			// XXX this is a stub...
+			// reverse the align...
+			indicator
+				.width(cur.width())
+				.height(cur.height())
+				.css({
+					left: getPageInMagazineOffset(cur),
+					top: 0,
+				})
+		})
+
+
 	$('.viewer').css('overflow', 'hidden')
 
 	//loadState()
@@ -161,7 +235,6 @@ $(document).ready(function(){
 	toggleThemes('dark-viewer')
 
 
-
 	// hide the splash...
 	setTimeout(function(){
 		$('.splash').fadeOut()
@@ -183,6 +256,7 @@ $(document).ready(function(){
 <div class="chrome">
 
 
+
 <!-- Splash screen -->
 <div class="splash noSwipe">
 	<!-- XXX replace this with a background-image logo... -->
@@ -853,6 +927,13 @@ $(document).ready(function(){
 				</div>
 			</div>
 		</div>
+
+
+		<!-- current indicator - used for the editor -->
+		<div class="current-page-indicator"></div>
+		<!-- current indicator (end)-->
+
+
 	</div>
 
 </div>

layout.js

@@ -224,6 +224,17 @@ function handleScrollRelease(evt, data){
 
 /********************************************************* helpers ***/
 
+function getPageInMagazineOffset(page, scale){
+	if(page == null){
+		page = $('.current.page') 
+	} else if(typeof(page) == typeof(7)){
+		page = $($('.page')[page])
+	}
+
+	return page.position().left / (scale == null ? getMagazineScale() : scale) 
+}
+
+
 // XXX there is something here that depends on scale that is either not 
 // 		compensated, or is over compensated...
 function getMagazineOffset(page, scale, align){
@@ -258,6 +269,7 @@ function getMagazineOffset(page, scale, align){
 	// 		the viewer...
 	var w = mag.outerWidth(true)
 	// XXX this depends on scale...
+	//var pos = getPageInMagazineOffset(page, scale)
 	var pos = page.position().left//*scale
 
 	var l = 0