added ckeditor support...

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

TODO.otl

@@ -5,7 +5,12 @@
 		| touchdown point.
 		[_] BUG: no drag threshold on excludedElements (TouchSwipe)
 		| stalled...
-	[_] 82% general todo
+	[_] 81% general todo
+		[_] 33% add inline editor...
+			[X] prepare the basic framework to accept the ckeditor
+			| keyboard handler, touchswipe and other event handlers...
+			[_] add editor and no-editor modes...
+			[_] add editor detecting...
 		[_] add in-page live templates...
 		| elements that will get generated content, like page numbers etc.
 		[_] magazine loader and data format...

index.html

@@ -10,6 +10,7 @@
 <script src="jquery.js"></script>
 <script src="jquery.touchSwipe.js"></script>
 <script src="jstorage.js"></script>
+<script src="ckeditor/ckeditor.js"></script>
 
 <script src="jli.js"></script>
 <script src="magazine.js"></script>
@@ -98,7 +99,7 @@ $(document).ready(function(){
 				return true
 			},
 
-			//excludedElements: '.noSwipe',
+			excludedElements: '.noSwipe, a, [contenteditable=true]',
 			fingers: $.fn.swipe.fingers.ALL
 			//fingers: $.fn.swipe.fingers.THREE
 		})
@@ -129,8 +130,24 @@ $(document).ready(function(){
 				$('.splash').fadeOut()
 			}, 350)
 		})
+	
+
+	
 })
 
+// setup ckeditor events...
+CKEDITOR.on('instanceCreated', function(evt){
+	var editor = evt.editor
+	editor.on('focus', function(){
+		toggleEditorMode('on')
+	})
+	editor.on('blur', function(){
+		toggleEditorMode('off')
+	})
+})
+
+
+
 
 </script>
 </head>
@@ -443,7 +460,13 @@ $(document).ready(function(){
 
 			<div class="page">
 				<div class="content">
-					Page
+					<h1 contenteditable="true">Two column</h1>
+					<div contenteditable="true" style="float:left; width: 45%; height: 100%; margin: 10px;">
+						Column 1
+					</div>
+					<div contenteditable="true" style="float:left; width: 45%; height: 100%; padding: 10px;">
+						Column 2
+					</div>
 				</div>
 			</div>
 			<div class="page no-resize">

jli.js

@@ -249,7 +249,8 @@ var KEYBOARD_HANDLER_PROPAGATE = true
  */
 function makeKeyboardHandler(keybindings, unhandled){
 	if(unhandled == null){
-		unhandled = function(){return false}
+		//unhandled = function(){return false}
+		unhandled = function(){return KEYBOARD_HANDLER_PROPAGATE}
 	}
 	return function(evt){
 		var did_handling = false
@@ -259,7 +260,8 @@ function makeKeyboardHandler(keybindings, unhandled){
 				var bindings = keybindings[mode]
 
 				var key = evt.keyCode
-				if(bindings.ignore != null && bindings.ignore.indexOf(key) != -1){
+				if(bindings.ignore == '*' 
+						|| bindings.ignore != null && bindings.ignore.indexOf(key) != -1){
 					// return true
 					res = res == null ? true : res
 					did_handling = true

keybindings.js

@@ -3,6 +3,7 @@
 // list of keys to be ignored by handler but still handled by the browser...
 
 var keybindings = {
+	/*
 	// global bindings...
 	'*': {
 		title: 'Global',
@@ -15,14 +16,6 @@ var keybindings = {
 			8													//	BkSp
 		],
 
-		// togglable modes and options...
-		/*191: {
-			'default':	ImageGrid.showKeyboardBindings,			//	?
-			'ctrl':		ImageGrid.showSetup,					//	ctrl+?
-		},*/
-		13:		function(){togglePageView('on')},				//	Enter
-		27:		function(){togglePageView('off')},				//	Esc
-
 		// ignore the modifiers (shift, alt, ctrl, caps)...
 		16:		function(){},
 		17:		16,
@@ -48,10 +41,15 @@ var keybindings = {
 			40,													//	Down
 		],
 	},
+	*/
 
+	// ignore all keys here...
+	'.editor-mode': {
+		ignore: '*'
+	},
 
 	// everything except overlays...
-	'.viewer *:not(.overlay-mode *)': {
+	'.viewer:not(.editor-mode)': {
 		title: 'Ribbon and Viewer',
 		doc: '',
 
@@ -82,6 +80,9 @@ var keybindings = {
 		// combined navigation with actions..
 		38: function(){togglePageView()},						//	Up
 		40: function(){togglePageView()},						//	Down
+
+		13:	function(){togglePageView('on')},					//	Enter
+		27:	function(){togglePageView('off')},					//	Esc
 	}
 }
 

magazine.js

@@ -35,7 +35,10 @@ var USE_REAL_PAGE_SIZES = false
 // toggles .dragging CSS class on the viewer while dragging is in 
 // progress.
 // NOTE: this is used mostly for styling and drag assisting...
-togglePageDragging = createCSSClassToggler('.viewer', 'dragging')
+var togglePageDragging = createCSSClassToggler('.viewer', 'dragging')
+
+
+var toggleEditorMode = createCSSClassToggler('.viewer', 'editor-mode noSwipe')
 
 
 // this is here only for speed, helps with dragging...
@@ -45,7 +48,7 @@ var _PAGE_VIEW
 // toggle between the two main modes:
 // 	- single page mode (.page-view-mode)
 // 	- thumbnail/ribbon mode
-togglePageView = createCSSClassToggler(
+var togglePageView = createCSSClassToggler(
 	'.viewer', 
 	'page-view-mode',
 	null,