2013-01-11 18:48:15 +04:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2013-01-21 05:55:56 +04:00
|
|
|
<title>Magazine</title>
|
|
|
|
|
<link rel="stylesheet" href="magazine.css">
|
2013-01-11 18:48:15 +04:00
|
|
|
<script src="jquery.js"></script>
|
|
|
|
|
<script src="jquery.touchSwipe.js"></script>
|
2013-01-22 18:04:33 +04:00
|
|
|
<script src="jstorage.js"></script>
|
|
|
|
|
|
2013-01-23 01:37:39 +04:00
|
|
|
<script src="magazine.js"></script>
|
2013-01-21 05:55:56 +04:00
|
|
|
|
2013-01-23 01:37:39 +04:00
|
|
|
<script>
|
2013-01-22 18:39:44 +04:00
|
|
|
</script>
|
2013-01-22 19:03:26 +04:00
|
|
|
|
|
|
|
|
|
2013-01-22 18:39:44 +04:00
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
2013-01-23 00:42:27 +04:00
|
|
|
|
|
|
|
|
if(DEBUG){
|
|
|
|
|
$('.splash').click(function(){
|
|
|
|
|
$('.splash').fadeOut()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-01-22 19:03:26 +04:00
|
|
|
$(window)
|
|
|
|
|
.resize(function() {
|
|
|
|
|
fitNPages(PAGES_VISIBLE)
|
|
|
|
|
})
|
2013-01-23 00:46:30 +04:00
|
|
|
.bind('hashchange', function(){
|
|
|
|
|
setCurrentPage(loadURLState())
|
|
|
|
|
})
|
2013-01-22 18:39:44 +04:00
|
|
|
|
|
|
|
|
$('.viewer')
|
|
|
|
|
.swipe({
|
|
|
|
|
swipeStatus: swipeUpdate,
|
|
|
|
|
// XXX change this to pinch...
|
|
|
|
|
swipeUp: function(){
|
|
|
|
|
togglePageView('off')
|
|
|
|
|
},
|
|
|
|
|
// XXX change this to pinch...
|
|
|
|
|
swipeDown: function(){
|
|
|
|
|
togglePageView('on')
|
|
|
|
|
},
|
|
|
|
|
// 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
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
$('.button.cover').swipe({click: goToMagazineCover})
|
|
|
|
|
$('.button.next-article').swipe({click: nextArticle})
|
|
|
|
|
$('.button.prev-article').swipe({click: prevArticle})
|
|
|
|
|
|
2013-01-22 19:19:43 +04:00
|
|
|
loadState()
|
2013-01-22 18:39:44 +04:00
|
|
|
|
|
|
|
|
togglePageView('on')
|
|
|
|
|
|
|
|
|
|
// hide the splash screen...
|
|
|
|
|
$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
|
|
|
|
|
function(){
|
|
|
|
|
$('.splash').fadeOut()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2013-01-21 05:55:56 +04:00
|
|
|
|
|
|
|
|
<div class="viewer">
|
2013-01-22 00:36:32 +04:00
|
|
|
|
2013-01-22 18:39:44 +04:00
|
|
|
<!-- 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>
|
|
|
|
|
|
|
|
|
|
|
2013-01-22 18:04:33 +04:00
|
|
|
<!-- XXX Magazine title... -->
|
|
|
|
|
|
2013-01-22 01:26:37 +04:00
|
|
|
<div class="top-toolbar">
|
|
|
|
|
mooo
|
2013-01-22 01:43:24 +04:00
|
|
|
<div class="button home">Home</div>
|
2013-01-22 01:26:37 +04:00
|
|
|
<div class="button cover">Issue Cover</div>
|
|
|
|
|
<div class="button prev-article">Prev Article</div>
|
|
|
|
|
<div class="button next-article">Next Article</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom-toolbar">
|
|
|
|
|
</div>
|
2013-01-22 00:36:32 +04:00
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
<div class="scaler">
|
|
|
|
|
<div class="aligner">
|
|
|
|
|
<div class="magazine">
|
|
|
|
|
<div class="cover page current">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Magazine Cover
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- XXX do we need a Magazine Credits page??? -->
|
|
|
|
|
|
|
|
|
|
<div class="article">
|
|
|
|
|
<div class="cover page">
|
2013-01-21 18:04:10 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Article Cover<br>
|
|
|
|
|
some more text...
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- XXX do we need an Article Credits page??? -->
|
|
|
|
|
|
|
|
|
|
<div class="page">
|
2013-01-22 00:36:32 +04:00
|
|
|
<div class="content" style="border:solid red 1px">
|
2013-01-21 20:05:05 +04:00
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
2013-01-21 21:09:15 +04:00
|
|
|
<img src="img.jpg" height="100%"/>
|
2013-01-21 20:05:05 +04:00
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
2013-01-22 00:57:01 +04:00
|
|
|
<img src="img.jpg" width="200%" style="margin-left: -50%; margin-top: -20%"/>
|
2013-01-21 20:05:05 +04:00
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="article">
|
|
|
|
|
<div class="cover page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Article Cover
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="article">
|
|
|
|
|
<div class="cover page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Article Cover
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
2013-01-21 20:05:05 +04:00
|
|
|
<div class="content">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-11 18:48:15 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2013-01-21 05:55:56 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
</body>
|
|
|
|
|
</html>
|
