Difference between revisions of "Template:Team:NUS Singapore/JS"

(Undo revision 162736 by Chloroplast (talk))
Line 1: Line 1:
 
<html>
 
<html>
 +
<sciprt>
 +
/*
 +
* textillate.js
 +
* http://jschr.github.com/textillate
 +
* MIT licensed
 +
*
 +
* Copyright (C) 2012-2013 Jordan Schroter
 +
*/
 +
 +
(function ($) {
 +
  "use strict";
 +
 +
  function isInEffect (effect) {
 +
    return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0;
 +
  };
 +
 +
  function isOutEffect (effect) {
 +
    return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0;
 +
  };
 +
 +
 +
  function stringToBoolean(str) {
 +
    if (str !== "true" && str !== "false") return str;
 +
    return (str === "true");
 +
  };
 +
 +
  // custom get data api method
 +
  function getData (node) {
 +
    var attrs = node.attributes || []
 +
      , data = {};
 +
 +
    if (!attrs.length) return data;
 +
 +
    $.each(attrs, function (i, attr) {
 +
      var nodeName = attr.nodeName.replace(/delayscale/, 'delayScale');
 +
      if (/^data-in-*/.test(nodeName)) {
 +
        data.in = data.in || {};
 +
        data.in[nodeName.replace(/data-in-/, '')] = stringToBoolean(attr.nodeValue);
 +
      } else if (/^data-out-*/.test(nodeName)) {
 +
        data.out = data.out || {};
 +
        data.out[nodeName.replace(/data-out-/, '')] =stringToBoolean(attr.nodeValue);
 +
      } else if (/^data-*/.test(nodeName)) {
 +
        data[nodeName.replace(/data-/, '')] = stringToBoolean(attr.nodeValue);
 +
      }
 +
    })
 +
 +
    return data;
 +
  }
 +
 +
  function shuffle (o) {
 +
      for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
 +
      return o;
 +
  }
 +
 +
  function animate ($t, effect, cb) {
 +
    $t.addClass('animated ' + effect)
 +
      .css('visibility', 'visible')
 +
      .show();
 +
 +
    $t.one('animationend webkitAnimationEnd oAnimationEnd', function () {
 +
        $t.removeClass('animated ' + effect);
 +
        cb && cb();
 +
    });
 +
  }
 +
 +
  function animateTokens ($tokens, options, cb) {
 +
    var that = this
 +
      , count = $tokens.length;
 +
 +
    if (!count) {
 +
      cb && cb();
 +
      return;
 +
    }
 +
 +
    if (options.shuffle) $tokens = shuffle($tokens);
 +
    if (options.reverse) $tokens = $tokens.toArray().reverse();
 +
 +
    $.each($tokens, function (i, t) {
 +
      var $token = $(t);
 +
 +
      function complete () {
 +
        if (isInEffect(options.effect)) {
 +
          $token.css('visibility', 'visible');
 +
        } else if (isOutEffect(options.effect)) {
 +
          $token.css('visibility', 'hidden');
 +
        }
 +
        count -= 1;
 +
        if (!count && cb) cb();
 +
      }
 +
 +
      var delay = options.sync ? options.delay : options.delay * i * options.delayScale;
 +
 +
      $token.text() ?
 +
        setTimeout(function () { animate($token, options.effect, complete) }, delay) :
 +
        complete();
 +
    });
 +
  };
 +
 +
  var Textillate = function (element, options) {
 +
    var base = this
 +
      , $element = $(element);
 +
 +
    base.init = function () {
 +
      base.$texts = $element.find(options.selector);
 +
 +
      if (!base.$texts.length) {
 +
        base.$texts = $('<ul class="texts"><li>' + $element.html() + '</li></ul>');
 +
        $element.html(base.$texts);
 +
      }
 +
 +
      base.$texts.hide();
 +
 +
      base.$current = $('<span>')
 +
        .html(base.$texts.find(':first-child').html())
 +
        .prependTo($element);
 +
 +
      if (isInEffect(options.in.effect)) {
 +
        base.$current.css('visibility', 'hidden');
 +
      } else if (isOutEffect(options.out.effect)) {
 +
        base.$current.css('visibility', 'visible');
 +
      }
 +
 +
      base.setOptions(options);
 +
 +
      base.timeoutRun = null;
 +
 +
      setTimeout(function () {
 +
        base.options.autoStart && base.start();
 +
      }, base.options.initialDelay)
 +
    };
 +
 +
    base.setOptions = function (options) {
 +
      base.options = options;
 +
    };
 +
 +
    base.triggerEvent = function (name) {
 +
      var e = $.Event(name + '.tlt');
 +
      $element.trigger(e, base);
 +
      return e;
 +
    };
 +
 +
    base.in = function (index, cb) {
 +
      index = index || 0;
 +
 +
      var $elem = base.$texts.find(':nth-child(' + ((index||0) + 1) + ')')
 +
        , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {})
 +
        , $tokens;
 +
 +
      $elem.addClass('current');
 +
 +
      base.triggerEvent('inAnimationBegin');
 +
 +
      base.$current
 +
        .html($elem.html())
 +
        .lettering('words');
 +
 +
      // split words to individual characters if token type is set to 'char'
 +
      if (base.options.type == "char") {
 +
        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() });
 +
      }
 +
 +
      $tokens = base.$current
 +
        .find('[class^="' + base.options.type + '"]')
 +
        .css('display', 'inline-block');
 +
 +
      if (isInEffect(options.in.effect)) {
 +
        $tokens.css('visibility', 'hidden');
 +
      } else if (isOutEffect(options.in.effect)) {
 +
        $tokens.css('visibility', 'visible');
 +
      }
 +
 +
      base.currentIndex = index;
 +
 +
      animateTokens($tokens, options.in, function () {
 +
        base.triggerEvent('inAnimationEnd');
 +
        if (options.in.callback) options.in.callback();
 +
        if (cb) cb(base);
 +
      });
 +
    };
 +
 +
    base.out = function (cb) {
 +
      var $elem = base.$texts.find(':nth-child(' + ((base.currentIndex||0) + 1) + ')')
 +
        , $tokens = base.$current.find('[class^="' + base.options.type + '"]')
 +
        , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {})
 +
 +
      base.triggerEvent('outAnimationBegin');
 +
 +
      animateTokens($tokens, options.out, function () {
 +
        $elem.removeClass('current');
 +
        base.triggerEvent('outAnimationEnd');
 +
        if (options.out.callback) options.out.callback();
 +
        if (cb) cb(base);
 +
      });
 +
    };
 +
 +
    base.start = function (index) {
 +
      setTimeout(function () {
 +
        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;
 +
 +
            base.timeoutRun = setTimeout(function () {
 +
              base.out(function () {
 +
                run(index)
 +
              });
 +
            }, base.options.minDisplayTime);
 +
          }
 +
        });
 +
      }(index || 0));
 +
      }, base.options.initialDelay);
 +
    };
 +
 +
    base.stop = function () {
 +
      if (base.timeoutRun) {
 +
        clearInterval(base.timeoutRun);
 +
        base.timeoutRun = null;
 +
      }
 +
    };
 +
 +
    base.init();
 +
  }
 +
 +
  $.fn.textillate = function (settings, args) {
 +
    return this.each(function () {
 +
      var $this = $(this)
 +
        , data = $this.data('textillate')
 +
        , options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings);
 +
 +
      if (!data) {
 +
        $this.data('textillate', (data = new Textillate(this, options)));
 +
      } else if (typeof settings == 'string') {
 +
        data[settings].apply(data, [].concat(args));
 +
      } else {
 +
        data.setOptions.call(data, options);
 +
      }
 +
    })
 +
  };
 +
 +
  $.fn.textillate.defaults = {
 +
    selector: '.texts',
 +
    loop: false,
 +
    minDisplayTime: 2000,
 +
    initialDelay: 0,
 +
    in: {
 +
      effect: 'fadeInLeftBig',
 +
      delayScale: 1.5,
 +
      delay: 50,
 +
      sync: false,
 +
      reverse: false,
 +
      shuffle: false,
 +
      callback: function () {}
 +
    },
 +
    out: {
 +
      effect: 'hinge',
 +
      delayScale: 1.5,
 +
      delay: 50,
 +
      sync: false,
 +
      reverse: false,
 +
      shuffle: false,
 +
      callback: function () {}
 +
    },
 +
    autoStart: true,
 +
    inEffects: [],
 +
    outEffects: [ 'hinge' ],
 +
    callback: function () {},
 +
    type: 'char'
 +
  };
 +
 +
}(jQuery));
 +
</script>
 +
<script>
 +
/*global jQuery */
 +
/*!
 +
* Lettering.JS 0.6.1
 +
*
 +
* Copyright 2010, Dave Rupert http://daverupert.com
 +
* Released under the WTFPL license
 +
* http://sam.zoy.org/wtfpl/
 +
*
 +
* Thanks to Paul Irish - http://paulirish.com - for the feedback.
 +
*
 +
* Date: Mon Sep 20 17:14:00 2010 -0600
 +
*/
 +
(function($){
 +
function injector(t, splitter, klass, after) {
 +
var a = t.text().split(splitter), inject = '';
 +
if (a.length) {
 +
$(a).each(function(i, item) {
 +
inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
 +
});
 +
t.empty().append(inject);
 +
}
 +
}
 +
 +
var methods = {
 +
init : function() {
 +
 +
return this.each(function() {
 +
injector($(this), '', 'char', '');
 +
});
 +
 +
},
 +
 +
words : function() {
 +
 +
return this.each(function() {
 +
injector($(this), ' ', 'word', ' ');
 +
});
 +
 +
},
 +
 +
lines : function() {
 +
 +
return this.each(function() {
 +
var r = "eefec303079ad17405c889e092e105b0";
 +
// Because it's hard to split a <br/> tag consistently across browsers,
 +
// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
 +
// (of the word "split").  If you're trying to use this plugin on that
 +
// md5 hash string, it will fail because you're being ridiculous.
 +
injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
 +
});
 +
 +
}
 +
};
 +
 +
$.fn.lettering = function( method ) {
 +
// Method calling logic
 +
if ( method && methods[method] ) {
 +
return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
 +
} else if ( method === 'letters' || ! method ) {
 +
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
 +
}
 +
$.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
 +
return this;
 +
};
 +
 +
})(jQuery);
 +
</script>
 
<!--lunar.js-->
 
<!--lunar.js-->
 
<script>
 
<script>

Revision as of 05:14, 4 October 2016

/* * textillate.js * http://jschr.github.com/textillate * MIT licensed * * Copyright (C) 2012-2013 Jordan Schroter */ (function ($) { "use strict"; function isInEffect (effect) { return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0; }; function isOutEffect (effect) { return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0; }; function stringToBoolean(str) { if (str !== "true" && str !== "false") return str; return (str === "true"); }; // custom get data api method function getData (node) { var attrs = node.attributes || [] , data = {}; if (!attrs.length) return data; $.each(attrs, function (i, attr) { var nodeName = attr.nodeName.replace(/delayscale/, 'delayScale'); if (/^data-in-*/.test(nodeName)) { data.in = data.in || {}; data.in[nodeName.replace(/data-in-/, '')] = stringToBoolean(attr.nodeValue); } else if (/^data-out-*/.test(nodeName)) { data.out = data.out || {}; data.out[nodeName.replace(/data-out-/, '')] =stringToBoolean(attr.nodeValue); } else if (/^data-*/.test(nodeName)) { data[nodeName.replace(/data-/, '')] = stringToBoolean(attr.nodeValue); } }) return data; } function shuffle (o) { for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; } function animate ($t, effect, cb) { $t.addClass('animated ' + effect) .css('visibility', 'visible') .show(); $t.one('animationend webkitAnimationEnd oAnimationEnd', function () { $t.removeClass('animated ' + effect); cb && cb(); }); } function animateTokens ($tokens, options, cb) { var that = this , count = $tokens.length; if (!count) { cb && cb(); return; } if (options.shuffle) $tokens = shuffle($tokens); if (options.reverse) $tokens = $tokens.toArray().reverse(); $.each($tokens, function (i, t) { var $token = $(t); function complete () { if (isInEffect(options.effect)) { $token.css('visibility', 'visible'); } else if (isOutEffect(options.effect)) { $token.css('visibility', 'hidden'); } count -= 1; if (!count && cb) cb(); } var delay = options.sync ? options.delay : options.delay * i * options.delayScale; $token.text() ? setTimeout(function () { animate($token, options.effect, complete) }, delay) : complete(); }); }; var Textillate = function (element, options) { var base = this , $element = $(element); base.init = function () { base.$texts = $element.find(options.selector); if (!base.$texts.length) { base.$texts = $('

  • ' + $element.html() + '
'); $element.html(base.$texts); } base.$texts.hide(); base.$current = $('') .html(base.$texts.find(':first-child').html()) .prependTo($element); if (isInEffect(options.in.effect)) { base.$current.css('visibility', 'hidden'); } else if (isOutEffect(options.out.effect)) { base.$current.css('visibility', 'visible'); } base.setOptions(options); base.timeoutRun = null; setTimeout(function () { base.options.autoStart && base.start(); }, base.options.initialDelay) }; base.setOptions = function (options) { base.options = options; }; base.triggerEvent = function (name) { var e = $.Event(name + '.tlt'); $element.trigger(e, base); return e; }; base.in = function (index, cb) { index = index || 0; var $elem = base.$texts.find(':nth-child(' + ((index||0) + 1) + ')') , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}) , $tokens; $elem.addClass('current'); base.triggerEvent('inAnimationBegin'); base.$current .html($elem.html()) .lettering('words'); // split words to individual characters if token type is set to 'char' if (base.options.type == "char") { 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() }); } $tokens = base.$current .find('[class^="' + base.options.type + '"]') .css('display', 'inline-block'); if (isInEffect(options.in.effect)) { $tokens.css('visibility', 'hidden'); } else if (isOutEffect(options.in.effect)) { $tokens.css('visibility', 'visible'); } base.currentIndex = index; animateTokens($tokens, options.in, function () { base.triggerEvent('inAnimationEnd'); if (options.in.callback) options.in.callback(); if (cb) cb(base); }); }; base.out = function (cb) { var $elem = base.$texts.find(':nth-child(' + ((base.currentIndex||0) + 1) + ')') , $tokens = base.$current.find('[class^="' + base.options.type + '"]') , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}) base.triggerEvent('outAnimationBegin'); animateTokens($tokens, options.out, function () { $elem.removeClass('current'); base.triggerEvent('outAnimationEnd'); if (options.out.callback) options.out.callback(); if (cb) cb(base); }); }; base.start = function (index) { setTimeout(function () { 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; base.timeoutRun = setTimeout(function () { base.out(function () { run(index) }); }, base.options.minDisplayTime); } }); }(index || 0)); }, base.options.initialDelay); }; base.stop = function () { if (base.timeoutRun) { clearInterval(base.timeoutRun); base.timeoutRun = null; } }; base.init(); } $.fn.textillate = function (settings, args) { return this.each(function () { var $this = $(this) , data = $this.data('textillate') , options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings); if (!data) { $this.data('textillate', (data = new Textillate(this, options))); } else if (typeof settings == 'string') { data[settings].apply(data, [].concat(args)); } else { data.setOptions.call(data, options); } }) }; $.fn.textillate.defaults = { selector: '.texts', loop: false, minDisplayTime: 2000, initialDelay: 0, in: { effect: 'fadeInLeftBig', delayScale: 1.5, delay: 50, sync: false, reverse: false, shuffle: false, callback: function () {} }, out: { effect: 'hinge', delayScale: 1.5, delay: 50, sync: false, reverse: false, shuffle: false, callback: function () {} }, autoStart: true, inEffects: [], outEffects: [ 'hinge' ], callback: function () {}, type: 'char' }; }(jQuery));