From 85fdf5b510c5b9f0bc27fb292ed66d790083d388 Mon Sep 17 00:00:00 2001 From: Brandon Goldman Date: Mon, 22 Feb 2016 18:34:55 -0800 Subject: [PATCH] update typed.js to newer version --- js/typed.js | 420 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 412 insertions(+), 8 deletions(-) diff --git a/js/typed.js b/js/typed.js index be9b69d..d45e1e5 100644 --- a/js/typed.js +++ b/js/typed.js @@ -20,11 +20,415 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -!function(d){var f=function(b,c){this.el=d(b);this.options=d.extend({},d.fn.typed.defaults,c);this.isInput=this.el.is("input");this.attr=this.options.attr;this.showCursor=this.isInput?!1:this.options.showCursor;this.elContent=this.attr?this.el.attr(this.attr):this.el.text();this.contentType=this.options.contentType;this.typeSpeed=this.options.typeSpeed;this.startDelay=this.options.startDelay;this.backSpeed=this.options.backSpeed;this.backDelay=this.options.backDelay;this.stringsElement=this.options.stringsElement; -this.strings=this.options.strings;this.stopNum=this.arrayPos=this.strPos=0;this.loop=this.options.loop;this.loopCount=this.options.loopCount;this.curLoop=0;this.stop=!1;this.cursorChar=this.options.cursorChar;this.shuffle=this.options.shuffle;this.sequence=[];this.build()};f.prototype={constructor:f,init:function(){var b=this;b.timeout=setTimeout(function(){for(var c=0;c'+this.cursorChar+""),this.el.after(this.cursor));if(this.stringsElement){b.strings=[];this.stringsElement.hide();var c=this.stringsElement.find("p");d.each(c,function(a,c){b.strings.push(d(c).html())})}this.init()},typewrite:function(b,c){if(!0!==this.stop){var a=this;a.timeout=setTimeout(function(){var g=0,e=b.substr(c);if("^"===e.charAt(0)){var d=1;/^\^\d+/.test(e)&&(e= -/\d+/.exec(e)[0],d+=e.length,g=parseInt(e));b=b.substring(0,c)+b.substring(c+d)}if("html"===a.contentType&&(e=b.substr(c).charAt(0),"<"===e||"&"===e)){for(var f=d="",f="<"===e?">":";";b.substr(c).charAt(0)!==f;)d+=b.substr(c).charAt(0),c++;c++;d+=f}a.timeout=setTimeout(function(){if(c===b.length){a.options.onStringTyped(a.arrayPos);if(a.arrayPos===a.strings.length-1&&(a.options.callback(),a.curLoop++,!1===a.loop||a.curLoop===a.loopCount))return;a.timeout=setTimeout(function(){a.backspace(b,c)},a.backDelay)}else{0=== -c&&a.options.preStringTyped(a.arrayPos);var d=b.substr(0,c+1);a.attr?a.el.attr(a.attr,d):a.isInput?a.el.val(d):"html"===a.contentType?a.el.html(d):a.el.text(d);c++;a.typewrite(b,c)}},g)},Math.round(70*Math.random())+this.typeSpeed)}},backspace:function(b,c){if(!0!==this.stop){var a=this;a.timeout=setTimeout(function(){if("html"===a.contentType&&">"===b.substr(c).charAt(0)){for(var d="";"<"!==b.substr(c).charAt(0);)d-=b.substr(c).charAt(0),c--;c--}d=b.substr(0,c);a.attr?a.el.attr(a.attr,d):a.isInput? -a.el.val(d):"html"===a.contentType?a.el.html(d):a.el.text(d);c>a.stopNum?(c--,a.backspace(b,c)):c<=a.stopNum&&(a.arrayPos++,a.arrayPos===a.strings.length?(a.arrayPos=0,a.shuffle&&(a.sequence=a.shuffleArray(a.sequence)),a.init()):a.typewrite(a.strings[a.sequence[a.arrayPos]],c))},Math.round(70*Math.random())+this.backSpeed)}},shuffleArray:function(b){var c,a,d=b.length;if(d)for(;--d;)a=Math.floor(Math.random()*(d+1)),c=b[a],b[a]=b[d],b[d]=c;return b},reset:function(){clearInterval(this.timeout);var b= -this.el.attr("id");this.el.after('');this.el.remove();"undefined"!==typeof this.cursor&&this.cursor.remove();this.options.resetCallback()}};d.fn.typed=function(b){return this.each(function(){var c=d(this),a=c.data("typed"),g="object"==typeof b&&b;a||c.data("typed",a=new f(this,g));if("string"==typeof b)a[b]()})};d.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0, -backSpeed:0,shuffle:!1,backDelay:500,loop:!1,loopCount:!1,showCursor:!0,cursorChar:"|",attr:null,contentType:"html",callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery); + + + +! function($) { + + "use strict"; + + var Typed = function(el, options) { + + // chosen element to manipulate text + this.el = $(el); + + // options + this.options = $.extend({}, $.fn.typed.defaults, options); + + // attribute to type into + this.isInput = this.el.is('input'); + this.attr = this.options.attr; + + // show cursor + this.showCursor = this.isInput ? false : this.options.showCursor; + + // text content of element + this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text() + + // html or plain text + this.contentType = this.options.contentType; + + // typing speed + this.typeSpeed = this.options.typeSpeed; + + // add a delay before typing starts + this.startDelay = this.options.startDelay; + + // backspacing speed + this.backSpeed = this.options.backSpeed; + + // amount of time to wait before backspacing + this.backDelay = this.options.backDelay; + + // div containing strings + this.stringsElement = this.options.stringsElement; + + // input strings of text + this.strings = this.options.strings; + + // character number position of current string + this.strPos = 0; + + // current array position + this.arrayPos = 0; + + // number to stop backspacing on. + // default 0, can change depending on how many chars + // you want to remove at the time + this.stopNum = 0; + + // Looping logic + this.loop = this.options.loop; + this.loopCount = this.options.loopCount; + this.curLoop = 0; + + // for stopping + this.stop = false; + + // custom cursor + this.cursorChar = this.options.cursorChar; + + // shuffle the strings + this.shuffle = this.options.shuffle; + // the order of strings + this.sequence = []; + + // All systems go! + this.build(); + }; + + Typed.prototype = { + + constructor: Typed + + , + init: function() { + // begin the loop w/ first current string (global self.strings) + // current string will be passed as an argument each time after this + var self = this; + self.timeout = setTimeout(function() { + for (var i=0;i" + this.cursorChar + ""); + this.el.after(this.cursor); + } + if (this.stringsElement) { + self.strings = []; + this.stringsElement.hide(); + var strings = this.stringsElement.find('p'); + $.each(strings, function(key, value){ + self.strings.push($(value).html()); + }); + } + this.init(); + } + + // pass current string state to each function, types 1 char per call + , + typewrite: function(curString, curStrPos) { + // exit when stopped + if (this.stop === true) { + return; + } + + // varying values for setTimeout during typing + // can't be global since number changes each time loop is executed + var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed; + var self = this; + + // ------------- optional ------------- // + // backpaces a certain string faster + // ------------------------------------ // + // if (self.arrayPos == 1){ + // self.backDelay = 50; + // } + // else{ self.backDelay = 500; } + + // contain typing function in a timeout humanize'd delay + self.timeout = setTimeout(function() { + // check for an escape character before a pause value + // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^ + // single ^ are removed from string + var charPause = 0; + var substr = curString.substr(curStrPos); + if (substr.charAt(0) === '^') { + var skip = 1; // skip atleast 1 + if (/^\^\d+/.test(substr)) { + substr = /\d+/.exec(substr)[0]; + skip += substr.length; + charPause = parseInt(substr); + } + + // strip out the escape character and pause value so they're not printed + curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip); + } + + if (self.contentType === 'html') { + // skip over html tags while typing + var curChar = curString.substr(curStrPos).charAt(0) + if (curChar === '<' || curChar === '&') { + var tag = ''; + var endTag = ''; + if (curChar === '<') { + endTag = '>' + } else { + endTag = ';' + } + while (curString.substr(curStrPos).charAt(0) !== endTag) { + tag += curString.substr(curStrPos).charAt(0); + curStrPos++; + } + curStrPos++; + tag += endTag; + } + } + + // timeout for any pause after a character + self.timeout = setTimeout(function() { + if (curStrPos === curString.length) { + // fires callback function + self.options.onStringTyped(self.arrayPos); + + // is this the final string + if (self.arrayPos === self.strings.length - 1) { + // animation that occurs on the last typed string + self.options.callback(); + + self.curLoop++; + + // quit if we wont loop back + if (self.loop === false || self.curLoop === self.loopCount) + return; + } + + self.timeout = setTimeout(function() { + self.backspace(curString, curStrPos); + }, self.backDelay); + } else { + + /* call before functions if applicable */ + if (curStrPos === 0) + self.options.preStringTyped(self.arrayPos); + + // start typing each new char into existing string + // curString: arg, self.el.html: original text inside element + var nextString = curString.substr(0, curStrPos + 1); + if (self.attr) { + self.el.attr(self.attr, nextString); + } else { + if (self.isInput) { + self.el.val(nextString); + } else if (self.contentType === 'html') { + self.el.html(nextString); + } else { + self.el.text(nextString); + } + } + + // add characters one by one + curStrPos++; + // loop the function + self.typewrite(curString, curStrPos); + } + // end of character pause + }, charPause); + + // humanized value for typing + }, humanize); + + } + + , + backspace: function(curString, curStrPos) { + // exit when stopped + if (this.stop === true) { + return; + } + + // varying values for setTimeout during typing + // can't be global since number changes each time loop is executed + var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed; + var self = this; + + self.timeout = setTimeout(function() { + + // ----- this part is optional ----- // + // check string array position + // on the first string, only delete one word + // the stopNum actually represents the amount of chars to + // keep in the current string. In my case it's 14. + // if (self.arrayPos == 1){ + // self.stopNum = 14; + // } + //every other time, delete the whole typed string + // else{ + // self.stopNum = 0; + // } + + if (self.contentType === 'html') { + // skip over html tags while backspacing + if (curString.substr(curStrPos).charAt(0) === '>') { + var tag = ''; + while (curString.substr(curStrPos).charAt(0) !== '<') { + tag -= curString.substr(curStrPos).charAt(0); + curStrPos--; + } + curStrPos--; + tag += '<'; + } + } + + // ----- continue important stuff ----- // + // replace text with base text + typed characters + var nextString = curString.substr(0, curStrPos); + if (self.attr) { + self.el.attr(self.attr, nextString); + } else { + if (self.isInput) { + self.el.val(nextString); + } else if (self.contentType === 'html') { + self.el.html(nextString); + } else { + self.el.text(nextString); + } + } + + // if the number (id of character in current string) is + // less than the stop number, keep going + if (curStrPos > self.stopNum) { + // subtract characters one by one + curStrPos--; + // loop the function + self.backspace(curString, curStrPos); + } + // if the stop number has been reached, increase + // array position to next string + else if (curStrPos <= self.stopNum) { + self.arrayPos++; + + if (self.arrayPos === self.strings.length) { + self.arrayPos = 0; + + // Shuffle sequence again + if(self.shuffle) self.sequence = self.shuffleArray(self.sequence); + + self.init(); + } else + self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos); + } + + // humanized value for typing + }, humanize); + + } + /** + * Shuffles the numbers in the given array. + * @param {Array} array + * @returns {Array} + */ + ,shuffleArray: function(array) { + var tmp, current, top = array.length; + if(top) while(--top) { + current = Math.floor(Math.random() * (top + 1)); + tmp = array[current]; + array[current] = array[top]; + array[top] = tmp; + } + return array; + } + + // Start & Stop currently not working + + // , stop: function() { + // var self = this; + + // self.stop = true; + // clearInterval(self.timeout); + // } + + // , start: function() { + // var self = this; + // if(self.stop === false) + // return; + + // this.stop = false; + // this.init(); + // } + + // Reset and rebuild the element + , + reset: function() { + var self = this; + clearInterval(self.timeout); + var id = this.el.attr('id'); + this.el.after('') + this.el.remove(); + if (typeof this.cursor !== 'undefined') { + this.cursor.remove(); + } + // Send the callback + self.options.resetCallback(); + } + + }; + + $.fn.typed = function(option) { + return this.each(function() { + var $this = $(this), + data = $this.data('typed'), + options = typeof option == 'object' && option; + if (!data) $this.data('typed', (data = new Typed(this, options))); + if (typeof option == 'string') data[option](); + }); + }; + + $.fn.typed.defaults = { + strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"], + stringsElement: null, + // typing speed + typeSpeed: 0, + // time before typing starts + startDelay: 0, + // backspacing speed + backSpeed: 0, + // shuffle the strings + shuffle: false, + // time before backspacing + backDelay: 500, + // loop + loop: false, + // false = infinite + loopCount: false, + // show cursor + showCursor: true, + // character for cursor + cursorChar: "|", + // attribute to type (null == text) + attr: null, + // either html or text + contentType: 'html', + // call when done callback function + callback: function() {}, + // starting callback function before each string + preStringTyped: function() {}, + //callback for every typed string + onStringTyped: function() {}, + // callback for reset + resetCallback: function() {} + }; + + +}(window.jQuery);