rewritten createCSSClassToggler in a more general way, now it can work with class lists as well...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-09 01:47:04 +04:00
parent 57ed5db808
commit 1316658062
3 changed files with 92 additions and 28 deletions

View File

@ -163,7 +163,7 @@ $(document).ready(function(){
</head> </head>
<body> <body>
<div class="viewer dark"> <div class="viewer light">
<!-- Splash screen --> <!-- Splash screen -->
<div class="splash noSwipe"> <div class="splash noSwipe">

View File

@ -28,8 +28,13 @@
// class change... // class change...
// a way around this is to pass an empty function as callback_b // 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... function createCSSClassToggler(elem, class_list, callback_a, callback_b){
var bool_action = false
if(typeof(class_list) == typeof('')){
class_list = ['none', class_list]
bool_action = true
}
if(callback_b == null){ if(callback_b == null){
var callback_pre = null var callback_pre = null
var callback_post = callback_a var callback_post = callback_a
@ -37,44 +42,96 @@ function createCSSClassToggler(elem, css_class, callback_a, callback_b){
var callback_pre = callback_a var callback_pre = callback_a
var callback_post = callback_b var callback_post = callback_b
} }
// build the acual toggler function...
// XXX make this generic...
var func = function(action){ var func = function(action){
elem = $(elem)
// option number...
if(typeof(action) == typeof(1)){
// range check...
if(action < 0 || action >= class_list.length){
return null
}
if(bool_action){
action = action == 0 ? 'off' : 'on'
} else {
action = class_list[action]
}
}
// we need to get the current state...
if(action == null || action == '?'){ if(action == null || action == '?'){
var getter = action == '?' ? true : false
action = 'on'
// get current state... // get current state...
if( $(elem).hasClass(css_class) ){ var cur = 'none'
action = 'off' for(var i=0; i < class_list.length; i++){
if(elem.hasClass(class_list[i])){
cur = class_list[i]
break
}
}
// just asking for info...
if(action == '?'){
return bool_action ? (cur == 'none' ? 'off' : 'on') : cur
} }
if(getter){
// as the above actions indicate intent and not state, // invalid action...
// we'll need to swap the values... } else if((bool_action && ['on', 'off'].indexOf(action) == -1)
return action == 'on' ? 'off' : 'on' || (!bool_action && class_list.indexOf(action) == -1)){
return null
}
var cls = bool_action ? class_list[1] : action
// get the right class...
if(action == null){
var i = class_list.indexOf(cur)+1
i = i == -1 ? 0 : i
i = i == class_list.length ? 0 : i
cls = class_list[i]
if(bool_action){
action = cls == 'none' ? 'off' : 'on'
} else {
action = cls
} }
} }
if(callback_pre != null){
callback_pre(action) // pre callback...
if(callback_a != null){
callback_a(action)
} }
// play with the class... // update the element...
if(action == 'on'){ elem.removeClass(class_list.join(' '))
$(elem).addClass(css_class) if(cls != 'none' && action != 'off'){
} else { elem.addClass(cls)
$(elem).removeClass(css_class)
} }
if(callback_post != null){ // post callback...
callback_post(action) if(callback_b != null){
callback_b(action)
} }
return action
} }
func.doc = 'With no arguments this will toggle between "on" and '+
'"off".\n'+ func.class_list = class_list
'If either "on" or "off" are given then this will switch '+ if(bool_action){
'to that mode.\n'+ func.doc = 'With no arguments this will toggle between "on" and '+
'If "?" is given, this will return either "on" or "off" '+ '"off".\n'+
'depending on the current state.' '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.'
}else{
func.doc = 'With no arguments this will toggle between '+
class_list +' in cycle.\n' +
'if any of the state names or its number is given then that '+
'state is switched on.'+
'If "?" is given, this will return the current state.'
}
return func return func
} }
// show a jQuary opject in viewer overlay... // show a jQuary opject in viewer overlay...
// XXX need to set .scrollTop(0) when showing different UI... // XXX need to set .scrollTop(0) when showing different UI...
// ...and not set it when the UI is the same // ...and not set it when the UI is the same

View File

@ -68,13 +68,20 @@ var FULL_HISTORY_ENABLED = false
// NOTE: this is used mostly for styling and drag assisting... // NOTE: this is used mostly for styling and drag assisting...
var togglePageDragging = createCSSClassToggler('.viewer', 'dragging') var togglePageDragging = createCSSClassToggler('.viewer', 'dragging')
// toggle global editor mode... // toggle global editor mode...
var toggleEditorMode = createCSSClassToggler('.viewer', 'editor-mode') var toggleEditorMode = createCSSClassToggler('.viewer', 'editor-mode')
// toggles the editor mode, used for inline magazine editor... // toggles the editor mode, used for inline magazine editor...
var toggleInlineEditorMode = createCSSClassToggler('.viewer', 'inline-editor-mode noSwipe') var toggleInlineEditorMode = createCSSClassToggler('.viewer', 'inline-editor-mode noSwipe')
// toggle between viewer themes...
toggleThemes = createCSSClassToggler('.viewer', [
'light',
'none',
'dark'
])
// this is here only for speed, helps with dragging... // this is here only for speed, helps with dragging...
// DO NOT USE DIRECTLY! // DO NOT USE DIRECTLY!