mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 12:00:11 +00:00
split off the generic part of the lib...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
46a86b3526
commit
f4b137768a
17
TODO.otl
17
TODO.otl
@ -27,8 +27,7 @@
|
|||||||
[X] add page urls
|
[X] add page urls
|
||||||
[X] add state saving to local storage
|
[X] add state saving to local storage
|
||||||
[X] use modes (CSS) for thumbnail/page views...
|
[X] use modes (CSS) for thumbnail/page views...
|
||||||
[_] 66% stage 1 - basic features
|
[X] 100% stage 1 - basic features
|
||||||
[_] issue browser structure
|
|
||||||
[X] global navigation bar
|
[X] global navigation bar
|
||||||
[X] real magazine structure
|
[X] real magazine structure
|
||||||
[X] 100% basic article navigation
|
[X] 100% basic article navigation
|
||||||
@ -40,11 +39,6 @@
|
|||||||
[X] go to next article
|
[X] go to next article
|
||||||
[X] real previews
|
[X] real previews
|
||||||
| use zoom to show a ribbon...
|
| use zoom to show a ribbon...
|
||||||
[_] 0% issue navigation
|
|
||||||
[_] issue list
|
|
||||||
[_] 0% issue download
|
|
||||||
[_] whole edition dowload and update (primary mode)
|
|
||||||
[_] seporate issue download (secondary)
|
|
||||||
[_] 25% stage 2 - templates and examples
|
[_] 25% stage 2 - templates and examples
|
||||||
[_] 0% default cover templates
|
[_] 0% default cover templates
|
||||||
[_] 0% default page templates
|
[_] 0% default page templates
|
||||||
@ -72,7 +66,14 @@
|
|||||||
[_] plain
|
[_] plain
|
||||||
[X] 100% default actions
|
[X] 100% default actions
|
||||||
[X] show/hide layer
|
[X] show/hide layer
|
||||||
[_] 0% stage 3 - advanced features
|
[_] 0% stage 3 - issue browser
|
||||||
|
[_] issue browser structure
|
||||||
|
[_] 0% issue navigation
|
||||||
|
[_] issue list
|
||||||
|
[_] 0% issue download
|
||||||
|
[_] whole edition dowload and update (primary mode)
|
||||||
|
[_] seporate issue download (secondary)
|
||||||
|
[_] 0% stage 4 - advanced features
|
||||||
[_] 0% edition editor / publisher
|
[_] 0% edition editor / publisher
|
||||||
[_] create/delete edition
|
[_] create/delete edition
|
||||||
[_] cover
|
[_] cover
|
||||||
|
|||||||
@ -6,6 +6,7 @@
|
|||||||
<script src="jquery.touchSwipe.js"></script>
|
<script src="jquery.touchSwipe.js"></script>
|
||||||
<script src="jstorage.js"></script>
|
<script src="jstorage.js"></script>
|
||||||
|
|
||||||
|
<script src="jli.js"></script>
|
||||||
<script src="magazine.js"></script>
|
<script src="magazine.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
170
jli.js
Executable file
170
jli.js
Executable file
@ -0,0 +1,170 @@
|
|||||||
|
/**********************************************************************
|
||||||
|
**********************************************************************/
|
||||||
|
|
||||||
|
var DEBUG = true
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
// XXX find a better name for this...
|
||||||
|
|
||||||
|
// 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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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>'))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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+')',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
161
magazine.js
161
magazine.js
@ -6,170 +6,9 @@ var DEBUG = true
|
|||||||
/* this is needed only for live resize... */
|
/* this is needed only for live resize... */
|
||||||
var PAGES_VISIBLE = 1
|
var PAGES_VISIBLE = 1
|
||||||
var PAGES_IN_RIBBON = 6
|
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'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 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>'))
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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+')',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
|
|
||||||
togglePageDragging = createCSSClassToggler(
|
togglePageDragging = createCSSClassToggler(
|
||||||
'.viewer',
|
'.viewer',
|
||||||
'dragging')
|
'dragging')
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user