typeit - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/typeit.js

 /**
  * jQuery TypeIt
  * @author Alex MacArthur (http://macarthur.me)
+ * @version 1.0.3
  * @copyright 2015 Alex MacArthur
@@ -50,2 +51,3 @@ * @description Types out a given string or strings.
     this.typeTimeout = null;
+    this.shortenedText = null;
 
@@ -75,3 +77,3 @@ this.init(theElement);
         this.stringLengths[j] = this.stringArray[j].length;
-        theElement.append('<span class="ti-container" style="font-size:inherit;"></span>');
+        theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>');
      }
@@ -82,3 +84,3 @@
         theElement.find('.ti-container').remove();
-        theElement.append('<span class="ti-container" style="font-size:inherit;"></span>');
+        theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>');
      }
@@ -88,12 +90,11 @@
 
-     // start to type the string(s)
-     if(this.settings.showCursor === true) {
+     // if showCursor is false, then remove the ti-cursor class
+     if(this.settings.showCursor === false) {
+      $(this.theElement).find('.ti-text-container').removeClass('ti-cursor');
+     } 
 
-      $(this.theElement).find('.ti-container:nth-child(1)').addClass('active-container').append('<span class="ti-letter" style="font-size: inherit;"><span class="ti-cursor">|</span></span>');
+      // start to type the string(s)
       setTimeout(function() {
         this.typeLoop();
       }.bind(this), this.settings.delayStart);
-     } else {
-        this.typeLoop();
-     }
 
@@ -107,9 +108,2 @@ };
 
-    // if settings say so, turn on the blinking cursor
-    if(this.settings.showCursor === true && this.mergedStrings[this.typeCount+this.stringPlaceCount] != ' '){
-      this.cursor = '<span class="ti-cursor">|</span>';
-    } else {
-      this.cursor = '';
-    }
-
      // make it human-like if specified in the settings
@@ -124,9 +118,9 @@ if(this.settings.lifeLike === true){
 
-      // append the string of letters to the respective .ti-container
+      // append the string of letters to the respective .ti-text-container
       // use find() so that we select the class only for the element on which we're instantiated
 
       if(this.settings.breakLines === true) {
-        $(this.theElement).find('.ti-container:nth-child(' + (this.stringCount + 1) + ')').addClass('active-container').append('<span class="ti-letter" style="font-size: inherit;">' + this.mergedStrings[this.typeCount+this.stringPlaceCount] + this.cursor + '</span>');
+        $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(this.mergedStrings[this.typeCount+this.stringPlaceCount]);
       } else {
-        $(this.theElement).find('.ti-container').append('<span class="ti-letter" style="font-size: inherit;">' + this.mergedStrings[this.typeCount+this.stringPlaceCount] + this.cursor + '</span>');
+        $(this.theElement).find('.ti-text-container').addClass('active-container').append(this.mergedStrings[this.typeCount+this.stringPlaceCount]);
       }
@@ -158,6 +152,6 @@
             // remove any 'active-container' classes fromt the elements
-            $(this.theElement).find('.ti-container').removeClass('active-container');
-            
+            $(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-container:nth-child(' + (this.stringCount + 1) + ')').addClass('active-container').append('<span class="ti-letter">' + this.cursor + '</span>');
+            $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container');
 
@@ -180,4 +174,9 @@ // after another slight delay, continue typing the next string
     this.deleteTimeout = setTimeout(function () {
-       // find the .ti-container and delete the last letter in that parent over and over again
-       $(this.theElement).find('.ti-container').find('.ti-letter:last-child').remove();
+
+      // get the string from the element and cut it by one character at the end
+      shortenedText = $(this.theElement).find('.ti-text-container').text().substring(0, $(this.theElement).find('.ti-text-container').text().length - 1);
+
+      // then, put that shortened text into the element so it looks like it's being deleted
+      $(this.theElement).find('.ti-text-container').text(shortenedText);
+
        // if there are still characters in the string, run the function again
@@ -196,3 +195,3 @@ this.deleteCount++;
 
-  // stop the plugin from typing or deleting stuff whenever you
+  // stop the plugin from typing or deleting stuff whenever it's called
    _proto.stopTyping = function() {
@@ -199,0 +198,0 @@ clearTimeout(this.typeTimeout);

dist/typeit.min.js

@@ -1,1 +0,1 @@
-!function(t){t.fn.typeIt=function(i){return this.each(function(){t(this).data("typeit",new t.fn.typeIt.typeItClass(t(this),i))})},t.fn.typeIt.typeItClass=function(i,s){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:i.data("typeitWhattotype"),typeSpeed:i.data("typeitSpeed"),lifeLike:i.data("typeitLifelike"),showCursor:i.data("typeitShowcursor"),breakLines:i.data("typeitBreaklines"),breakWait:i.data("typeitBreakWait"),delayStart:i.data("typeitDelayStart")},this.theElement=i,this.settings=t.extend({},this.defaults,s,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.init(i)};var i=t.fn.typeIt.typeItClass.prototype;i.init=function(i){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,i.append('<span class="ti-container" style="font-size:inherit;"></span>');this.settings.breakLines===!1&&(i.find(".ti-container").remove(),i.append('<span class="ti-container" style="font-size:inherit;"></span>')),i.css("display","inline-block"),this.settings.showCursor===!0?(t(this.theElement).find(".ti-container:nth-child(1)").addClass("active-container").append('<span class="ti-letter" style="font-size: inherit;"><span class="ti-cursor">|</span></span>'),setTimeout(function(){this.typeLoop()}.bind(this),this.settings.delayStart)):this.typeLoop()},i.typeLoop=function(){this.phraseLength=this.stringLengths[this.stringCount],this.settings.showCursor===!0&&" "!=this.mergedStrings[this.typeCount+this.stringPlaceCount]?this.cursor='<span class="ti-cursor">|</span>':this.cursor="",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-container:nth-child("+(this.stringCount+1)+")").addClass("active-container").append('<span class="ti-letter" style="font-size: inherit;">'+this.mergedStrings[this.typeCount+this.stringPlaceCount]+this.cursor+"</span>"):t(this.theElement).find(".ti-container").append('<span class="ti-letter" style="font-size: inherit;">'+this.mergedStrings[this.typeCount+this.stringPlaceCount]+this.cursor+"</span>"),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-container").removeClass("active-container"),t(this.theElement).find(".ti-container:nth-child("+(this.stringCount+1)+")").addClass("active-container").append('<span class="ti-letter">'+this.cursor+"</span>"),setTimeout(function(){this.typeLoop()}.bind(this),this.settings.breakWait)}.bind(this),this.settings.breakWait)))}.bind(this),this.delayTime)},i.deleteLoop=function(){this.deleteTimeout=setTimeout(function(){t(this.theElement).find(".ti-container").find(".ti-letter:last-child").remove(),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)},i.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: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);

gulpfile.js

@@ -23,2 +23,8 @@ // load our plugins
 
+  // minify demo scripts
+  gulp.src('src/scripts.js')
+    .pipe(uglify())
+    .pipe(rename('scripts.min.js'))
+    .pipe(gulp.dest('src'));
+
   // put the unminified JavaScript into /dist
@@ -69,3 +75,3 @@ gulp.src('src/typeit.js')
   // watch for JavaScript changes
-  gulp.watch('src/typeit.js', ['jshint', 'scripts']);
+  gulp.watch('src/*.js', ['jshint', 'scripts']);
 
@@ -72,0 +78,0 @@ // watch for SASS changes

package.json

@@ -7,3 +7,3 @@ {
   "license": "General Public License",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "repository": {
@@ -10,0 +10,0 @@ "type": "git",

README.md

 # TypeIt: A jQuery Animated Typing Plugin
 
-##Description
+## 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. 
 
-##Demo
-Checkout the demo page at <a href="http://alexmacarthur.github.io/typeit">alexmacarthur.github.io/typeit</a>.
+## Demo
+Checkout several demos and a sandbox where you can try it out at <a href="http://alexmacarthur.github.io/typeit">alexmacarthur.github.io/typeit</a>.
 
-##Setup
+## Setup
 
@@ -28,3 +28,3 @@ ### Initializing on Your Site
 
-##Usage
+## Usage
 
@@ -68,11 +68,11 @@ ### Calling TypeIt on Your Site
 
-``
+```
   $('.type-it').typeit({
     whatToType:['Enter your string here!', 'Another string!']
   });
-  ``
+```
   
 Or, you can have type strings that delete & replace each other. Do this, set the 'breakLines' setting to `false`.
 
-``
+```
   $('.type-it').typeit({
@@ -82,5 +82,6 @@ whatToType: ['Enter your string here!', 'Another string!'],
   });
-  ``
-##Options
+```
 
+## Options
+
 There are a number of options you may use to customize typeIt.
@@ -98,5 +99,5 @@
 
-##Ideas for Improvement?
+## Ideas for Improvement?
 
-If you choose to develop it locally, Gulp is configured to check & minify JavaScript and compile & compress SASS. In the root of the repo, use these commands to run these default tasks and watch for file changes (make sure Node.js and Gulp are installed on your computer):
+If you choose to develop it locally, Gulp is configured to check & minify JavaScript and compile & compress SASS. In the root of the repo, use these commands to run these default tasks and watch for file changes (make sure Node.js, npm, and Gulp are installed on your computer):
 
@@ -103,0 +104,0 @@ ```

src/typeit.js

 /**
  * jQuery TypeIt
  * @author Alex MacArthur (http://macarthur.me)
+ * @version 1.0.3
  * @copyright 2015 Alex MacArthur
@@ -50,2 +51,3 @@ * @description Types out a given string or strings.
     this.typeTimeout = null;
+    this.shortenedText = null;
 
@@ -75,3 +77,3 @@ this.init(theElement);
         this.stringLengths[j] = this.stringArray[j].length;
-        theElement.append('<span class="ti-container" style="font-size:inherit;"></span>');
+        theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>');
      }
@@ -82,3 +84,3 @@
         theElement.find('.ti-container').remove();
-        theElement.append('<span class="ti-container" style="font-size:inherit;"></span>');
+        theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>');
      }
@@ -88,12 +90,11 @@
 
-     // start to type the string(s)
-     if(this.settings.showCursor === true) {
+     // if showCursor is false, then remove the ti-cursor class
+     if(this.settings.showCursor === false) {
+      $(this.theElement).find('.ti-text-container').removeClass('ti-cursor');
+     } 
 
-      $(this.theElement).find('.ti-container:nth-child(1)').addClass('active-container').append('<span class="ti-letter" style="font-size: inherit;"><span class="ti-cursor">|</span></span>');
+      // start to type the string(s)
       setTimeout(function() {
         this.typeLoop();
       }.bind(this), this.settings.delayStart);
-     } else {
-        this.typeLoop();
-     }
 
@@ -107,9 +108,2 @@ };
 
-    // if settings say so, turn on the blinking cursor
-    if(this.settings.showCursor === true && this.mergedStrings[this.typeCount+this.stringPlaceCount] != ' '){
-      this.cursor = '<span class="ti-cursor">|</span>';
-    } else {
-      this.cursor = '';
-    }
-
      // make it human-like if specified in the settings
@@ -124,9 +118,9 @@ if(this.settings.lifeLike === true){
 
-      // append the string of letters to the respective .ti-container
+      // append the string of letters to the respective .ti-text-container
       // use find() so that we select the class only for the element on which we're instantiated
 
       if(this.settings.breakLines === true) {
-        $(this.theElement).find('.ti-container:nth-child(' + (this.stringCount + 1) + ')').addClass('active-container').append('<span class="ti-letter" style="font-size: inherit;">' + this.mergedStrings[this.typeCount+this.stringPlaceCount] + this.cursor + '</span>');
+        $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(this.mergedStrings[this.typeCount+this.stringPlaceCount]);
       } else {
-        $(this.theElement).find('.ti-container').append('<span class="ti-letter" style="font-size: inherit;">' + this.mergedStrings[this.typeCount+this.stringPlaceCount] + this.cursor + '</span>');
+        $(this.theElement).find('.ti-text-container').addClass('active-container').append(this.mergedStrings[this.typeCount+this.stringPlaceCount]);
       }
@@ -158,6 +152,6 @@
             // remove any 'active-container' classes fromt the elements
-            $(this.theElement).find('.ti-container').removeClass('active-container');
-            
+            $(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-container:nth-child(' + (this.stringCount + 1) + ')').addClass('active-container').append('<span class="ti-letter">' + this.cursor + '</span>');
+            $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container');
 
@@ -180,4 +174,9 @@ // after another slight delay, continue typing the next string
     this.deleteTimeout = setTimeout(function () {
-       // find the .ti-container and delete the last letter in that parent over and over again
-       $(this.theElement).find('.ti-container').find('.ti-letter:last-child').remove();
+
+      // get the string from the element and cut it by one character at the end
+      shortenedText = $(this.theElement).find('.ti-text-container').text().substring(0, $(this.theElement).find('.ti-text-container').text().length - 1);
+
+      // then, put that shortened text into the element so it looks like it's being deleted
+      $(this.theElement).find('.ti-text-container').text(shortenedText);
+
        // if there are still characters in the string, run the function again
@@ -196,3 +195,3 @@ this.deleteCount++;
 
-  // stop the plugin from typing or deleting stuff whenever you
+  // stop the plugin from typing or deleting stuff whenever it's called
    _proto.stopTyping = function() {
@@ -199,0 +198,0 @@ clearTimeout(this.typeTimeout);

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

95433

increased by73.31%

Number of package files

26

increased by13.04%

Lines of code

622

increased by28.51%

Number of lines in readme file

104

increased by0.97%

No dependency changes