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>
This commit is contained in:
Alex A. Naanou 2013-03-09 17:19:24 +04:00
parent 68276b3664
commit 2c670c6231
3 changed files with 43 additions and 28 deletions

View File

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

View File

@ -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')
// this will set up the main editor event handlers and data...
function setupEditor(){
// editable focus...
$('[contenteditable]')
.on('focus', function(){
// XXX move these to the handler...
function handleEditableFocus(){
if(toggleInlineEditor('?') == 'off'){
$(':focus').blur()
} else {
toggleInlineEditorMode('on')
}
})
.on('blur', function(){
}
function handleEditableBlur(){
toggleInlineEditorMode('off')
})
}
// this will set up the main editor event handlers and data...
function setupEditor(){
$('.viewer')
// move the page indicator...
// NOTE: this is to be used for page-specific toolbars etc.

View File

@ -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"body two-column" contenteditable="false">'+text+'</div>'+
'<div class"footer"><div class="page-number-text">[PAGE NUMBER]</div></div>')))
'<div class="header" contenteditable="false"><h1>'+title+'</h1></div>'+
'<div class="body two-column" contenteditable="false">'+text+'</div>'+
'<div class="footer"><div class="page-number-text">[PAGE NUMBER]</div></div>')))
}
@ -80,11 +77,12 @@ 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>'),
null,
{'background-image': 'url('+url+')'}),
@ -93,12 +91,12 @@ function ImagePage(url, caption){
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="page-number-text">[PAGE NUMBER]</div>'),
'<div class="caption hidden" contenteditable="false">'+caption+'</div>'+
'<div class="page-number-text">[PAGE NUMBER]</div>')),
'image-fit-height')
}