From 0f2fca294fefbcb70ca9c06bfa45ecbfee1afe1c Mon Sep 17 00:00:00 2001 From: Toni Schornboeck Date: Thu, 21 Mar 2013 23:33:21 +0100 Subject: [PATCH 1/8] bump to version 1.0.1 because of description update --- cycleclass.jquery.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cycleclass.jquery.json b/cycleclass.jquery.json index d065d6f..7f04b80 100644 --- a/cycleclass.jquery.json +++ b/cycleclass.jquery.json @@ -12,7 +12,7 @@ "url": "http://opensource.org/licenses/MIT" } ], - "version": "1.0.0", + "version": "1.0.1", "author": { "name": "Toni Schornboeck", "email": "toni.schornboeck@gmail.com" From affa6d25da0225576f1a0adbd0ac505fe39238cc Mon Sep 17 00:00:00 2001 From: Toni Schornboeck Date: Thu, 21 Mar 2013 23:36:04 +0100 Subject: [PATCH 2/8] fixed wording --- cycleclass.jquery.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cycleclass.jquery.json b/cycleclass.jquery.json index 7f04b80..b9aa747 100644 --- a/cycleclass.jquery.json +++ b/cycleclass.jquery.json @@ -1,7 +1,7 @@ { "name": "cycleclass", "title": "cycleClass - jQuery css-class cycling", - "description": "A small plugin that allows you to cycle throug css class, kind of like toggleClass on steroids.", + "description": "A small plugin that allows you to cycle through css classes, kind of like toggleClass on steroids.", "keywords": [ "toggle", "cycle" @@ -12,7 +12,7 @@ "url": "http://opensource.org/licenses/MIT" } ], - "version": "1.0.1", + "version": "1.0.2", "author": { "name": "Toni Schornboeck", "email": "toni.schornboeck@gmail.com" From af4b0de4454afade92bc9bb032d947cdb58d2990 Mon Sep 17 00:00:00 2001 From: Toni Schornboeck Date: Fri, 22 Mar 2013 18:09:24 +0100 Subject: [PATCH 3/8] added new features to readme --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9c9e5d4..12c5ca8 100644 --- a/README.md +++ b/README.md @@ -14,13 +14,18 @@ Configuration ================= cycleClass takes an array of classnames as first parameter. If none of the supplied classnames are set, the first one is set. -As second parameter cycleClass takes a config options with 2 possible options: +As second parameter cycleClass takes a config options with 4 possible options: * backwards - a boolean. Default false. If true, the cycling is done backwards. Beware that it is much faster to use a pre-reversed array to cycle backwards than to let cycleClass reverse the array on each call * onRoundTrip - a callback function taking the current element as only parameter. This callback is called everytime a round trip happens. +* transition - a callback function taking the current element, the old classname and the new classname as 3 parameters. this callback is responsible for changing the classes on the element and allows for transition effects to take place. +* toIndex - an integer. If toIndex is set, cycleClass does not cycle to the next class in the classList, but instead cycles to the class with the index toIndex. + +Note: onRoundTrip is called after transition. + Project Structure ================= -All you need is `cycleclass.jquery.js`. It does not use much jQuery, therefore should work with any jQuery version. Only newest jQuery is supported though (tests are ran against newest jQuery). +All you need is `cycleclass.jquery.js` or `cycleclass.jquery.min.js`. It does not use much jQuery, therefore should work with any jQuery version. Only newest jQuery is supported though (tests are ran against newest jQuery). In the directory `demo` you'll find a simple demo how it works. It's currently in german though. From 2afb5b48db6f4d367c57b5d62a8ba4036b815da7 Mon Sep 17 00:00:00 2001 From: Toni Schornboeck Date: Fri, 22 Mar 2013 18:09:50 +0100 Subject: [PATCH 4/8] added toIndex and transition options --- cycleclass.jquery.js | 22 ++++++++++++++++++---- cycleclass.jquery.min.js | 2 +- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/cycleclass.jquery.js b/cycleclass.jquery.js index 243fade..467786c 100644 --- a/cycleclass.jquery.js +++ b/cycleclass.jquery.js @@ -40,7 +40,9 @@ * @param {Array} classList array of classnames * @param {Object} [options] options object * @config {Boolean} [backwards] set to true if you want to cycle backwards + * @config {Integer} [toIndex] doesn't cycle to the next class, but cycles to the toIndex class in the classList * @config {Function} [onRoundTrip] callback function if a round trip happens, receives the element as only argument + * @config {Function} [transition] callback function, called with 3 arguments (this element, old class, new class) which is responsible for the transition between the classes (cycleClass won't change classes if transition is set, this is tranisition's responsibility) * @return this */ $.fn.cycleClass = function(classList, options) { @@ -67,18 +69,30 @@ } //only remove class if a class was found + var cur=""; if(pos!==-1) { - var cur = classList[pos]; + cur = classList[pos]; className=className.replace(" "+cur+" ", " "); } //get next element, beware of round trips - var next = classList[(pos+1)%classCount]; + var next=""; + if(options.toIndex === undefined) { + next = classList[(pos+1)%classCount]; + } else { + next = classList[options.toIndex]; + } + //be tricky and put next as first classname for faster retrieval next time className=next+" "+className; //commit classname changes - this.className = $.trim(className); + //if transition, then classname change is done by transition function + if(options.transition) { + options.transition(this, cur, next); + } else { + this.className = $.trim(className); + } if(options.onRoundTrip) { if(pos===classCount-1) { @@ -87,4 +101,4 @@ } }); }; -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/cycleclass.jquery.min.js b/cycleclass.jquery.min.js index 36aecab..dffd007 100644 --- a/cycleclass.jquery.min.js +++ b/cycleclass.jquery.min.js @@ -7,4 +7,4 @@ * Released unter the MIT License * http://opensource.org/licenses/MIT */ -(function(g){g.fn.cycleClass=function(b,d){d=d||{};if(d.backwards){for(var h=b,j=[],k=h.length,a=k-1;0<=a;--a)j[k-a-1]=h[a];b=j}var f=b.length;return this.each(function(){if(1===this.nodeType){for(var c=(" "+this.className+" ").replace(/[\t\r\n]/g," "),e=-1,a=0;a Date: Fri, 22 Mar 2013 18:10:30 +0100 Subject: [PATCH 5/8] added a few new tests, including tests for new features --- tests/tests.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/tests/tests.js b/tests/tests.js index cfca50c..81adbba 100644 --- a/tests/tests.js +++ b/tests/tests.js @@ -128,4 +128,68 @@ test("correct roundtrip parameter", function() { $elem.cycleClass(classList, config); $elem.cycleClass(classList, config); $elem.cycleClass(classList, config); +}); + +test("don't remove other classes", function() { + var $elem=$("
"); + var classList=["one", "two", "three"]; + + ok(testClasses($elem, ["one", "other"], ["two", "three"]), "setup"); + $elem.cycleClass(classList); + ok(testClasses($elem, ["two", "other"], ["one", "three"]), "first step"); +}); + +test("don't remove partial class names", function() { + var $elem=$("
"); + var classList=["one", "two", "three"]; + + ok(testClasses($elem, ["one", "oneone"], ["two", "three"]), "setup"); + $elem.cycleClass(classList); + ok(testClasses($elem, ["two", "oneone"], ["one", "three"]), "first step"); +}); + +test("transition call", function() { + var $elem=$("
"); + var classList=["one", "two", "three"]; + + var transitionCalled=false; + + var config={ + transition:function() { ok(transitionCalled===false, "transition call"); transitionCalled=true; } + }; + + ok(testClasses($elem, ["one"], ["two", "three"]), "setup"); + $elem.cycleClass(classList, config); + ok(testClasses($elem, ["one"], ["two", "three"]), "first step"); + + ok(transitionCalled===true, "transition called"); +}); + +test("correct transition parameter", function() { + var $elem=$("
"); + var classList=["one", "two", "three"]; + + var config={ + transition:function(e, oldClass, newClass) { + ok($(e).data("dings")==="dangs", "element parameter"); + ok(oldClass==="one", "old class parameter"); + ok(newClass==="two", "new class parameter"); + } + }; + + ok(testClasses($elem, ["one"], ["two", "three"]), "setup"); + $elem.cycleClass(classList, config); + ok(testClasses($elem, ["one"], ["two", "three"]), "first step"); +}); + +test("jump to index", function() { + var $elem=$("
"); + var classList=["one", "two", "three"]; + var config={ + toIndex: 2 + }; + + ok(testClasses($elem, ["one"], ["two", "three"]), "setup"); + $elem.cycleClass(classList, config); + ok(testClasses($elem, ["three"], ["one", "two"]), "first step"); }); \ No newline at end of file From 90af97420d634f3eb45ded543be7492cd208dca3 Mon Sep 17 00:00:00 2001 From: Toni Schornboeck Date: Fri, 22 Mar 2013 18:12:33 +0100 Subject: [PATCH 6/8] bump version to 1.1.0 --- cycleclass.jquery.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cycleclass.jquery.json b/cycleclass.jquery.json index b9aa747..0ea7d64 100644 --- a/cycleclass.jquery.json +++ b/cycleclass.jquery.json @@ -12,7 +12,7 @@ "url": "http://opensource.org/licenses/MIT" } ], - "version": "1.0.2", + "version": "1.1.0", "author": { "name": "Toni Schornboeck", "email": "toni.schornboeck@gmail.com" From 33aec1c4ad76b950bcc784c5836772a9c246a38a Mon Sep 17 00:00:00 2001 From: Toni Schornboeck Date: Fri, 22 Mar 2013 19:51:03 +0100 Subject: [PATCH 7/8] fixed typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 12c5ca8..0d9fbe2 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Configuration ================= cycleClass takes an array of classnames as first parameter. If none of the supplied classnames are set, the first one is set. -As second parameter cycleClass takes a config options with 4 possible options: +As second parameter cycleClass takes a config object with 4 possible options: * backwards - a boolean. Default false. If true, the cycling is done backwards. Beware that it is much faster to use a pre-reversed array to cycle backwards than to let cycleClass reverse the array on each call * onRoundTrip - a callback function taking the current element as only parameter. This callback is called everytime a round trip happens. * transition - a callback function taking the current element, the old classname and the new classname as 3 parameters. this callback is responsible for changing the classes on the element and allows for transition effects to take place. From 0e2ca415ef3d63008c75cffc2a3589bd57a12e08 Mon Sep 17 00:00:00 2001 From: Toni Schornboeck Date: Sat, 23 Mar 2013 10:52:06 +0100 Subject: [PATCH 8/8] added support for negative indices in toIndex --- README.md | 2 +- cycleclass.jquery.js | 7 +++++-- cycleclass.jquery.json | 2 +- cycleclass.jquery.min.js | 2 +- tests/tests.js | 12 ++++++++++++ 5 files changed, 20 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0d9fbe2..bb0c4e5 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ As second parameter cycleClass takes a config object with 4 possible options: * backwards - a boolean. Default false. If true, the cycling is done backwards. Beware that it is much faster to use a pre-reversed array to cycle backwards than to let cycleClass reverse the array on each call * onRoundTrip - a callback function taking the current element as only parameter. This callback is called everytime a round trip happens. * transition - a callback function taking the current element, the old classname and the new classname as 3 parameters. this callback is responsible for changing the classes on the element and allows for transition effects to take place. -* toIndex - an integer. If toIndex is set, cycleClass does not cycle to the next class in the classList, but instead cycles to the class with the index toIndex. +* toIndex - an integer. If toIndex is set, cycleClass does not cycle to the next class in the classList, but instead cycles to the class with the index toIndex. If toIndex is negative, the index is taken from the back. Note: onRoundTrip is called after transition. diff --git a/cycleclass.jquery.js b/cycleclass.jquery.js index 467786c..423261e 100644 --- a/cycleclass.jquery.js +++ b/cycleclass.jquery.js @@ -40,19 +40,22 @@ * @param {Array} classList array of classnames * @param {Object} [options] options object * @config {Boolean} [backwards] set to true if you want to cycle backwards - * @config {Integer} [toIndex] doesn't cycle to the next class, but cycles to the toIndex class in the classList + * @config {Integer} [toIndex] doesn't cycle to the next class, but cycles to the toIndex class in the classList. * @config {Function} [onRoundTrip] callback function if a round trip happens, receives the element as only argument * @config {Function} [transition] callback function, called with 3 arguments (this element, old class, new class) which is responsible for the transition between the classes (cycleClass won't change classes if transition is set, this is tranisition's responsibility) * @return this */ $.fn.cycleClass = function(classList, options) { + var classCount = classList.length; options = options || {}; if(options.backwards) { classList = arrayReverseCopy(classList); } + if(options.toIndex < 0) { + options.toIndex += classCount; + } //TODO: test if its faster to sanitize classList - var classCount = classList.length; return this.each(function() { //abort if this is not an ELEMENT_NODE diff --git a/cycleclass.jquery.json b/cycleclass.jquery.json index 0ea7d64..d52c173 100644 --- a/cycleclass.jquery.json +++ b/cycleclass.jquery.json @@ -12,7 +12,7 @@ "url": "http://opensource.org/licenses/MIT" } ], - "version": "1.1.0", + "version": "1.2.0", "author": { "name": "Toni Schornboeck", "email": "toni.schornboeck@gmail.com" diff --git a/cycleclass.jquery.min.js b/cycleclass.jquery.min.js index dffd007..e2d9070 100644 --- a/cycleclass.jquery.min.js +++ b/cycleclass.jquery.min.js @@ -7,4 +7,4 @@ * Released unter the MIT License * http://opensource.org/licenses/MIT */ -(function(h){h.fn.cycleClass=function(d,a){a=a||{};if(a.backwards){for(var j=d,k=[],l=j.length,b=l-1;0<=b;--b)k[l-b-1]=j[b];d=k}var g=d.length;return this.each(function(){if(1===this.nodeType){for(var e=(" "+this.className+" ").replace(/[\t\r\n]/g," "),f=-1,c=0;ca.toIndex&&(a.toIndex+=g);return this.each(function(){if(1===this.nodeType){for(var e=(" "+this.className+" ").replace(/[\t\r\n]/g," "),f=-1,c=0;c"); + var classList=["one", "two", "three"]; + var config={ + toIndex: -3 + }; + + ok(testClasses($elem, ["three"], ["one", "two"]), "setup"); + $elem.cycleClass(classList, config); + ok(testClasses($elem, ["one"], ["tow", "three"]), "first step"); }); \ No newline at end of file