added ckeditor support...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-31 02:46:02 +04:00
parent e1bf008245
commit acea5f3fb1
5 changed files with 50 additions and 16 deletions

View File

@ -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...

View File

@ -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">

6
jli.js
View File

@ -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

View File

@ -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
}
}

View File

@ -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,