fixed several issues with the inline editor-related event handlers (still not too happy with it)...

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

TODO.otl

@@ -1,5 +1,5 @@
 [_] 39% Priority work
-	[_] 76% general todo
+	[_] 77% general todo
 		[_] 0% Priority work for 10.03.13
 			[_] change image
 			[_] add page via template
@@ -173,6 +173,8 @@
 			[_] try using the scroll event to see of we reached the limit...
 			| and move the limit accordingly
 			[_] BUG: scrool seems to do odd things on refresh...
+		[X] BUG: new pages do not get focus/blur event handlers...
+		| ...avoid ALL local handlers within the .magazine structure
 		[X] BUG: tab navigation will scroll the view...
 		| need to either prevent tab nav or control it so as not to get off page...
 		|

editor.js

@@ -340,7 +340,13 @@ var toggleInlineEditor = createCSSClassToggler(
 	function(action){
 		if(action == 'on'){
 			MagazineScroller.stop()
-			$('[contenteditable]').attr({contenteditable: 'true'})
+			$('[contenteditable]')
+				.attr({contenteditable: 'true'})
+				// setup focus/blur events for [contenteditable] elements...
+				// XXX might get a tad slow...
+				.on('focus', handleEditableFocus)
+				.on('blur', handleEditableBlur) 
+
 			// ckeditor...
 			if(window.CKEDITOR){
 				CKEDITOR.inlineAll()
@@ -349,6 +355,10 @@ var toggleInlineEditor = createCSSClassToggler(
 			$('[contenteditable]')
 				.blur()
 				.attr({contenteditable: 'false'})
+				// remove handlers...
+				// XXX might get a tad slow...
+				.off('focus', handleEditableFocus)
+				.off('blur', handleEditableBlur) 
 			MagazineScroller.start()
 			// ckeditor...
 			if(window.CKEDITOR){
@@ -358,27 +368,32 @@ var toggleInlineEditor = createCSSClassToggler(
 			}
 		}
 	})
+// XXX is this good?
+function refreshInlineEditor(){
+	toggleInlineEditor()
+	toggleInlineEditor()
+}
 	
 var toggleInlineEditorMode = createCSSClassToggler('.chrome', 'inline-editor-mode')
 
 
 
+// XXX move these to the handler...
+function handleEditableFocus(){
+	if(toggleInlineEditor('?') == 'off'){
+		$(':focus').blur()
+	} else {
+		toggleInlineEditorMode('on')
+	}
+}
+function handleEditableBlur(){
+	toggleInlineEditorMode('off')
+}
+
+
 
 // this will set up the main editor event handlers and data...
 function setupEditor(){
-	// editable focus...
-	$('[contenteditable]')
-		.on('focus', function(){
-			if(toggleInlineEditor('?') == 'off'){
-				$(':focus').blur()
-			} else {
-				toggleInlineEditorMode('on')
-			}
-		})
-		.on('blur', function(){
-			toggleInlineEditorMode('off')
-		})
-
 	$('.viewer')
 		// move the page indicator...
 		// NOTE: this is to be used for page-specific toolbars etc.

templates.js

@@ -54,9 +54,6 @@ function Content(content, classes, style, attrs){
 
 
 /*********************************************************************/
-// XXX for some reason in these pages in inline-editor-mode Esc will both
-// 		exit the inline editor and the editor mode, when only the earlier
-// 		should happen...
 
 function RawPage(text){
 	text = text != null ? text : 'Raw Page' 
@@ -68,9 +65,9 @@ function TextPage(title, text){
 	title = title != null ? title : 'Text Page'
 	text = text != null ? text : STUB_TEXT 
 	return Page(Content($(
-		'<div class"header" contenteditable="false"><h1>'+title+'</h1></div>'+
+		'<div class="header" contenteditable="false"><h1>'+title+'</h1></div>'+
-		'<div class"body two-column" contenteditable="false">'+text+'</div>'+
+		'<div class="body two-column" contenteditable="false">'+text+'</div>'+
-		'<div class"footer"><div class="page-number-text">[PAGE NUMBER]</div></div>')))
+		'<div class="footer"><div class="page-number-text">[PAGE NUMBER]</div></div>')))
 }
 
 
@@ -80,25 +77,26 @@ function CaptionPage(text){
 }
 
 
+// XXX this needs a togglePageView(..) after attaching to get visible...
 function ImagePage(url, caption){
 	url = url != null ? url : STUB_HORIZONTAL_IMAGE_URL
 	caption = caption != null ? caption : '<h3>Image Caption</h3>' + STUB_TEXT 
 	return Page(Content($(
-			'<div class"caption hidden" contenteditable="false">'+caption+'</div>'+
+				'<div class="caption hidden" contenteditable="false">'+caption+'</div>'+
-			'<div class="page-number-text">[PAGE NUMBER]</div>'),
+				'<div class="page-number-text">[PAGE NUMBER]</div>'),
-		null,
+			null,
-		{'background-image': 'url('+url+')'}), 
+			{'background-image': 'url('+url+')'}), 
 		'image-fit')
 }
 
 
 function ImageFitHeightPage(url, caption){
-	url = url != null ? url : STUB_HORIZONTAL_IMAGE_URL
+	url = url != null ? url : STUB_VERTICAL_IMAGE_URL
 	caption = caption != null ? caption : '<h3>Image Caption</h3>' + STUB_TEXT 
 	return Page(Content($(
 			'<img src="'+url+'">'+
-			'<div class"caption hidden" contenteditable="false">'+caption+'</div>'+
+			'<div class="caption hidden" contenteditable="false">'+caption+'</div>'+
-			'<div class="page-number-text">[PAGE NUMBER]</div>'),
+			'<div class="page-number-text">[PAGE NUMBER]</div>')),
 		'image-fit-height')
 }