Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
typeit - npm Package Compare versions
Comparing version 1.0.3 to 1.0.4
| /** | ||
| * jQuery TypeIt | ||
| * @author Alex MacArthur (http://macarthur.me) | ||
| * @version 1.0.3 | ||
| * @version 1.0.4 | ||
| * @copyright 2015 Alex MacArthur | ||
@@ -28,3 +28,3 @@ * @description Types out a given string or strings. | ||
| breakWait: 500, | ||
| delayStart: 100 | ||
| delayStart: 250 | ||
| }; | ||
@@ -77,5 +77,9 @@ | ||
| 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 | ||
| 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 | ||
@@ -87,4 +91,2 @@ if(this.settings.breakLines === false) { | ||
| theElement.css('display','inline-block'); | ||
| // if showCursor is false, then remove the ti-cursor class | ||
@@ -119,6 +121,9 @@ if(this.settings.showCursor === false) { | ||
| 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(this.mergedStrings[this.typeCount+this.stringPlaceCount]); | ||
| $(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(this.mergedStrings[this.typeCount+this.stringPlaceCount]); | ||
| $(this.theElement).find('.ti-text-container').addClass('active-container').append(characterToAppend); | ||
| } | ||
@@ -125,0 +130,0 @@ |
@@ -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:100},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>');this.settings.breakLines===!1&&(e.find(".ti-container").remove(),e.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>')),e.css("display","inline-block"),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(){this.settings.breakLines===!0?t(this.theElement).find(".ti-text-container:eq("+this.stringCount+")").addClass("active-container").append(this.mergedStrings[this.typeCount+this.stringPlaceCount]):t(this.theElement).find(".ti-text-container").addClass("active-container").append(this.mergedStrings[this.typeCount+this.stringPlaceCount]),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){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); |
| { | ||
| "name": "typeit", | ||
| "version": "1.0.4", | ||
| "license": "GPL-2.0", | ||
| "author": "Alex MacArthur", | ||
| "description": "jQuery plugin that types text for you.", | ||
| "author": "Alex MacArthur <alex@macarthur.me>", | ||
| "description": "A lightweight, easy-to-implement jQuery animated typing plugin that types text for you.", | ||
| "license": "General Public License", | ||
| "version": "1.0.3", | ||
| "repository": { | ||
@@ -9,0 +9,0 @@ "type": "git", |
| # TypeIt: A jQuery Animated Typing Plugin | ||
| ## Description | ||
| A jQuery plugin that outputs text like it's being typed. It allows you to type single strings, multiple strings that stack, and multiple strings that delete & replace each other. | ||
| A jQuery plugin that outputs text like it's being typed. It allows you to type single strings, multiple strings that stack, and multiple strings that delete & replace each other. It's lightweight, scalable, responsive, and super easy to implement. | ||
@@ -11,2 +11,6 @@ ## Demo | ||
| ### Download the Plugin | ||
| Download the ZIP, clone this repo, or install via npm with `npm install typeit`. | ||
| ### Initializing on Your Site | ||
@@ -90,8 +94,8 @@ | ||
| | whatToType | The string to be typed. | 'This is the default string. Please replace this string with your own.' | | ||
| | typeSpeed | The typing speed. | 500 | | ||
| | typeSpeed | The typing speed. | 200 | | ||
| | lifeLike | Will make the typing pace irregular, as if a real person is doing it. | true | | ||
| | showCursor | Show a blinking cursor at the end of the string. | true | | ||
| | breakLines | Choose whether you want multiple strings to be printed on top of eachother (breakLines = true), or if you want each string to be deleted and replaced by the next one (breakLines = false). | true | | ||
| | breakLines | Choose whether you want multiple strings to be printed on top of each other (breakLines = true), or if you want each string to be deleted and replaced by the next one (breakLines = false). | true | | ||
| | breakWait | The amount of time between typing multiple strings. | 500 | | ||
| | delayStart | The amount of time before the plugin begins typing after initalizing. | 100 | | ||
| | delayStart | The amount of time before the plugin begins typing after initalizing. | 250 | | ||
@@ -98,0 +102,0 @@ ## Ideas for Improvement? |
@@ -60,5 +60,5 @@ $('.typeit-box').typeIt({ | ||
| $('#iTypeSpeed').val('100'); | ||
| $('#iBreakWait').val('100'); | ||
| $('#iDelayStart').val('100'); | ||
| $('#iTypeSpeed').val('250'); | ||
| $('#iBreakWait').val('500'); | ||
| $('#iDelayStart').val('250'); | ||
@@ -65,0 +65,0 @@ $('#TIInput').on('click','#TISubmit', function(e){ |
@@ -1,1 +0,1 @@ | ||
| $(".typeit-box").typeIt({whatToType:["A jQuery plugin that types stuff for you."],typeSpeed:100}),$(".example1").typeIt({whatToType:"You've just initialized this bad boy.",typeSpeed:100}),$("section").on("click",".btn-example1",function(){$(".example1").data().typeit.stopTyping(),$(".example1").html(""),$(".example1").typeIt({whatToType:"You've just initialized this bad boy.",typeSpeed:100})}),$(".example2").typeIt(),$("section").on("click",".btn-example2",function(){$(".example2").data().typeit.stopTyping(),$(".example2").html(""),$(".example2").typeIt()}),$(".example3").typeIt({whatToType:["This is a string!","And here's another one."],typeSpeed:100}),$("section").on("click",".btn-example3",function(){$(".example3").data().typeit.stopTyping(),$(".example3").html(""),$(".example3").typeIt({whatToType:["This is a string!","And here's another one."],typeSpeed:100})}),$(".example4").typeIt({whatToType:["This is a great string.","But here is a better one."],typeSpeed:100,breakLines:!1}),$("section").on("click",".btn-example4",function(){$(".example4").data().typeit.stopTyping(),$(".example4").html(""),$(".example4").typeIt({whatToType:["This is a great string.","But here is a better one."],typeSpeed:100,breakLines:!1})}),function(){$("#iTypeSpeed").val("100"),$("#iBreakWait").val("100"),$("#iDelayStart").val("100"),$("#TIInput").on("click","#TISubmit",function(e){e.preventDefault(),$.hasData($(this))&&$(this).data().typeit.stopTyping(),$("#TIOutput").html("");var t,a=[];if(""===$("#stringTI").val())a="You didn't enter a string!";else{t=$("#stringTI").val().split("\n");for(var i=0;i<t.length;i++)void 0!==t[i]&&null!==t[i]&&""!==t[i]&&a.push(t[i])}var p=$("#stringTI").val()?38*a.length+40:75,n=$("#iTypeSpeed").val(),o=$("#iLifeLike").val();o="true"===o?!0:!1;var l=$("#iShowCursor").val();l="true"===l?!0:!1;var s=$("#iBreakLines").val();s="true"===s?!0:!1;var r=$("#iBreakWait").val(),h=$("#iBreakStart").val(),y=$("#iDelayStart").val();$(".temp-text").animate({opacity:0}),$(".ti-output-box").animate({height:p},function(){$("html, body").animate({scrollTop:$(".ti-output-box").offset().top-200},800),setTimeout(function(){$("#TIOutput").typeIt({whatToType:a,typeSpeed:n,lifeLike:o,showCursor:l,breakLines:s,breakWait:r,breakStart:h,delayStart:y})},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}})}); | ||
| $(".typeit-box").typeIt({whatToType:["A jQuery plugin that types stuff for you."],typeSpeed:100}),$(".example1").typeIt({whatToType:"You've just initialized this bad boy.",typeSpeed:100}),$("section").on("click",".btn-example1",function(){$(".example1").data().typeit.stopTyping(),$(".example1").html(""),$(".example1").typeIt({whatToType:"You've just initialized this bad boy.",typeSpeed:100})}),$(".example2").typeIt(),$("section").on("click",".btn-example2",function(){$(".example2").data().typeit.stopTyping(),$(".example2").html(""),$(".example2").typeIt()}),$(".example3").typeIt({whatToType:["This is a string!","And here's another one."],typeSpeed:100}),$("section").on("click",".btn-example3",function(){$(".example3").data().typeit.stopTyping(),$(".example3").html(""),$(".example3").typeIt({whatToType:["This is a string!","And here's another one."],typeSpeed:100})}),$(".example4").typeIt({whatToType:["This is a great string.","But here is a better one."],typeSpeed:100,breakLines:!1}),$("section").on("click",".btn-example4",function(){$(".example4").data().typeit.stopTyping(),$(".example4").html(""),$(".example4").typeIt({whatToType:["This is a great string.","But here is a better one."],typeSpeed:100,breakLines:!1})}),function(){$("#iTypeSpeed").val("250"),$("#iBreakWait").val("500"),$("#iDelayStart").val("250"),$("#TIInput").on("click","#TISubmit",function(e){e.preventDefault(),$.hasData($(this))&&$(this).data().typeit.stopTyping(),$("#TIOutput").html("");var t,a=[];if(""===$("#stringTI").val())a="You didn't enter a string!";else{t=$("#stringTI").val().split("\n");for(var i=0;i<t.length;i++)void 0!==t[i]&&null!==t[i]&&""!==t[i]&&a.push(t[i])}var p=$("#stringTI").val()?38*a.length+40:75,n=$("#iTypeSpeed").val(),o=$("#iLifeLike").val();o="true"===o?!0:!1;var l=$("#iShowCursor").val();l="true"===l?!0:!1;var s=$("#iBreakLines").val();s="true"===s?!0:!1;var r=$("#iBreakWait").val(),h=$("#iBreakStart").val(),y=$("#iDelayStart").val();$(".temp-text").animate({opacity:0}),$(".ti-output-box").animate({height:p},function(){$("html, body").animate({scrollTop:$(".ti-output-box").offset().top-200},800),setTimeout(function(){$("#TIOutput").typeIt({whatToType:a,typeSpeed:n,lifeLike:o,showCursor:l,breakLines:s,breakWait:r,breakStart:h,delayStart:y})},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 1.0.3 | ||
| * @version 1.0.4 | ||
| * @copyright 2015 Alex MacArthur | ||
@@ -28,3 +28,3 @@ * @description Types out a given string or strings. | ||
| breakWait: 500, | ||
| delayStart: 100 | ||
| delayStart: 250 | ||
| }; | ||
@@ -77,5 +77,9 @@ | ||
| 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 | ||
| 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 | ||
@@ -87,4 +91,2 @@ if(this.settings.breakLines === false) { | ||
| theElement.css('display','inline-block'); | ||
| // if showCursor is false, then remove the ti-cursor class | ||
@@ -119,6 +121,9 @@ if(this.settings.showCursor === false) { | ||
| 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(this.mergedStrings[this.typeCount+this.stringPlaceCount]); | ||
| $(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(this.mergedStrings[this.typeCount+this.stringPlaceCount]); | ||
| $(this.theElement).find('.ti-text-container').addClass('active-container').append(characterToAppend); | ||
| } | ||
@@ -125,0 +130,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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 by2.19%
97520
- Lines of code
- increased by4.34%
649
- Number of lines in readme file
- increased by3.85%
108
No dependency changes