some minor work and house keeping...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-08 21:04:00 +04:00
parent 79e21575eb
commit 04e97dbefb
7 changed files with 224 additions and 29 deletions

View File

@ -6,6 +6,10 @@
[_] BUG: no drag threshold on excludedElements (TouchSwipe) [_] BUG: no drag threshold on excludedElements (TouchSwipe)
| stalled... | stalled...
[_] 63% general todo [_] 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): [_] 0% add two main page themes (global/local applicable):
[_] light [_] light
[_] dark [_] dark

View File

@ -127,10 +127,10 @@ $(document).ready(function(){
// XXX this will need to be repeated to newly created elements... // XXX this will need to be repeated to newly created elements...
$('[contenteditable=true]') $('[contenteditable=true]')
.on('focus', function(){ .on('focus', function(){
toggleEditorMode('on') toggleInlineEditorMode('on')
}) })
.on('blur', function(){ .on('blur', function(){
toggleEditorMode('off') toggleInlineEditorMode('off')
}) })

View File

@ -2,9 +2,28 @@
* *
* Magazine editor actions * 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 ***/ /************************************************ editor: magazine ***/
// NOTE: we do not need to create any event handlers here specifically // NOTE: we do not need to create any event handlers here specifically
@ -187,6 +206,9 @@ function removePage(page){
return page return page
} }
/******************************************************* page sets ***/
function
/*********************************************************************/ /*********************************************************************/

View File

@ -21,7 +21,7 @@ XXX scrollTo is a cool and a powerfull tool but it needs a sustantial code reorg
<script src="magazine.js"></script> <script src="magazine.js"></script>
<script src="navigator.js"></script> <script src="navigator.js"></script>
<!--script src="editor.js"></script--> <script src="editor.js"></script>
<!-- configuration, keep this last... --> <!-- configuration, keep this last... -->
<script src="platform.js"></script> <script src="platform.js"></script>
@ -150,6 +150,9 @@ $(document).ready(function(){
$('.splash').fadeOut() $('.splash').fadeOut()
}, 350) }, 350)
}) })
// setup the editor buttons...
// XXX
@ -170,7 +173,130 @@ $(document).ready(function(){
</div> </div>
<!-- XXX Magazine title... --> <!-- Toolbars -->
<div class="left-toolbar">
<svg id="new-magazine" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>New Magazine</title>
<g id="svg_47">
<g id="svg_33">
<g id="svg_34">
<circle fill="#000000" stroke="#ffffff" fill-opacity="0" cx="28.671385" cy="30.356987" r="7.062921" id="svg_35"/>
<text fill="#ffffff" stroke="#000000" stroke-width="0" x="28.820414" y="36.240832" font-size="18" font-family="serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_36">+</text>
</g>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m22.8386,34.497002l-13.95876,0.052097l-0.06013,-28.683099l24.052891,0l-0.060101,18.821401" id="svg_37"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.923339" y="17.539691" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_38">M</text>
</g>
</g>
</svg>
<hr>
<div>
<svg id="new-article" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>New Article</title>
<g id="svg_48">
<g id="svg_26">
<g id="svg_27">
<circle fill="#000000" stroke="#ffffff" fill-opacity="0" cx="28.671385" cy="30.356987" r="7.062921" id="svg_28"/>
<text fill="#ffffff" stroke="#000000" stroke-width="0" x="28.820414" y="36.240832" font-size="18" font-family="serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_29">+</text>
</g>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m22.83856,34.49699l-13.95872,0.052139l-0.06013,-28.683129l24.052921,0l-0.06015,18.82142" id="svg_30"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.68281" y="17.539691" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_31">A</text>
</g>
</g>
</svg>
<svg id="shift-article-left" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Shift Article Left</title>
<g id="svg_76">
<g id="svg_70">
<g id="svg_71">
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m28.62114,34.492649l-19.73146,0.052151l-0.06013,-28.68306l24.052919,0l-0.000019,17.438419" id="svg_72"/>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m32.840248,24.30155l0.05212,10.154291l-1.082369,0.060139" id="svg_73"/>
</g>
<path d="m30.587009,30.33219l-4.3314,-7.037199l2.8526,0l4.331209,7.037199l-4.331209,7.037241l-2.8526,0l4.3314,-7.037241z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000" stroke="#ffffff" transform="rotate(180 29.8475 30.3322)" id="svg_74"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.692654" y="17.535428" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_75">A</text>
</g>
</g>
</svg>
<svg id="shift-article-right" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Shift Article Right</title>
<g id="svg_89">
<g id="svg_85">
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m29.583229,34.612888l-20.693559,-0.007988l-0.06013,-28.6831l24.052921,0l-0.000023,20.86595" id="svg_86"/>
<path d="m32.27066,30.392269l-4.33132,-7.037249l2.852549,0l4.33123,7.037249l-4.33123,7.03727l-2.852549,0l4.33132,-7.03727z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000" stroke="#ffffff" id="svg_87"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.692638" y="17.595492" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_88">A</text>
</g>
</g>
</svg>
</div>
<hr>
<div>
<svg id="new-page" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>New Page</title>
<g id="svg_24">
<g id="svg_16">
<g id="svg_9">
<circle fill="#000000" stroke="#ffffff" fill-opacity="0" cx="28.691122" cy="30.383944" r="7.062921" id="svg_7"/>
<text fill="#ffffff" stroke="#000000" stroke-width="0" x="28.840151" y="36.267789" id="svg_8" font-size="18" font-family="serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0">+</text>
</g>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m22.85829,34.523949l-13.95871,0.052132l-0.06013,-28.68312l24.05293,0l-0.06015,18.82142" id="svg_15"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.281621" y="17.566648" id="svg_17" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0">P</text>
</g>
</g>
</svg>
<svg id="shift-page-left" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Shift Page Left</title>
<g id="svg_68">
<g id="svg_67">
<g id="svg_66">
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m28.621111,34.492619l-19.731441,0.052151l-0.06013,-28.683099l24.052921,0l-0.000011,17.4384" id="svg_61"/>
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m32.840248,24.30146l0.05212,10.15435l-1.082397,0.060131" id="svg_65"/>
</g>
<path d="m30.586981,30.3321l-4.3314,-7.037199l2.852598,0l4.331251,7.037199l-4.331251,7.0373l-2.852598,0l4.3314,-7.0373z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000" stroke="#ffffff" id="svg_62" transform="rotate(180 29.8475 30.3321)"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.271712" y="17.535359" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_63">P</text>
</g>
</g>
</svg>
<svg id="shift-page-right" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Shift Page Right</title>
<g id="svg_58">
<g id="svg_57">
<path fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" d="m29.57338,34.557121l-20.69354,-0.007992l-0.06013,-28.683129l24.052929,0l-0.000019,20.86593" id="svg_54"/>
<path d="m32.260818,30.336451l-4.331329,-7.037251l2.852551,0l4.331299,7.037251l-4.331299,7.037321l-2.852551,0l4.331329,-7.037321z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000" id="svg_56" stroke="#ffffff"/>
</g>
<text fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="15.261884" y="17.539691" font-size="12" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_55">P</text>
</g>
</g>
</svg>
</div>
</div>
<div class="top-toolbar"> <div class="top-toolbar">
<div class="left-set"> <div class="left-set">
@ -569,7 +695,7 @@ $(document).ready(function(){
</div> </div>
<div class="article"> <div class="article">
<!-- page set --> <!-- page set -->
<div class="page-set" style="background: url(img.jpg) no-repeat right top; background-size: 100% auto; color: white;"> <div class="group" style="background: url(img.jpg) no-repeat right top; background-size: 100% auto; color: white;">
<div class="page cover no-resize page-align-left" style="background:transparent"> <div class="page cover no-resize page-align-left" style="background:transparent">
<div class="content"> <div class="content">
<h1>Page Set Example</h1> <h1>Page Set Example</h1>

View File

@ -49,7 +49,7 @@ var keybindings = {
}, },
// everything except overlays... // everything except overlays...
'.viewer:not(.editor-mode)': { '.viewer:not(.inline-editor-mode)': {
title: 'Ribbon and Viewer', title: 'Ribbon and Viewer',
doc: '', doc: '',

View File

@ -241,7 +241,7 @@ body {
/* magazine article, this can contain a cover and a number of pages */ /* magazine article, this can contain a cover and a number of pages */
.page-set, .group,
.article { .article {
display: inline-block; display: inline-block;
width: auto; 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... */
.navigator { .navigator {

View File

@ -69,8 +69,11 @@ var FULL_HISTORY_ENABLED = false
var togglePageDragging = createCSSClassToggler('.viewer', 'dragging') var togglePageDragging = createCSSClassToggler('.viewer', 'dragging')
// toggle global editor mode...
var toggleEditorMode = createCSSClassToggler('.viewer', 'editor-mode')
// toggles the editor mode, used for inline magazine editor... // 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... // this is here only for speed, helps with dragging...
@ -114,13 +117,13 @@ function isPageResizable(page){
} }
var mag = $('.magazine') var mag = $('.magazine')
var set = page.parents('.page-set').first() var group = page.parents('.group').first()
var article = page.parents('.article').first() var article = page.parents('.article').first()
// first check the page... // first check the page...
return (page.hasClass('no-resize') ? false return (page.hasClass('no-resize') ? false
// then the page-set... // then the group...
: set.hasClass('no-resize') ? false : group.hasClass('no-resize') ? false
// then the article... // then the article...
: article.hasClass('no-resize') ? false : article.hasClass('no-resize') ? false
// then the magazine... // then the magazine...
@ -143,17 +146,17 @@ function getPageAlign(page){
} }
var mag = $('.magazine') var mag = $('.magazine')
var set = page.parents('.page-set').first() var group = page.parents('.group').first()
var article = page.parents('.article').first() var article = page.parents('.article').first()
// first check the page... // first check the page...
return (page.hasClass('page-align-center') ? 'center' return (page.hasClass('page-align-center') ? 'center'
: page.hasClass('page-align-left') ? 'left' : page.hasClass('page-align-left') ? 'left'
: page.hasClass('page-align-right') ? 'right' : page.hasClass('page-align-right') ? 'right'
// then the page-set... // then the group...
: set.hasClass('page-align-center') ? 'center' : group.hasClass('page-align-center') ? 'center'
: set.hasClass('page-align-left') ? 'left' : group.hasClass('page-align-left') ? 'left'
: set.hasClass('page-align-right') ? 'right' : group.hasClass('page-align-right') ? 'right'
// then the article... // then the article...
: article.hasClass('page-align-center') ? 'center' : article.hasClass('page-align-center') ? 'center'
: article.hasClass('page-align-left') ? 'left' : article.hasClass('page-align-left') ? 'left'
@ -1018,12 +1021,12 @@ function resetState(){
* pages: [ * pages: [
* <page>, * <page>,
* *
* // page-set... * // group...
* // NOTE: this is just like and article but can be * // NOTE: this is just like and article but can be
* // nested within and article. * // nested within and article.
* // NOTE: only one level of nexting is supported/testd. * // NOTE: only one level of nexting is supported/testd.
* { * {
* type: 'page-set', * type: 'group',
* // classes set on the article element... * // classes set on the article element...
* class: [...] * class: [...]
* // XXX urls are not yet supported... * // XXX urls are not yet supported...
@ -1043,7 +1046,7 @@ function resetState(){
* NOTE: essentially we have nodes of the folowing type: * NOTE: essentially we have nodes of the folowing type:
* - magazine (root) * - magazine (root)
* - article * - article
* - page-set * - group
* - page * - page
* NOTE: content classes are stored in the content... * NOTE: content classes are stored in the content...
* NOTE: at this point all page classes will be stored, but .current * 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: // there are two type of metadata handlers:
@ -1126,10 +1129,10 @@ function buildJSON(export_bookmarks, export_position){
content: elem.children('.content')[0].outerHTML content: elem.children('.content')[0].outerHTML
} }
// page-set... // group...
} else if(elem.hasClass('page-set')){ } else if(elem.hasClass('group')){
var res = { var res = {
type: 'page-set', type: 'group',
'class': elem.attr('class'), 'class': elem.attr('class'),
pages: elem.children('.page').map(_getContent).toArray() pages: elem.children('.page').map(_getContent).toArray()
} }
@ -1139,7 +1142,7 @@ function buildJSON(export_bookmarks, export_position){
var res = { var res = {
type: 'article', type: 'article',
'class': elem.attr('class'), 'class': elem.attr('class'),
pages: elem.children('.page, .page-set').map(_getContent).toArray() pages: elem.children('.page, .group').map(_getContent).toArray()
} }
// other... // other...
@ -1190,8 +1193,8 @@ function loadJSON(data, load_user_data){
.addClass(data['class']) .addClass(data['class'])
.appendTo(parent) .appendTo(parent)
// page-set... // group...
} else if(data.type == 'page-set') { } else if(data.type == 'group') {
// buiold an article... // buiold an article...
var res = createEmptyPageSet() var res = createEmptyPageSet()
.addClass(data['class']) .addClass(data['class'])
@ -1222,7 +1225,7 @@ function loadJSON(data, load_user_data){
} }
// metadata... // 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) writeMetadata(res, data)
return res 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(){ function createEmptyPageSet(){
return $('<div/>') return $('<div/>')
.addClass('page-set') .addClass('group')
} }
function createEmptyArticle(){ function createEmptyArticle(){