From 84bd298e323bbf548c640e010d2babcf97c20efa Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Fri, 1 Mar 2013 16:13:52 +0400
Subject: [PATCH] createCSSClassToggler result now accepts an optional
 alternative target argument...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 lib/jli.js     | 40 ++++++++++++++++++++++++++++++----------
 templates.html |  6 ++++--
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/lib/jli.js b/lib/jli.js
index 36b52bd..fb65ee2 100755
--- a/lib/jli.js
+++ b/lib/jli.js
@@ -20,20 +20,33 @@
 //
 // Elem is a jquery compatible object; default use-case: a css selector.
 //
-// If class_list is a string, the resulting function understands the 
-// folowing arguments:
+// This will return a function with the folowing signature:
+//
+// 	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)
 // 	- 'on'			: switch mode on -- add class
 // 	- 'off'			: switch mode off -- remove class
 // 	- '?'			: 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
 //  - <class-name>	: explicitly set a class from the list
 // 	- '?'			: 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 
 // 		in the class_list then that state will be with all other state 
 // 		classes removed.
@@ -82,8 +95,15 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
 	}
 
 	// XXX make this generic...
-	var func = function(action){
-		elem = $(elem)
+	var func = function(a, b){
+		if(b == null){
+			var action = a
+			var e = elem
+		} else {
+			var e = a
+			var action = b
+		}
+		e = $(e)
 		// option number...
 		if(typeof(action) == typeof(1)){
 			// range check...
@@ -101,7 +121,7 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
 			// get current state...
 			var cur = 'none'
 			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]
 					break
 				}
@@ -139,9 +159,9 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
 			}
 		}
 		// update the element...
-		elem.removeClass(class_list.join(' '))
+		e.removeClass(class_list.join(' '))
 		if(cls != 'none' && action != 'off'){
-			elem.addClass(cls)
+			e.addClass(cls)
 		}
 		// post callback...
 		if(callback_post != null){
diff --git a/templates.html b/templates.html
index 1558d1a..7fc336f 100755
--- a/templates.html
+++ b/templates.html
@@ -6,7 +6,9 @@
 <link rel="stylesheet" href="magazine-custom.css">
 
 <style>
-
+body {
+	background: silver;
+}
 .container {
 	position: relative;
 	border: solid 1px silver;
@@ -14,7 +16,7 @@
 	min-height: 300px;
 	margin: 25px;
 	background: white;
-	box-shadow: 5px 5px 200px 0px silver;
+	/*box-shadow: 5px 5px 200px 0px silver;*/
 	padding: 10px;
 }
 .container .preview {