mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 12:00:11 +00:00
transitioned to the new layout...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
f76e4a3887
commit
64cababc1a
151
index-old.html
Executable file
151
index-old.html
Executable file
@ -0,0 +1,151 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>layout template</title>
|
||||||
|
<link rel="stylesheet" href="layout.css">
|
||||||
|
<script src="jquery.js"></script>
|
||||||
|
<script src="jquery.touchSwipe.js"></script>
|
||||||
|
<script src="jquery.exif.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('.article').click(function(){
|
||||||
|
var name = $(this).attr('id')
|
||||||
|
return setPageTo(name)
|
||||||
|
})
|
||||||
|
|
||||||
|
$('.viewer')
|
||||||
|
//.click(toggleIndex)
|
||||||
|
.swipe({
|
||||||
|
swipeLeft: nextPage,
|
||||||
|
swipeRight: prevPage,
|
||||||
|
swipeUp: showIndex,
|
||||||
|
swipeDown: hideIndex
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function getPages(){
|
||||||
|
return $('.article').map(function(e, v){return v.id}).toArray()
|
||||||
|
}
|
||||||
|
|
||||||
|
function curPageIndex(){
|
||||||
|
var cur = $('.article.current').attr('id')
|
||||||
|
return getPages().indexOf(cur)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPageTo(name){
|
||||||
|
$('.view.current, .article.current').removeClass('current')
|
||||||
|
$('#'+name).addClass('current')
|
||||||
|
$('.view.'+name).addClass('current')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextPage(){
|
||||||
|
var i = curPageIndex()
|
||||||
|
var pages = getPages()
|
||||||
|
|
||||||
|
if(i+1 >= pages.length){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setPageTo(pages[i+1])
|
||||||
|
}
|
||||||
|
|
||||||
|
function prevPage(){
|
||||||
|
var i = curPageIndex()
|
||||||
|
|
||||||
|
if(i <= 0){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setPageTo(getPages()[i-1])
|
||||||
|
}
|
||||||
|
|
||||||
|
function showIndex(){
|
||||||
|
//$('.previews').fadeIn()
|
||||||
|
$('.previews').slideDown(100)
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideIndex(){
|
||||||
|
//$('.previews').fadeOut()
|
||||||
|
$('.previews').slideUp(100)
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleIndex(){
|
||||||
|
if($('.previews').css('display') == 'none'){
|
||||||
|
showIndex()
|
||||||
|
} else {
|
||||||
|
hideIndex()
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="content">
|
||||||
|
<div class="section main current">
|
||||||
|
<div class="viewer">
|
||||||
|
<div class="view A current">
|
||||||
|
<h1>Page A</h1>
|
||||||
|
<p>
|
||||||
|
The basic actions here are:<br>
|
||||||
|
<br><b>swipe right</b> – show next page.
|
||||||
|
<br><b>swipe left</b> – show previous page.
|
||||||
|
<br><b>swipe up</b> – show page index.
|
||||||
|
<br><b>swipe down</b> – hide page index.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="view B">
|
||||||
|
<div style="height: 95%; width: 95%; margin: 2%; border: 5px dotted gray;">
|
||||||
|
<h2>Page B</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="view C">
|
||||||
|
<h2>Page C</h2>
|
||||||
|
<!-- images need caching... -->
|
||||||
|
<!--img src="img.jpg" exif="true" onclick="alert($(this).exifPretty())"/-->
|
||||||
|
<img src="img.jpg"/>
|
||||||
|
</div>
|
||||||
|
<div class="view D">
|
||||||
|
<h2>Page D</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- remove this... -->
|
||||||
|
<div class="previews">
|
||||||
|
<div class="article current" id="A">
|
||||||
|
<div class="preview"></div>
|
||||||
|
<div class="text">
|
||||||
|
Article A Title
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article" id="B">
|
||||||
|
<div class="preview"></div>
|
||||||
|
<div class="text">
|
||||||
|
Article B Title
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article" id="C">
|
||||||
|
<div class="preview"></div>
|
||||||
|
<div class="text">
|
||||||
|
Article C Title
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article" id="D">
|
||||||
|
<div class="preview"></div>
|
||||||
|
<div class="text">
|
||||||
|
Article D Title
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- vim:set ts=4 sw=4 spell : -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
383
index.html
383
index.html
@ -1,151 +1,310 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>layout template</title>
|
<title>Magazine</title>
|
||||||
<link rel="stylesheet" href="layout.css">
|
<link rel="stylesheet" href="magazine.css">
|
||||||
<script src="jquery.js"></script>
|
<script src="jquery.js"></script>
|
||||||
<script src="jquery.touchSwipe.js"></script>
|
<script src="jquery.touchSwipe.js"></script>
|
||||||
<script src="jquery.exif.js"></script>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
$('.article').click(function(){
|
|
||||||
var name = $(this).attr('id')
|
|
||||||
return setPageTo(name)
|
|
||||||
})
|
|
||||||
|
|
||||||
$('.viewer')
|
$('.viewer')
|
||||||
//.click(toggleIndex)
|
|
||||||
.swipe({
|
.swipe({
|
||||||
swipeLeft: nextPage,
|
//swipeLeft: nextPage,
|
||||||
swipeRight: prevPage,
|
//swipeRight: prevPage,
|
||||||
swipeUp: showIndex,
|
swipeStatus: swipeUpdate,
|
||||||
swipeDown: hideIndex
|
// XXX change this to pinch...
|
||||||
|
swipeUp: function(){fitNPages(6)},
|
||||||
|
// XXX change this to pinch...
|
||||||
|
swipeDown: function(){
|
||||||
|
fitNPages(1)
|
||||||
|
// 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
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// XXX add splash screen...
|
||||||
|
|
||||||
|
fitNPages(1)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
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')
|
||||||
|
|
||||||
|
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})
|
||||||
|
|
||||||
function getPages(){
|
} else if ( phase == 'cancel') {
|
||||||
return $('.article').map(function(e, v){return v.id}).toArray()
|
setCurrentPage()
|
||||||
|
|
||||||
|
} 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())
|
||||||
|
|
||||||
|
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))
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function curPageIndex(){
|
|
||||||
var cur = $('.article.current').attr('id')
|
function setCurrentPage(n){
|
||||||
return getPages().indexOf(cur)
|
var cur
|
||||||
|
if(n == null){
|
||||||
|
cur = $('.current.page')
|
||||||
|
n = $('.page').index(cur)
|
||||||
|
} else if(typeof(n) == typeof(1)) {
|
||||||
|
cur = $($('.page')[n])
|
||||||
|
} else {
|
||||||
|
cur = n
|
||||||
|
n = $('.page').index(cur)
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.current.page').removeClass('current')
|
||||||
|
cur.addClass('current')
|
||||||
|
|
||||||
|
$('.magazine').css({left: -n*cur.width()})
|
||||||
|
|
||||||
|
return cur
|
||||||
}
|
}
|
||||||
|
|
||||||
function setPageTo(name){
|
|
||||||
$('.view.current, .article.current').removeClass('current')
|
|
||||||
$('#'+name).addClass('current')
|
|
||||||
$('.view.'+name).addClass('current')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextPage(){
|
function nextPage(){
|
||||||
var i = curPageIndex()
|
var pages = $('.page')
|
||||||
var pages = getPages()
|
var cur = $('.current.page')
|
||||||
|
return setCurrentPage(Math.min(pages.index(cur)+1, pages.length-1))
|
||||||
if(i+1 >= pages.length){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setPageTo(pages[i+1])
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function prevPage(){
|
function prevPage(){
|
||||||
var i = curPageIndex()
|
var pages = $('.page')
|
||||||
|
var cur = $('.current.page')
|
||||||
|
return setCurrentPage(Math.max(pages.index(cur)-1, 0))
|
||||||
|
}
|
||||||
|
|
||||||
if(i <= 0){
|
|
||||||
return
|
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())
|
||||||
}
|
}
|
||||||
|
// just find the next one...
|
||||||
|
var articles = $('.article')
|
||||||
|
return setCurrentPage(
|
||||||
|
$(articles[Math.min(articles.index(cur)+1, articles.length-1)])
|
||||||
|
.children('.page')
|
||||||
|
.first())
|
||||||
|
|
||||||
setPageTo(getPages()[i-1])
|
|
||||||
}
|
}
|
||||||
|
// XXX this is almost exactly the same as nextArticle...
|
||||||
function showIndex(){
|
function prevArticle(){
|
||||||
//$('.previews').fadeIn()
|
var cur = $('.current.page').parents('.article')
|
||||||
$('.previews').slideDown(100)
|
// we are at the magazine cover cover...
|
||||||
}
|
if(cur.length == 0){
|
||||||
|
return $('.current.page')
|
||||||
function hideIndex(){
|
|
||||||
//$('.previews').fadeOut()
|
|
||||||
$('.previews').slideUp(100)
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleIndex(){
|
|
||||||
if($('.previews').css('display') == 'none'){
|
|
||||||
showIndex()
|
|
||||||
} else {
|
|
||||||
hideIndex()
|
|
||||||
}
|
}
|
||||||
return false
|
// just find the prev one...
|
||||||
|
var articles = $('.article')
|
||||||
|
return setCurrentPage(
|
||||||
|
$(articles[Math.max(articles.index(cur)-1, 0)])
|
||||||
|
.children('.page')
|
||||||
|
.first())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 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+')',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function fitNPages(n){
|
||||||
|
if(n==null){
|
||||||
|
n = 1
|
||||||
|
}
|
||||||
|
var pages = $('.page')
|
||||||
|
var scale = $('.viewer').width()/(pages.width()*n)
|
||||||
|
|
||||||
|
setElementScale($('.scaler'), scale)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 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>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
|
||||||
<div class="content">
|
|
||||||
<div class="section main current">
|
|
||||||
<div class="viewer">
|
|
||||||
<div class="view A current">
|
|
||||||
<h1>Page A</h1>
|
|
||||||
<p>
|
|
||||||
The basic actions here are:<br>
|
|
||||||
<br><b>swipe right</b> – show next page.
|
|
||||||
<br><b>swipe left</b> – show previous page.
|
|
||||||
<br><b>swipe up</b> – show page index.
|
|
||||||
<br><b>swipe down</b> – hide page index.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="view B">
|
|
||||||
<div style="height: 95%; width: 95%; margin: 2%; border: 5px dotted gray;">
|
|
||||||
<h2>Page B</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<div class="viewer">
|
||||||
<div class="view C">
|
<div class="scaler">
|
||||||
<h2>Page C</h2>
|
<div class="aligner">
|
||||||
<!-- images need caching... -->
|
<div class="magazine">
|
||||||
<!--img src="img.jpg" exif="true" onclick="alert($(this).exifPretty())"/-->
|
<div class="cover page current">
|
||||||
<img src="img.jpg"/>
|
Magazine Cover
|
||||||
</div>
|
</div>
|
||||||
<div class="view D">
|
|
||||||
<h2>Page D</h2>
|
<!-- XXX do we need a Magazine Credits page??? -->
|
||||||
</div>
|
|
||||||
</div>
|
<div class="article">
|
||||||
<!-- remove this... -->
|
<div class="cover page">
|
||||||
<div class="previews">
|
Article Cover<br>
|
||||||
<div class="article current" id="A">
|
some more text...
|
||||||
<div class="preview"></div>
|
</div>
|
||||||
<div class="text">
|
|
||||||
Article A Title
|
<!-- XXX do we need an Article Credits page??? -->
|
||||||
</div>
|
|
||||||
</div>
|
<div class="page">
|
||||||
<div class="article" id="B">
|
Page
|
||||||
<div class="preview"></div>
|
</div>
|
||||||
<div class="text">
|
<div class="page">
|
||||||
Article B Title
|
Page
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="page">
|
||||||
<div class="article" id="C">
|
Page
|
||||||
<div class="preview"></div>
|
</div>
|
||||||
<div class="text">
|
</div>
|
||||||
Article C Title
|
<div class="article">
|
||||||
</div>
|
<div class="cover page">
|
||||||
</div>
|
Article Cover
|
||||||
<div class="article" id="D">
|
</div>
|
||||||
<div class="preview"></div>
|
|
||||||
<div class="text">
|
<div class="page">
|
||||||
Article D Title
|
Page
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="page">
|
||||||
</div>
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- vim:set ts=4 sw=4 spell : -->
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
310
magazine.html
310
magazine.html
@ -1,310 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Magazine</title>
|
|
||||||
<link rel="stylesheet" href="magazine.css">
|
|
||||||
<script src="jquery.js"></script>
|
|
||||||
<script src="jquery.touchSwipe.js"></script>
|
|
||||||
<script>
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
$('.viewer')
|
|
||||||
.swipe({
|
|
||||||
//swipeLeft: nextPage,
|
|
||||||
//swipeRight: prevPage,
|
|
||||||
swipeStatus: swipeUpdate,
|
|
||||||
// XXX change this to pinch...
|
|
||||||
swipeUp: function(){fitNPages(6)},
|
|
||||||
// XXX change this to pinch...
|
|
||||||
swipeDown: function(){
|
|
||||||
fitNPages(1)
|
|
||||||
// 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
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// XXX add splash screen...
|
|
||||||
|
|
||||||
fitNPages(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
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')
|
|
||||||
|
|
||||||
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})
|
|
||||||
|
|
||||||
} else if ( phase == 'cancel') {
|
|
||||||
setCurrentPage()
|
|
||||||
|
|
||||||
} 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())
|
|
||||||
|
|
||||||
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))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function setCurrentPage(n){
|
|
||||||
var cur
|
|
||||||
if(n == null){
|
|
||||||
cur = $('.current.page')
|
|
||||||
n = $('.page').index(cur)
|
|
||||||
} else if(typeof(n) == typeof(1)) {
|
|
||||||
cur = $($('.page')[n])
|
|
||||||
} else {
|
|
||||||
cur = n
|
|
||||||
n = $('.page').index(cur)
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.current.page').removeClass('current')
|
|
||||||
cur.addClass('current')
|
|
||||||
|
|
||||||
$('.magazine').css({left: -n*cur.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 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())
|
|
||||||
}
|
|
||||||
// just find the next one...
|
|
||||||
var articles = $('.article')
|
|
||||||
return setCurrentPage(
|
|
||||||
$(articles[Math.min(articles.index(cur)+1, articles.length-1)])
|
|
||||||
.children('.page')
|
|
||||||
.first())
|
|
||||||
|
|
||||||
}
|
|
||||||
// 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())
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 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+')',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function fitNPages(n){
|
|
||||||
if(n==null){
|
|
||||||
n = 1
|
|
||||||
}
|
|
||||||
var pages = $('.page')
|
|
||||||
var scale = $('.viewer').width()/(pages.width()*n)
|
|
||||||
|
|
||||||
setElementScale($('.scaler'), scale)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 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>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user