typeit - npm Package Compare versions
Comparing version 1.0.4 to 1.1.1
| /** | ||
| * jQuery TypeIt | ||
| * @author Alex MacArthur (http://macarthur.me) | ||
| * @version 1.0.4 | ||
| * @version 1.1.1 | ||
| * @copyright 2015 Alex MacArthur | ||
@@ -9,191 +9,235 @@ * @description Types out a given string or strings. | ||
| (function($){ | ||
| (function($, undefined){ | ||
| // the actual jQuery function | ||
| $.fn.typeIt = function(options){ | ||
| return this.each(function(){ | ||
| $(this).data("typeit", new $.fn.typeIt.typeItClass($(this), options)); | ||
| }); | ||
| var proto; | ||
| // the actual jQuery function | ||
| $.fn.typeIt = function(options, callback){ | ||
| // now call a callback function | ||
| return this.each(function(){ | ||
| $(this).data("typeit", new $.fn.typeIt.typeItClass($(this), options, callback)); | ||
| }); | ||
| }; | ||
| // create the class | ||
| $.fn.typeIt.typeItClass = function(theElement, options, callback){ | ||
| // plugin default settings | ||
| this.defaults = { | ||
| whatToType:'This is the default string. Please replace this string with your own.', | ||
| typeSpeed: 200, | ||
| lifeLike: false, | ||
| showCursor: true, | ||
| breakLines: true, | ||
| breakWait: 500, | ||
| delayStart: 250 | ||
| }; | ||
| // create the class | ||
| $.fn.typeIt.typeItClass = function(theElement, options){ | ||
| // plugin default settings | ||
| this.defaults = { | ||
| whatToType:'This is the default string. Please replace this string with your own.', | ||
| typeSpeed: 200, | ||
| lifeLike: false, | ||
| showCursor: true, | ||
| breakLines: true, | ||
| breakWait: 500, | ||
| delayStart: 250 | ||
| }; | ||
| this.dataAttDefaults = { | ||
| whatToType : theElement.data('typeitWhattotype'), | ||
| typeSpeed: theElement.data('typeitSpeed'), | ||
| lifeLike: theElement.data('typeitLifelike'), | ||
| showCursor: theElement.data('typeitShowcursor'), | ||
| breakLines: theElement.data('typeitBreaklines'), | ||
| breakWait: theElement.data('typeitBreakWait'), | ||
| delayStart : theElement.data('typeitDelayStart') | ||
| }; | ||
| this.dataDefaults = { | ||
| whatToType : theElement.data('typeitWhattotype'), | ||
| typeSpeed: theElement.data('typeitSpeed'), | ||
| lifeLike: theElement.data('typeitLifelike'), | ||
| showCursor: theElement.data('typeitShowcursor'), | ||
| breakLines: theElement.data('typeitBreaklines'), | ||
| breakWait: theElement.data('typeitBreakWait'), | ||
| delayStart : theElement.data('typeitDelayStart') | ||
| }; | ||
| // the settings for the plugin instance | ||
| this.settings = {}; | ||
| // the element that holds the text | ||
| this.theElement = theElement; | ||
| // callback function that executes after strings have been printed | ||
| this.callback = callback; | ||
| // the number of types a character has been typed for each pass over a string | ||
| this.typeCount = 0; | ||
| // the character number of a string that's currently being deleted | ||
| this.deleteCount = 0; | ||
| // the string number that's currently being typed or deleted | ||
| this.stringCount = 0; | ||
| // the place we're at in the big merged string | ||
| this.stringPlaceCount = 0; | ||
| // the length of the current string being handled | ||
| this.phraseLength = 0; | ||
| // array that holds whatToType string(s) | ||
| this.stringArray = []; | ||
| // array holding the length of each string | ||
| this.stringLengths = []; | ||
| // the timeout responsible for deleting characters | ||
| this.deleteTimeout = null; | ||
| // the timeout responsible for typing/adding characters | ||
| this.typeTimeout = null; | ||
| // the progressively shorter string as it's being deleted | ||
| this.shortenedText = null; | ||
| // let 'r rip | ||
| this.init(options); | ||
| }; | ||
| this.theElement = theElement; | ||
| this.settings = $.extend({}, this.defaults, options, this.dataDefaults); | ||
| this.typeCount = 0; | ||
| this.deleteCount = 0; | ||
| this.stringCount = 0; | ||
| this.stringPlaceCount = 0; | ||
| this.phraseLength = 0; | ||
| this.cursor = ''; | ||
| this.deleteTimeout = null; | ||
| this.typeTimeout = null; | ||
| this.shortenedText = null; | ||
| // create a new prototype | ||
| _proto = $.fn.typeIt.typeItClass.prototype; | ||
| this.init(theElement); | ||
| }; | ||
| _proto.init = function(options){ | ||
| // create a new prototype | ||
| var _proto = $.fn.typeIt.typeItClass.prototype; | ||
| // make sure the callback function is all good | ||
| if(this.validateCallbackFunction() === false){ return false; } | ||
| // merge settings into this.settings object | ||
| $.extend(this.settings, this.defaults, options, this.dataAttDefaults); | ||
| // process the whatToType data to get it so we can use it | ||
| this.processWhatToType(); | ||
| // add all the elements & classes we'll be needing | ||
| this.setupDOMComponents(); | ||
| // start to type the string(s) after the specified delay | ||
| setTimeout(function() { | ||
| this.typeLoop(); | ||
| }.bind(this), this.settings.delayStart); | ||
| // initialize the plugin | ||
| _proto.init = function(theElement){ | ||
| }; | ||
| this.stringArray = this.settings.whatToType; | ||
| // check if the value is an array or just a string | ||
| if(Object.prototype.toString.call(this.stringArray) !== '[object Array]'){ | ||
| // since it's not already an array, turn it into one, since later functionality depends on it being one | ||
| this.stringArray = '["' + this.stringArray + '"]'; | ||
| this.stringArray = JSON.parse(this.stringArray); | ||
| } | ||
| this.mergedStrings = this.stringArray.join(''); | ||
| this.stringLengths = {}; | ||
| this.phraseLength = this.stringLengths[this.stringCount]; | ||
| _proto.setupDOMComponents = function() { | ||
| // get the string lengths and save to array, set up ti-containers for each string | ||
| for(j=0; j < this.stringArray.length; j++){ | ||
| this.stringLengths[j] = this.stringArray[j].length; | ||
| // set up the number of ti-containers we'll need to hold the strings | ||
| this.theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>'); | ||
| } | ||
| // get the string lengths and save to array | ||
| for(j=0; j < this.stringArray.length; j++){ | ||
| this.stringLengths[j] = this.stringArray[j].length; | ||
| // set up the number of ti-containers we'll need to hold the strings | ||
| theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>'); | ||
| } | ||
| // add .active-container to the first .ti-text-container so the cursor starts blinking before a string is printed | ||
| this.theElement.find('.ti-container:first-child').find('.ti-text-container').addClass('active-container'); | ||
| // add .active-container to the first .ti-text-container so the cursor starts blinking before a string is printed | ||
| theElement.find('.ti-container:first-child').find('.ti-text-container').addClass('active-container'); | ||
| // if breakLines is false, then we for sure only need ONE ti-container even if there multiple strings, so make sure of that | ||
| if(this.settings.breakLines === false) { | ||
| this.theElement.find('.ti-container').remove(); | ||
| this.theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>'); | ||
| } | ||
| // if breakLines is false, then we for sure only need ONE ti-container even if there multiple strings, so make sure of that | ||
| if(this.settings.breakLines === false) { | ||
| theElement.find('.ti-container').remove(); | ||
| theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>'); | ||
| } | ||
| // if showCursor is false, then remove the ti-cursor class | ||
| if(this.settings.showCursor === false) { | ||
| this.theElement.find('.ti-text-container').removeClass('ti-cursor'); | ||
| } | ||
| }; | ||
| // if showCursor is false, then remove the ti-cursor class | ||
| if(this.settings.showCursor === false) { | ||
| $(this.theElement).find('.ti-text-container').removeClass('ti-cursor'); | ||
| } | ||
| _proto.processWhatToType = function() { | ||
| this.stringArray = this.settings.whatToType; | ||
| // check if the value is an array or just a string | ||
| if(Object.prototype.toString.call(this.stringArray) !== '[object Array]'){ | ||
| // since it's not already an array, turn it into one, since later functionality depends on it being one | ||
| this.stringArray = '["' + this.stringArray + '"]'; | ||
| this.stringArray = JSON.parse(this.stringArray); | ||
| } | ||
| // turn string array into a big string | ||
| this.mergedStrings = this.stringArray.join(''); | ||
| }; | ||
| // start to type the string(s) | ||
| setTimeout(function() { | ||
| this.typeLoop(); | ||
| }.bind(this), this.settings.delayStart); | ||
| _proto.validateCallbackFunction = function() { | ||
| }; | ||
| // if undefined, assign blank callback | ||
| if(typeof this.callback === 'undefined') { | ||
| this.callback = function(){return true;}; | ||
| } | ||
| }; | ||
| _proto.typeLoop = function(){ | ||
| _proto.typeLoop = function(){ | ||
| // set the length of the phrase for this time around | ||
| this.phraseLength = this.stringLengths[this.stringCount]; | ||
| // set the length of the current phrase being typed | ||
| this.phraseLength = this.stringLengths[this.stringCount]; | ||
| // make it human-like if specified in the settings | ||
| if(this.settings.lifeLike === true){ | ||
| this.delayTime = this.settings.typeSpeed*Math.random(); | ||
| // make it human-like if specified in the settings | ||
| if(this.settings.lifeLike === true){ | ||
| this.delayTime = this.settings.typeSpeed*Math.random(); | ||
| } else { | ||
| this.delayTime = this.settings.typeSpeed; | ||
| } | ||
| this.typeTimeout = setTimeout(function () { | ||
| // append the string of letters to the respective .ti-text-container | ||
| var characterToAppend = this.mergedStrings[this.typeCount+this.stringPlaceCount]; | ||
| // if breakLines is set to true, add the 'active-container' class to the next .ti-text-container in the list. | ||
| if(this.settings.breakLines === true) { | ||
| this.theElement.find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(characterToAppend); | ||
| } else { | ||
| this.delayTime = this.settings.typeSpeed; | ||
| this.theElement.find('.ti-text-container').addClass('active-container').append(characterToAppend); | ||
| } | ||
| this.typeTimeout = setTimeout(function () { | ||
| this.typeCount++; | ||
| // if there are still characters to be typed, call the same function again | ||
| if (this.typeCount < this.phraseLength) { | ||
| this.typeLoop(this.stringLengths[this.stringCount]); | ||
| // if there are no more characters to print and there is more than one string to be typed, delete the string just printed | ||
| } else if(this.stringArray.length > 1) { | ||
| // update the this.stringPlaceCount so that we're appending starting at the correct spot in the merged string | ||
| this.stringPlaceCount = this.stringPlaceCount + this.phraseLength; | ||
| // reset this.typeCount in case this function needs to be reused | ||
| this.typeCount = 0; | ||
| // append the string of letters to the respective .ti-text-container | ||
| // use find() so that we select the class only for the element on which we're instantiated | ||
| // if the stringCount is the same as the number of strings we started with, we're done, so call the callback function | ||
| if(this.stringCount+1 === this.stringArray.length) { | ||
| this.callback(); | ||
| // if we're not on the last string, then move on to to delete, unless the user wants to break lines | ||
| } else if((this.stringCount+1 < this.stringArray.length) && this.settings.breakLines === false){ | ||
| characterToAppend = this.mergedStrings[this.typeCount+this.stringPlaceCount]; | ||
| setTimeout(function(){ | ||
| this.deleteLoop(); | ||
| }.bind(this), this.settings.breakWait); | ||
| // if breakLines is set to true, add the 'active-container' class to the next .ti-text-container in the list. | ||
| if(this.settings.breakLines === true) { | ||
| $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(characterToAppend); | ||
| } else { | ||
| $(this.theElement).find('.ti-text-container').addClass('active-container').append(characterToAppend); | ||
| } | ||
| // if breakLines is true and we still have strings left to type, break it and continue | ||
| } else if (this.stringCount+1 < this.stringArray.length && this.settings.breakLines === true){ | ||
| this.stringCount++; | ||
| this.typeCount++; | ||
| if (this.typeCount < this.phraseLength) { | ||
| // type out the string | ||
| this.typeLoop(this.stringLengths[this.stringCount]); | ||
| // if there are no more characters to print and there is more than one string to be typed, delete the string just printed | ||
| } else if(this.stringArray.length > 1) { | ||
| // update the this.stringPlaceCount so that we're appending starting at the correct spot in the merged string | ||
| this.stringPlaceCount = this.stringPlaceCount + this.phraseLength; | ||
| // reset this.typeCount in case this function needs to be reused | ||
| this.typeCount = 0; | ||
| // if we're not on the last string, then continue to delete, unless the user wants to break lines | ||
| if((this.stringCount+1 < this.stringArray.length) && this.settings.breakLines === false){ | ||
| setTimeout(function(){ | ||
| setTimeout(function(){ | ||
| this.deleteLoop(); | ||
| }.bind(this), this.settings.breakWait); | ||
| // remove any 'active-container' classes fromt the elements | ||
| this.theElement.find('.ti-text-container').removeClass('active-container'); | ||
| // if breakLines is true and we still have strings left to type, break it and continue | ||
| } else if (this.stringCount+1 < this.stringArray.length && this.settings.breakLines === true){ | ||
| this.stringCount++; | ||
| // give 'active-container' class to next container, so the cursor can start blinking | ||
| this.theElement.find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container'); | ||
| // after another slight delay, continue typing the next string | ||
| setTimeout(function(){ | ||
| this.typeLoop(); | ||
| }.bind(this), this.settings.breakWait); | ||
| // remove any 'active-container' classes fromt the elements | ||
| $(this.theElement).find('.ti-text-container').removeClass('active-container'); | ||
| }.bind(this), this.settings.breakWait); | ||
| // give 'active-container' class to next container, so the cursor can start blinking | ||
| $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container'); | ||
| } | ||
| // after another slight delay, continue typing the next string | ||
| setTimeout(function(){ | ||
| this.typeLoop(); | ||
| }.bind(this), this.settings.breakWait); | ||
| // since there are no more strings to be typed, we're done and can call the callback function | ||
| } else { | ||
| this.callback(); | ||
| } | ||
| }.bind(this), this.delayTime); | ||
| }.bind(this), this.settings.breakWait); | ||
| }; | ||
| } | ||
| } | ||
| }.bind(this), this.delayTime); | ||
| _proto.deleteLoop = function() { | ||
| }; | ||
| this.deleteTimeout = setTimeout(function () { | ||
| _proto.deleteLoop = function() { | ||
| // get the string from the element and cut it by one character at the end | ||
| shortenedText = this.theElement.find('.ti-text-container').text().substring(0, this.theElement.find('.ti-text-container').text().length - 1); | ||
| this.deleteTimeout = setTimeout(function () { | ||
| // then, put that shortened text into the element so it looks like it's being deleted | ||
| this.theElement.find('.ti-text-container').text(shortenedText); | ||
| // get the string from the element and cut it by one character at the end | ||
| shortenedText = $(this.theElement).find('.ti-text-container').text().substring(0, $(this.theElement).find('.ti-text-container').text().length - 1); | ||
| this.deleteCount++; | ||
| // if there are still characters in the string, run the function again | ||
| if (this.deleteCount < this.phraseLength) { | ||
| this.deleteLoop(); | ||
| // if there are still strings in the array, go back to typing. | ||
| } else if(this.stringArray[this.stringCount+1] !== undefined){ | ||
| this.deleteCount = 0; | ||
| this.stringCount++; | ||
| this.typeLoop(); | ||
| } | ||
| // make backspacing much quicker by dividing delayTime (arbitrarily) by three | ||
| }.bind(this), this.delayTime/3); | ||
| }; | ||
| // then, put that shortened text into the element so it looks like it's being deleted | ||
| $(this.theElement).find('.ti-text-container').text(shortenedText); | ||
| // stop the plugin from typing or deleting stuff whenever it's called | ||
| _proto.stopTyping = function() { | ||
| clearTimeout(this.typeTimeout); | ||
| clearTimeout(this.deleteTimeout); | ||
| }; | ||
| // if there are still characters in the string, run the function again | ||
| this.deleteCount++; | ||
| if (this.deleteCount < this.phraseLength) { | ||
| this.deleteLoop(); | ||
| } else if(this.stringArray[this.stringCount+1] !== undefined){ | ||
| this.deleteCount = 0; | ||
| this.stringCount++; | ||
| this.typeLoop(); | ||
| } | ||
| // make backspacing much quicker by dividing delayTime (arbitrarily) by three | ||
| }.bind(this), this.delayTime/3); | ||
| }; | ||
| // stop the plugin from typing or deleting stuff whenever it's called | ||
| _proto.stopTyping = function() { | ||
| clearTimeout(this.typeTimeout); | ||
| clearTimeout(this.deleteTimeout); | ||
| }; | ||
| }(jQuery)); | ||
| }(jQuery)); |
@@ -1,1 +0,1 @@ | ||
| !function(t){t.fn.typeIt=function(e){return this.each(function(){t(this).data("typeit",new t.fn.typeIt.typeItClass(t(this),e))})},t.fn.typeIt.typeItClass=function(e,i){this.defaults={whatToType:"This is the default string. Please replace this string with your own.",typeSpeed:200,lifeLike:!1,showCursor:!0,breakLines:!0,breakWait:500,delayStart:250},this.dataDefaults={whatToType:e.data("typeitWhattotype"),typeSpeed:e.data("typeitSpeed"),lifeLike:e.data("typeitLifelike"),showCursor:e.data("typeitShowcursor"),breakLines:e.data("typeitBreaklines"),breakWait:e.data("typeitBreakWait"),delayStart:e.data("typeitDelayStart")},this.theElement=e,this.settings=t.extend({},this.defaults,i,this.dataDefaults),this.typeCount=0,this.deleteCount=0,this.stringCount=0,this.stringPlaceCount=0,this.phraseLength=0,this.cursor="",this.deleteTimeout=null,this.typeTimeout=null,this.shortenedText=null,this.init(e)};var e=t.fn.typeIt.typeItClass.prototype;e.init=function(e){for(this.stringArray=this.settings.whatToType,"[object Array]"!==Object.prototype.toString.call(this.stringArray)&&(this.stringArray='["'+this.stringArray+'"]',this.stringArray=JSON.parse(this.stringArray)),this.mergedStrings=this.stringArray.join(""),this.stringLengths={},this.phraseLength=this.stringLengths[this.stringCount],j=0;j<this.stringArray.length;j++)this.stringLengths[j]=this.stringArray[j].length,e.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>');e.find(".ti-container:first-child").find(".ti-text-container").addClass("active-container"),this.settings.breakLines===!1&&(e.find(".ti-container").remove(),e.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>')),this.settings.showCursor===!1&&t(this.theElement).find(".ti-text-container").removeClass("ti-cursor"),setTimeout(function(){this.typeLoop()}.bind(this),this.settings.delayStart)},e.typeLoop=function(){this.phraseLength=this.stringLengths[this.stringCount],this.settings.lifeLike===!0?this.delayTime=this.settings.typeSpeed*Math.random():this.delayTime=this.settings.typeSpeed,this.typeTimeout=setTimeout(function(){characterToAppend=this.mergedStrings[this.typeCount+this.stringPlaceCount],this.settings.breakLines===!0?t(this.theElement).find(".ti-text-container:eq("+this.stringCount+")").addClass("active-container").append(characterToAppend):t(this.theElement).find(".ti-text-container").addClass("active-container").append(characterToAppend),this.typeCount++,this.typeCount<this.phraseLength?this.typeLoop(this.stringLengths[this.stringCount]):this.stringArray.length>1&&(this.stringPlaceCount=this.stringPlaceCount+this.phraseLength,this.typeCount=0,this.stringCount+1<this.stringArray.length&&this.settings.breakLines===!1?setTimeout(function(){this.deleteLoop()}.bind(this),this.settings.breakWait):this.stringCount+1<this.stringArray.length&&this.settings.breakLines===!0&&(this.stringCount++,setTimeout(function(){t(this.theElement).find(".ti-text-container").removeClass("active-container"),t(this.theElement).find(".ti-text-container:eq("+this.stringCount+")").addClass("active-container"),setTimeout(function(){this.typeLoop()}.bind(this),this.settings.breakWait)}.bind(this),this.settings.breakWait)))}.bind(this),this.delayTime)},e.deleteLoop=function(){this.deleteTimeout=setTimeout(function(){shortenedText=t(this.theElement).find(".ti-text-container").text().substring(0,t(this.theElement).find(".ti-text-container").text().length-1),t(this.theElement).find(".ti-text-container").text(shortenedText),this.deleteCount++,this.deleteCount<this.phraseLength?this.deleteLoop():void 0!==this.stringArray[this.stringCount+1]&&(this.deleteCount=0,this.stringCount++,this.typeLoop())}.bind(this),this.delayTime/3)},e.stopTyping=function(){clearTimeout(this.typeTimeout),clearTimeout(this.deleteTimeout)}}(jQuery); | ||
| !function(t,e){t.fn.typeIt=function(e,i){return this.each(function(){t(this).data("typeit",new t.fn.typeIt.typeItClass(t(this),e,i))})},t.fn.typeIt.typeItClass=function(t,e,i){this.defaults={whatToType:"This is the default string. Please replace this string with your own.",typeSpeed:200,lifeLike:!1,showCursor:!0,breakLines:!0,breakWait:500,delayStart:250},this.dataAttDefaults={whatToType:t.data("typeitWhattotype"),typeSpeed:t.data("typeitSpeed"),lifeLike:t.data("typeitLifelike"),showCursor:t.data("typeitShowcursor"),breakLines:t.data("typeitBreaklines"),breakWait:t.data("typeitBreakWait"),delayStart:t.data("typeitDelayStart")},this.settings={},this.theElement=t,this.callback=i,this.typeCount=0,this.deleteCount=0,this.stringCount=0,this.stringPlaceCount=0,this.phraseLength=0,this.stringArray=[],this.stringLengths=[],this.deleteTimeout=null,this.typeTimeout=null,this.shortenedText=null,this.init(e)},_proto=t.fn.typeIt.typeItClass.prototype,_proto.init=function(e){return this.validateCallbackFunction()===!1?!1:(t.extend(this.settings,this.defaults,e,this.dataAttDefaults),this.processWhatToType(),this.setupDOMComponents(),void setTimeout(function(){this.typeLoop()}.bind(this),this.settings.delayStart))},_proto.setupDOMComponents=function(){for(j=0;j<this.stringArray.length;j++)this.stringLengths[j]=this.stringArray[j].length,this.theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>');this.theElement.find(".ti-container:first-child").find(".ti-text-container").addClass("active-container"),this.settings.breakLines===!1&&(this.theElement.find(".ti-container").remove(),this.theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>')),this.settings.showCursor===!1&&this.theElement.find(".ti-text-container").removeClass("ti-cursor")},_proto.processWhatToType=function(){this.stringArray=this.settings.whatToType,"[object Array]"!==Object.prototype.toString.call(this.stringArray)&&(this.stringArray='["'+this.stringArray+'"]',this.stringArray=JSON.parse(this.stringArray)),this.mergedStrings=this.stringArray.join("")},_proto.validateCallbackFunction=function(){"undefined"==typeof this.callback&&(this.callback=function(){return!0})},_proto.typeLoop=function(){this.phraseLength=this.stringLengths[this.stringCount],this.settings.lifeLike===!0?this.delayTime=this.settings.typeSpeed*Math.random():this.delayTime=this.settings.typeSpeed,this.typeTimeout=setTimeout(function(){var t=this.mergedStrings[this.typeCount+this.stringPlaceCount];this.settings.breakLines===!0?this.theElement.find(".ti-text-container:eq("+this.stringCount+")").addClass("active-container").append(t):this.theElement.find(".ti-text-container").addClass("active-container").append(t),this.typeCount++,this.typeCount<this.phraseLength?this.typeLoop(this.stringLengths[this.stringCount]):this.stringArray.length>1?(this.stringPlaceCount=this.stringPlaceCount+this.phraseLength,this.typeCount=0,this.stringCount+1===this.stringArray.length?this.callback():this.stringCount+1<this.stringArray.length&&this.settings.breakLines===!1?setTimeout(function(){this.deleteLoop()}.bind(this),this.settings.breakWait):this.stringCount+1<this.stringArray.length&&this.settings.breakLines===!0&&(this.stringCount++,setTimeout(function(){this.theElement.find(".ti-text-container").removeClass("active-container"),this.theElement.find(".ti-text-container:eq("+this.stringCount+")").addClass("active-container"),setTimeout(function(){this.typeLoop()}.bind(this),this.settings.breakWait)}.bind(this),this.settings.breakWait))):this.callback()}.bind(this),this.delayTime)},_proto.deleteLoop=function(){this.deleteTimeout=setTimeout(function(){shortenedText=this.theElement.find(".ti-text-container").text().substring(0,this.theElement.find(".ti-text-container").text().length-1),this.theElement.find(".ti-text-container").text(shortenedText),this.deleteCount++,this.deleteCount<this.phraseLength?this.deleteLoop():this.stringArray[this.stringCount+1]!==e&&(this.deleteCount=0,this.stringCount++,this.typeLoop())}.bind(this),this.delayTime/3)},_proto.stopTyping=function(){clearTimeout(this.typeTimeout),clearTimeout(this.deleteTimeout)}}(jQuery); |
| { | ||
| "name": "typeit", | ||
| "version": "1.0.4", | ||
| "version": "1.1.1", | ||
| "license": "GPL-2.0", | ||
@@ -5,0 +5,0 @@ "author": "Alex MacArthur <alex@macarthur.me>", |
@@ -13,3 +13,3 @@ # TypeIt: A jQuery Animated Typing Plugin | ||
| Download the ZIP, clone this repo, or install via npm with `npm install typeit`. | ||
| Download the ZIP, clone this repo, or install via npm with `npm install typeit`. | ||
@@ -31,3 +31,3 @@ ### Initializing on Your Site | ||
| You're ready to initialize it! | ||
| You're ready to initialize it! | ||
@@ -51,3 +51,3 @@ ## Usage | ||
| `` | ||
| $('.type-it').typeit(); | ||
| $('.type-it').typeIt(); | ||
| `` | ||
@@ -62,3 +62,3 @@ | ||
| ``` | ||
| $('.type-it').typeit({ | ||
| $('.type-it').typeIt({ | ||
| whatToType:'Enter your string here!', | ||
@@ -70,3 +70,3 @@ typeSpeed: 300, | ||
| ``` | ||
| ### Typing Multiple Strings | ||
@@ -77,11 +77,11 @@ | ||
| ``` | ||
| $('.type-it').typeit({ | ||
| $('.type-it').typeIt({ | ||
| whatToType:['Enter your string here!', 'Another string!'] | ||
| }); | ||
| ``` | ||
| Or, you can have type strings that delete & replace each other. Do this, set the 'breakLines' setting to `false`. | ||
| ``` | ||
| $('.type-it').typeit({ | ||
| $('.type-it').typeIt({ | ||
| whatToType: ['Enter your string here!', 'Another string!'], | ||
@@ -92,2 +92,15 @@ breakLines: false | ||
| ### Using a Callback Function | ||
| TypeIt allows you to use a custom callback function when you've completed typing. To use one, simply add it as the second argument when it's initialized. | ||
| ``` | ||
| $('.typeit-box').typeIt({ | ||
| whatToType: 'Here is a string!', | ||
| }, function() { | ||
| console.log('This is your callback function!'); | ||
| }); | ||
| </script> | ||
| ``` | ||
| ## Options | ||
@@ -94,0 +107,0 @@ |
| /** | ||
| * jQuery TypeIt | ||
| * @author Alex MacArthur (http://macarthur.me) | ||
| * @version 1.0.4 | ||
| * @version 1.1.1 | ||
| * @copyright 2015 Alex MacArthur | ||
@@ -9,191 +9,235 @@ * @description Types out a given string or strings. | ||
| (function($){ | ||
| (function($, undefined){ | ||
| // the actual jQuery function | ||
| $.fn.typeIt = function(options){ | ||
| return this.each(function(){ | ||
| $(this).data("typeit", new $.fn.typeIt.typeItClass($(this), options)); | ||
| }); | ||
| var proto; | ||
| // the actual jQuery function | ||
| $.fn.typeIt = function(options, callback){ | ||
| // now call a callback function | ||
| return this.each(function(){ | ||
| $(this).data("typeit", new $.fn.typeIt.typeItClass($(this), options, callback)); | ||
| }); | ||
| }; | ||
| // create the class | ||
| $.fn.typeIt.typeItClass = function(theElement, options, callback){ | ||
| // plugin default settings | ||
| this.defaults = { | ||
| whatToType:'This is the default string. Please replace this string with your own.', | ||
| typeSpeed: 200, | ||
| lifeLike: false, | ||
| showCursor: true, | ||
| breakLines: true, | ||
| breakWait: 500, | ||
| delayStart: 250 | ||
| }; | ||
| // create the class | ||
| $.fn.typeIt.typeItClass = function(theElement, options){ | ||
| // plugin default settings | ||
| this.defaults = { | ||
| whatToType:'This is the default string. Please replace this string with your own.', | ||
| typeSpeed: 200, | ||
| lifeLike: false, | ||
| showCursor: true, | ||
| breakLines: true, | ||
| breakWait: 500, | ||
| delayStart: 250 | ||
| }; | ||
| this.dataAttDefaults = { | ||
| whatToType : theElement.data('typeitWhattotype'), | ||
| typeSpeed: theElement.data('typeitSpeed'), | ||
| lifeLike: theElement.data('typeitLifelike'), | ||
| showCursor: theElement.data('typeitShowcursor'), | ||
| breakLines: theElement.data('typeitBreaklines'), | ||
| breakWait: theElement.data('typeitBreakWait'), | ||
| delayStart : theElement.data('typeitDelayStart') | ||
| }; | ||
| this.dataDefaults = { | ||
| whatToType : theElement.data('typeitWhattotype'), | ||
| typeSpeed: theElement.data('typeitSpeed'), | ||
| lifeLike: theElement.data('typeitLifelike'), | ||
| showCursor: theElement.data('typeitShowcursor'), | ||
| breakLines: theElement.data('typeitBreaklines'), | ||
| breakWait: theElement.data('typeitBreakWait'), | ||
| delayStart : theElement.data('typeitDelayStart') | ||
| }; | ||
| // the settings for the plugin instance | ||
| this.settings = {}; | ||
| // the element that holds the text | ||
| this.theElement = theElement; | ||
| // callback function that executes after strings have been printed | ||
| this.callback = callback; | ||
| // the number of types a character has been typed for each pass over a string | ||
| this.typeCount = 0; | ||
| // the character number of a string that's currently being deleted | ||
| this.deleteCount = 0; | ||
| // the string number that's currently being typed or deleted | ||
| this.stringCount = 0; | ||
| // the place we're at in the big merged string | ||
| this.stringPlaceCount = 0; | ||
| // the length of the current string being handled | ||
| this.phraseLength = 0; | ||
| // array that holds whatToType string(s) | ||
| this.stringArray = []; | ||
| // array holding the length of each string | ||
| this.stringLengths = []; | ||
| // the timeout responsible for deleting characters | ||
| this.deleteTimeout = null; | ||
| // the timeout responsible for typing/adding characters | ||
| this.typeTimeout = null; | ||
| // the progressively shorter string as it's being deleted | ||
| this.shortenedText = null; | ||
| // let 'r rip | ||
| this.init(options); | ||
| }; | ||
| this.theElement = theElement; | ||
| this.settings = $.extend({}, this.defaults, options, this.dataDefaults); | ||
| this.typeCount = 0; | ||
| this.deleteCount = 0; | ||
| this.stringCount = 0; | ||
| this.stringPlaceCount = 0; | ||
| this.phraseLength = 0; | ||
| this.cursor = ''; | ||
| this.deleteTimeout = null; | ||
| this.typeTimeout = null; | ||
| this.shortenedText = null; | ||
| // create a new prototype | ||
| _proto = $.fn.typeIt.typeItClass.prototype; | ||
| this.init(theElement); | ||
| }; | ||
| _proto.init = function(options){ | ||
| // create a new prototype | ||
| var _proto = $.fn.typeIt.typeItClass.prototype; | ||
| // make sure the callback function is all good | ||
| if(this.validateCallbackFunction() === false){ return false; } | ||
| // merge settings into this.settings object | ||
| $.extend(this.settings, this.defaults, options, this.dataAttDefaults); | ||
| // process the whatToType data to get it so we can use it | ||
| this.processWhatToType(); | ||
| // add all the elements & classes we'll be needing | ||
| this.setupDOMComponents(); | ||
| // start to type the string(s) after the specified delay | ||
| setTimeout(function() { | ||
| this.typeLoop(); | ||
| }.bind(this), this.settings.delayStart); | ||
| // initialize the plugin | ||
| _proto.init = function(theElement){ | ||
| }; | ||
| this.stringArray = this.settings.whatToType; | ||
| // check if the value is an array or just a string | ||
| if(Object.prototype.toString.call(this.stringArray) !== '[object Array]'){ | ||
| // since it's not already an array, turn it into one, since later functionality depends on it being one | ||
| this.stringArray = '["' + this.stringArray + '"]'; | ||
| this.stringArray = JSON.parse(this.stringArray); | ||
| } | ||
| this.mergedStrings = this.stringArray.join(''); | ||
| this.stringLengths = {}; | ||
| this.phraseLength = this.stringLengths[this.stringCount]; | ||
| _proto.setupDOMComponents = function() { | ||
| // get the string lengths and save to array, set up ti-containers for each string | ||
| for(j=0; j < this.stringArray.length; j++){ | ||
| this.stringLengths[j] = this.stringArray[j].length; | ||
| // set up the number of ti-containers we'll need to hold the strings | ||
| this.theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>'); | ||
| } | ||
| // get the string lengths and save to array | ||
| for(j=0; j < this.stringArray.length; j++){ | ||
| this.stringLengths[j] = this.stringArray[j].length; | ||
| // set up the number of ti-containers we'll need to hold the strings | ||
| theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>'); | ||
| } | ||
| // add .active-container to the first .ti-text-container so the cursor starts blinking before a string is printed | ||
| this.theElement.find('.ti-container:first-child').find('.ti-text-container').addClass('active-container'); | ||
| // add .active-container to the first .ti-text-container so the cursor starts blinking before a string is printed | ||
| theElement.find('.ti-container:first-child').find('.ti-text-container').addClass('active-container'); | ||
| // if breakLines is false, then we for sure only need ONE ti-container even if there multiple strings, so make sure of that | ||
| if(this.settings.breakLines === false) { | ||
| this.theElement.find('.ti-container').remove(); | ||
| this.theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>'); | ||
| } | ||
| // if breakLines is false, then we for sure only need ONE ti-container even if there multiple strings, so make sure of that | ||
| if(this.settings.breakLines === false) { | ||
| theElement.find('.ti-container').remove(); | ||
| theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>'); | ||
| } | ||
| // if showCursor is false, then remove the ti-cursor class | ||
| if(this.settings.showCursor === false) { | ||
| this.theElement.find('.ti-text-container').removeClass('ti-cursor'); | ||
| } | ||
| }; | ||
| // if showCursor is false, then remove the ti-cursor class | ||
| if(this.settings.showCursor === false) { | ||
| $(this.theElement).find('.ti-text-container').removeClass('ti-cursor'); | ||
| } | ||
| _proto.processWhatToType = function() { | ||
| this.stringArray = this.settings.whatToType; | ||
| // check if the value is an array or just a string | ||
| if(Object.prototype.toString.call(this.stringArray) !== '[object Array]'){ | ||
| // since it's not already an array, turn it into one, since later functionality depends on it being one | ||
| this.stringArray = '["' + this.stringArray + '"]'; | ||
| this.stringArray = JSON.parse(this.stringArray); | ||
| } | ||
| // turn string array into a big string | ||
| this.mergedStrings = this.stringArray.join(''); | ||
| }; | ||
| // start to type the string(s) | ||
| setTimeout(function() { | ||
| this.typeLoop(); | ||
| }.bind(this), this.settings.delayStart); | ||
| _proto.validateCallbackFunction = function() { | ||
| }; | ||
| // if undefined, assign blank callback | ||
| if(typeof this.callback === 'undefined') { | ||
| this.callback = function(){return true;}; | ||
| } | ||
| }; | ||
| _proto.typeLoop = function(){ | ||
| _proto.typeLoop = function(){ | ||
| // set the length of the phrase for this time around | ||
| this.phraseLength = this.stringLengths[this.stringCount]; | ||
| // set the length of the current phrase being typed | ||
| this.phraseLength = this.stringLengths[this.stringCount]; | ||
| // make it human-like if specified in the settings | ||
| if(this.settings.lifeLike === true){ | ||
| this.delayTime = this.settings.typeSpeed*Math.random(); | ||
| // make it human-like if specified in the settings | ||
| if(this.settings.lifeLike === true){ | ||
| this.delayTime = this.settings.typeSpeed*Math.random(); | ||
| } else { | ||
| this.delayTime = this.settings.typeSpeed; | ||
| } | ||
| this.typeTimeout = setTimeout(function () { | ||
| // append the string of letters to the respective .ti-text-container | ||
| var characterToAppend = this.mergedStrings[this.typeCount+this.stringPlaceCount]; | ||
| // if breakLines is set to true, add the 'active-container' class to the next .ti-text-container in the list. | ||
| if(this.settings.breakLines === true) { | ||
| this.theElement.find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(characterToAppend); | ||
| } else { | ||
| this.delayTime = this.settings.typeSpeed; | ||
| this.theElement.find('.ti-text-container').addClass('active-container').append(characterToAppend); | ||
| } | ||
| this.typeTimeout = setTimeout(function () { | ||
| this.typeCount++; | ||
| // if there are still characters to be typed, call the same function again | ||
| if (this.typeCount < this.phraseLength) { | ||
| this.typeLoop(this.stringLengths[this.stringCount]); | ||
| // if there are no more characters to print and there is more than one string to be typed, delete the string just printed | ||
| } else if(this.stringArray.length > 1) { | ||
| // update the this.stringPlaceCount so that we're appending starting at the correct spot in the merged string | ||
| this.stringPlaceCount = this.stringPlaceCount + this.phraseLength; | ||
| // reset this.typeCount in case this function needs to be reused | ||
| this.typeCount = 0; | ||
| // append the string of letters to the respective .ti-text-container | ||
| // use find() so that we select the class only for the element on which we're instantiated | ||
| // if the stringCount is the same as the number of strings we started with, we're done, so call the callback function | ||
| if(this.stringCount+1 === this.stringArray.length) { | ||
| this.callback(); | ||
| // if we're not on the last string, then move on to to delete, unless the user wants to break lines | ||
| } else if((this.stringCount+1 < this.stringArray.length) && this.settings.breakLines === false){ | ||
| characterToAppend = this.mergedStrings[this.typeCount+this.stringPlaceCount]; | ||
| setTimeout(function(){ | ||
| this.deleteLoop(); | ||
| }.bind(this), this.settings.breakWait); | ||
| // if breakLines is set to true, add the 'active-container' class to the next .ti-text-container in the list. | ||
| if(this.settings.breakLines === true) { | ||
| $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(characterToAppend); | ||
| } else { | ||
| $(this.theElement).find('.ti-text-container').addClass('active-container').append(characterToAppend); | ||
| } | ||
| // if breakLines is true and we still have strings left to type, break it and continue | ||
| } else if (this.stringCount+1 < this.stringArray.length && this.settings.breakLines === true){ | ||
| this.stringCount++; | ||
| this.typeCount++; | ||
| if (this.typeCount < this.phraseLength) { | ||
| // type out the string | ||
| this.typeLoop(this.stringLengths[this.stringCount]); | ||
| // if there are no more characters to print and there is more than one string to be typed, delete the string just printed | ||
| } else if(this.stringArray.length > 1) { | ||
| // update the this.stringPlaceCount so that we're appending starting at the correct spot in the merged string | ||
| this.stringPlaceCount = this.stringPlaceCount + this.phraseLength; | ||
| // reset this.typeCount in case this function needs to be reused | ||
| this.typeCount = 0; | ||
| // if we're not on the last string, then continue to delete, unless the user wants to break lines | ||
| if((this.stringCount+1 < this.stringArray.length) && this.settings.breakLines === false){ | ||
| setTimeout(function(){ | ||
| setTimeout(function(){ | ||
| this.deleteLoop(); | ||
| }.bind(this), this.settings.breakWait); | ||
| // remove any 'active-container' classes fromt the elements | ||
| this.theElement.find('.ti-text-container').removeClass('active-container'); | ||
| // if breakLines is true and we still have strings left to type, break it and continue | ||
| } else if (this.stringCount+1 < this.stringArray.length && this.settings.breakLines === true){ | ||
| this.stringCount++; | ||
| // give 'active-container' class to next container, so the cursor can start blinking | ||
| this.theElement.find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container'); | ||
| // after another slight delay, continue typing the next string | ||
| setTimeout(function(){ | ||
| this.typeLoop(); | ||
| }.bind(this), this.settings.breakWait); | ||
| // remove any 'active-container' classes fromt the elements | ||
| $(this.theElement).find('.ti-text-container').removeClass('active-container'); | ||
| }.bind(this), this.settings.breakWait); | ||
| // give 'active-container' class to next container, so the cursor can start blinking | ||
| $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container'); | ||
| } | ||
| // after another slight delay, continue typing the next string | ||
| setTimeout(function(){ | ||
| this.typeLoop(); | ||
| }.bind(this), this.settings.breakWait); | ||
| // since there are no more strings to be typed, we're done and can call the callback function | ||
| } else { | ||
| this.callback(); | ||
| } | ||
| }.bind(this), this.delayTime); | ||
| }.bind(this), this.settings.breakWait); | ||
| }; | ||
| } | ||
| } | ||
| }.bind(this), this.delayTime); | ||
| _proto.deleteLoop = function() { | ||
| }; | ||
| this.deleteTimeout = setTimeout(function () { | ||
| _proto.deleteLoop = function() { | ||
| // get the string from the element and cut it by one character at the end | ||
| shortenedText = this.theElement.find('.ti-text-container').text().substring(0, this.theElement.find('.ti-text-container').text().length - 1); | ||
| this.deleteTimeout = setTimeout(function () { | ||
| // then, put that shortened text into the element so it looks like it's being deleted | ||
| this.theElement.find('.ti-text-container').text(shortenedText); | ||
| // get the string from the element and cut it by one character at the end | ||
| shortenedText = $(this.theElement).find('.ti-text-container').text().substring(0, $(this.theElement).find('.ti-text-container').text().length - 1); | ||
| this.deleteCount++; | ||
| // if there are still characters in the string, run the function again | ||
| if (this.deleteCount < this.phraseLength) { | ||
| this.deleteLoop(); | ||
| // if there are still strings in the array, go back to typing. | ||
| } else if(this.stringArray[this.stringCount+1] !== undefined){ | ||
| this.deleteCount = 0; | ||
| this.stringCount++; | ||
| this.typeLoop(); | ||
| } | ||
| // make backspacing much quicker by dividing delayTime (arbitrarily) by three | ||
| }.bind(this), this.delayTime/3); | ||
| }; | ||
| // then, put that shortened text into the element so it looks like it's being deleted | ||
| $(this.theElement).find('.ti-text-container').text(shortenedText); | ||
| // stop the plugin from typing or deleting stuff whenever it's called | ||
| _proto.stopTyping = function() { | ||
| clearTimeout(this.typeTimeout); | ||
| clearTimeout(this.deleteTimeout); | ||
| }; | ||
| // if there are still characters in the string, run the function again | ||
| this.deleteCount++; | ||
| if (this.deleteCount < this.phraseLength) { | ||
| this.deleteLoop(); | ||
| } else if(this.stringArray[this.stringCount+1] !== undefined){ | ||
| this.deleteCount = 0; | ||
| this.stringCount++; | ||
| this.typeLoop(); | ||
| } | ||
| // make backspacing much quicker by dividing delayTime (arbitrarily) by three | ||
| }.bind(this), this.delayTime/3); | ||
| }; | ||
| // stop the plugin from typing or deleting stuff whenever it's called | ||
| _proto.stopTyping = function() { | ||
| clearTimeout(this.typeTimeout); | ||
| clearTimeout(this.deleteTimeout); | ||
| }; | ||
| }(jQuery)); | ||
| }(jQuery)); |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.59%
101992
- Number of package files
- increased by3.85%
27
- Lines of code
- increased by12.33%
729
- Number of lines in readme file
- increased by12.04%
121
No dependency changes