Comparing version 2.0.0 to 2.0.1
/** | ||
* jQuery TypeIt | ||
* @author Alex MacArthur (http://macarthur.me) | ||
* @version 2.0.0 | ||
* @copyright 2015 Alex MacArthur | ||
* @version 2.0.1 | ||
* @copyright 2016 Alex MacArthur | ||
* @description Types out a given string or strings. | ||
@@ -415,3 +415,3 @@ */ | ||
// convert to array | ||
this.arrayToDelete = this.stringToDelete.split(""); | ||
this.arrayToDelete = (typeof this.arrayToDelete !== undefined) ? this.stringToDelete.split("") : []; | ||
@@ -418,0 +418,0 @@ // loop over array |
@@ -1,492 +0,1 @@ | ||
/** | ||
* jQuery TypeIt | ||
* @author Alex MacArthur (http://macarthur.me) | ||
* @version 2.0.0 | ||
* @copyright 2015 Alex MacArthur | ||
* @description Types out a given string or strings. | ||
*/ | ||
(function($, undefined){ | ||
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){ | ||
/* VARIABLES THAT WON'T CHANGE BETWEEN RUNS */ | ||
// default settings | ||
this.defaults = { | ||
whatToType:'You probably want to use your own string.', | ||
typeSpeed: 100, | ||
lifeLike: true, | ||
showCursor: true, | ||
breakLines: true, | ||
breakDelay: 750, | ||
startDelay: 250, | ||
loop: false, | ||
loopDelay: 750 | ||
}; | ||
// data-typeit-* settings | ||
this.dataAttDefaults = { | ||
whatToType: theElement.data('typeitWhattotype'), | ||
typeSpeed: theElement.data('typeitTypespeed'), | ||
lifeLike: theElement.data('typeitLifelike'), | ||
showCursor: theElement.data('typeitShowcursor'), | ||
breakLines: theElement.data('typeitBreaklines'), | ||
breakDelay: theElement.data('typeitBreakdelay'), | ||
startDelay: theElement.data('typeitStartdelay'), | ||
loop: theElement.data('typeitLoop'), | ||
loopDelay: theElement.data('typeitLoopdelay') | ||
}; | ||
// the settings for the plugin instance | ||
this.settings = {}; | ||
// merge settings into this.settings object | ||
$.extend(this.settings, this.defaults, options, this.dataAttDefaults); | ||
// the element that holds the text | ||
this.theElement = theElement; | ||
// callback function that executes after strings have been printed | ||
this.callback = callback; | ||
// let 'r rip | ||
this.init(options); | ||
}; | ||
// create a new prototype | ||
_proto = $.fn.typeIt.typeItClass.prototype; | ||
_proto.init = function(options){ | ||
// 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 = []; | ||
// the index of the string we're handling | ||
this.stringArrayIndex = 0; | ||
// the index of the character we're currently printing | ||
this.stringArrayCharacterIndex = 0; | ||
// hold where we need to replace characters because of HTML tags | ||
this.contentStartEnd = []; | ||
// the index for the string within an HTML tag | ||
this.contentStartEndIndex = 0; | ||
// the span of characters for the string inside an HTML tag | ||
this.contentStartEndSpan = 0; | ||
// holds whether we're currently printing inside HTML tags | ||
this.printingInTag = false; | ||
// the specific character we're currently appending | ||
this.characterToAppend = null; | ||
// the current ti-text-container we're dealing | ||
this.thisTiTextContainer = null; | ||
// the current string we're handling | ||
this.thisString = null; | ||
// the particular HTML tag we're handling | ||
this.thisTag = null; | ||
// array holding the length of each string | ||
this.stringLengths = []; | ||
// the string we're currently deleting | ||
this.stringToDelete = null; | ||
// the timeout responsible for typing/adding characters | ||
this.typeTimeout = null; | ||
// the timeout responsible for deleting characters | ||
this.deleteTimeout = null; | ||
// the span of the range a type speed is allowed to be randomized | ||
this.typeSpeedRangeSpan = null; | ||
// the minimum of a randomized type speed | ||
this.typeSpeedMin = null; | ||
// the maximum of a randomized type speed | ||
this.typeSpeedMax = null; | ||
// make sure the callback function is all good | ||
if(this.validateCallbackFunction() === false){ return false; } | ||
// string override | ||
this.testForElementStringOverride(); | ||
// 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.startDelay); | ||
}; | ||
_proto.testForElementStringOverride = function() { | ||
// if there's a string already typed in the element, replace whatToType with it | ||
if(this.theElement.text().length > 0 && !this.theElement.has('.ti-container')) { | ||
this.settings.whatToType = this.theElement.html(); | ||
} | ||
}; | ||
_proto.setupDOMComponents = function() { | ||
// clear out the element in case we're looping | ||
this.theElement.html(''); | ||
// 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>'); | ||
} | ||
// 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'); | ||
// 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 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() { | ||
// check if the value is an array or just a string | ||
if(Object.prototype.toString.call(this.settings.whatToType) !== '[object Array]'){ | ||
// since it's not already an array, turn it into one, since later functionality depends on it being one | ||
this.stringArray = '["' + this.settings.whatToType + '"]'; | ||
this.stringArray = JSON.parse(this.stringArray); | ||
// if it is an array, clone it | ||
} else { | ||
// clone what to typed, so we don't modify the original strings in case we loop | ||
this.stringArrayTemp = $.extend( {}, this.settings.whatToType ); | ||
// convert cloned object to array | ||
this.stringArrayTemp = $.map(this.stringArrayTemp, function(value, index) { | ||
return [value]; | ||
}); | ||
// get the right values and put into stringArray so it's formatted correctly for processing | ||
for(var h = 0; h < this.stringArrayTemp.length; h++) { | ||
this.stringArray.push(this.stringArrayTemp[h]); | ||
} | ||
} | ||
// turn each string into sub arrays | ||
for(var i = 0; i < this.stringArray.length; i++) { | ||
this.contentStartEnd = []; | ||
this.contentStartEndIndex = 0; | ||
this.contentStartEndSpan = 0; | ||
// turn each string into sub array | ||
this.stringArray[i] = this.stringArray[i].split(''); | ||
// find the location of HTML tag | ||
for(var j = 0, subArray = this.stringArray[i]; j < subArray.length; j++) { | ||
if(subArray[j] === '<') { | ||
this.contentStartEnd[this.contentStartEndIndex] = []; | ||
this.contentStartEnd[this.contentStartEndIndex][0] = j; | ||
} | ||
if(subArray[j] === '>') { | ||
this.contentStartEnd[this.contentStartEndIndex][1] = j; | ||
this.contentStartEndIndex++; | ||
} | ||
} | ||
// merge individual tag characters into single array index | ||
for(var positionIndex = 0; positionIndex < this.contentStartEnd.length; positionIndex++) { | ||
// move those tag pieces into a single array item | ||
for (var l = this.contentStartEnd[positionIndex][0]; l < this.contentStartEnd[positionIndex][1]; l++) { | ||
this.stringArray[i][this.contentStartEnd[positionIndex][0]] = this.stringArray[i][this.contentStartEnd[positionIndex][0]] + this.stringArray[i][l+1]; | ||
} | ||
} | ||
// cut array items based on the start/end positions we know, but move back the start point each time by the number of items we previously removed | ||
for( var m = 0; m < this.contentStartEnd.length; m++ ) { | ||
var startPos = this.contentStartEnd[m][0]+1; | ||
this.stringArray[i].splice(startPos, this.contentStartEnd[m][1] - this.contentStartEnd[m][0]); | ||
var span = this.contentStartEnd[m][1] - this.contentStartEnd[m][0]; | ||
// go through and update the start and positions by the span length we just cut | ||
for(var n = 0; n < this.contentStartEnd.length; n++) { | ||
this.contentStartEnd[n][0] = this.contentStartEnd[n][0] - span; | ||
this.contentStartEnd[n][1] = this.contentStartEnd[n][1] - span; | ||
} | ||
} | ||
} | ||
}; | ||
_proto.validateCallbackFunction = function() { | ||
// if undefined, assign blank callback | ||
if(typeof this.callback === 'undefined') { | ||
this.callback = function(){return true;}; | ||
} | ||
}; | ||
_proto.randomizeTypeSpeed = function() { | ||
// make it human-like if specified in the settings | ||
if(this.settings.lifeLike === true){ | ||
// set to 50% of the actual type speed, so the randomization goes no further than that ratio | ||
this.typeSpeedRangeSpan = this.settings.typeSpeed/2; | ||
this.typeSpeedMin = this.settings.typeSpeed-this.typeSpeedRangeSpan; | ||
this.typeSpeedMax = this.settings.typeSpeed+this.typeSpeedRangeSpan; | ||
this.delayTime = Math.abs(Math.random() * (this.typeSpeedMax - this.typeSpeedMin) + this.typeSpeedMin); | ||
} else { | ||
this.delayTime = this.settings.typeSpeed; | ||
} | ||
}; | ||
_proto.typeLoop = function(){ | ||
// get this particular string we're printing | ||
this.thisString = this.stringArray[this.stringArrayIndex]; | ||
// set the length of the current phrase being typed | ||
this.phraseLength = this.thisString.length; | ||
// start the typing timeout | ||
this.typeTimeout = setTimeout(function () { | ||
this.randomizeTypeSpeed(); | ||
// the the specific character we're printing | ||
this.characterToAppend = this.stringArray[this.stringArrayIndex][this.stringArrayCharacterIndex]; | ||
// if it's an HTML tag, do stuff | ||
if(this.characterToAppend.indexOf('<') !== -1 && this.characterToAppend.indexOf('</') === -1){ | ||
this.contentStartEndIndex = 0; | ||
// get the start & end positions of the actual string within the HTML tags | ||
this.contentStartEnd[0] = this.stringArrayCharacterIndex + 1; | ||
for(var t = this.stringArrayCharacterIndex; t < this.thisString.length; t++){ | ||
if(this.thisString[t].indexOf('</') !== -1) { | ||
// set the ending of the string segment in an HTML tag | ||
this.contentStartEnd[1] = t - 1; | ||
// as soon as we hit a match for a closing character | ||
break; | ||
} | ||
} | ||
this.contentStartEndSpan = this.contentStartEnd[1] - this.contentStartEnd[0]; | ||
// create a DOM node from the string we get | ||
this.thisTag = $($.parseHTML(this.characterToAppend)); | ||
// set the current character to append to the tag we just created, so that we can create it in the DOM | ||
this.characterToAppend = this.thisTag; | ||
// append the tag | ||
this.appendTheCharacter(); | ||
// set this to true so we know we're currently printing inside an HTML tag | ||
this.printingInTag = true; | ||
} | ||
this.appendTheCharacter(); | ||
this.stringArrayCharacterIndex++; | ||
// there are still characters to be typed, so repeat function | ||
if (this.stringArrayCharacterIndex < this.phraseLength) { | ||
this.typeLoop(); | ||
// there are no more characters to print and there is more than one string to be typed, so delete the string just printed | ||
} else if(this.stringArray.length > 1) { | ||
// reset this.stringArrayCharacterIndex since we're done using it for this string | ||
this.stringArrayCharacterIndex = 0; | ||
// update the this.stringPlaceCount so that we're appending starting at the correct spot in the merged string | ||
this.stringPlaceCount = this.stringPlaceCount + this.phraseLength; | ||
// if the this.stringArrayIndex is the same as the number of strings we started with, we're done, so call the callback function | ||
if(this.stringArrayIndex + 1 === this.stringArray.length) { | ||
// multiple strings ending | ||
this.endOfStringsFork(); | ||
// if we're not on the last string, then move on to to delete, unless the user wants to break lines | ||
} else if((this.stringArrayIndex + 1 < this.stringArray.length) && this.settings.breakLines === false){ | ||
setTimeout(function(){ | ||
this.deleteLoop(); | ||
}.bind(this), this.settings.breakDelay); | ||
// if breakLines is true and we still have strings left to type, break it and continue with the next string | ||
} else if (this.stringArrayIndex + 1 < this.stringArray.length && this.settings.breakLines === true){ | ||
// before starting the next string, make sure the index has been bumped up | ||
this.stringArrayIndex++; | ||
setTimeout(function(){ | ||
// remove any 'active-container' classes fromt the elements | ||
this.theElement.find('.ti-text-container').removeClass('active-container'); | ||
// give 'active-container' class to next container, so the cursor can start blinking | ||
this.theElement.find('.ti-text-container:eq('+ this.stringArrayIndex +')').addClass('active-container'); | ||
// after another slight delay, continue typing the next string | ||
setTimeout(function(){ | ||
this.typeLoop(); | ||
}.bind(this), this.settings.breakDelay); | ||
}.bind(this), this.settings.breakDelay); | ||
} | ||
// since there are no more strings to be typed, we're done and can call the callback function | ||
} else { | ||
// single string ending | ||
this.endOfStringsFork(); | ||
} | ||
}.bind(this), this.delayTime); | ||
}; | ||
_proto.endOfStringsFork = function() { | ||
if(this.settings.loop === true){ | ||
// delete the remaining string | ||
setTimeout(function(){ | ||
this.deleteLoop(); | ||
}.bind(this), this.settings.loopDelay); | ||
} else { | ||
this.callback(); | ||
} | ||
}; | ||
_proto.appendTheCharacter = function() { | ||
// 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.thisTiTextContainer = this.theElement.find('.ti-text-container:eq('+ this.stringArrayIndex +')'); | ||
this.thisTiTextContainer.addClass('active-container'); | ||
} else { | ||
this.thisTiTextContainer = this.theElement.find('.ti-text-container'); | ||
this.thisTiTextContainer.addClass('active-container'); | ||
} | ||
// append the character to the HTML tag if we're printing in a tag, or else just append the character | ||
this.appendToHTMLTag(function(){ | ||
this.thisTiTextContainer.append(this.characterToAppend); | ||
}.bind(this)); | ||
}; | ||
_proto.appendToHTMLTag = function(notInTagFunction) { | ||
if(this.printingInTag === true) { | ||
// resave the character to append | ||
this.characterToAppend = this.thisString[this.contentStartEnd[0] + this.contentStartEndIndex]; | ||
// append to the latest tag (the one we just printed) in the element | ||
$(this.thisTag, this.theElement).last().append(this.characterToAppend); | ||
// if we're at the end of the string segment, turn off printingInTag | ||
this.printingInTag = (this.contentStartEnd[1] === this.contentStartEnd[0] + this.contentStartEndIndex - 1) ? false : true; | ||
this.contentStartEndIndex++; | ||
} else { | ||
notInTagFunction(); | ||
} | ||
}; | ||
_proto.deleteLoop = function(undefined) { | ||
// set the current ti-text-container | ||
this.thisTiTextContainer = this.theElement.find('.ti-text-container'); | ||
this.deleteTimeout = setTimeout(function () { | ||
// randomize the delete speed, if applicable | ||
this.randomizeTypeSpeed(); | ||
// get the string | ||
this.stringToDelete = this.thisTiTextContainer.last().html(); | ||
// convert to array | ||
this.arrayToDelete = this.stringToDelete.split(""); | ||
// loop over array | ||
for (var n = this.arrayToDelete.length-1; n > -1; n--) { | ||
// TAG HANDLING | ||
if(this.arrayToDelete[n] === '>') { | ||
// find the beginning tag piece | ||
for(var o = n-1; o > -1; o--) { | ||
// find the opening piece | ||
// o = position of opening piece | ||
if(this.arrayToDelete[o] === '<') { | ||
// if the next piece before it isn't an HTML tag, just delete the text in between | ||
if(this.arrayToDelete[o-1] !== '>') { | ||
// remove character right before HTML tag begins and escape the loop | ||
this.arrayToDelete.splice(o-1, 1); | ||
break; | ||
} | ||
} | ||
} | ||
break; | ||
} | ||
// REGULAR CHARACTER HANDLING | ||
else { | ||
// remove the character and escape the loop | ||
this.arrayToDelete.splice(n, 1); | ||
break; | ||
} | ||
} | ||
// repopulate the element with the shortened string so it looks like it's being deleted | ||
this.thisTiTextContainer.last().html(this.arrayToDelete.join('')); | ||
// if nothing left, clear out the emtpy HTML tags | ||
if(this.thisTiTextContainer.last().text().length === 0){ | ||
this.thisTiTextContainer.last().html(''); | ||
} | ||
// if characters are still in the string, run the function again | ||
if (this.thisTiTextContainer.last().text().length > 0) { | ||
this.deleteLoop(); | ||
// if there are still strings in the array, go back to typing. | ||
} else if(this.stringArray[this.stringArrayIndex+1] !== undefined){ | ||
this.stringArrayIndex++; | ||
this.typeLoop(); | ||
// that was the last string in the array, so now just check if loop is enabled | ||
} else if (this.settings.loop === true){ | ||
// if there are multiple strings that have been typed, remove the current one and repeat deleteLoop | ||
if(this.thisTiTextContainer.length > 1) { | ||
// remove the current container so we don't fill it with junk | ||
this.thisTiTextContainer.last().remove(); | ||
// make sure the NEW last container has 'active-container' status | ||
// need to use find() again instead of stored selection because that stored selection is now outdated since we just removed a container | ||
this.theElement.find('.ti-text-container').last().addClass('active-container'); | ||
this.deleteLoop(); | ||
} else { | ||
// otherwise, re-run the whole thing again | ||
this.init(); | ||
} | ||
} | ||
// 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.stop = 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(e,i,n){this.defaults={whatToType:"You probably want to use your own string.",typeSpeed:100,lifeLike:!0,showCursor:!0,breakLines:!0,breakDelay:750,startDelay:250,loop:!1,loopDelay:750},this.dataAttDefaults={whatToType:e.data("typeitWhattotype"),typeSpeed:e.data("typeitTypespeed"),lifeLike:e.data("typeitLifelike"),showCursor:e.data("typeitShowcursor"),breakLines:e.data("typeitBreaklines"),breakDelay:e.data("typeitBreakdelay"),startDelay:e.data("typeitStartdelay"),loop:e.data("typeitLoop"),loopDelay:e.data("typeitLoopdelay")},this.settings={},t.extend(this.settings,this.defaults,i,this.dataAttDefaults),this.theElement=e,this.callback=n,this.init(i)},_proto=t.fn.typeIt.typeItClass.prototype,_proto.init=function(t){return this.stringPlaceCount=0,this.phraseLength=0,this.stringArray=[],this.stringArrayIndex=0,this.stringArrayCharacterIndex=0,this.contentStartEnd=[],this.contentStartEndIndex=0,this.contentStartEndSpan=0,this.printingInTag=!1,this.characterToAppend=null,this.thisTiTextContainer=null,this.thisString=null,this.thisTag=null,this.stringLengths=[],this.stringToDelete=null,this.typeTimeout=null,this.deleteTimeout=null,this.typeSpeedRangeSpan=null,this.typeSpeedMin=null,this.typeSpeedMax=null,this.validateCallbackFunction()===!1?!1:(this.testForElementStringOverride(),this.processWhatToType(),this.setupDOMComponents(),void setTimeout(function(){this.typeLoop()}.bind(this),this.settings.startDelay))},_proto.testForElementStringOverride=function(){this.theElement.text().length>0&&!this.theElement.has(".ti-container")&&(this.settings.whatToType=this.theElement.html())},_proto.setupDOMComponents=function(){for(this.theElement.html(""),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(){if("[object Array]"!==Object.prototype.toString.call(this.settings.whatToType))this.stringArray='["'+this.settings.whatToType+'"]',this.stringArray=JSON.parse(this.stringArray);else{this.stringArrayTemp=t.extend({},this.settings.whatToType),this.stringArrayTemp=t.map(this.stringArrayTemp,function(t,e){return[t]});for(var e=0;e<this.stringArrayTemp.length;e++)this.stringArray.push(this.stringArrayTemp[e])}for(var i=0;i<this.stringArray.length;i++){this.contentStartEnd=[],this.contentStartEndIndex=0,this.contentStartEndSpan=0,this.stringArray[i]=this.stringArray[i].split("");for(var n=0,s=this.stringArray[i];n<s.length;n++)"<"===s[n]&&(this.contentStartEnd[this.contentStartEndIndex]=[],this.contentStartEnd[this.contentStartEndIndex][0]=n),">"===s[n]&&(this.contentStartEnd[this.contentStartEndIndex][1]=n,this.contentStartEndIndex++);for(var r=0;r<this.contentStartEnd.length;r++)for(var a=this.contentStartEnd[r][0];a<this.contentStartEnd[r][1];a++)this.stringArray[i][this.contentStartEnd[r][0]]=this.stringArray[i][this.contentStartEnd[r][0]]+this.stringArray[i][a+1];for(var h=0;h<this.contentStartEnd.length;h++){var o=this.contentStartEnd[h][0]+1;this.stringArray[i].splice(o,this.contentStartEnd[h][1]-this.contentStartEnd[h][0]);for(var p=this.contentStartEnd[h][1]-this.contentStartEnd[h][0],d=0;d<this.contentStartEnd.length;d++)this.contentStartEnd[d][0]=this.contentStartEnd[d][0]-p,this.contentStartEnd[d][1]=this.contentStartEnd[d][1]-p}}},_proto.validateCallbackFunction=function(){"undefined"==typeof this.callback&&(this.callback=function(){return!0})},_proto.randomizeTypeSpeed=function(){this.settings.lifeLike===!0?(this.typeSpeedRangeSpan=this.settings.typeSpeed/2,this.typeSpeedMin=this.settings.typeSpeed-this.typeSpeedRangeSpan,this.typeSpeedMax=this.settings.typeSpeed+this.typeSpeedRangeSpan,this.delayTime=Math.abs(Math.random()*(this.typeSpeedMax-this.typeSpeedMin)+this.typeSpeedMin)):this.delayTime=this.settings.typeSpeed},_proto.typeLoop=function(){this.thisString=this.stringArray[this.stringArrayIndex],this.phraseLength=this.thisString.length,this.typeTimeout=setTimeout(function(){if(this.randomizeTypeSpeed(),this.characterToAppend=this.stringArray[this.stringArrayIndex][this.stringArrayCharacterIndex],-1!==this.characterToAppend.indexOf("<")&&-1===this.characterToAppend.indexOf("</")){this.contentStartEndIndex=0,this.contentStartEnd[0]=this.stringArrayCharacterIndex+1;for(var e=this.stringArrayCharacterIndex;e<this.thisString.length;e++)if(-1!==this.thisString[e].indexOf("</")){this.contentStartEnd[1]=e-1;break}this.contentStartEndSpan=this.contentStartEnd[1]-this.contentStartEnd[0],this.thisTag=t(t.parseHTML(this.characterToAppend)),this.characterToAppend=this.thisTag,this.appendTheCharacter(),this.printingInTag=!0}this.appendTheCharacter(),this.stringArrayCharacterIndex++,this.stringArrayCharacterIndex<this.phraseLength?this.typeLoop():this.stringArray.length>1?(this.stringArrayCharacterIndex=0,this.stringPlaceCount=this.stringPlaceCount+this.phraseLength,this.stringArrayIndex+1===this.stringArray.length?this.endOfStringsFork():this.stringArrayIndex+1<this.stringArray.length&&this.settings.breakLines===!1?setTimeout(function(){this.deleteLoop()}.bind(this),this.settings.breakDelay):this.stringArrayIndex+1<this.stringArray.length&&this.settings.breakLines===!0&&(this.stringArrayIndex++,setTimeout(function(){this.theElement.find(".ti-text-container").removeClass("active-container"),this.theElement.find(".ti-text-container:eq("+this.stringArrayIndex+")").addClass("active-container"),setTimeout(function(){this.typeLoop()}.bind(this),this.settings.breakDelay)}.bind(this),this.settings.breakDelay))):this.endOfStringsFork()}.bind(this),this.delayTime)},_proto.endOfStringsFork=function(){this.settings.loop===!0?setTimeout(function(){this.deleteLoop()}.bind(this),this.settings.loopDelay):this.callback()},_proto.appendTheCharacter=function(){this.settings.breakLines===!0?(this.thisTiTextContainer=this.theElement.find(".ti-text-container:eq("+this.stringArrayIndex+")"),this.thisTiTextContainer.addClass("active-container")):(this.thisTiTextContainer=this.theElement.find(".ti-text-container"),this.thisTiTextContainer.addClass("active-container")),this.appendToHTMLTag(function(){this.thisTiTextContainer.append(this.characterToAppend)}.bind(this))},_proto.appendToHTMLTag=function(e){this.printingInTag===!0?(this.characterToAppend=this.thisString[this.contentStartEnd[0]+this.contentStartEndIndex],t(this.thisTag,this.theElement).last().append(this.characterToAppend),this.printingInTag=this.contentStartEnd[1]===this.contentStartEnd[0]+this.contentStartEndIndex-1?!1:!0,this.contentStartEndIndex++):e()},_proto.deleteLoop=function(t){this.thisTiTextContainer=this.theElement.find(".ti-text-container"),this.deleteTimeout=setTimeout(function(){this.randomizeTypeSpeed(),this.stringToDelete=this.thisTiTextContainer.last().html(),this.arrayToDelete=typeof this.arrayToDelete!==t?this.stringToDelete.split(""):[];for(var e=this.arrayToDelete.length-1;e>-1;e--){if(">"===this.arrayToDelete[e]){for(var i=e-1;i>-1;i--)if("<"===this.arrayToDelete[i]&&">"!==this.arrayToDelete[i-1]){this.arrayToDelete.splice(i-1,1);break}break}this.arrayToDelete.splice(e,1);break}this.thisTiTextContainer.last().html(this.arrayToDelete.join("")),0===this.thisTiTextContainer.last().text().length&&this.thisTiTextContainer.last().html(""),this.thisTiTextContainer.last().text().length>0?this.deleteLoop():this.stringArray[this.stringArrayIndex+1]!==t?(this.stringArrayIndex++,this.typeLoop()):this.settings.loop===!0&&(this.thisTiTextContainer.length>1?(this.thisTiTextContainer.last().remove(),this.theElement.find(".ti-text-container").last().addClass("active-container"),this.deleteLoop()):this.init())}.bind(this),this.delayTime/3)},_proto.stop=function(){clearTimeout(this.typeTimeout),clearTimeout(this.deleteTimeout)}}(jQuery); |
@@ -19,3 +19,3 @@ // load our plugins | ||
gulp.src('src/typeit.js') | ||
//.pipe(uglify()) | ||
.pipe(uglify()) | ||
.pipe(rename('typeit.min.js')) | ||
@@ -26,3 +26,3 @@ .pipe(gulp.dest('dist')); | ||
gulp.src('src/scripts.js') | ||
//.pipe(uglify()) | ||
.pipe(uglify()) | ||
.pipe(rename('scripts.min.js')) | ||
@@ -29,0 +29,0 @@ .pipe(gulp.dest('src')); |
{ | ||
"name": "typeit", | ||
"version": "2.0.0", | ||
"version": "2.0.1", | ||
"license": "GPL-2.0", | ||
@@ -5,0 +5,0 @@ "author": "Alex MacArthur <alex@macarthur.me>", |
@@ -63,5 +63,6 @@ $('#typeit-box').typeIt({ | ||
$('#iTypeSpeed').val('250'); | ||
$('#ibreakDelay').val('500'); | ||
$('#istartDelay').val('250'); | ||
$('#iTypeSpeed').val('100'); | ||
$('#iBreakDelay').val('750'); | ||
$('#iStartDelay').val('250'); | ||
$('#iLoopDelay').val('750'); | ||
@@ -73,5 +74,7 @@ $('#TIInput').on('click','#TISubmit', function(e){ | ||
// if there's another process going on, stop it and wipe the output box | ||
if($.hasData($(this))) { | ||
$(this).data('typeit').stop(); | ||
if($('#TIOutput').data('typeit') !== undefined) { | ||
$('#TIOutput').data('typeit').stop(); | ||
$('#TIOutput').removeData(); | ||
} | ||
$('#TIOutput').html(''); | ||
@@ -114,5 +117,12 @@ | ||
} | ||
var breakDelay = $('#ibreakDelay').val(); | ||
var breakDelay = $('#iBreakDelay').val(); | ||
var breakStart = $('#iBreakStart').val(); | ||
var startDelay = $('#istartDelay').val(); | ||
var startDelay = $('#iStartDelay').val(); | ||
var loop = $('#iLoop').val(); | ||
if(loop === 'true'){ | ||
loop = true; | ||
} else { | ||
loop = false; | ||
} | ||
var loopDelay = $('#iLoopDelay').val(); | ||
@@ -134,10 +144,13 @@ // hide the temp text | ||
setTimeout(function() { | ||
$('#TIOutput').typeIt({ | ||
whatToType: cleanedWhatToType, | ||
typeSpeed: typeSpeed, | ||
typeSpeed: Number(typeSpeed), | ||
lifeLike: lifeLike, | ||
showCursor: showCursor, | ||
breakLines: breakLines, | ||
breakDelay: breakDelay, | ||
startDelay: startDelay | ||
breakDelay: Number(breakDelay), | ||
startDelay: Number(startDelay), | ||
loop: loop, | ||
loopDelay: Number(loopDelay) | ||
}); | ||
@@ -144,0 +157,0 @@ }, 800); |
@@ -1,161 +0,1 @@ | ||
$('#typeit-box').typeIt({ | ||
whatToType: ['A jQuery plugin that <span class="emphasized">types</span> stuff for you.', '<span class="emphasized emphasized-duh">(Duh.)</span>'], | ||
typeSpeed: 100, | ||
breakLines: true, | ||
breakDelay: 1000 | ||
}); | ||
var $example1 = $('#example1'); | ||
var $example2 = $('#example2'); | ||
var $example3 = $('#example3'); | ||
var $example4 = $('#example4'); | ||
var $example5 = $('#example5'); | ||
var $example6 = $('#example6'); | ||
function example4() { | ||
$example4.typeIt({ | ||
whatToType: ["This is a string!", "And here's another one."], | ||
typeSpeed: 100 | ||
}); | ||
} | ||
example4(); | ||
$('section').on('click','#btn-example4',function() { | ||
$example4.data('typeit').stop(); | ||
$example4.html(''); | ||
example4(); | ||
}); | ||
function example5() { | ||
$example5.typeIt({ | ||
whatToType: ["This is a great string.","But here is a better one."], | ||
typeSpeed: 100, | ||
breakLines: false | ||
}); | ||
} | ||
example5(); | ||
$('section').on('click','#btn-example5',function() { | ||
$example5.data('typeit').stop(); | ||
$example5.html(''); | ||
example5(); | ||
}); | ||
function example6() { | ||
$example6.typeIt({ | ||
whatToType: ["Here's text <span class='just-a-class'>wrapped in HTML</span>."], | ||
typeSpeed: 100 | ||
}); | ||
} | ||
example6(); | ||
$('section').on('click','#btn-example6', function() { | ||
$example6.data('typeit').stop(); | ||
$example6.html(''); | ||
example6(); | ||
}); | ||
(function() { | ||
$('#iTypeSpeed').val('250'); | ||
$('#ibreakDelay').val('500'); | ||
$('#istartDelay').val('250'); | ||
$('#TIInput').on('click','#TISubmit', function(e){ | ||
e.preventDefault(); | ||
// if there's another process going on, stop it and wipe the output box | ||
if($.hasData($(this))) { | ||
$(this).data('typeit').stop(); | ||
} | ||
$('#TIOutput').html(''); | ||
// get variables figured out | ||
var whatToType; | ||
var cleanedWhatToType = []; | ||
if($('#stringTI').val() === '') { | ||
cleanedWhatToType = 'You didn\'t enter a string!'; | ||
} else { | ||
whatToType = $('#stringTI').val().split('\n'); | ||
// remove empty array item | ||
for (var i = 0; i < whatToType.length; i++) { | ||
if (whatToType[i] !== undefined && whatToType[i] !== null && whatToType[i] !== "") { | ||
cleanedWhatToType.push(whatToType[i]); | ||
} | ||
} | ||
} | ||
var newHeight = ($('#stringTI').val()) ? (cleanedWhatToType.length * 38) + 40 : 75; | ||
var typeSpeed = $('#iTypeSpeed').val(); | ||
var lifeLike = $('#iLifeLike').val(); | ||
if(lifeLike === 'true'){ | ||
lifeLike = true; | ||
} else { | ||
lifeLike = false; | ||
} | ||
var showCursor = $('#iShowCursor').val(); | ||
if(showCursor === 'true'){ | ||
showCursor = true; | ||
} else { | ||
showCursor = false; | ||
} | ||
var breakLines = $('#iBreakLines').val(); | ||
if(breakLines === 'true'){ | ||
breakLines = true; | ||
} else { | ||
breakLines = false; | ||
} | ||
var breakDelay = $('#ibreakDelay').val(); | ||
var breakStart = $('#iBreakStart').val(); | ||
var startDelay = $('#istartDelay').val(); | ||
// hide the temp text | ||
$('#tempText').animate({ | ||
opacity: 0 | ||
}); | ||
// expand the container | ||
$('#TIOutputBox').animate({ | ||
height: newHeight | ||
}, function() { | ||
$('html, body').animate({ | ||
scrollTop: $("#TIOutputBox").offset().top - 200 | ||
}, 800); | ||
setTimeout(function() { | ||
$('#TIOutput').typeIt({ | ||
whatToType: cleanedWhatToType, | ||
typeSpeed: typeSpeed, | ||
lifeLike: lifeLike, | ||
showCursor: showCursor, | ||
breakLines: breakLines, | ||
breakDelay: breakDelay, | ||
startDelay: startDelay | ||
}); | ||
}, 800); | ||
}); | ||
}); | ||
})(); | ||
$(function() { | ||
$('a[href*=#]:not([href=#])').click(function() { | ||
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { | ||
var target = $(this.hash); | ||
target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | ||
if (target.length) { | ||
$('html,body').animate({ | ||
scrollTop: target.offset().top | ||
}, 1000); | ||
return false; | ||
} | ||
} | ||
}); | ||
}); | ||
function example4(){$example4.typeIt({whatToType:["This is a string!","And here's another one."],typeSpeed:100})}function example5(){$example5.typeIt({whatToType:["This is a great string.","But here is a better one."],typeSpeed:100,breakLines:!1})}function example6(){$example6.typeIt({whatToType:["Here's text <span class='just-a-class'>wrapped in HTML</span>."],typeSpeed:100})}$("#typeit-box").typeIt({whatToType:['A jQuery plugin that <span class="emphasized">types</span> stuff for you.','<span class="emphasized emphasized-duh">(Duh.)</span>'],typeSpeed:100,breakLines:!0,breakDelay:1e3});var $example1=$("#example1"),$example2=$("#example2"),$example3=$("#example3"),$example4=$("#example4"),$example5=$("#example5"),$example6=$("#example6");example4(),$("section").on("click","#btn-example4",function(){$example4.data("typeit").stop(),$example4.html(""),example4()}),example5(),$("section").on("click","#btn-example5",function(){$example5.data("typeit").stop(),$example5.html(""),example5()}),example6(),$("section").on("click","#btn-example6",function(){$example6.data("typeit").stop(),$example6.html(""),example6()}),function(){$("#iTypeSpeed").val("100"),$("#iBreakDelay").val("750"),$("#iStartDelay").val("250"),$("#iLoopDelay").val("750"),$("#TIInput").on("click","#TISubmit",function(e){e.preventDefault(),void 0!==$("#TIOutput").data("typeit")&&($("#TIOutput").data("typeit").stop(),$("#TIOutput").removeData()),$("#TIOutput").html("");var t,a=[];if(""===$("#stringTI").val())a="You didn't enter a string!";else{t=$("#stringTI").val().split("\n");for(var p=0;p<t.length;p++)void 0!==t[p]&&null!==t[p]&&""!==t[p]&&a.push(t[p])}var l=$("#stringTI").val()?38*a.length+40:75,i=$("#iTypeSpeed").val(),n=$("#iLifeLike").val();n="true"===n?!0:!1;var o=$("#iShowCursor").val();o="true"===o?!0:!1;var s=$("#iBreakLines").val();s="true"===s?!0:!1;var r=$("#iBreakDelay").val(),m=($("#iBreakStart").val(),$("#iStartDelay").val()),u=$("#iLoop").val();u="true"===u?!0:!1;var h=$("#iLoopDelay").val();$("#tempText").animate({opacity:0}),$("#TIOutputBox").animate({height:l},function(){$("html, body").animate({scrollTop:$("#TIOutputBox").offset().top-200},800),setTimeout(function(){$("#TIOutput").typeIt({whatToType:a,typeSpeed:Number(i),lifeLike:n,showCursor:o,breakLines:s,breakDelay:Number(r),startDelay:Number(m),loop:u,loopDelay:Number(h)})},800)})})}(),$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var e=$(this.hash);if(e=e.length?e:$("[name="+this.hash.slice(1)+"]"),e.length)return $("html,body").animate({scrollTop:e.offset().top},1e3),!1}})}); |
/** | ||
* jQuery TypeIt | ||
* @author Alex MacArthur (http://macarthur.me) | ||
* @version 2.0.0 | ||
* @copyright 2015 Alex MacArthur | ||
* @version 2.0.1 | ||
* @copyright 2016 Alex MacArthur | ||
* @description Types out a given string or strings. | ||
@@ -415,3 +415,3 @@ */ | ||
// convert to array | ||
this.arrayToDelete = this.stringToDelete.split(""); | ||
this.arrayToDelete = (typeof this.arrayToDelete !== undefined) ? this.stringToDelete.split("") : []; | ||
@@ -418,0 +418,0 @@ // loop over array |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
1
215362
1387