Add support for callbacks and events, also some code cleanup

caseydev · Nov 20, 2013 · 84ad9f5 · 84ad9f5
1 parent e5668c9
commit 84ad9f5
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-#Textillate.js v0.1
+#Textillate.js v0.2.0
 
 See a live demo [here](http://jschr.github.com/textillate/).
 
@@ -101,7 +101,10 @@ $('.tlt').textillate({
 
     // randomize the character sequence 
     // (note that shuffle doesn't make sense with sync = true)
-    shuffle: false
+    shuffle: false,
+
+    // callback that executes once the animation has finished
+    callback: function () {}
   },
 
   // out animation settings.
@@ -111,6 +114,10 @@ $('.tlt').textillate({
     delay: 50,
     sync: false,
     shuffle: false,
-  }
+    callback: function () {}
+  },
+
+  // callback that executes once textillate has finished 
+  callback: function () {}
 });
 ```
diff --git a/index.html b/index.html
@@ -98,9 +98,12 @@ <h2>Dependencies</h2>
 <script src="jquery.textillate.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 <script>
-
   $(function (){
-
+    var log = function (msg) {
+      return function () {
+        if (console) console.log(msg);
+      }
+    }
     $('code').each(function () {
       var $this = $(this);
       $this.text($this.html());
@@ -112,7 +115,11 @@ <h2>Dependencies</h2>
       , $viewport = $('.playground .viewport');
 
     var getFormData = function () {
-      var data = { loop: true, in: {}, out: {} };
+      var data = { 
+        loop: true, 
+        in: { callback: log('in callback called.') }, 
+        out: { callback: log('out callback called.') } 
+      };
 
       $form.find('[data-key]').each(function () {
         var $this = $(this)
@@ -159,9 +166,17 @@ <h2>Dependencies</h2>
       $('h1.glow').removeClass('in');
     }, 2000);
 
+    var $tlt = $viewport.find('.tlt')
+      .on('start.textillate', log('start.textillate triggered.'))
+      .on('inAnimationBegin.textillate', log('inAnimationBegin.textillate triggered.'))
+      .on('inAnimationEnd.textillate', log('inAnimationEnd.textillate triggered.'))
+      .on('outAnimationBegin.textillate', log('outAnimationBegin.textillate triggered.'))
+      .on('outAnimationEnd.textillate', log('outAnimationEnd.textillate triggered.'))
+      .on('end.textillate', log('end.textillate'));
+
     $form.on('change', function () {
       var obj = getFormData();
-      $viewport.find('.tlt').textillate(obj);
+      $tlt.textillate(obj);
     }).trigger('change');
 
   });

diff --git a/jquery.textillate.js b/jquery.textillate.js
@@ -122,56 +122,92 @@
       base.options = options;
     };
 
-    base.start = function (index) {
-      var $next = base.$texts.find(':nth-child(' + (index || 1) + ')');
-
-      (function run ($elem) {
-        var options = $.extend({}, base.options, getData($elem));
-
-        base.$current
-          .text($elem.html())
-          .lettering('words');
-
-        base.$current.find('[class^="word"]')
-            .css({ 
-              'display': 'inline-block',
-              // fix for poor ios performance
-              '-webkit-transform': 'translate3d(0,0,0)',
-                 '-moz-transform': 'translate3d(0,0,0)',
-                   '-o-transform': 'translate3d(0,0,0)',
-                      'transform': 'translate3d(0,0,0)'
-            })
-            .each(function () { $(this).lettering() });
-
-        var $chars = base.$current.find('[class^="char"]')
-          .css('display', 'inline-block');
-
-        if (isInEffect(options.in.effect)) {
-          $chars.css('visibility', 'hidden');
-        } else if (isOutEffect(options.in.effect)) {
-          $chars.css('visibility', 'visible');
-        }
+    base.triggerEvent = function (name) {
+      var e = $.Event(name + '.textillate', { data: base });
+      $element.trigger(e);
+      return e;
+    };
 
-        animateChars($chars, options.in, function () {
-          setTimeout(function () {
-            // in case options have changed 
-            var options = $.extend({}, base.options, getData($elem));
+    base.in = function (index, cb) {
+      index = index || 0;
+
+      var $elem = base.$texts.find(':nth-child(' + (index + 1) + ')')
+        , options = $.extend({}, base.options, getData($elem))
+        , $chars;
+
+      base.triggerEvent('inAnimationBegin');
+
+      base.$current
+        .text($elem.html())
+        .lettering('words');
+
+      base.$current.find('[class^="word"]')
+          .css({ 
+            'display': 'inline-block',
+            // fix for poor ios performance
+            '-webkit-transform': 'translate3d(0,0,0)',
+               '-moz-transform': 'translate3d(0,0,0)',
+                 '-o-transform': 'translate3d(0,0,0)',
+                    'transform': 'translate3d(0,0,0)'
+          })
+          .each(function () { $(this).lettering() });
+
+      $chars = base.$current
+        .find('[class^="char"]')
+        .css('display', 'inline-block');
+
+      if (isInEffect(options.in.effect)) {
+        $chars.css('visibility', 'hidden');
+      } else if (isOutEffect(options.in.effect)) {
+        $chars.css('visibility', 'visible');
+      }
 
-            var $next = $elem.next();
+      base.currentIndex = index;
 
-            if (base.options.loop && !$next.length) {
-              $next = base.$texts.find(':first-child');
-            } 
+      animateChars($chars, options.in, function () {
+        base.triggerEvent('inAnimationEnd');
+        if (options.in.callback) options.in.callback();
+        if (cb) cb(base);
+      });
+    };
 
-            if (!$next.length) return;
+    base.out = function (cb) {
+      var $elem = base.$texts.find(':nth-child(' + (base.currentIndex + 1) + ')')
+        , $chars = base.$current.find('[class^="char"]')
+        , options = $.extend({}, base.options, getData($elem));
 
-            animateChars($chars, options.out, function () {
-              run($next)
-            });
-          }, base.options.minDisplayTime);
-        });
+      base.triggerEvent('outAnimationBegin');
 
-      }($next));
+      animateChars($chars, options.out, function () {
+        base.triggerEvent('outAnimationEnd');
+        if (options.out.callback) options.out.callback();
+        if (cb) cb(base);
+      });
+    };
+
+    base.start = function (index) {
+      base.triggerEvent('start');
+
+      (function run (index) {
+        base.in(index, function () {
+          var length = base.$texts.children().length;
+
+          index += 1;
+
+          if (!base.options.loop && index >= length) {
+            if (base.options.callback) base.options.callback();
+            base.triggerEvent('end');
+          } else {
+            index = index % length;
+
+            setTimeout(function () {
+              base.out(function () {
+                run(index)
+              });
+            }, base.options.minDisplayTime);
+          }
+        });
+      }(index || 0));
     };
 
     base.init();
@@ -203,18 +239,21 @@
       delayScale: 1.5,
       delay: 50,
       sync: false,
-      shuffle: false
+      shuffle: false,
+      callback: function () {}
     },
     out: {
       effect: 'hinge',
       delayScale: 1.5,
       delay: 50,
       sync: false,
       shuffle: false,
+      callback: function () {}
     },
     autoStart: true,
     inEffects: [],
-    outEffects: [ 'hinge' ]
+    outEffects: [ 'hinge' ],
+    callback: function () {}
   };
 
 }(jQuery));