flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-30 03:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

createCSSClassToggler result now accepts an optional alternative target argument...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-03-01 16:13:52 +04:00
parent e62a2e710f
commit 84bd298e32
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
lib/jli.js
View File

@ -20,20 +20,33 @@
// //
// Elem is a jquery compatible object; default use-case: a css selector. // Elem is a jquery compatible object; default use-case: a css selector.
// //
// If class_list is a string, the resulting function understands the // This will return a function with the folowing signature:
// folowing arguments: //
// func() -> <state>
// func(<action>) -> <state>
// func(<target>, <action>) -> <state>
//
//
// In the first form this just toggles the state.
//
// In forms 2 and 3, if class_list is a string, the <action> can be :
// - <index> : 0 for 'off' and 1 for 'on' (see below) // - <index> : 0 for 'off' and 1 for 'on' (see below)
// - 'on' : switch mode on -- add class // - 'on' : switch mode on -- add class
// - 'off' : switch mode off -- remove class // - 'off' : switch mode off -- remove class
// - '?' : return current state ('on'|'off') // - '?' : return current state ('on'|'off')
// - no arguments : toggle the state
// //
// Otherwise, if class_list is a list of strings: // In forms 2 and 3, if class_list is a list of strings, the <action> can be:
// - <index> : explicitly set the state to index in class_list // - <index> : explicitly set the state to index in class_list
// - <class-name> : explicitly set a class from the list // - <class-name> : explicitly set a class from the list
// - '?' : return current state ('on'|'off') // - '?' : return current state ('on'|'off')
// - no arguments : set next state in cycle
// //
// In the third form the <target> is a jquery-compatible object.
//
// In all forms this will return the current state string or null if the
// action argument given is invalid.
//
// NOTE: if it is needed to apply this to and explicit target but with
// no action explicit action, just pass null as the second argument.
// NOTE: a special class name 'none' means no class is set, if it is present // NOTE: a special class name 'none' means no class is set, if it is present
// in the class_list then that state will be with all other state // in the class_list then that state will be with all other state
// classes removed. // classes removed.
@ -82,8 +95,15 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
} }
// XXX make this generic... // XXX make this generic...
var func = function(action){ var func = function(a, b){
elem = $(elem) if(b == null){
var action = a
var e = elem
} else {
var e = a
var action = b
}
e = $(e)
// option number... // option number...
if(typeof(action) == typeof(1)){ if(typeof(action) == typeof(1)){
// range check... // range check...
@ -101,7 +121,7 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
// get current state... // get current state...
var cur = 'none' var cur = 'none'
for(var i=0; i < class_list.length; i++){ for(var i=0; i < class_list.length; i++){
if(elem.hasClass(class_list[i])){ if(e.hasClass(class_list[i])){
cur = class_list[i] cur = class_list[i]
break break
} }
@ -139,9 +159,9 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
} }
} }
// update the element... // update the element...
elem.removeClass(class_list.join(' ')) e.removeClass(class_list.join(' '))
if(cls != 'none' && action != 'off'){ if(cls != 'none' && action != 'off'){
elem.addClass(cls) e.addClass(cls)
} }
// post callback... // post callback...
if(callback_post != null){ if(callback_post != null){

6
templates.html
View File

@ -6,7 +6,9 @@
<link rel="stylesheet" href="magazine-custom.css"> <link rel="stylesheet" href="magazine-custom.css">
<style> <style>
body {
background: silver;
}
.container { .container {
position: relative; position: relative;
border: solid 1px silver; border: solid 1px silver;
@ -14,7 +16,7 @@
min-height: 300px; min-height: 300px;
margin: 25px; margin: 25px;
background: white; background: white;
box-shadow: 5px 5px 200px 0px silver; /*box-shadow: 5px 5px 200px 0px silver;*/
padding: 10px; padding: 10px;
} }
.container .preview { .container .preview {