mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 11:10:08 +00:00
474 lines
16 KiB
HTML
Executable File
474 lines
16 KiB
HTML
Executable File
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
|
|
<!--DOCTYPE html-->
|
|
<html>
|
|
<head>
|
|
<title>Magazine</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>
|
|
|
|
<script src="jli.js"></script>
|
|
<script src="magazine.js"></script>
|
|
|
|
<script src="keybindings.js"></script>
|
|
|
|
<!-- configuration, keep this last... -->
|
|
<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')
|
|
.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)
|
|
//togglePageView('on')
|
|
} else if($(elem).hasClass('content')){
|
|
setCurrentPage($(elem).parents('.page').first())
|
|
//togglePageView('on')
|
|
}
|
|
return true
|
|
},
|
|
|
|
//excludedElements: '.noSwipe',
|
|
fingers: $.fn.swipe.fingers.ALL
|
|
//fingers: $.fn.swipe.fingers.THREE
|
|
})
|
|
|
|
// XXX do we need these here??
|
|
$('.button.cover').swipe({click: goToMagazineCover})
|
|
$('.button.next-article').swipe({click: nextArticle})
|
|
$('.button.prev-article').swipe({click: prevArticle})
|
|
|
|
$('.button.prev-bookmark').swipe({click: prevBookmark})
|
|
$('.button.toggle-bookmark').swipe({click: function(){toggleBookmark()}})
|
|
$('.button.next-bookmark').swipe({click: nextBookmark})
|
|
|
|
loadState()
|
|
setupNavigator()
|
|
|
|
togglePageView('on')
|
|
|
|
// hide the splash screen...
|
|
$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
|
|
function(){
|
|
$('.splash').fadeOut()
|
|
})
|
|
})
|
|
|
|
|
|
</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">PortableMag</div>
|
|
</div>
|
|
<div class="right-set">
|
|
<div class="button prev-bookmark">
|
|
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
|
<g>
|
|
<title>prev</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>
|
|
</div>
|
|
<div class="button toggle-bookmark">
|
|
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
|
<g>
|
|
<title>bookmark</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>
|
|
</div>
|
|
<div class="button next-bookmark">
|
|
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
|
<g>
|
|
<title>next</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-toolbar">
|
|
<!-- this is just an example-->
|
|
<div class="controls">
|
|
<a href="#home">Cover</a> |
|
|
<a href="#prevArticle">Previous article</a> |
|
|
<a href="#prev">Previous page</a> |
|
|
<a href="#next">Next page</a> |
|
|
<a href="#nextArticle">Next article</a> |
|
|
<a href="#end">End</a>
|
|
</div>
|
|
<!-- position indicator -->
|
|
<div class="navigator">
|
|
<div class="bar">
|
|
<div class="indicator"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scaler">
|
|
<div class="aligner">
|
|
<div class="magazine">
|
|
<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;">The Basics...</h1>
|
|
<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
|
|
<a href="#next">get started...</a><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<div class="content">
|
|
<h1 name="navigation">PortableMag Navigation and Linking</h1>
|
|
<div style="float:left; width: 40%; height: 100%; margin: 10px;">
|
|
<h2>Finger controls</h2>
|
|
<ul>
|
|
<li> Single finger swipe left/right – prev/next page.
|
|
<li> Two finger swipe left/right – prev/next article.
|
|
<li> Single finger swipe up/down – toggle thumbnail view.
|
|
<li> Pinch in/out – go in/out of thumbnail view.
|
|
</ul>
|
|
<h2>Navigation via #URLs</h2>
|
|
<h3>The basics</h3>
|
|
<a href="#1">Page #1</a><br>
|
|
<a href="#ArticleAnchorExample">Named page</a><br>
|
|
<p>
|
|
<s><a href="#page-3-anchor" style="pointer-events:none">Anchor on page #3</a></s><br>
|
|
<i> currently navigation via existing anchors
|
|
will break the layout, so use the name attribute
|
|
on any other tags (see example).
|
|
</i>
|
|
</p>
|
|
</div>
|
|
|
|
<div style="float:left; width: 40%; height: 100%; padding: 10px;">
|
|
<h3>Special anchors</h3>
|
|
<p>These show up in the page URL</p>
|
|
<a href="#home">Magazine cover</a><br>
|
|
<a href="#end">Last page</a><br>
|
|
<a href="#thumbnails">Thumbnail view</a><br>
|
|
<a href="#example-layer">Toggle a hidden layer</a><br>
|
|
<span name="example-layer" class="hidden">
|
|
<a href="#hideLayers">Hide all layers</a><br>
|
|
</span>
|
|
<a href="#bookmark">Toggle bookmark</a><br>
|
|
|
|
<h3>Relative special anchors</h3>
|
|
<p>These will get replaced by corresponding page numbers in the URL</p>
|
|
<a href="#next">Next page</a><br>
|
|
<a href="#prev">Previous page</a><br>
|
|
<a href="#nextArticle">Next article</a><br>
|
|
<a href="#prevArticle">Previous article</a><br>
|
|
<h3>History support</h3>
|
|
<i>NOTE: this is still a bit flaky...</i><br>
|
|
<a href="#back">Go back</a><br>
|
|
<a href="#forward">Go forward</a><br>
|
|
</div>
|
|
<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
|
|
<a href="#config">configuration demo</a> <a href="#next">next page...</a><br>
|
|
</div>
|
|
|
|
|
|
<div name="example-layer" class="hidden" onclick="window.location='#example-layer'" style="position:absolute; left:450px; top:250px; width: 300px; height:50px; text-align: center; padding: 15px; border: solid gray 5px; background: white; color: gray; cursor: hand; opacity: 0.8">
|
|
<h3>This is an example layer</h3>
|
|
<i>click or tap to hide</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- XXX do we need an Article Credits page??? -->
|
|
|
|
<div class="page">
|
|
<div class="content">
|
|
<h1 name="anatomy">PortableMag Anatomy</h1>
|
|
<p>
|
|
The magazine consists of:
|
|
<ul>
|
|
<li>Magazine cover
|
|
<li>Articles:
|
|
<ul>
|
|
<li>Article cover
|
|
<li>Pages
|
|
</ul>
|
|
</ul>
|
|
Each of these elements can be styled separately...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<div class="content" style="background: black; color: gray; padding-left: 20px; padding-right: 20px;">
|
|
<h1>The Page <i>content</i> has a fixed size...</h1>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<div class="content">
|
|
<a name="page-3-anchor"></a>
|
|
<img src="img.jpg" height="100%" align="left" style="margin-right: 15px"/>
|
|
<h1>Using the content block...</h1>
|
|
<p>
|
|
The content block can contain any HTML.
|
|
</p>
|
|
<p>
|
|
The contents will allways fit the screen, the aspect ratio
|
|
of the content block is fixed regardless of the viewer.
|
|
</p>
|
|
<p>
|
|
Contents will not get clipped as long as they are within the block.
|
|
</p>
|
|
<p>
|
|
NOTE: by default the overflow is visible (see <a href="#next">next page</a>), so be carefull.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<div class="content">
|
|
<img src="img.jpg" width="200%" style="position: absolute; left: -50%; top: -20%"/>
|
|
<div style="position:absolute; width:100%; height: 100%; color: white;">
|
|
<h1>You can still use the full page area...</h1>
|
|
<p>
|
|
Though anything outside the content block can and will get clipped,
|
|
depending on viewer aspect ratio...
|
|
</p>
|
|
<p>
|
|
You can see this by resizing the page in browser or rotating the device.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="article">
|
|
<div class="cover page">
|
|
<div class="content" name="ArticleAnchorExample">
|
|
<h1>Page Templates</h1>
|
|
<a href="#home">home</a><br>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page">
|
|
<div class="content">
|
|
Page
|
|
</div>
|
|
</div>
|
|
<div class="page no-resize">
|
|
<div class="content" style="background:gold">
|
|
Page
|
|
</div>
|
|
</div>
|
|
<div class="page no-resize">
|
|
<div class="content" style="background:yellow; width: 600px">
|
|
Page
|
|
</div>
|
|
</div>
|
|
<div class="page no-resize">
|
|
<div class="content" style="background:gold; width: 400px">
|
|
Page
|
|
</div>
|
|
</div>
|
|
<div class="page no-resize">
|
|
<div class="content" style="background:orange; width: 200px">
|
|
Page
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="article">
|
|
<div class="cover page">
|
|
<div class="content">
|
|
<h1>Article Cover</h1>
|
|
<a href="#home">home</a><br>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page">
|
|
<div class="content">
|
|
Page
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<div class="content">
|
|
Page<br>
|
|
<a href="#home">home</a><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="article">
|
|
<div class="cover page">
|
|
<div class="content">
|
|
<h1 name="config">Configuration demo</h1>
|
|
|
|
<div>
|
|
Pages in ribbon: <input id="PAGES_IN_RIBBON" type="text"><button onclick="saveSettings()">save</button>
|
|
</div>
|
|
<div>
|
|
Fit page to view: <button id="FIT_PAGE_TO_VIEW" onclick="toggleSetting(this)"></button>
|
|
</div>
|
|
<div>
|
|
Animate window resize: <button id="ANIMATE_WINDOW_RESIZE" onclick="toggleSetting(this)"></button>
|
|
</div>
|
|
<div>
|
|
Drag in full page view: <button id="DRAG_FULL_PAGE" onclick="toggleSetting(this)"></button>
|
|
</div>
|
|
<div>
|
|
Enable different size pages (still flaky): <button id="USE_REAL_PAGE_SIZES" onclick="toggleSetting(this)"></button>
|
|
</div>
|
|
<p>
|
|
NOTE: this is not an actual configuration page, just a live demo
|
|
of some of the available configuration option effects.
|
|
</p>
|
|
|
|
<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
|
|
<a href="#back">go back</a>, or return to <a href="#home">magazine cover...</a><br>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
function saveSettings(){
|
|
var v = parseInt($('#PAGES_IN_RIBBON').attr('value'))
|
|
PAGES_IN_RIBBON = v == null ? PAGES_IN_RIBBON : v
|
|
FIT_PAGE_TO_VIEW = $('#FIT_PAGE_TO_VIEW').text() == 'true' ? true : false
|
|
ANIMATE_WINDOW_RESIZE = $('#ANIMATE_WINDOW_RESIZE').text() == 'true' ? true : false
|
|
DRAG_FULL_PAGE = $('#DRAG_FULL_PAGE').text() == 'true' ? true : false
|
|
USE_REAL_PAGE_SIZES = $('#USE_REAL_PAGE_SIZES').text() == 'true' ? true : false
|
|
}
|
|
function loadSettings(){
|
|
$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
|
|
$('#FIT_PAGE_TO_VIEW').text(FIT_PAGE_TO_VIEW)
|
|
$('#ANIMATE_WINDOW_RESIZE').text(ANIMATE_WINDOW_RESIZE)
|
|
$('#DRAG_FULL_PAGE').text(DRAG_FULL_PAGE)
|
|
$('#USE_REAL_PAGE_SIZES').text(USE_REAL_PAGE_SIZES)
|
|
}
|
|
function toggleSetting(obj){
|
|
obj = $(obj)
|
|
obj.text() == 'true' ? obj.text('false') : obj.text('true')
|
|
saveSettings()
|
|
updateView()
|
|
}
|
|
|
|
|
|
loadSettings()
|
|
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 nowrap : -->
|