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>
|
|
|
|
|
<script>
|
|
|
|
|
|
2013-01-21 06:29:12 +04:00
|
|
|
/* this is needed only for live resize... */
|
|
|
|
|
var PAGES_VISIBLE = 1
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
$(document).ready(function(){
|
2013-01-21 06:29:12 +04:00
|
|
|
$(window).resize(function() {
|
|
|
|
|
fitNPages(PAGES_VISIBLE)
|
|
|
|
|
})
|
2013-01-11 18:48:15 +04:00
|
|
|
$('.viewer')
|
|
|
|
|
.swipe({
|
2013-01-21 05:55:56 +04:00
|
|
|
//swipeLeft: nextPage,
|
|
|
|
|
//swipeRight: prevPage,
|
|
|
|
|
swipeStatus: swipeUpdate,
|
|
|
|
|
// XXX change this to pinch...
|
2013-01-21 06:29:12 +04:00
|
|
|
swipeUp: function(){
|
|
|
|
|
PAGES_VISIBLE = 6
|
|
|
|
|
fitNPages(PAGES_VISIBLE)
|
|
|
|
|
},
|
2013-01-21 05:55:56 +04:00
|
|
|
// XXX change this to pinch...
|
|
|
|
|
swipeDown: function(){
|
2013-01-21 06:29:12 +04:00
|
|
|
PAGES_VISIBLE = 1
|
|
|
|
|
fitNPages(PAGES_VISIBLE)
|
2013-01-21 05:55:56 +04:00
|
|
|
// to prevent drag while zooming to affect
|
|
|
|
|
// the resulting position set it to current
|
|
|
|
|
// page...
|
|
|
|
|
setCurrentPage()
|
|
|
|
|
},
|
|
|
|
|
click: function(evt, elem){
|
|
|
|
|
if($(elem).hasClass('page')){
|
|
|
|
|
setCurrentPage(elem)
|
|
|
|
|
}
|
|
|
|
|
return true
|
|
|
|
|
}
|
2013-01-11 18:48:15 +04:00
|
|
|
})
|
2013-01-21 05:55:56 +04:00
|
|
|
|
|
|
|
|
// XXX add splash screen...
|
|
|
|
|
|
2013-01-21 06:29:12 +04:00
|
|
|
fitNPages(PAGES_VISIBLE)
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
})
|
|
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
function swipeUpdate(evt, phase, direction, distance){
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
var cur = $('.current.page')
|
|
|
|
|
var n = pages.index(cur)
|
|
|
|
|
var scale = getElementScale($('.scaler'))
|
|
|
|
|
var mag = $('.magazine')
|
2013-01-11 18:48:15 +04:00
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
if( phase=='move' && (direction=='left' || direction=='right') ){
|
|
|
|
|
// XXX set the transition time to 0...
|
|
|
|
|
var orig_duration = mag.css('-webkit-transition-duration')
|
|
|
|
|
mag.css({'-webkit-transition-duration': 0})
|
|
|
|
|
if (direction == 'left'){
|
|
|
|
|
//$('.magazine').css({left: -n*cur.width()-distance/scale})
|
|
|
|
|
$('.magazine').css({left: -n*800-distance/scale})
|
|
|
|
|
} else if (direction == 'right') {
|
|
|
|
|
//$('.magazine').css({left: -n*cur.width()+distance/scale})
|
|
|
|
|
$('.magazine').css({left: -n*800+distance/scale})
|
|
|
|
|
}
|
|
|
|
|
mag.css({'-webkit-transition-duration': orig_duration})
|
2013-01-11 18:48:15 +04:00
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
} else if ( phase == 'cancel') {
|
|
|
|
|
setCurrentPage()
|
2013-01-11 18:48:15 +04:00
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
} else if ( phase =='end' ) {
|
|
|
|
|
// see which page is closer to the middle of the screen and set it...
|
|
|
|
|
var p = Math.ceil((distance/scale)/cur.width())
|
2013-01-11 18:48:15 +04:00
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
if(direction == 'right') {
|
|
|
|
|
// prev page...
|
|
|
|
|
setCurrentPage(Math.max(n-p, 0))
|
|
|
|
|
} else if (direction == 'left'){
|
|
|
|
|
// next page...
|
|
|
|
|
setCurrentPage(Math.min(n+p, pages.length-1))
|
|
|
|
|
}
|
|
|
|
|
}
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
function setCurrentPage(n){
|
|
|
|
|
if(n == null){
|
2013-01-21 06:29:12 +04:00
|
|
|
var cur = $('.current.page')
|
2013-01-21 05:55:56 +04:00
|
|
|
n = $('.page').index(cur)
|
|
|
|
|
} else if(typeof(n) == typeof(1)) {
|
2013-01-21 06:29:12 +04:00
|
|
|
var cur = $($('.page')[n])
|
2013-01-21 05:55:56 +04:00
|
|
|
} else {
|
2013-01-21 06:29:12 +04:00
|
|
|
var cur = $(n)
|
2013-01-21 05:55:56 +04:00
|
|
|
n = $('.page').index(cur)
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
$('.current.page').removeClass('current')
|
|
|
|
|
cur.addClass('current')
|
|
|
|
|
|
|
|
|
|
$('.magazine').css({left: -n*cur.width()})
|
|
|
|
|
|
|
|
|
|
return cur
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
|
|
|
|
|
|
|
|
|
|
function nextPage(){
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
var cur = $('.current.page')
|
|
|
|
|
return setCurrentPage(Math.min(pages.index(cur)+1, pages.length-1))
|
|
|
|
|
}
|
2013-01-11 18:48:15 +04:00
|
|
|
function prevPage(){
|
2013-01-21 05:55:56 +04:00
|
|
|
var pages = $('.page')
|
|
|
|
|
var cur = $('.current.page')
|
|
|
|
|
return setCurrentPage(Math.max(pages.index(cur)-1, 0))
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
function goToMagazineCover(){
|
|
|
|
|
setCurrentPage(0)
|
|
|
|
|
}
|
|
|
|
|
function goToArticleCover(){
|
|
|
|
|
setCurrentPage($('.current.page').parents('.article').children('.page').first())
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function nextArticle(){
|
|
|
|
|
var cur = $('.current.page').parents('.article')
|
|
|
|
|
// we are at the magazine cover cover...
|
|
|
|
|
if(cur.length == 0){
|
|
|
|
|
return setCurrentPage(
|
|
|
|
|
$('.article .page:first-child').first())
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
2013-01-21 05:55:56 +04:00
|
|
|
// just find the next one...
|
|
|
|
|
var articles = $('.article')
|
|
|
|
|
return setCurrentPage(
|
|
|
|
|
$(articles[Math.min(articles.index(cur)+1, articles.length-1)])
|
|
|
|
|
.children('.page')
|
|
|
|
|
.first())
|
2013-01-11 18:48:15 +04:00
|
|
|
|
|
|
|
|
}
|
2013-01-21 05:55:56 +04:00
|
|
|
// XXX this is almost exactly the same as nextArticle...
|
|
|
|
|
function prevArticle(){
|
|
|
|
|
var cur = $('.current.page').parents('.article')
|
|
|
|
|
// we are at the magazine cover cover...
|
|
|
|
|
if(cur.length == 0){
|
|
|
|
|
return $('.current.page')
|
|
|
|
|
}
|
|
|
|
|
// just find the prev one...
|
|
|
|
|
var articles = $('.article')
|
|
|
|
|
return setCurrentPage(
|
|
|
|
|
$(articles[Math.max(articles.index(cur)-1, 0)])
|
|
|
|
|
.children('.page')
|
|
|
|
|
.first())
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
|
|
|
|
|
// Return a scale value for the given element(s).
|
|
|
|
|
// NOTE: this will only return a single scale value...
|
|
|
|
|
function getElementScale(elem){
|
|
|
|
|
//var transform = elem.css('transform')
|
|
|
|
|
var vendors = ['o', 'moz', 'ms', 'webkit']
|
|
|
|
|
var transform = elem.css('transform')
|
|
|
|
|
var res
|
|
|
|
|
|
|
|
|
|
// go through vendor prefixes... (hate this!)
|
|
|
|
|
if(!transform || transform == 'none'){
|
|
|
|
|
for(var i in vendors){
|
|
|
|
|
transform = elem.css('-' + vendors[i] + '-transform')
|
|
|
|
|
if(transform && transform != 'none'){
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// no transform is set...
|
|
|
|
|
if(!transform || transform == 'none'){
|
|
|
|
|
return 1
|
|
|
|
|
}
|
|
|
|
|
// get the scale value -- first argument of scale/matrix...
|
|
|
|
|
return parseFloat((/(scale|matrix)\(([^,]*),.*\)/).exec(transform)[2])
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
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+')',
|
|
|
|
|
})
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
|
|
|
|
|
|
|
|
|
|
function fitNPages(n){
|
|
|
|
|
if(n==null){
|
|
|
|
|
n = 1
|
2013-01-11 18:58:26 +04:00
|
|
|
}
|
2013-01-21 05:55:56 +04:00
|
|
|
var pages = $('.page')
|
|
|
|
|
var scale = $('.viewer').width()/(pages.width()*n)
|
|
|
|
|
|
2013-01-21 06:29:12 +04:00
|
|
|
// fit vertically if needed...
|
|
|
|
|
if(pages.height()*scale > $('.viewer').height()){
|
|
|
|
|
scale = $('.viewer').height()/pages.height()
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
setElementScale($('.scaler'), scale)
|
2013-01-11 18:58:26 +04:00
|
|
|
}
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
|
2013-01-21 05:55:56 +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){
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2013-01-11 18:48:15 +04:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2013-01-21 05:55:56 +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
|
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>
|
