mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 11:10:08 +00:00
added per magazine independent stored state...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
2b9590ef5b
commit
ca6302ae4b
299
editor.html
Executable file
299
editor.html
Executable file
@ -0,0 +1,299 @@
|
||||
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
|
||||
<!--DOCTYPE html-->
|
||||
<html>
|
||||
<head>
|
||||
<title>PortableMag</title>
|
||||
|
||||
<link rel="stylesheet" href="magazine.css">
|
||||
<link rel="stylesheet" href="magazine-custom.css">
|
||||
|
||||
<script src="jquery.js"></script>
|
||||
<script src="jquery.touchSwipe.js"></script>
|
||||
<script src="jstorage.js"></script>
|
||||
<!-- XXX make this optional... -->
|
||||
<script src="ckeditor/ckeditor.js"></script>
|
||||
|
||||
<script src="jli.js"></script>
|
||||
<script src="magazine.js"></script>
|
||||
|
||||
<!-- configuration, keep this last... -->
|
||||
<script src="keybindings.js"></script>
|
||||
<script src="config.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var DEBUG = true
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
if(DEBUG){
|
||||
$('.splash').click(function(){
|
||||
$('.splash').fadeOut()
|
||||
})
|
||||
}
|
||||
|
||||
$(window)
|
||||
.resize(viewResizeHandler)
|
||||
.bind('hashchange', hashChangeHandler)
|
||||
|
||||
$(document)
|
||||
.keydown(makeKeyboardHandler(keybindings))
|
||||
|
||||
$('.viewer')
|
||||
// setup internal events...
|
||||
.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
|
||||
.on('pageChanged', updatePageNumberIndicator)
|
||||
.on('bookmarksCleared', clearBookmarkIndicators)
|
||||
.on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)})
|
||||
.on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)})
|
||||
|
||||
// user interactions...
|
||||
.swipe({
|
||||
swipeStatus: swipeHandler,
|
||||
|
||||
// XXX these get called instead of pinches...
|
||||
swipeUp: function(event, direction, distance, duration, fingerCount){
|
||||
if(fingerCount == 2){
|
||||
toggleBookmark()
|
||||
} else {
|
||||
togglePageView()
|
||||
}
|
||||
},
|
||||
// XXX these get called instead of pinches...
|
||||
swipeDown: function(event, direction, distance, duration, fingerCount){
|
||||
if(fingerCount == 2){
|
||||
toggleBookmark()
|
||||
} else {
|
||||
togglePageView()
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// XXX for some reasons these lose the competition with swipes...
|
||||
pinchIn: function(event, direction, distance, duration, fingerCount, pinchZoom) {
|
||||
if(pinchZoom < distance){
|
||||
return
|
||||
}
|
||||
if(fingerCount == 2){
|
||||
togglePageView('on')
|
||||
}
|
||||
},
|
||||
// XXX for some reasons these lose the competition with swipes...
|
||||
pinchOut: function(event, direction, distance, duration, fingerCount, pinchZoom) {
|
||||
if(pinchZoom < distance){
|
||||
return
|
||||
}
|
||||
if(fingerCount == 2){
|
||||
togglePageView('off')
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// XXX for some reason this deos not bubble up the nested elements...
|
||||
click: function(evt, elem){
|
||||
if($(elem).hasClass('page')){
|
||||
setCurrentPage(elem)
|
||||
} else if($(elem).hasClass('content')){
|
||||
setCurrentPage($(elem).parents('.page').first())
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
excludedElements: '.noSwipe, a, [contenteditable=true]',
|
||||
fingers: $.fn.swipe.fingers.ALL
|
||||
//fingers: $.fn.swipe.fingers.THREE
|
||||
})
|
||||
|
||||
|
||||
// load state and setup everything that depends on it...
|
||||
loadState()
|
||||
setupNavigator()
|
||||
setupBookmarkTouchZones()
|
||||
|
||||
// set default view...
|
||||
togglePageView('on')
|
||||
|
||||
// hide the splash screen...
|
||||
$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
|
||||
function(){
|
||||
// NOTE: this will fix a bug on android -- the pages appear
|
||||
// to rendering quite a bit longer than loading, so on
|
||||
// loadState() above the current page is set well before
|
||||
// it is alligned correctly, so this will reset the
|
||||
// current page after everything is aligned...
|
||||
setTimeout(function(){
|
||||
//updateView()
|
||||
setCurrentPage()
|
||||
}, 300)
|
||||
// hide the splash...
|
||||
setTimeout(function(){
|
||||
$('.splash').fadeOut()
|
||||
}, 350)
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
// setup ckeditor events...
|
||||
// XXX need to $('[contenteditable]').attr('contenteditable', 'false') on
|
||||
// thumbnail view mode and true on page view mode...
|
||||
CKEDITOR.on('instanceCreated', function(evt){
|
||||
var editor = evt.editor
|
||||
editor.on('focus', function(){
|
||||
toggleEditorMode('on')
|
||||
})
|
||||
editor.on('blur', function(){
|
||||
toggleEditorMode('off')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="viewer">
|
||||
|
||||
<!-- Splash screen -->
|
||||
<div class="splash noSwipe">
|
||||
<!-- XXX replace this with a background-image logo... -->
|
||||
<table width="100%" height="100%"><tr><td align="center" valign="middle">
|
||||
<h2><i>loading...</i></h2>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- XXX Magazine title... -->
|
||||
|
||||
<div class="top-toolbar">
|
||||
<div class="left-set">
|
||||
<div class="button cover title"><a href="#home">PortableMag</a></div>
|
||||
</div>
|
||||
<div class="right-set">
|
||||
<div class="button prev-bookmark">
|
||||
<a href="#prevBookmark">
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<title>Previous bookmark (S-Left)</title>
|
||||
<path transform="rotate(-180 18.9697 20.1122)" id="svg_13" stroke="#ffffff" d="m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="button toggle-bookmark">
|
||||
<a href="#bookmark">
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<title>Toggle bookmark (B)</title>
|
||||
<rect stroke="#ffffff" id="svg_1" height="28.604868" width="24.052915" y="5.858955" x="8.807377" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
|
||||
<path stroke="#ffffff" id="svg_4" d="m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ff0000"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="button next-bookmark">
|
||||
<a href="#nextBookmark">
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<title>Next bookmark (S-Right)</title>
|
||||
<path stroke="#ffffff" id="svg_11" d="m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="button info" style="opacity: 0.3">
|
||||
<a href="javascript:alert('not implemented yet...')">
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<title>Info</title>
|
||||
<g id="svg_3">
|
||||
<circle fill="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="20.341617" cy="20.120354" r="14.302816" id="svg_2" stroke="#ffffff"/>
|
||||
<text fill="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="19.914334" y="23.397665" id="svg_5" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" transform="matrix(1.02694 0 0 1.02694 -0.348556 4.34707)" stroke="#000000">i</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-toolbar">
|
||||
<!-- this is just an example-->
|
||||
<div class="controls">
|
||||
<a href="#home" title="(Home)">Cover</a>
|
||||
<a href="#prevBookmark" title="(S-Left)">< Bookmark</a>
|
||||
<a href="#prevArticle" title="(C-Left)">< Article</a>
|
||||
<a href="#prev" title="Previous page (Left)">< Pa</a><a href="#next" title="Next page (Right)">ge ></a>
|
||||
<a href="#nextArticle" title="(C-Right)">Article ></a>
|
||||
<a href="#nextBookmark" title="(S-Right)">Bookmark ></a>
|
||||
<a href="#end" title="(End)">End</a>
|
||||
</div>
|
||||
<!-- position indicator -->
|
||||
<div class="navigator">
|
||||
<div class="bar">
|
||||
<div class="indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-number">0/0</div>
|
||||
</div>
|
||||
|
||||
<div class="scaler">
|
||||
<div class="aligner">
|
||||
<div class="magazine" title="PortableMag Templates">
|
||||
<div class="cover page current">
|
||||
<div class="content">
|
||||
<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
|
||||
<h1 style="color:silver; font-size: 20px; margin-left:10px">A suit for publishing portable periodic magazines on mobile platforms.</h1-->
|
||||
|
||||
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
||||
<g>
|
||||
<title>PortableMag cover</title>
|
||||
<defs>
|
||||
<path id="circle_path" d="m177.720383,238.333344c0,-82.290771 66.655533,-148.946304 148.946304,-148.946304c82.290771,0 148.946289,66.655533 148.946289,148.946304c0,82.290771 -66.655518,148.946289 -148.946289,148.946289c-82.290771,0 -148.946304,-66.655518 -148.946304,-148.946289z"/>
|
||||
</defs>
|
||||
<text fill="#7f7f7f" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="306" y="434.33334" id="svg_2" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve"/>
|
||||
<g id="svg_1">
|
||||
<g id="svg_8">
|
||||
<text stroke="#000000" fill="#7f7f7f" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="224.898504" y="309.870464" id="svg_6" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" font-weight="bold" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Mag</text>
|
||||
<text stroke="#000000" fill="#a8a8a8" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="156.581224" y="309.650884" id="svg_7" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Portable</text>
|
||||
</g>
|
||||
<text stroke="#000000" fill="#afafaf" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="261.526111" y="338.824173" id="svg_4" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(1.53525 0 0 1.53525 -34.4106 -167.936)" font-weight="normal" font-style="normal">A suit for publishing portable periodic magazines on mobile platforms.</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XXX do we need a Magazine Credits page??? -->
|
||||
|
||||
<div class="article">
|
||||
<div class="cover page">
|
||||
<div class="content">
|
||||
<h1 name="basics" style="color:gray;font-size:100px;">Templates...</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!-- vim:set ts=4 sw=4 nowrap : -->
|
||||
20
index.html
20
index.html
@ -10,8 +10,6 @@
|
||||
<script src="jquery.js"></script>
|
||||
<script src="jquery.touchSwipe.js"></script>
|
||||
<script src="jstorage.js"></script>
|
||||
<!-- XXX make this optional... -->
|
||||
<script src="ckeditor/ckeditor.js"></script>
|
||||
|
||||
<script src="jli.js"></script>
|
||||
<script src="magazine.js"></script>
|
||||
@ -135,22 +133,6 @@ $(document).ready(function(){
|
||||
|
||||
})
|
||||
|
||||
// setup ckeditor events...
|
||||
// XXX need to $('[contenteditable]').attr('contenteditable', 'false') on
|
||||
// thumbnail view mode and true on page view mode...
|
||||
CKEDITOR.on('instanceCreated', function(evt){
|
||||
var editor = evt.editor
|
||||
editor.on('focus', function(){
|
||||
toggleEditorMode('on')
|
||||
})
|
||||
editor.on('blur', function(){
|
||||
toggleEditorMode('off')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
@ -241,7 +223,7 @@ CKEDITOR.on('instanceCreated', function(evt){
|
||||
|
||||
<div class="scaler">
|
||||
<div class="aligner">
|
||||
<div class="magazine">
|
||||
<div class="magazine" title="PortableMag Demo">
|
||||
<div class="cover page current">
|
||||
<div class="content">
|
||||
<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
|
||||
|
||||
22
magazine.js
22
magazine.js
@ -774,17 +774,27 @@ function saveURLState(){
|
||||
|
||||
// local storage state managers...
|
||||
function loadStorageState(){
|
||||
return {
|
||||
current_page: parseInt($.jStorage.get('current_page', 0)),
|
||||
bookmarks: $.jStorage.get('bookmarks', [])
|
||||
var title = $('.magazine').attr('title')
|
||||
var data = $.jStorage.get(title, {})
|
||||
// set the defaults...
|
||||
if(data.current_page == null){
|
||||
data.current_page = 0
|
||||
}
|
||||
if(data.bookmarks == null){
|
||||
data.bookmarks = []
|
||||
}
|
||||
return data
|
||||
}
|
||||
function saveStorageState(){
|
||||
$.jStorage.set('current_page', getPageNumber())
|
||||
$.jStorage.set('bookmarks', buildBookmarkList())
|
||||
var title = $('.magazine').attr('title')
|
||||
$.jStorage.set(title, {
|
||||
current_page: getPageNumber(),
|
||||
bookmarks: buildBookmarkList()
|
||||
})
|
||||
}
|
||||
function resetStorageState(){
|
||||
$.jStorage.flush()
|
||||
var title = $('.magazine').attr('title')
|
||||
$.jStorage.deleteKey(title)
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user