From 13166580626343acef6c54e6554e4343bbf69b93 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 9 Feb 2013 01:47:04 +0400 Subject: [PATCH] rewritten createCSSClassToggler in a more general way, now it can work with class lists as well... Signed-off-by: Alex A. Naanou --- index.html | 2 +- lib/jli.js | 109 +++++++++++++++++++++++++++++++++++++++------------- magazine.js | 9 ++++- 3 files changed, 92 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index c26ec8e..10253f5 100755 --- a/index.html +++ b/index.html @@ -163,7 +163,7 @@ $(document).ready(function(){ -
+
diff --git a/lib/jli.js b/lib/jli.js index 498a17c..b47364b 100755 --- a/lib/jli.js +++ b/lib/jli.js @@ -28,8 +28,13 @@ // 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... + +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){ var callback_pre = null 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_post = callback_b } - // build the acual toggler function... + + // XXX make this generic... 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 == '?'){ - var getter = action == '?' ? true : false - action = 'on' // get current state... - if( $(elem).hasClass(css_class) ){ - action = 'off' + var cur = 'none' + 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, - // we'll need to swap the values... - return action == 'on' ? 'off' : 'on' + + // invalid action... + } else if((bool_action && ['on', 'off'].indexOf(action) == -1) + || (!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... - if(action == 'on'){ - $(elem).addClass(css_class) - } else { - $(elem).removeClass(css_class) + // update the element... + elem.removeClass(class_list.join(' ')) + if(cls != 'none' && action != 'off'){ + elem.addClass(cls) } - if(callback_post != null){ - callback_post(action) + // post callback... + if(callback_b != null){ + callback_b(action) } + + return 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.' + + func.class_list = class_list + if(bool_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.' + }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 } + // 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 diff --git a/magazine.js b/magazine.js index b67a413..48c7c08 100755 --- a/magazine.js +++ b/magazine.js @@ -68,13 +68,20 @@ var FULL_HISTORY_ENABLED = false // NOTE: this is used mostly for styling and drag assisting... var togglePageDragging = createCSSClassToggler('.viewer', 'dragging') - // toggle global editor mode... var toggleEditorMode = createCSSClassToggler('.viewer', 'editor-mode') // toggles the editor mode, used for inline magazine editor... 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... // DO NOT USE DIRECTLY!