mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 20:10:13 +00:00
326 lines
12 KiB
HTML
Executable File
326 lines
12 KiB
HTML
Executable File
<!-- 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="ext-lib/jquery.js"></script>
|
|
<script src="ext-lib/jquery.touchSwipe.js"></script>
|
|
<script src="ext-lib/jstorage.js"></script>
|
|
<!-- EXPERIMENTAL -->
|
|
<!--
|
|
XXX scrollTo is a cool and a powerfull tool but it needs a sustantial code reorganization
|
|
this might be a good idea/exersize sometime in the future...
|
|
-->
|
|
<!--script src="ext-lib/jquery.scrollto.js"></script-->
|
|
|
|
<script src="lib/jli.js"></script>
|
|
|
|
<script src="magazine.js"></script>
|
|
<script src="navigator.js"></script>
|
|
<script src="editor.js"></script>
|
|
|
|
<!-- configuration, keep this last... -->
|
|
<script src="platform.js"></script>
|
|
<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('magazineDataLoaded', loadMagazineChrome)
|
|
|
|
// templates...
|
|
.on('pageCreated articleCreated magazineCreated ' +
|
|
'pageMoved pageRemoved articleMoved articleRemoved', runMagazineTemplates)
|
|
|
|
// 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){
|
|
elem = $(elem)
|
|
// bubble up to nearest page...
|
|
if(!elem.hasClass('page')
|
|
&& elem.parents('.page').length != 0){
|
|
elem = elem.parents('.page').first()
|
|
}
|
|
|
|
// click current page to toggle full page view...
|
|
if(elem.hasClass('current', 'page')
|
|
&& togglePageView('?') == 'off'){
|
|
togglePageView('on')
|
|
// click any page to set it to current...
|
|
} else if(elem.hasClass('page')){
|
|
setCurrentPage(elem)
|
|
}
|
|
return true
|
|
},
|
|
|
|
excludedElements: '.noSwipe, a, [contenteditable=true]',
|
|
fingers: $.fn.swipe.fingers.ALL
|
|
//fingers: $.fn.swipe.fingers.THREE
|
|
})
|
|
|
|
// XXX this will need to be repeated to newly created elements...
|
|
$('[contenteditable=true]')
|
|
.on('focus', function(){
|
|
toggleEditorMode('on')
|
|
})
|
|
.on('blur', function(){
|
|
toggleEditorMode('off')
|
|
})
|
|
|
|
|
|
// load state and setup everything that depends on it...
|
|
// XXX load the data with loadJSON()
|
|
loadState()
|
|
// need to call this once per whole page load....
|
|
setupNavigator()
|
|
// XXX STUB, needed untill we load everything frim JSON...
|
|
$('.viewer').trigger('magazineDataLoaded')
|
|
|
|
// 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)
|
|
})
|
|
|
|
|
|
|
|
})
|
|
|
|
</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"><span class="magazine-title-text">PortableMag</span> <small>(editor)</small></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>
|
|
|
|
Magazine title: <span class="magazine-title-text">[MAGAZINE NAME]</span><br>
|
|
|
|
<div class="article-index">[ARTICLE INDEX]</div>
|
|
|
|
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
</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 class="page-number-text">[PAGE NUMBER]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 nowrap : -->
|