diff --git a/TODO.otl b/TODO.otl index 42d605b..0b9ae66 100755 --- a/TODO.otl +++ b/TODO.otl @@ -6,6 +6,10 @@ [_] BUG: no drag threshold on excludedElements (TouchSwipe) | stalled... [_] 63% general todo + [_] editor mode service page + | a virtual page at the end of the magazine with magazine-specific + | settings. + | similar to the current configuration demo page. [_] 0% add two main page themes (global/local applicable): [_] light [_] dark diff --git a/editor.html b/editor.html index 41c03c7..b8774c4 100755 --- a/editor.html +++ b/editor.html @@ -127,10 +127,10 @@ $(document).ready(function(){ // XXX this will need to be repeated to newly created elements... $('[contenteditable=true]') .on('focus', function(){ - toggleEditorMode('on') + toggleInlineEditorMode('on') }) .on('blur', function(){ - toggleEditorMode('off') + toggleInlineEditorMode('off') }) diff --git a/editor.js b/editor.js index 8ae44ee..635a81c 100755 --- a/editor.js +++ b/editor.js @@ -2,9 +2,28 @@ * * Magazine editor actions * +* XXX do a generic shift left/right add/remove set of function and build +* selectors around them... * **********************************************************************/ +/********************************************************* generic ***/ + +// move element to target and atach it at position +// position can be 'before', 'after' (default), 'prepend' or 'append' +function moveElementTo(elem, target, position){ + position = position != null ? position : 'after' + elem + .detach() + [position == 'after'? 'insertAfter' + : position == 'before'? 'insertBefore' + : position == 'append'? 'appendTo' + : position == 'prepend'? 'prependTo'](target) + return elem +} + + + /************************************************ editor: magazine ***/ // NOTE: we do not need to create any event handlers here specifically @@ -187,6 +206,9 @@ function removePage(page){ return page } +/******************************************************* page sets ***/ +function + /*********************************************************************/ diff --git a/index.html b/index.html index e58374a..4d5cb7b 100755 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ XXX scrollTo is a cool and a powerfull tool but it needs a sustantial code reorg - + @@ -150,6 +150,9 @@ $(document).ready(function(){ $('.splash').fadeOut() }, 350) }) + + // setup the editor buttons... + // XXX @@ -170,7 +173,130 @@ $(document).ready(function(){ - + + +
+ + + + New Magazine + + + + + + + + + + M + + + + +
+ +
+ + + New Article + + + + + + + + + + A + + + + + + + + Shift Article Left + + + + + + + + + A + + + + + + + + Shift Article Right + + + + + + A + + + +
+ +
+ +
+ + + New Page + + + + + + + + + + P + + + + + + + + Shift Page Left + + + + + + + + + P + + + + + + + + Shift Page Right + + + + + + P + + + +
+ +
+
@@ -569,7 +695,7 @@ $(document).ready(function(){
-
+

Page Set Example

diff --git a/keybindings.js b/keybindings.js index 76ac024..d5989c7 100755 --- a/keybindings.js +++ b/keybindings.js @@ -49,7 +49,7 @@ var keybindings = { }, // everything except overlays... - '.viewer:not(.editor-mode)': { + '.viewer:not(.inline-editor-mode)': { title: 'Ribbon and Viewer', doc: '', diff --git a/magazine.css b/magazine.css index 1e3ef68..938eb4c 100755 --- a/magazine.css +++ b/magazine.css @@ -241,7 +241,7 @@ body { /* magazine article, this can contain a cover and a number of pages */ -.page-set, +.group, .article { display: inline-block; width: auto; @@ -342,6 +342,46 @@ body { } +.inline-editor-mode .left-toolbar, +.left-toolbar { + display: none; +} +.settings.page { + display: none; +} +.editor-mode .settings.page { + display: inline-block; +} + +.editor-mode .left-toolbar { + position: absolute; + display: block; + top: 30px; + left: 30px; + width: 40px; + height: auto; + background: black; + color: white; + + padding: 10px; + + z-index: 9999; + + opacity: 0.7; + + -webkit-transition: all 0.1s ease; + -moz-transition: all 0.1s ease; + -o-transition: all 0.1s ease; + -ms-transition: all 0.1s ease; + transition: all 0.1s ease; +} + +.editor-mode .left-toolbar svg { + display: block; + cursor: hand; +} + + /* navigator... */ .navigator { diff --git a/magazine.js b/magazine.js index f8ae5ec..b67a413 100755 --- a/magazine.js +++ b/magazine.js @@ -69,8 +69,11 @@ var FULL_HISTORY_ENABLED = false var togglePageDragging = createCSSClassToggler('.viewer', 'dragging') +// toggle global editor mode... +var toggleEditorMode = createCSSClassToggler('.viewer', 'editor-mode') + // toggles the editor mode, used for inline magazine editor... -var toggleEditorMode = createCSSClassToggler('.viewer', 'editor-mode noSwipe') +var toggleInlineEditorMode = createCSSClassToggler('.viewer', 'inline-editor-mode noSwipe') // this is here only for speed, helps with dragging... @@ -114,13 +117,13 @@ function isPageResizable(page){ } var mag = $('.magazine') - var set = page.parents('.page-set').first() + var group = page.parents('.group').first() var article = page.parents('.article').first() // first check the page... return (page.hasClass('no-resize') ? false - // then the page-set... - : set.hasClass('no-resize') ? false + // then the group... + : group.hasClass('no-resize') ? false // then the article... : article.hasClass('no-resize') ? false // then the magazine... @@ -143,17 +146,17 @@ function getPageAlign(page){ } var mag = $('.magazine') - var set = page.parents('.page-set').first() + var group = page.parents('.group').first() var article = page.parents('.article').first() // first check the page... return (page.hasClass('page-align-center') ? 'center' : page.hasClass('page-align-left') ? 'left' : page.hasClass('page-align-right') ? 'right' - // then the page-set... - : set.hasClass('page-align-center') ? 'center' - : set.hasClass('page-align-left') ? 'left' - : set.hasClass('page-align-right') ? 'right' + // then the group... + : group.hasClass('page-align-center') ? 'center' + : group.hasClass('page-align-left') ? 'left' + : group.hasClass('page-align-right') ? 'right' // then the article... : article.hasClass('page-align-center') ? 'center' : article.hasClass('page-align-left') ? 'left' @@ -1018,12 +1021,12 @@ function resetState(){ * pages: [ * , * -* // page-set... +* // group... * // NOTE: this is just like and article but can be * // nested within and article. * // NOTE: only one level of nexting is supported/testd. * { -* type: 'page-set', +* type: 'group', * // classes set on the article element... * class: [...] * // XXX urls are not yet supported... @@ -1043,7 +1046,7 @@ function resetState(){ * NOTE: essentially we have nodes of the folowing type: * - magazine (root) * - article -* - page-set +* - group * - page * NOTE: content classes are stored in the content... * NOTE: at this point all page classes will be stored, but .current @@ -1052,7 +1055,7 @@ function resetState(){ * **********************************************************************/ -var JSON_FORMAT_VERSION = 0.2 +var JSON_FORMAT_VERSION = 0.3 // there are two type of metadata handlers: @@ -1126,10 +1129,10 @@ function buildJSON(export_bookmarks, export_position){ content: elem.children('.content')[0].outerHTML } - // page-set... - } else if(elem.hasClass('page-set')){ + // group... + } else if(elem.hasClass('group')){ var res = { - type: 'page-set', + type: 'group', 'class': elem.attr('class'), pages: elem.children('.page').map(_getContent).toArray() } @@ -1139,7 +1142,7 @@ function buildJSON(export_bookmarks, export_position){ var res = { type: 'article', 'class': elem.attr('class'), - pages: elem.children('.page, .page-set').map(_getContent).toArray() + pages: elem.children('.page, .group').map(_getContent).toArray() } // other... @@ -1190,8 +1193,8 @@ function loadJSON(data, load_user_data){ .addClass(data['class']) .appendTo(parent) - // page-set... - } else if(data.type == 'page-set') { + // group... + } else if(data.type == 'group') { // buiold an article... var res = createEmptyPageSet() .addClass(data['class']) @@ -1222,7 +1225,7 @@ function loadJSON(data, load_user_data){ } // metadata... - // XXX for some reason this does not set the style attr on pages in page-set... + // XXX for some reason this does not set the style attr on pages in group... writeMetadata(res, data) return res @@ -1279,10 +1282,10 @@ function createMagazine(title, magazine_cover, article_cover){ } -// XXX do we need other page-set functions??? +// XXX do we need other group functions??? function createEmptyPageSet(){ return $('
') - .addClass('page-set') + .addClass('group') } function createEmptyArticle(){