2013-01-20 16:59:14 +04:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2013-01-20 17:25:28 +04:00
|
|
|
<title>Magazine</title>
|
|
|
|
|
<link rel="stylesheet" href="magazine.css">
|
|
|
|
|
<script src="jquery.js"></script>
|
2013-01-21 03:55:43 +04:00
|
|
|
<script src="jquery.touchSwipe.js"></script>
|
2013-01-20 17:25:28 +04:00
|
|
|
<script>
|
|
|
|
|
|
2013-01-21 03:32:28 +04:00
|
|
|
$(document).ready(function(){
|
2013-01-21 03:55:43 +04:00
|
|
|
$('.viewer')
|
|
|
|
|
.swipe({
|
|
|
|
|
/* for some reason these do not work within pages... */
|
|
|
|
|
swipeLeft: nextPage,
|
|
|
|
|
swipeRight: prevPage,
|
|
|
|
|
swipeUp: function(){fitNPages(6)},
|
|
|
|
|
swipeDown: function(){fitNPages(1)},
|
|
|
|
|
click: function(evt, elem){
|
|
|
|
|
if($(elem).hasClass('page')){
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
setCurrentPage(pages.index(elem))
|
|
|
|
|
}
|
|
|
|
|
return true
|
|
|
|
|
}
|
|
|
|
|
})
|
2013-01-21 03:32:28 +04:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function setCurrentPage(n){
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
var cur = $(pages[n])
|
|
|
|
|
|
|
|
|
|
$('.current.page').removeClass('current')
|
|
|
|
|
cur.addClass('current')
|
|
|
|
|
|
|
|
|
|
$('.magazine').css({left: -n*pages.width()})
|
|
|
|
|
|
|
|
|
|
return cur
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function nextPage(){
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
var cur = $('.current.page')
|
|
|
|
|
return setCurrentPage(Math.min(pages.index(cur)+1, pages.length-1))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function prevPage(){
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
var cur = $('.current.page')
|
|
|
|
|
return setCurrentPage(Math.max(pages.index(cur)-1, 0))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setElementScale(elem, scale){
|
|
|
|
|
return elem.css({
|
|
|
|
|
'transform': 'scale('+scale+')',
|
|
|
|
|
'-moz-transform': 'scale('+scale+')',
|
|
|
|
|
'-o-transform': 'scale('+scale+')',
|
|
|
|
|
'-ms-transform': 'scale('+scale+')',
|
|
|
|
|
'-webkit-transform': 'scale('+scale+')',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fitNPages(n){
|
|
|
|
|
if(n==null){
|
|
|
|
|
n = 1
|
|
|
|
|
}
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
var scale = $('.viewer').width()/(pages.width()*n)
|
|
|
|
|
|
|
|
|
|
setElementScale($('.scaler'), scale)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-01-20 17:25:28 +04:00
|
|
|
// XXX create magazine...
|
|
|
|
|
function createMagazine(){
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// XXX create article (magazine, title, position)...
|
|
|
|
|
function createArticle(magazine, title){
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// XXX create page (article, template, position)...
|
|
|
|
|
function createPage(article, template){
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
2013-01-20 16:59:14 +04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
2013-01-21 03:32:28 +04:00
|
|
|
<div class="viewer">
|
|
|
|
|
<div class="scaler">
|
|
|
|
|
<div class="aligner">
|
|
|
|
|
<div class="magazine">
|
|
|
|
|
<div class="cover page current">
|
|
|
|
|
Magazine Cover
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- XXX do we need a Magazine Credits page??? -->
|
|
|
|
|
|
|
|
|
|
<div class="article">
|
|
|
|
|
<div class="cover page">
|
|
|
|
|
Article Cover<br>
|
|
|
|
|
some more text...
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- XXX do we need an Article Credits page??? -->
|
|
|
|
|
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="article">
|
|
|
|
|
<div class="cover page">
|
|
|
|
|
Article Cover
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="article">
|
|
|
|
|
<div class="cover page">
|
|
|
|
|
Article Cover
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="article">
|
|
|
|
|
<div class="cover page">
|
|
|
|
|
Article Cover
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page">
|
|
|
|
|
Page
|
|
|
|
|
</div>
|
2013-01-20 16:59:14 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2013-01-21 03:32:28 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2013-01-20 16:59:14 +04:00
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
