Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Generalize toggles to work with arbitrary HTML elements, not just pla…

…in text.
  • Loading branch information...
commit 468df8401323567436cd7a9403b687f51cb04f72 1 parent 0b90dfa
@rrthomas rrthomas authored
Showing with 31 additions and 18 deletions.
  1. +14 −5 index.html
  2. +8 −6 verdict.coffee
  3. +9 −7 verdict.js
View
19 index.html
@@ -246,12 +246,21 @@
<div class='desc'>
<h2>Toggle</h2>
<div class='example'>
- <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>
+ <blockquote>Theodore Robert "Ted" Bundy was an American <span class='toggle' id='ted1'><span>serial killer</span><span style="display: none">serial entrepreneur</span></span> and <span id='ted2' class='toggle' ><span style="display: none">rapist</span><span>rapper</span><span style="display: none">flapper</span></span> who assaulted and murdered numerous young women during the 1970s, and possibly earlier. </blockquote>
<pre class='sh_javascript_dom'>
-$("#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>
+&lt;span class='toggle' id='ted1'&gt;
+ &lt;span&gt;serial killer&lt;/span&gt;
+ &lt;span style="display: none;"&gt;serial entrepreneur&lt;/span&gt;
+&lt;/span&gt;
+
+&lt;span id='ted2' class='toggle' &gt;
+ &lt;span style="display: none"&gt;rapist&lt;/span&gt;
+ &lt;span&gt;rapper&lt;/span&gt;
+ &lt;span style="display: none"&gt;flapper&lt;/span&gt;
+&lt;/span&gt;
+
+$("#ted1").toggle_select();
+$("#ted2").toggle_select();</pre>
</div>
</div>
View
14 verdict.coffee
@@ -70,17 +70,19 @@
list of alternative contents
###
(($) ->
- $.fn.toggle_select = (o) ->
+ $.fn.toggle_select = () ->
# Add the event handlers
toggle = (elem) ->
elem.click (e) ->
+ children = elem.children()
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())
+ for i in [0...children.length]
+ if children[i].style.display != "none"
+ n = (i + 1) % children.length
+ children[i].style.display = "none"
+ children[n].style.removeProperty("display")
+ elem.trigger('verdict_change', elem)
@each ->
toggle $(@),
View
16 verdict.js
@@ -86,19 +86,21 @@
(function($) {
- return $.fn.toggle_select = function(o) {
+ return $.fn.toggle_select = function() {
var toggle;
toggle = function(elem) {
return elem.click(function(e) {
- var n, _i, _ref;
+ var children, i, n, _i, _ref;
+ children = elem.children();
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;
+ for (i = _i = 0, _ref = children.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
+ if (children[i].style.display !== "none") {
+ n = (i + 1) % children.length;
}
+ children[i].style.display = "none";
}
- return elem.trigger('verdict_change', elem.text());
+ children[n].style.removeProperty("display");
+ return elem.trigger('verdict_change', elem);
});
};
return this.each(function() {
Please sign in to comment.
Something went wrong with that request. Please try again.