Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Generalize boolean toggles to n-way toggles.

  • Loading branch information...
commit d26fd591b29bfd67386e558c39871fb0c58012da 1 parent b6b13e2
Reuben Thomas rrthomas authored
Showing with 43 additions and 32 deletions.
  1. +10 −10 index.html
  2. +11 −8 verdict.coffee
  3. +1 −1  verdict.css
  4. +21 −13 verdict.js
20 index.html
View
@@ -244,14 +244,14 @@
</div>
<div class='desc'>
- <h2>Boolean Flip</h2>
+ <h2>Toggle</h2>
<div class='example'>
- <blockquote>Theodore Robert "Ted" Bundy was an American <span class='boolean-toggle' id='ted1'>serial killer</span>, <span id='ted2' class='boolean-toggle' >rapist</span>, <span id='ted3' class='boolean-toggle' >kidnapper</span>, and <span id='ted4' class='boolean-toggle' >necrophile</span> who assaulted and murdered numerous young women during the 1970s, and possibly earlier. </blockquote>
+ <blockquote>Theodore Robert "Ted" Bundy was an American <span class='toggle' id='ted1'>serial killer</span>, <span id='ted2' class='toggle' >rapist</span>, <span id='ted3' class='toggle' >kidnapper</span>, and <span id='ted4' class='toggle' >necrophile</span> who assaulted and murdered numerous young women during the 1970s, and possibly earlier. </blockquote>
<pre class='sh_javascript_dom'>
-$("#ted1").bool_select({first: 'serial killer', second: 'serial entrepreneur'});
-$("#ted2").bool_select({first: 'rapist', second: 'rapper'});
-$("#ted3").bool_select({first: 'kidnapper', second: 'babysitter'});
-$("#ted4").bool_select({first: 'necrophile', second: 'overall, a very decent man'});</pre>
+$("#ted1").toggle_select(['serial killer', 'serial entrepreneur']);
+$("#ted2").toggle_select(['rapist', 'rapper', 'flapper']);
+$("#ted3").toggle_select(['kidnapper', 'babysitter']);
+$("#ted4").toggle_select(['necrophile', 'overall, a very decent man']);</pre>
</div>
</div>
@@ -313,10 +313,10 @@
$("#prison-budget").text($.format.num(Math.floor(prisoners * 34373.6015)));
});
- $("#ted1").bool_select({first: 'serial killer', second: 'serial entrepreneur'});
- $("#ted2").bool_select({first: 'rapist', second: 'rapper'});
- $("#ted3").bool_select({first: 'kidnapper', second: 'babysitter'});
- $("#ted4").bool_select({first: 'necrophile', second: 'overall, a very decent man'});
+ $("#ted1").toggle_select(['serial killer', 'serial entrepreneur']);
+ $("#ted2").toggle_select(['rapist', 'rapper', 'flapper']);
+ $("#ted3").toggle_select(['kidnapper', 'babysitter']);
+ $("#ted4").toggle_select(['necrophile', 'overall, a very decent man']);
});
</script>
</body>
19 verdict.coffee
View
@@ -65,20 +65,23 @@
###
usage:
- add adjustable_bool class if you want some spiffy css
- $("#cookies").bool_select
- first: 'something'
- second: 'another thing'
+ add toggle class if you want some spiffy css
+ $("#cookies").toggle_select
+ list of alternative contents
###
(($) ->
- $.fn.bool_select = (o) ->
+ $.fn.toggle_select = (o) ->
# Add the event handlers
- bool = (elem, first) ->
+ toggle = (elem) ->
elem.click (e) ->
- if elem.text() == o.first then elem.text(o.second) else elem.text(o.first)
+ n = 0
+ for n in [0..o.length - 1]
+ if o[n] == elem.text()
+ elem.text(o[(n + 1) % o.length])
+ break
elem.trigger('verdict_change', elem.text())
@each ->
- bool $(@),
+ toggle $(@),
)(window.jQuery)
2  verdict.css
View
@@ -16,7 +16,7 @@
}
/* Boolean Toggling */
-.boolean-toggle {
+.toggle {
color: #F2A622;
border-bottom: 1px dashed #F2A622;
cursor: pointer;
34 verdict.js
View
@@ -1,3 +1,4 @@
+// Generated by CoffeeScript 1.3.1
/*
Verdict.coffee 0.0.0.0.0.1
@@ -7,6 +8,7 @@
requirements: jQuery http://www.jquery.com/
*/
+
/*
usage:
add adjustable_number class if you want some spiffy css
@@ -17,6 +19,7 @@
integer: false
*/
+
(function() {
(function($) {
@@ -52,7 +55,9 @@
dir = 2 * (x < change.pageX) - 1;
val = Number(elem.text().replace(/,/g, ''));
val = Math.max(Math.min(val + dir * o.step * (Math.abs(change.pageX - x) / o.growth), o.max || Infinity), o.min || -Infinity);
- if (o.integer != null) val = Math.floor(val);
+ if (o.integer != null) {
+ val = Math.floor(val);
+ }
elem.text($.format.num(val));
x = change.pageX;
return elem.trigger('verdict_change', val);
@@ -74,27 +79,30 @@
/*
usage:
- add adjustable_bool class if you want some spiffy css
- $("#cookies").bool_select
- first: 'something'
- second: 'another thing'
+ add toggle class if you want some spiffy css
+ $("#cookies").toggle_select
+ list of alternative contents
*/
+
(function($) {
- return $.fn.bool_select = function(o) {
- var bool;
- bool = function(elem, first) {
+ return $.fn.toggle_select = function(o) {
+ var toggle;
+ toggle = function(elem) {
return elem.click(function(e) {
- if (elem.text() === o.first) {
- elem.text(o.second);
- } else {
- elem.text(o.first);
+ var n, _i, _ref;
+ n = 0;
+ for (n = _i = 0, _ref = o.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; n = 0 <= _ref ? ++_i : --_i) {
+ if (o[n] === elem.text()) {
+ elem.text(o[(n + 1) % o.length]);
+ break;
+ }
}
return elem.trigger('verdict_change', elem.text());
});
};
return this.each(function() {
- return bool($(this));
+ return toggle($(this));
});
};
})(window.jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.