update typed.js to newer version
This commit is contained in:
Brandon Goldman
Panos Sakkos
parent
d2bff3fb9a
commit
85fdf5b510
1 changed files with 412 additions and 8 deletions
420
js/typed.js
420
js/typed.js
|
|
@ -20,11 +20,415 @@
|
||||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
// THE SOFTWARE.
|
// 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<b.strings.length;++c)b.sequence[c]=c;b.shuffle&&(b.sequence=b.shuffleArray(b.sequence));b.typewrite(b.strings[b.sequence[b.arrayPos]],
|
|
||||||
b.strPos)},b.startDelay)},build:function(){var b=this;!0===this.showCursor&&(this.cursor=d('<span class="typed-cursor">'+this.cursorChar+"</span>"),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===
|
! function($) {
|
||||||
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=
|
"use strict";
|
||||||
this.el.attr("id");this.el.after('<span id="'+b+'"/>');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);
|
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<self.strings.length;++i) self.sequence[i]=i;
|
||||||
|
|
||||||
|
// shuffle the array if true
|
||||||
|
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
|
||||||
|
|
||||||
|
// Start typing
|
||||||
|
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
|
||||||
|
}, self.startDelay);
|
||||||
|
}
|
||||||
|
|
||||||
|
,
|
||||||
|
build: function() {
|
||||||
|
var self = this;
|
||||||
|
// Insert cursor
|
||||||
|
if (this.showCursor === true) {
|
||||||
|
this.cursor = $("<span class=\"typed-cursor\">" + this.cursorChar + "</span>");
|
||||||
|
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('<span id="' + id + '"/>')
|
||||||
|
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);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue