mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 03:00:09 +00:00
some refactoring -- decoupled the indicator and bookmarks, now event-based interactions only...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
66deda6eb0
commit
64fe22fe3c
@ -39,6 +39,13 @@ $(document).ready(function(){
|
||||
.keydown(makeKeyboardHandler(keybindings))
|
||||
|
||||
$('.viewer')
|
||||
// setup internal events...
|
||||
.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
|
||||
.on('bookmarksCleared', clearBookmarkIndicators)
|
||||
.on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)})
|
||||
.on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)})
|
||||
|
||||
// user interactions...
|
||||
.swipe({
|
||||
swipeStatus: swipeHandler,
|
||||
|
||||
|
||||
197
magazine.js
197
magazine.js
@ -59,7 +59,7 @@ togglePageView = createCSSClassToggler(
|
||||
})
|
||||
|
||||
|
||||
// this will simply refresh the current view...
|
||||
// this will simply update the current view...
|
||||
function updateView(){
|
||||
return togglePageView(togglePageView('?'))
|
||||
}
|
||||
@ -127,6 +127,10 @@ function viewResizeHandler(){
|
||||
// swipe state handler
|
||||
// this handles single and double finger swipes and dragging
|
||||
// while draggign this triggers magazineDragging event on the viewer...
|
||||
// NOTE: this will trigger 'magazineDragging' event on the viewer on
|
||||
// each call while dragging...
|
||||
// XXX for some reason with finger count of 3 and greater, touchSwipe
|
||||
// dies on android...
|
||||
function swipeHandler(evt, phase, direction, distance, duration, fingers){
|
||||
var pages = $('.page')
|
||||
var cur = $('.current.page')
|
||||
@ -191,13 +195,12 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){
|
||||
|
||||
/********************************************************** layout ***/
|
||||
|
||||
// NOTE: special cases:
|
||||
// - if n is not given then it defaults to 1
|
||||
// - if n > 1 and fit_to_content is not given it defaults to true
|
||||
// - if n is 1 then fit_to_content bool argument controls wether:
|
||||
// NOTE: if n is not given then it defaults to 1
|
||||
// NOTE: if n > 1 and fit_to_content is not given it defaults to true
|
||||
// NOTE: if n is 1 then fit_to_content bool argument controls wether:
|
||||
// - the page will be stretched to viewer (false)
|
||||
// - or to content (true)
|
||||
// XXX on USE_REAL_PAGE_SIZES offset is calculated incorrectly...
|
||||
// XXX on USE_REAL_PAGE_SIZES offset is a bit off...
|
||||
function fitNPages(n, fit_to_content){
|
||||
if(n == null){
|
||||
n = 1
|
||||
@ -269,7 +272,7 @@ function fitNPages(n, fit_to_content){
|
||||
|
||||
// NOTE: we need to calculate the offset as the actual widths during
|
||||
// the anumation are not correct...
|
||||
// XXX in general this is correct, but still there is some error...
|
||||
// XXX in general this is correct, but still there is some error (rounding?)...
|
||||
if(!USE_REAL_PAGE_SIZES && fit_to_content){
|
||||
var offset = rW * getPageNumber()-1
|
||||
} else {
|
||||
@ -309,14 +312,13 @@ function fitNPages(n, fit_to_content){
|
||||
|
||||
/********************************************************* actions ***/
|
||||
|
||||
// Argument width is used ONLY to center the page.
|
||||
//
|
||||
// NOTE: "width" is used ONLY to center the page.
|
||||
// NOTE: if n is not given it will be set to current page number
|
||||
// NOTE: if width is not given it will be set to current page width.
|
||||
// NOTE: n can be:
|
||||
// - page number
|
||||
// - page element
|
||||
// NOTE: this will fire a 'pageChanged' event on the viewer each time
|
||||
// NOTE: this will fire a 'pageChanged(n)' event on the viewer each time
|
||||
// it is called...
|
||||
function setCurrentPage(n, offset, width){
|
||||
if(n == null){
|
||||
@ -344,9 +346,6 @@ function setCurrentPage(n, offset, width){
|
||||
'margin-left': -width/2
|
||||
})
|
||||
|
||||
// XXX should this be here???
|
||||
saveState()
|
||||
|
||||
// trigger the page cange event...
|
||||
$('.viewer').trigger('pageChanged', n)
|
||||
|
||||
@ -408,6 +407,84 @@ function prevArticle(){
|
||||
|
||||
|
||||
|
||||
/******************************************************* bookmarks ***/
|
||||
|
||||
// load bookmarks from list...
|
||||
function loadBookmarks(lst){
|
||||
clearBookmarks()
|
||||
$(lst).each(function(i, e){toggleBookmark(e)})
|
||||
}
|
||||
// build bookmark list...
|
||||
function buildBookmarkList(){
|
||||
var res = []
|
||||
$('.magazine .page .bookmark').each(function(_, e){
|
||||
res.push(getPageNumber($(e).parents('.page')))
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
// NOTE: will trigger 'bookmarksCleared' event on the viewer
|
||||
function clearBookmarks(){
|
||||
$('.magazine .page .bookmark').remove()
|
||||
|
||||
$('.viewer').trigger('bookmarksCleared')
|
||||
}
|
||||
|
||||
|
||||
// NOTE: this will trigger events on the viewer:
|
||||
// - bookmarkAdded(n)
|
||||
// - bookmarkRemoved(n)
|
||||
function toggleBookmark(n){
|
||||
if(n == null){
|
||||
n = getPageNumber()
|
||||
} else if(typeof(n) != typeof(1)){
|
||||
n = getPageNumber(n)
|
||||
}
|
||||
var res
|
||||
var cur = getPageAt(n)
|
||||
|
||||
if(cur.children('.bookmark').length == 0){
|
||||
var res = $('<div/>')
|
||||
.prependTo(cur)
|
||||
.addClass('bookmark justcreated')
|
||||
.click(function(){
|
||||
toggleBookmark(n)
|
||||
})
|
||||
|
||||
$('.viewer').trigger('bookmarkAdded', n)
|
||||
|
||||
setTimeout(function(){
|
||||
res.removeClass('justcreated')
|
||||
}, 1000)
|
||||
|
||||
} else {
|
||||
cur.children('.bookmark').remove()
|
||||
|
||||
$('.viewer').trigger('bookmarkRemoved', n)
|
||||
}
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
function nextBookmark(){
|
||||
var pages = $('.page')
|
||||
pages = $(pages.splice(getPageNumber()+1))
|
||||
page = pages.children('.bookmark').first().parents('.page')
|
||||
if(page.length != 0){
|
||||
return setCurrentPage(page)
|
||||
}
|
||||
}
|
||||
function prevBookmark(){
|
||||
var pages = $('.page')
|
||||
pages.splice(getPageNumber())
|
||||
page = pages.children('.bookmark').last().parents('.page')
|
||||
if(page.length != 0){
|
||||
return setCurrentPage(page)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************** state ***/
|
||||
|
||||
// XXX make these magazine-specific...
|
||||
@ -584,18 +661,22 @@ function _makeArticleIndicator(i, article, width){
|
||||
function setupArticleIndicators(W){
|
||||
var articles = $('.magazine .article')
|
||||
// cleanup...
|
||||
$('.navigator .bar .article').remove()
|
||||
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')
|
||||
var pos = $('.navigator .indicator').fadeIn()
|
||||
var pages = $('.page').length
|
||||
var mag = $('.magazine')
|
||||
|
||||
@ -616,6 +697,12 @@ function setupNavigator(){
|
||||
.on('magazineDragging', function(){updateNavigator()})
|
||||
}
|
||||
|
||||
function clearNavigator(){
|
||||
$('.navigator .indicator').hide()
|
||||
clearBookmarkIndicators()
|
||||
clearArticleIndicators()
|
||||
}
|
||||
|
||||
|
||||
function updateNavigator(n){
|
||||
var mag = $('.magazine')
|
||||
@ -683,82 +770,14 @@ function removeBookmarkIndicator(n){
|
||||
|
||||
|
||||
|
||||
/******************************************************* bookmarks ***/
|
||||
|
||||
// load bookmarks from list...
|
||||
function loadBookmarks(lst){
|
||||
clearBookmarks()
|
||||
$(lst).each(function(i, e){toggleBookmark(e)})
|
||||
}
|
||||
// build bookmark list...
|
||||
function buildBookmarkList(){
|
||||
var res = []
|
||||
$('.magazine .page .bookmark').each(function(_, e){
|
||||
res.push(getPageNumber($(e).parents('.page')))
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
function clearBookmarks(){
|
||||
$('.magazine .page .bookmark').remove()
|
||||
clearBookmarkIndicators()
|
||||
}
|
||||
|
||||
|
||||
function toggleBookmark(n){
|
||||
if(n == null){
|
||||
n = getPageNumber()
|
||||
} else if(typeof(n) != typeof(1)){
|
||||
n = getPageNumber(n)
|
||||
}
|
||||
var res
|
||||
var cur = getPageAt(n)
|
||||
|
||||
if(cur.children('.bookmark').length == 0){
|
||||
var res = $('<div/>')
|
||||
.prependTo(cur)
|
||||
.addClass('bookmark justcreated')
|
||||
.click(function(){
|
||||
toggleBookmark(n)
|
||||
})
|
||||
|
||||
setTimeout(function(){
|
||||
res.removeClass('justcreated')
|
||||
}, 1000)
|
||||
|
||||
makeBookmarkIndicator(n)
|
||||
} else {
|
||||
cur.children('.bookmark').remove()
|
||||
removeBookmarkIndicator(n)
|
||||
}
|
||||
|
||||
// XXX should this be here???
|
||||
saveState()
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
function nextBookmark(){
|
||||
var pages = $('.page')
|
||||
pages = $(pages.splice(getPageNumber()+1))
|
||||
page = pages.children('.bookmark').first().parents('.page')
|
||||
if(page.length != 0){
|
||||
return setCurrentPage(page)
|
||||
}
|
||||
}
|
||||
function prevBookmark(){
|
||||
var pages = $('.page')
|
||||
pages.splice(getPageNumber())
|
||||
page = pages.children('.bookmark').last().parents('.page')
|
||||
if(page.length != 0){
|
||||
return setCurrentPage(page)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************************************** editor ***/
|
||||
|
||||
function clearMagazine(){
|
||||
// XXX do we remove the whole magazine or only it's contents?
|
||||
$('.magazine').remove()
|
||||
clearNavigator()
|
||||
}
|
||||
|
||||
// XXX create magazine...
|
||||
// - magazine
|
||||
// - cover
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user