typeit - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/typeit.js

 /**
  * 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 @@

dist/typeit.min.js

@@ -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);

package.json

 {
   "name": "typeit",
+  "version": "1.0.4",
   "license": "GPL-2.0",
-  "author": "Alex MacArthur",
-  "description": "jQuery plugin that types text for you.",
+  "author": "Alex MacArthur <[e-mail]>",
+  "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",

README.md

 # 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?

src/scripts.js

@@ -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){

src/scripts.min.js

@@ -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}})});

src/typeit.js

 /**
  * 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 @@

New alerts

License Policy Violation

License

This 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

License

This 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

97520

increased by2.19%

Lines of code

649

increased by4.34%

Number of lines in readme file

108

increased by3.85%

No dependency changes