added ability to reverse the character sequence

caseydev · Dec 5, 2013 · 28edb12 · 28edb12
1 parent 20ee80d
commit 28edb12
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-#Textillate.js v0.2.0
+#Textillate.js v0.3.0
 
 See a live demo [here](http://jschr.github.com/textillate/).
 
@@ -103,6 +103,10 @@ $('.tlt').textillate({
     // (note that shuffle doesn't make sense with sync = true)
     shuffle: false,
 
+    // reverse the character sequence 
+    // (note that reverse doesn't make sense with sync = true)
+    reverse: false,
+
     // callback that executes once the animation has finished
     callback: function () {}
   },
@@ -114,6 +118,7 @@ $('.tlt').textillate({
     delay: 50,
     sync: false,
     shuffle: false,
+    reverse: false,
     callback: function () {}
   },
 

diff --git a/assets/style.css b/assets/style.css
@@ -208,8 +208,8 @@ a:hover {
 }
 
 .playground .controls select {
-  width: 50%;
-  margin-right: 10px;
+  width: 48%;
+  margin-right: 4px;
 }
 
 @media (max-width: 480px) {

diff --git a/index.html b/index.html
@@ -62,14 +62,22 @@ <h2>Playground</h2>
                   <div class="control col-1-2">
                     <label>In Animation</label>
                     <select data-key="effect" data-type="in"></select>
-                    <label class="inline checkbox"><input type="checkbox" data-key="sync" data-type="in" /> Sync</label> 
-                    <label class="inline checkbox"><input type="checkbox" data-key="shuffle" data-type="in" /> Shuffle</label>
+                    <select data-key="type" data-type="in">
+                      <option value="">sequence</option>
+                      <option value="reverse">reverse</option>
+                      <option value="sync">sync</option>
+                      <option value="shuffle">shuffle</option>
+                    </select>
                   </div>
                   <div class="control col-1-2">
                     <label>Out Animation</label>
                     <select data-key="effect" data-type="out"></select>
-                    <label class="inline checkbox"><input type="checkbox" data-key="sync" data-type="out" /> Sync</label>
-                    <label class="inline checkbox"><input type="checkbox" data-key="shuffle" data-type="out" checked="checked" /> Shuffle</label>
+                    <select data-key="type" data-type="out">
+                      <option value="">sequence</option>
+                      <option value="reverse">reverse</option>
+                      <option value="sync">sync</option>
+                      <option selected="selected" value="shuffle">shuffle</option>
+                    </select>
                   </div>
                 </form>
               </div>
@@ -118,15 +126,26 @@ <h2>Dependencies</h2>
       var data = { 
         loop: true, 
         in: { callback: log('in callback called.') }, 
-        out: { callback: log('out callback called.') } 
+        out: { callback: log('out callback called.') }
       };
 
-      $form.find('[data-key]').each(function () {
+      $form.find('[data-key="effect"]').each(function () {
         var $this = $(this)
           , key = $this.data('key')
           , type = $this.data('type');
 
-          data[type][key] = $this.is(':checkbox') ? $this.is(':checked') : $this.val();
+          data[type][key] = $this.val();
+      });
+
+      $form.find('[data-key="type"]').each(function () {
+        var $this = $(this)
+          , key = $this.data('key')
+          , type = $this.data('type')
+          , val = $this.val();
+
+          data[type].shuffle = (val === 'shuffle');
+          data[type].reverse = (val === 'reverse');
+          data[type].sync = (val === 'sync');
       });
 
       return data;

diff --git a/jquery.textillate.js b/jquery.textillate.js
@@ -64,27 +64,28 @@
       return;
     } 
 
-    if (options.shuffle) shuffle($chars);
+    if (options.shuffle) $chars = shuffle($chars);
+    if (options.reverse) $chars = $chars.toArray().reverse();
 
-    $chars.each(function (i) {
-      var $this = $(this);
+    $.each($chars, function (i, c) {
+      var $char = $(c);
 
       function complete () {
         if (isInEffect(options.effect)) {
-          $this.css('visibility', 'visible');
+          $char.css('visibility', 'visible');
         } else if (isOutEffect(options.effect)) {
-          $this.css('visibility', 'hidden');
+          $char.css('visibility', 'hidden');
         }
         count -= 1;
         if (!count && cb) cb();
       }
 
       var delay = options.sync ? options.delay : options.delay * i * options.delayScale;
 
-      $this.text() ? 
-        setTimeout(function () { animate($this, options.effect, complete) }, delay) :
+      $char.text() ? 
+        setTimeout(function () { animate($char, options.effect, complete) }, delay) :
         complete();
-    })
+    });
   };
 
   var Textillate = function (element, options) {
@@ -239,6 +240,7 @@
       delayScale: 1.5,
       delay: 50,
       sync: false,
+      reverse: false,
       shuffle: false,
       callback: function () {}
     },
@@ -247,6 +249,7 @@
       delayScale: 1.5,
       delay: 50,
       sync: false,
+      reverse: false,
       shuffle: false,
       callback: function () {}
     },