mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 19:20:09 +00:00
some minor work and house keeping...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
79e21575eb
commit
04e97dbefb
4
TODO.otl
4
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
|
||||
|
||||
@ -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')
|
||||
})
|
||||
|
||||
|
||||
|
||||
22
editor.js
22
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
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
132
index.html
132
index.html
@ -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="navigator.js"></script>
|
||||
<!--script src="editor.js"></script-->
|
||||
<script src="editor.js"></script>
|
||||
|
||||
<!-- configuration, keep this last... -->
|
||||
<script src="platform.js"></script>
|
||||
@ -150,6 +150,9 @@ $(document).ready(function(){
|
||||
$('.splash').fadeOut()
|
||||
}, 350)
|
||||
})
|
||||
|
||||
// setup the editor buttons...
|
||||
// XXX
|
||||
|
||||
|
||||
|
||||
@ -170,7 +173,130 @@ $(document).ready(function(){
|
||||
</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="left-set">
|
||||
@ -569,7 +695,7 @@ $(document).ready(function(){
|
||||
</div>
|
||||
<div class="article">
|
||||
<!-- 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="content">
|
||||
<h1>Page Set Example</h1>
|
||||
|
||||
@ -49,7 +49,7 @@ var keybindings = {
|
||||
},
|
||||
|
||||
// everything except overlays...
|
||||
'.viewer:not(.editor-mode)': {
|
||||
'.viewer:not(.inline-editor-mode)': {
|
||||
title: 'Ribbon and Viewer',
|
||||
doc: '',
|
||||
|
||||
|
||||
42
magazine.css
42
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 {
|
||||
|
||||
47
magazine.js
47
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>,
|
||||
*
|
||||
* // 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 $('<div/>')
|
||||
.addClass('page-set')
|
||||
.addClass('group')
|
||||
}
|
||||
|
||||
function createEmptyArticle(){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user