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-11 18:48:15 +04:00
|
|
|
<script>
|
|
|
|
|
|
2013-01-21 06:29:12 +04:00
|
|
|
/* this is needed only for live resize... */
|
|
|
|
|
var PAGES_VISIBLE = 1
|
2013-01-21 18:04:10 +04:00
|
|
|
var PAGES_IN_RIBBON = 6
|
|
|
|
|
/*********************************************************************/
|
|
|
|
|
// XXX move to generic lib...
|
|
|
|
|
|
|
|
|
|
// this will create a function that will add/remove a css_class to elem
|
|
|
|
|
// calling the optional callbacks before and/or after.
|
|
|
|
|
//
|
|
|
|
|
// elem is a jquery compatible object; default use-case: a css selector.
|
|
|
|
|
//
|
|
|
|
|
// the resulting function understands the folowing arguments:
|
|
|
|
|
// - 'on' : switch mode on
|
|
|
|
|
// - 'off' : switch mode off
|
|
|
|
|
// - '?' : return current state ('on'|'off')
|
|
|
|
|
// - no arguments : toggle the state
|
|
|
|
|
//
|
|
|
|
|
// NOTE: of only one callback is given then it will be called after the
|
|
|
|
|
// class change...
|
|
|
|
|
// a way around this is to pass an empty function as callback_b
|
|
|
|
|
//
|
|
|
|
|
function createCSSClassToggler(elem, css_class, callback_a, callback_b){
|
|
|
|
|
// prepare the pre/post callbacks...
|
|
|
|
|
if(callback_b == null){
|
|
|
|
|
var callback_pre = null
|
|
|
|
|
var callback_post = callback_a
|
|
|
|
|
} else {
|
|
|
|
|
var callback_pre = callback_a
|
|
|
|
|
var callback_post = callback_b
|
|
|
|
|
}
|
|
|
|
|
// build the acual toggler function...
|
|
|
|
|
var func = function(action){
|
|
|
|
|
if(action == null || action == '?'){
|
|
|
|
|
var getter = action == '?' ? true : false
|
|
|
|
|
action = 'on'
|
|
|
|
|
// get current state...
|
|
|
|
|
if( $(elem).hasClass(css_class) ){
|
|
|
|
|
action = 'off'
|
|
|
|
|
}
|
|
|
|
|
if(getter){
|
|
|
|
|
// as the above actions indicate intent and not state,
|
|
|
|
|
// we'll need to swap the values...
|
|
|
|
|
return action == 'on' ? 'off' : 'on'
|
|
|
|
|
}
|
2013-01-21 05:55:56 +04:00
|
|
|
}
|
2013-01-21 18:04:10 +04:00
|
|
|
if(callback_pre != null){
|
|
|
|
|
callback_pre(action)
|
|
|
|
|
}
|
|
|
|
|
// play with the class...
|
|
|
|
|
if(action == 'on'){
|
|
|
|
|
$(elem).addClass(css_class)
|
|
|
|
|
} else {
|
|
|
|
|
$(elem).removeClass(css_class)
|
|
|
|
|
}
|
|
|
|
|
if(callback_post != null){
|
|
|
|
|
callback_post(action)
|
2013-01-21 05:55:56 +04:00
|
|
|
}
|
|
|
|
|
}
|
2013-01-21 18:04:10 +04:00
|
|
|
func.doc = 'With no arguments this will toggle between "on" and '+
|
|
|
|
|
'"off".\n'+
|
|
|
|
|
'If either "on" or "off" are given then this will switch '+
|
|
|
|
|
'to that mode.\n'+
|
|
|
|
|
'If "?" is given, this will return either "on" or "off" '+
|
|
|
|
|
'depending on the current state.'
|
|
|
|
|
return func
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-01-22 18:39:44 +04:00
|
|
|
// show a jQuary opject in viewer overlay...
|
|
|
|
|
// XXX need to set .scrollTop(0) when showing different UI...
|
|
|
|
|
// ...and not set it when the UI is the same
|
|
|
|
|
// XXX this must create it's own overlay...
|
|
|
|
|
function showInOverlay(obj){
|
|
|
|
|
obj.click(function(){ return false })
|
|
|
|
|
// XXX
|
|
|
|
|
$('.viewer').addClass('overlay-mode')
|
|
|
|
|
// clean things up...
|
|
|
|
|
$('.overlay .content').children().remove()
|
|
|
|
|
// put it in the overlay...
|
|
|
|
|
$('.overlay .content').append(obj)
|
|
|
|
|
// prepare the overlay...
|
|
|
|
|
$('.overlay')
|
|
|
|
|
.one('click', function(){
|
|
|
|
|
$('.overlay')
|
|
|
|
|
.fadeOut(function(){
|
|
|
|
|
$('.overlay .content')
|
|
|
|
|
.children()
|
|
|
|
|
.remove()
|
|
|
|
|
$('.overlay-mode').removeClass('overlay-mode')
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.fadeIn()
|
|
|
|
|
return obj
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function overlayMessage(text){
|
|
|
|
|
return showInOverlay($('<div class="overlay-message">' +text+ '</div>'))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2013-01-21 07:11:51 +04:00
|
|
|
// XXX might be good to use apply here...
|
|
|
|
|
function doWithoutTransitions(obj, func, time){
|
|
|
|
|
if(time == null){
|
|
|
|
|
time = 5
|
|
|
|
|
}
|
|
|
|
|
obj.addClass('unanimated')
|
|
|
|
|
var res = func()
|
|
|
|
|
setTimeout(function(){obj.removeClass('unanimated')}, time)
|
|
|
|
|
return res
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function unanimated(obj, func, time){
|
|
|
|
|
return function(){
|
|
|
|
|
if(time == null){
|
|
|
|
|
time = 5
|
|
|
|
|
}
|
|
|
|
|
obj.addClass('unanimated')
|
|
|
|
|
var res = func.apply(func, arguments)
|
|
|
|
|
setTimeout(function(){obj.removeClass('unanimated')}, time)
|
|
|
|
|
return res
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-21 18:04:10 +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])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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-21 20:05:05 +04:00
|
|
|
togglePageDragging = createCSSClassToggler(
|
|
|
|
|
'.viewer',
|
|
|
|
|
'dragging')
|
|
|
|
|
|
|
|
|
|
|
2013-01-22 00:36:32 +04:00
|
|
|
var FIT_PAGE_TO_VIEW = true
|
|
|
|
|
|
2013-01-21 18:04:10 +04:00
|
|
|
togglePageView = createCSSClassToggler(
|
|
|
|
|
'.viewer',
|
|
|
|
|
'page-view-mode',
|
|
|
|
|
null,
|
|
|
|
|
// post-change callback...
|
|
|
|
|
function(){
|
|
|
|
|
if(togglePageView('?') == 'on'){
|
|
|
|
|
PAGES_VISIBLE = 1
|
2013-01-22 00:36:32 +04:00
|
|
|
if(FIT_PAGE_TO_VIEW){
|
|
|
|
|
fitPagesToViewer(PAGES_VISIBLE)
|
|
|
|
|
} else {
|
|
|
|
|
fitNPages(PAGES_VISIBLE)
|
|
|
|
|
// to prevent drag while zooming to affect
|
|
|
|
|
// the resulting position set it to current
|
|
|
|
|
// page...
|
|
|
|
|
// XXX now this is done by fitNPages
|
|
|
|
|
setCurrentPage()
|
|
|
|
|
}
|
2013-01-21 18:04:10 +04:00
|
|
|
} else {
|
|
|
|
|
PAGES_VISIBLE = PAGES_IN_RIBBON
|
2013-01-22 00:36:32 +04:00
|
|
|
if(FIT_PAGE_TO_VIEW){
|
|
|
|
|
// XXX this needs to be done before transitions...
|
|
|
|
|
fitPagesToContent(PAGES_VISIBLE)
|
|
|
|
|
} else {
|
|
|
|
|
fitNPages(PAGES_VISIBLE)
|
|
|
|
|
}
|
2013-01-21 18:04:10 +04:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function getPageScale(){
|
|
|
|
|
return getElementScale($('.scaler'))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fitNPages(n){
|
|
|
|
|
if(n==null){
|
|
|
|
|
n = 1
|
|
|
|
|
}
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
var view = $('.viewer')
|
|
|
|
|
var W = view.width()
|
|
|
|
|
var H = view.height()
|
|
|
|
|
var w = pages.width()
|
|
|
|
|
var h = pages.height()
|
|
|
|
|
|
|
|
|
|
var scale = W/(w*n)
|
|
|
|
|
|
|
|
|
|
// fit vertically if needed...
|
|
|
|
|
if(h*scale > H){
|
|
|
|
|
scale = H/h
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setElementScale($('.scaler'), scale)
|
|
|
|
|
|
2013-01-22 00:36:32 +04:00
|
|
|
/* XXX
|
2013-01-21 18:04:10 +04:00
|
|
|
fitPagesTo(null, n)
|
2013-01-21 19:50:23 +04:00
|
|
|
*/
|
2013-01-21 18:04:10 +04:00
|
|
|
}
|
2013-01-21 07:11:51 +04:00
|
|
|
|
2013-01-21 19:43:05 +04:00
|
|
|
// NOTE: this is a single big function because we need to thread data
|
2013-01-21 18:04:10 +04:00
|
|
|
// through to avoid sampling while animating...
|
2013-01-21 19:43:05 +04:00
|
|
|
// XXX try and do the fitting with pure CSS...
|
|
|
|
|
// XXX BUG: changing width when content is constrained only horizontally
|
|
|
|
|
// breaks this...
|
2013-01-21 18:04:10 +04:00
|
|
|
function fitPagesTo(elem, n){
|
|
|
|
|
if(n==null){
|
|
|
|
|
n = 1
|
|
|
|
|
}
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
var view = $('.viewer')
|
2013-01-21 19:43:05 +04:00
|
|
|
var content = $('.content')
|
2013-01-21 18:04:10 +04:00
|
|
|
if(elem == null){
|
|
|
|
|
elem = view
|
|
|
|
|
} else {
|
|
|
|
|
elem = $(elem)
|
|
|
|
|
}
|
2013-01-21 07:11:51 +04:00
|
|
|
|
2013-01-21 18:04:10 +04:00
|
|
|
// sample data...
|
|
|
|
|
var vW = view.width()
|
|
|
|
|
var vH = view.height()
|
2013-01-21 19:43:05 +04:00
|
|
|
var cW = content.width()
|
|
|
|
|
var cH = content.height()
|
2013-01-21 18:04:10 +04:00
|
|
|
var W = elem.width()
|
|
|
|
|
var H = elem.height()
|
|
|
|
|
var w = pages.width()
|
|
|
|
|
var h = pages.height()
|
|
|
|
|
var rW = w
|
2013-01-21 19:43:05 +04:00
|
|
|
var rH = h
|
2013-01-21 18:04:10 +04:00
|
|
|
|
|
|
|
|
// NOTE: there must be no data sampling after this point...
|
|
|
|
|
// this is due to the fact that we will start changing stuff next
|
|
|
|
|
// and if CSS transitions are at play new samples will be off...
|
|
|
|
|
|
2013-01-21 19:43:05 +04:00
|
|
|
|
2013-01-22 00:57:01 +04:00
|
|
|
// XXX fitting works ONLY in one direction, if both sides need
|
2013-01-21 19:43:05 +04:00
|
|
|
// to be adjusted the this breaks everything...
|
2013-01-22 00:57:01 +04:00
|
|
|
|
2013-01-21 18:04:10 +04:00
|
|
|
// do the fitting...
|
2013-01-21 19:43:05 +04:00
|
|
|
if(W-cW/H-cH > 1){
|
|
|
|
|
rW = W * (cH/H)
|
2013-01-21 18:04:10 +04:00
|
|
|
pages.width(rW)
|
2013-01-21 19:43:05 +04:00
|
|
|
pages.height(cH)
|
2013-01-21 18:04:10 +04:00
|
|
|
$('.magazine').css({
|
|
|
|
|
'margin-left': -rW/2
|
|
|
|
|
})
|
2013-01-21 19:43:05 +04:00
|
|
|
}
|
|
|
|
|
if(W-cW/H-cH < 1){
|
|
|
|
|
rH = H * (cW/W)
|
|
|
|
|
pages.height(rH)
|
|
|
|
|
pages.width(cW)
|
|
|
|
|
$('.page').css({
|
|
|
|
|
'margin-top': -rH/2
|
|
|
|
|
})
|
2013-01-21 18:04:10 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// scale horizontally...
|
2013-01-22 00:57:01 +04:00
|
|
|
// NOTE: this is done so as to keep the scale within the content constant...
|
2013-01-21 18:04:10 +04:00
|
|
|
var scale = vW/(rW*n)
|
|
|
|
|
// or scale vertically if needed...
|
2013-01-21 19:43:05 +04:00
|
|
|
// XXX broken
|
2013-01-21 19:50:23 +04:00
|
|
|
//if(rH*scale > vH){
|
|
|
|
|
// scale = vH/rH
|
|
|
|
|
//}
|
2013-01-21 18:04:10 +04:00
|
|
|
|
|
|
|
|
setElementScale($('.scaler'), scale)
|
|
|
|
|
// update position using the new width...
|
|
|
|
|
setCurrentPage(null, rW)
|
|
|
|
|
}
|
2013-01-21 19:50:23 +04:00
|
|
|
|
2013-01-21 18:04:10 +04:00
|
|
|
|
|
|
|
|
function fitPagesToViewer(n){
|
|
|
|
|
fitPagesTo('.viewer', n)
|
|
|
|
|
}
|
|
|
|
|
function fitPagesToContent(n){
|
|
|
|
|
fitPagesTo('.page .content', n)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function swipeUpdate(evt, phase, direction, distance){
|
|
|
|
|
var pages = $('.page')
|
|
|
|
|
var cur = $('.current.page')
|
|
|
|
|
var n = pages.index(cur)
|
|
|
|
|
var scale = getPageScale()
|
|
|
|
|
var mag = $('.magazine')
|
|
|
|
|
|
|
|
|
|
if( phase=='move' && (direction=='left' || direction=='right') ){
|
|
|
|
|
mag.addClass('unanimated')
|
|
|
|
|
if (direction == 'left'){
|
|
|
|
|
$('.magazine').css({left: -n*cur.width()-distance/scale})
|
|
|
|
|
} else if (direction == 'right') {
|
|
|
|
|
$('.magazine').css({left: -n*cur.width()+distance/scale})
|
|
|
|
|
}
|
|
|
|
|
setTimeout(function(){mag.removeClass('unanimated')}, 5)
|
|
|
|
|
|
2013-01-21 20:05:05 +04:00
|
|
|
} else if ( phase == 'start') {
|
|
|
|
|
togglePageDragging('on')
|
|
|
|
|
|
2013-01-21 18:04:10 +04:00
|
|
|
} else if ( phase == 'cancel') {
|
2013-01-21 20:05:05 +04:00
|
|
|
togglePageDragging('off')
|
2013-01-21 18:04:10 +04:00
|
|
|
setCurrentPage()
|
|
|
|
|
|
|
|
|
|
} else if ( phase =='end' ) {
|
2013-01-21 20:05:05 +04:00
|
|
|
togglePageDragging('off')
|
2013-01-21 18:04:10 +04:00
|
|
|
// see which page is closer to the middle of the screen and set it...
|
|
|
|
|
// do this based on how much we dragged...
|
|
|
|
|
var p = Math.ceil((distance/scale)/cur.width())
|
|
|
|
|
|
|
|
|
|
// prev page...
|
|
|
|
|
if(direction == 'right') {
|
|
|
|
|
setCurrentPage(Math.max(n-p, 0))
|
|
|
|
|
// next page...
|
|
|
|
|
} else if (direction == 'left'){
|
|
|
|
|
setCurrentPage(Math.min(n+p, pages.length-1))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-01-22 18:04:33 +04:00
|
|
|
// XXX store the current page...
|
2013-01-21 18:04:10 +04:00
|
|
|
function setCurrentPage(n, W){
|
2013-01-21 05:55:56 +04:00
|
|
|
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')
|
|
|
|
|
|
2013-01-21 07:11:51 +04:00
|
|
|
var mag = $('.magazine')
|
2013-01-21 18:04:10 +04:00
|
|
|
var W = W == null ? cur.width() : W
|
|
|
|
|
mag.css({left: -n*W})
|
2013-01-21 05:55:56 +04:00
|
|
|
|
2013-01-22 18:04:33 +04:00
|
|
|
// XXX should this be here???
|
|
|
|
|
saveState()
|
|
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
return cur
|
2013-01-11 18:48:15 +04:00
|
|
|
}
|
|
|
|
|
|
2013-01-22 18:04:33 +04:00
|
|
|
function getPageNumber(page){
|
|
|
|
|
if(page == null){
|
|
|
|
|
page = $('.current.page')
|
|
|
|
|
}
|
|
|
|
|
return $('.page').index(page)
|
|
|
|
|
}
|
|
|
|
|
|
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 07:29:30 +04:00
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
function goToMagazineCover(){
|
|
|
|
|
setCurrentPage(0)
|
|
|
|
|
}
|
|
|
|
|
function goToArticleCover(){
|
|
|
|
|
setCurrentPage($('.current.page').parents('.article').children('.page').first())
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-01-21 07:29:30 +04:00
|
|
|
|
2013-01-21 05:55:56 +04:00
|
|
|
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
|
|
|
|
2013-01-22 19:19:43 +04:00
|
|
|
/*********************************************************************/
|
|
|
|
|
// XXX make these magazine-specific...
|
|
|
|
|
// URL state managers...
|
|
|
|
|
function loadURLState(){
|
|
|
|
|
if(window.location.hash == ''){
|
|
|
|
|
return 0
|
|
|
|
|
}
|
|
|
|
|
var n = parseInt(window.location.hash.split('#')[1])
|
|
|
|
|
if(n != null){
|
|
|
|
|
return n
|
|
|
|
|
} else {
|
|
|
|
|
alert('textual anchors not yet supported...')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function saveURLState(){
|
|
|
|
|
window.location.hash = getPageNumber()
|
2013-01-22 18:04:33 +04:00
|
|
|
}
|
|
|
|
|
|
2013-01-22 19:19:43 +04:00
|
|
|
// local storage state managers...
|
|
|
|
|
function loadStorageState(){
|
|
|
|
|
return parseInt($.jStorage.get('current_page'), 0)
|
|
|
|
|
}
|
|
|
|
|
function saveStorageState(){
|
2013-01-22 18:04:33 +04:00
|
|
|
$.jStorage.set('current_page', getPageNumber())
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-22 19:19:43 +04:00
|
|
|
// generic state managers...
|
|
|
|
|
function loadState(){
|
|
|
|
|
var n = loadURLState()
|
|
|
|
|
if(n != null){
|
|
|
|
|
setCurrentPage(n)
|
|
|
|
|
} else {
|
|
|
|
|
setCurrentPage(loadStorageState())
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function saveState(){
|
|
|
|
|
saveURLState()
|
|
|
|
|
saveStorageState()
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-22 18:04:33 +04:00
|
|
|
|
2013-01-22 19:19:43 +04:00
|
|
|
/*********************************************************************/
|
2013-01-22 18:04:33 +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-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-22 19:03:26 +04:00
|
|
|
$(window)
|
|
|
|
|
.resize(function() {
|
|
|
|
|
fitNPages(PAGES_VISIBLE)
|
|
|
|
|
})
|
|
|
|
|
.bind('hashchange', function(){
|
2013-01-22 19:19:43 +04:00
|
|
|
setCurrentPage(loadURLState())
|
2013-01-22 19:03:26 +04:00
|
|
|
})
|
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:28:12 +04:00
|
|
|
// XXX STUB: for device debugging reasons...
|
|
|
|
|
$('.splash')
|
|
|
|
|
.swipe({click: function(){
|
|
|
|
|
$('.splash').fadeOut()
|
|
|
|
|
}})
|
|
|
|
|
|
|
|
|
|
|
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>
|
