live bind individual classes: class_active prop

Daniel-Hug · Jan 21, 2016 · e362246 · e362246
1 parent 4afea94
commit e362246
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -101,5 +101,6 @@ These are the properties available for object literal [node values](#node-values
  - `el` (string): element type
  - `kids` (array of [node values](#node-values)): child nodes to append
  - `text` (string): sets the text of the element
- - `_className`, `_innerHTML`, etc. (string, boolean, etc.): JS properties to set on element
+ - `_className`, `_innerHTML`, etc. (non-function values or a [snoopable function](#node-values)): JS properties to set on element
  - `on_input`, `on_click`, etc. (function or array of functions): event listener(s) to add
+ - `class_active`, `class_flagged`, etc. (boolean or [snoopable function](#node-values)): specify whether the element should have an 'active' class, 'flagged' class etc.
diff --git a/dom.js b/dom.js
@@ -75,6 +75,14 @@
 					}
 				}
 
+				// class toggle
+				else if (key.slice(0, 6) === 'class_') {
+					var className = key.slice(6);
+					bindSet(elData[key], function(classEnabled) {
+						el.classList[classEnabled ? 'add' : 'remove'](className);
+					});
+				}
+
 				// add html attributes
 				else {
 					bindSet(elData[key], function(newVal) {

diff --git a/index.html b/index.html
@@ -3,6 +3,31 @@
 <head>
 	<meta charset="utf-8">
 	<title>DOM Builder demo</title>
+
+	<style>
+	* {
+		font-size: 60px;
+	}
+
+	input[type=checkbox] {
+		transform: scale(3.5);
+		margin: 0 37px 0 30px;
+		vertical-align: middle;
+	}
+
+	button {
+		cursor: pointer;
+		padding: 0.1875em 0.375em;
+		border-width: 0.125em;
+		background: orange;
+		border-color: hsl(39, 100%, 60%);
+	}
+
+	.green {
+		background: green;
+		border-color: hsl(120, 100%, 35%);
+	}
+	</style>
 </head>
 <body>
 	<script src="bower_components/snoopy/snoopy.js"></script>
@@ -26,6 +51,7 @@
 		{
 			el: 'button',
 			text: counter.snoop('count'),
+			class_green: counter.snoop('even'),
 			on_click: function() {
 				counter.set('count', counter.count + 1);
 			}