mirror of
https://github.com/flynx/PortableMag.git
synced 2025-11-04 05:50:19 +00:00
split off the navigator code into it's own file...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
5f18f87e74
commit
30083d52a2
@ -13,6 +13,7 @@
|
||||
|
||||
<script src="jli.js"></script>
|
||||
<script src="magazine.js"></script>
|
||||
<script src="navigator.js"></script>
|
||||
|
||||
<!-- configuration, keep this last... -->
|
||||
<script src="keybindings.js"></script>
|
||||
|
||||
163
magazine.js
163
magazine.js
@ -555,163 +555,6 @@ function prevBookmark(){
|
||||
|
||||
|
||||
|
||||
/******************************************************* navigator ***/
|
||||
// NOTE: the navigator is not live and will need to get regenerated on
|
||||
// each magazine edit...
|
||||
|
||||
// NOTE: article indicators will be regenirated on magazine structure
|
||||
// change, so there is no use of linking to actual pages.
|
||||
// ...no need in making this live.
|
||||
function makeArticleIndicator(i, article, width){
|
||||
var bar = $('.navigator .bar')
|
||||
var article = $(article)
|
||||
var n = getPageNumber(article.children('.cover').first())
|
||||
$('<div/>')
|
||||
.prependTo($('.navigator .bar'))
|
||||
.addClass('article')
|
||||
.css({
|
||||
width: width,
|
||||
left: width*n
|
||||
})
|
||||
.swipe({
|
||||
click: function(){
|
||||
setCurrentPage(n)
|
||||
}
|
||||
})
|
||||
return article
|
||||
}
|
||||
|
||||
|
||||
function setupArticleIndicators(W){
|
||||
var articles = $('.magazine .article')
|
||||
// cleanup...
|
||||
clearArticleIndicators()
|
||||
// set article indicator positions...
|
||||
articles.each(function(i, e){
|
||||
return makeArticleIndicator(i, e, W)
|
||||
})
|
||||
}
|
||||
|
||||
function clearArticleIndicators(){
|
||||
$('.navigator .bar .article').remove()
|
||||
}
|
||||
|
||||
|
||||
function setupNavigator(){
|
||||
var bar = $('.navigator .bar')
|
||||
var elems = $('.navigator .indicator, .navigator .article')
|
||||
var pos = $('.navigator .indicator').fadeIn()
|
||||
var pages = $('.page').length
|
||||
var mag = $('.magazine')
|
||||
|
||||
var W = bar.width()/pages
|
||||
|
||||
setupArticleIndicators(W)
|
||||
|
||||
// set navigator element sizes...
|
||||
elems.css({
|
||||
width: W
|
||||
})
|
||||
|
||||
updateNavigator()
|
||||
|
||||
// need to reconstruct indicators...
|
||||
$('.magazine .page .bookmark').each(function(_, e){
|
||||
makeBookmarkIndicator($(e).parents('.page'))
|
||||
})
|
||||
|
||||
// setup event handlers...
|
||||
$('.viewer')
|
||||
.on('pageChanged', function(e, n){updateNavigator(n)})
|
||||
.on('magazineDragging', function(){updateNavigator()})
|
||||
}
|
||||
|
||||
// XXX this needs to unbind events...
|
||||
function clearNavigator(){
|
||||
$('.navigator .indicator').hide()
|
||||
clearBookmarkIndicators()
|
||||
clearArticleIndicators()
|
||||
}
|
||||
|
||||
function resetNavigator(){
|
||||
clearNavigator()
|
||||
setupNavigator()
|
||||
}
|
||||
|
||||
|
||||
function updateNavigator(n){
|
||||
var mag = $('.magazine')
|
||||
var page = $('.page')
|
||||
var bar = $('.navigator .bar')
|
||||
var pos = $('.navigator .indicator')
|
||||
|
||||
var pn = page.length
|
||||
|
||||
var bW = bar.width()
|
||||
var mW = mag.width()
|
||||
var PW = page.width()
|
||||
var pW = bar.width()/pn
|
||||
|
||||
if(n == null){
|
||||
// XXX this behaves erratically if the page is zoomed...
|
||||
var res = (-parseFloat(mag.css('left'))/(mW-PW)) * (bW-pW)
|
||||
} else {
|
||||
res = pW*n
|
||||
}
|
||||
|
||||
// normalize the position...
|
||||
res = res > 0 ? res: 0
|
||||
res = res < (bW-pW) ? res: (bW-pW)
|
||||
|
||||
// set indicator position...
|
||||
pos.css({
|
||||
left: res
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function makeBookmarkIndicator(n){
|
||||
if(n == null){
|
||||
n = getPageNumber()
|
||||
} else if(typeof(n) != typeof(1)){
|
||||
n = getPageNumber(n)
|
||||
}
|
||||
var bar = $('.navigator .bar')
|
||||
var pages = $('.page').length
|
||||
var width = bar.width()/pages
|
||||
var res = $('<div/>')
|
||||
.prependTo($('.navigator .bar'))
|
||||
.addClass('bookmark')
|
||||
.css({
|
||||
left: width*n + width*0.75
|
||||
})
|
||||
.attr({
|
||||
page: n
|
||||
})
|
||||
.swipe({
|
||||
click: function(){
|
||||
setCurrentPage(n)
|
||||
}
|
||||
})
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
function clearBookmarkIndicators(){
|
||||
$('.navigator .bar .bookmark').remove()
|
||||
}
|
||||
function removeBookmarkIndicator(n){
|
||||
$('.navigator .bar .bookmark[page="'+n+'"]').remove()
|
||||
}
|
||||
|
||||
|
||||
// NOTE: this is 1 based page number, the rest of the system is 0 based.
|
||||
function updatePageNumberIndicator(){
|
||||
$('.page-number').text((getPageNumber()+1)+'/'+$('.page').length)
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************** state ****
|
||||
*
|
||||
* Local state consists of:
|
||||
@ -969,6 +812,8 @@ JSONMetadata = {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function readMetadata(elem, res, metadata){
|
||||
if(res == null){
|
||||
res = {}
|
||||
@ -1003,6 +848,7 @@ function writeMetadata(elem, res, metadata){
|
||||
return elem
|
||||
}
|
||||
|
||||
|
||||
function buildJSON(export_bookmarks, export_position){
|
||||
function _getContent(_, elem){
|
||||
elem = $(elem)
|
||||
@ -1093,6 +939,8 @@ function loadJSON(data, ignore_chrome){
|
||||
// XXX check version...
|
||||
var version = data['format-version']
|
||||
if(version != JSON_VERSION){
|
||||
// XXX this might be a good spot to add data conversion between
|
||||
// versions...
|
||||
console.warn('WARNING: JSON Format Version Mismatch.')
|
||||
}
|
||||
|
||||
@ -1104,7 +952,6 @@ function loadJSON(data, ignore_chrome){
|
||||
_build(mag, e)
|
||||
})
|
||||
// remove service classes...
|
||||
// XXX should we do this here, on build or in both places...
|
||||
mag.children('.current.page').removeClass('current')
|
||||
loadMagazineData(mag)
|
||||
|
||||
|
||||
164
navigator.js
Executable file
164
navigator.js
Executable file
@ -0,0 +1,164 @@
|
||||
/**********************************************************************
|
||||
*
|
||||
* Navigator
|
||||
*
|
||||
*
|
||||
**********************************************************************/
|
||||
// NOTE: the navigator is not live and will need to get regenerated on
|
||||
// each magazine edit...
|
||||
|
||||
// NOTE: article indicators will be regenirated on magazine structure
|
||||
// change, so there is no use of linking to actual pages.
|
||||
// ...no need in making this live.
|
||||
function makeArticleIndicator(i, article, width){
|
||||
var bar = $('.navigator .bar')
|
||||
var article = $(article)
|
||||
var n = getPageNumber(article.children('.cover').first())
|
||||
$('<div/>')
|
||||
.prependTo($('.navigator .bar'))
|
||||
.addClass('article')
|
||||
.css({
|
||||
width: width,
|
||||
left: width*n
|
||||
})
|
||||
.swipe({
|
||||
click: function(){
|
||||
setCurrentPage(n)
|
||||
}
|
||||
})
|
||||
return article
|
||||
}
|
||||
|
||||
|
||||
function setupArticleIndicators(W){
|
||||
var articles = $('.magazine .article')
|
||||
// cleanup...
|
||||
clearArticleIndicators()
|
||||
// set article indicator positions...
|
||||
articles.each(function(i, e){
|
||||
return makeArticleIndicator(i, e, W)
|
||||
})
|
||||
}
|
||||
|
||||
function clearArticleIndicators(){
|
||||
$('.navigator .bar .article').remove()
|
||||
}
|
||||
|
||||
|
||||
function setupNavigator(){
|
||||
var bar = $('.navigator .bar')
|
||||
var elems = $('.navigator .indicator, .navigator .article')
|
||||
var pos = $('.navigator .indicator').fadeIn()
|
||||
var pages = $('.page').length
|
||||
var mag = $('.magazine')
|
||||
|
||||
var W = bar.width()/pages
|
||||
|
||||
setupArticleIndicators(W)
|
||||
|
||||
// set navigator element sizes...
|
||||
elems.css({
|
||||
width: W
|
||||
})
|
||||
|
||||
updateNavigator()
|
||||
|
||||
// need to reconstruct indicators...
|
||||
$('.magazine .page .bookmark').each(function(_, e){
|
||||
makeBookmarkIndicator($(e).parents('.page'))
|
||||
})
|
||||
|
||||
// setup event handlers...
|
||||
$('.viewer')
|
||||
.on('pageChanged', function(e, n){updateNavigator(n)})
|
||||
.on('magazineDragging', function(){updateNavigator()})
|
||||
}
|
||||
|
||||
// XXX this needs to unbind events...
|
||||
function clearNavigator(){
|
||||
$('.navigator .indicator').hide()
|
||||
clearBookmarkIndicators()
|
||||
clearArticleIndicators()
|
||||
}
|
||||
|
||||
function resetNavigator(){
|
||||
clearNavigator()
|
||||
setupNavigator()
|
||||
}
|
||||
|
||||
|
||||
function updateNavigator(n){
|
||||
var mag = $('.magazine')
|
||||
var page = $('.page')
|
||||
var bar = $('.navigator .bar')
|
||||
var pos = $('.navigator .indicator')
|
||||
|
||||
var pn = page.length
|
||||
|
||||
var bW = bar.width()
|
||||
var mW = mag.width()
|
||||
var PW = page.width()
|
||||
var pW = bar.width()/pn
|
||||
|
||||
if(n == null){
|
||||
// XXX this behaves erratically if the page is zoomed...
|
||||
var res = (-parseFloat(mag.css('left'))/(mW-PW)) * (bW-pW)
|
||||
} else {
|
||||
res = pW*n
|
||||
}
|
||||
|
||||
// normalize the position...
|
||||
res = res > 0 ? res: 0
|
||||
res = res < (bW-pW) ? res: (bW-pW)
|
||||
|
||||
// set indicator position...
|
||||
pos.css({
|
||||
left: res
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function makeBookmarkIndicator(n){
|
||||
if(n == null){
|
||||
n = getPageNumber()
|
||||
} else if(typeof(n) != typeof(1)){
|
||||
n = getPageNumber(n)
|
||||
}
|
||||
var bar = $('.navigator .bar')
|
||||
var pages = $('.page').length
|
||||
var width = bar.width()/pages
|
||||
var res = $('<div/>')
|
||||
.prependTo($('.navigator .bar'))
|
||||
.addClass('bookmark')
|
||||
.css({
|
||||
left: width*n + width*0.75
|
||||
})
|
||||
.attr({
|
||||
page: n
|
||||
})
|
||||
.swipe({
|
||||
click: function(){
|
||||
setCurrentPage(n)
|
||||
}
|
||||
})
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
function clearBookmarkIndicators(){
|
||||
$('.navigator .bar .bookmark').remove()
|
||||
}
|
||||
function removeBookmarkIndicator(n){
|
||||
$('.navigator .bar .bookmark[page="'+n+'"]').remove()
|
||||
}
|
||||
|
||||
|
||||
// NOTE: this is 1 based page number, the rest of the system is 0 based.
|
||||
function updatePageNumberIndicator(){
|
||||
$('.page-number').text((getPageNumber()+1)+'/'+$('.page').length)
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
// vim:set ts=4 sw=4 :
|
||||
Loading…
x
Reference in New Issue
Block a user