typewriting - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

build/typewriting.min.js

@@ -1,1 +0,7 @@
-var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t};!function(){function t(){if(this._currentNumber<this.settings.inputString.length){var n=i.call(this);"<"==n.slice(-1)?this._inHTMLTag=!0:">"==n.slice(-1)&&(this._inHTMLTag=!1),this.settings.targetElement.innerHTML=n,this._inHTMLTag?t.call(this):setTimeout(function(){t.call(this)}.bind(this),this.settings.typing_interval)}else this.settings.task="ready",this._currentNumber=0,this.settings.tw_callback.call()}function i(){return this.settings.inputString.slice(0,++this._currentNumber)}function n(){this.settings.tw_callback=function(){}}function e(t,i){var n;for(n in i)i.hasOwnProperty(n)&&(t[n]=i[n]);return t}this.TypeWriting=function(i,s){this._currentNumber=0,this._inHTMLTag=!1;var r={targetElement:null,inputString:"",typing_interval:150,blink_interval:"0.7s",cursor_color:"black",tw_callback:function(){},task:"unready"};if(i&&"object"===("undefined"==typeof i?"undefined":_typeof(i))&&(this.settings=e(r,i)),!i.inputString)throw new Error("Missing argument: inputString");if("string"!=typeof i.inputString)throw new Error(i.inputString+" is not a string");s?"function"==typeof s?this.settings.tw_callback=s:(console.error(s+" is not a function"),n.call(this)):n.call(this);var o=this.settings.targetElement.offsetHeight,a=parseInt(o/3);0==o&&(this.settings.targetElement.innerHTML="I",o=this.settings.targetElement.offsetHeight,a=this.settings.targetElement.offsetWidth);var l=document.head,c="@-webkit-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@-moz-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}.typingCursor::after{content:'';width:"+a+"px;height:"+o+"px;margin-left:5px;display:inline-block;vertical-align:bottom;background-color:"+r.cursor_color+";-webkit-animation:blink "+r.blink_interval+" infinite;-moz-animation:blink "+r.blink_interval+" infinite;animation:blink "+r.blink_interval+" infinite}",g=document.createElement("style");g.type="text/css",g.styleSheet?g.styleSheet.cssText=c:g.appendChild(document.createTextNode(c)),l.appendChild(g),this.settings.targetElement.className+=" typingCursor",this.settings.task="typing",t.call(this)},TypeWriting.prototype.rewrite=function(i,e){if("typing"==this.settings.task)console.warn("Last task is not finished yet."),setTimeout(function(){this.rewrite(i,e)}.bind(this),this.settings.typing_interval);else{if(!i)throw new Error("Missing argument: inputString");if("string"==typeof i?this.settings.inputString=i:console.error(i+" is not a string"),e){if("function"!=typeof e)throw new Error(e+" is not a function");this.settings.tw_callback=e}else n.call(this);this.settings.task="typing",t.call(this)}}}();
+/*!
+ * TypeWriting.js
+ *
+ * Copyright © 2015 Eddie Wen | MIT license
+ * https://github.com/EddieWen-Taiwan/TypeWriting.js
+ */
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):t.TypeWriting=n()}(this,function(){"use strict";var t=0,n=!1,e={targetElement:null,inputString:"",typing_interval:150,blink_interval:"0.7s",cursor_color:"black",tw_callback:function(){},task:"unready"},i=function(){if(t<e.inputString.length){var o=r();"<"==o.slice(-1)?n=!0:">"==o.slice(-1)&&(n=!1),e.targetElement.innerHTML=o,n?i():setTimeout(function(){i()},e.typing_interval)}else e.task="ready",t=0,e.tw_callback.call()},r=function(){return e.inputString.slice(0,++t)},o=function(){e.tw_callback=function(){}},a=function(t,n){var e;for(e in n)n.hasOwnProperty(e)&&(t[e]=n[e]);return t},l=function(t,n){if(t&&"object"==typeof t&&(e=a(e,t)),!t.inputString)throw new Error("Missing argument: inputString");if("string"!=typeof t.inputString)throw new Error(t.inputString+" is not a string");n?"function"==typeof n?e.tw_callback=n:(console.error(n+" is not a function"),o()):o();var r=e.targetElement.offsetHeight,l=parseInt(r/3);0==r&&(e.targetElement.innerHTML="I",r=e.targetElement.offsetHeight,l=e.targetElement.offsetWidth);var c="@-webkit-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@-moz-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}.typingCursor::after{content:'';width:"+l+"px;height:"+r+"px;margin-left:5px;display:inline-block;vertical-align:bottom;background-color:"+e.cursor_color+";-webkit-animation:blink "+e.blink_interval+" infinite;-moz-animation:blink "+e.blink_interval+" infinite;animation:blink "+e.blink_interval+" infinite}",s=document.createElement("style");s.type="text/css",s.styleSheet?s.styleSheet.cssText=c:s.appendChild(document.createTextNode(c)),document.head.appendChild(s),e.targetElement.className+=" typingCursor",e.task="typing",i()};return l.prototype={rewrite:function(t,n){if("typing"==e.task)console.warn("Last task is not finished yet."),setTimeout(function(){this.rewrite(t,n)}.bind(this),e.typing_interval);else{if(!t)throw new Error("Missing argument: inputString");if("string"!=typeof t)throw new Error(t+" is not a string");e.inputString=t,n?"function"==typeof n?e.tw_callback=n:(console.error(n+" is not a function"),o()):o(),e.task="typing",i()}}},l});

package.json

 {
   "name": "typewriting",
-  "version": "1.2.0",
-  "description": "TypeWriting.js is a jQuery plugin to make a typewriter effect.",
+  "version": "1.2.1",
+  "description": "TypeWriting.js is a javsscript library to make a typewriter effect.",
   "repository": {
@@ -9,2 +9,3 @@ "type": "git",
   },
+  "main": "build/typewriting.min.js",
   "keywords": [
@@ -11,0 +12,0 @@ "typewriter",

README.md

@@ -16,2 +16,9 @@ ## TypeWriting.js
 
+or
+
+~~~javascript
+// import in your .js file
+import TypeWriting from 'typewriting';
+~~~
+
 I use the height of targetElement to set the cursor height. You could use its line-height to control cursor height.
@@ -18,0 +25,0 @@

src/typewriting.js

@@ -1,23 +0,93 @@
-(function() {
-	
-	this.TypeWriting = function( options, callback_func ) {
+/*!
+ * TypeWriting.js
+ *
+ * Copyright © 2015 Eddie Wen | MIT license
+ * https://github.com/EddieWen-Taiwan/TypeWriting.js
+ */
 
-		// global variables
-		this._currentNumber = 0;
-		this._inHTMLTag = false;
+(function(root, factory) {
+	'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	root.TypeWriting = factory()
+}(this, function() {
+	'use strict';
 
-		var settings = {
-			targetElement	: null,
-			inputString 	: '',
-			typing_interval	: 150,
-			blink_interval	: '0.7s',
-			cursor_color	: 'black',
-			tw_callback		: function(){},
-			task			: 'unready',
+	var _currentNumber = 0,
+	_inHTMLTag = false,
+
+	defaults = {
+		targetElement	: null,
+		inputString 	: '',
+		typing_interval	: 150,
+		blink_interval	: '0.7s',
+		cursor_color	: 'black',
+		tw_callback		: function(){},
+		task			: 'unready',
+	},
+
+	_typingGo = function() {
+
+		if( _currentNumber < defaults.inputString.length ) {
+
+			var thisText = _getText();
+
+			if( thisText.slice(-1) == '<' ) {
+				_inHTMLTag = true;
+			}
+			else if( thisText.slice(-1) == '>' ) {
+				_inHTMLTag = false;
+			}
+
+			defaults.targetElement.innerHTML = thisText;
+
+			if( _inHTMLTag )
+				_typingGo();
+			else {
+				setTimeout( function() {
+					_typingGo();
+				}, defaults.typing_interval);
+			}
+
 		}
+		else {
+			defaults.task = 'ready';
+			_currentNumber = 0;
+			defaults.tw_callback.call();
+		}
+
+	},
+
+	_getText = function() {
+		return defaults.inputString.slice( 0, ++_currentNumber );
+	},
+
+	_cleanCallback = function() {
+		defaults.tw_callback = function(){};
+	},
+
+	// Utility method to extend defaults with user options
+	extendDefaults = function(source, properties) {
+		var property;
+		for( property in properties ) {
+			if( properties.hasOwnProperty(property) ) {
+				source[property] = properties[property];
+			}
+		}
+		return source;
+	};
+
+	/**
+	 * TypeWriting constructor
+	 */
+	var TypeWriting = function(options, callback_func) {
+
 		if( options && typeof options === "object" ) {
-			this.settings = extendDefaults(settings, options);
+			defaults = extendDefaults(defaults, options);
 		}
 
-		// check inputString ---required
+		/**
+		 * check value from user
+		 * the string will be put in target later
+		 */
 		if( options.inputString ) {
@@ -30,25 +100,26 @@ if( typeof options.inputString !== 'string' )
 
-		// check callback
+		/**
+		 * callback function
+		 */
 		if( callback_func ) {
 			if( typeof callback_func === 'function' )
-				this.settings.tw_callback = callback_func;
+				defaults.tw_callback = callback_func;
 			else {
 				console.error(`${callback_func} is not a function`);
-				_cleanCallback.call(this);
+				_cleanCallback();
 			}
 		} else
-			_cleanCallback.call(this);
+			_cleanCallback();
 
 		// get the height of cursor should be
-		var cursorHeight = this.settings.targetElement.offsetHeight;
+		var cursorHeight = defaults.targetElement.offsetHeight;
 		var cursorWidth = parseInt(cursorHeight/3);
 		if( cursorHeight == 0 ) {
-			this.settings.targetElement.innerHTML = 'I';
-			cursorHeight = this.settings.targetElement.offsetHeight;
-			cursorWidth = this.settings.targetElement.offsetWidth;
+			defaults.targetElement.innerHTML = 'I';
+			cursorHeight = defaults.targetElement.offsetHeight;
+			cursorWidth = defaults.targetElement.offsetWidth;
 		}
 
 		// prepare cursor style
-		const head = document.head;
-		const cssStyle = `@-webkit-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@-moz-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}.typingCursor::after{content:'';width:${cursorWidth}px;height:${cursorHeight}px;margin-left:5px;display:inline-block;vertical-align:bottom;background-color:${settings.cursor_color};-webkit-animation:blink ${settings.blink_interval} infinite;-moz-animation:blink ${settings.blink_interval} infinite;animation:blink ${settings.blink_interval} infinite}`;
+		var cssStyle = `@-webkit-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@-moz-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}.typingCursor::after{content:'';width:${cursorWidth}px;height:${cursorHeight}px;margin-left:5px;display:inline-block;vertical-align:bottom;background-color:${defaults.cursor_color};-webkit-animation:blink ${defaults.blink_interval} infinite;-moz-animation:blink ${defaults.blink_interval} infinite;animation:blink ${defaults.blink_interval} infinite}`;
 		var styleNode = document.createElement('style');
@@ -61,98 +132,64 @@ styleNode.type = 'text/css';
 		// add CSS style in HEAD
-		head.appendChild(styleNode);
+		document.head.appendChild(styleNode);
 
-		this.settings.targetElement.className += ' typingCursor';
-		this.settings.task = 'typing';
-		_typingGo.call(this);
+		defaults.targetElement.className += ' typingCursor';
+		defaults.task = 'typing';
+		_typingGo();
 
-	}
+	};
 
-	TypeWriting.prototype.rewrite = function( input_string, callback_func ) {
+	/**
+	 * public TypeWriting API :
+	 */
+	TypeWriting.prototype = {
 
-		if( this.settings.task == 'typing' ) {
-			console.warn( 'Last task is not finished yet.' );
-			setTimeout( function() {
-				this.rewrite( input_string, callback_func );
-			}.bind(this), this.settings.typing_interval );
-		}
-		else {
-			// Handle inputString ---required
-			if( input_string ) {
-				if( typeof input_string == 'string' )
-					this.settings.inputString = input_string;
+		/**
+		 * change the text on the same target
+		 */
+		rewrite: function(input_string, callback_func) {
+
+			if( defaults.task == 'typing' ) {
+				console.warn( 'Last task is not finished yet.' );
+				setTimeout( function() {
+					this.rewrite( input_string, callback_func );
+				}.bind(this), defaults.typing_interval );
+			}
+			else {
+				/**
+				 * check value
+				 * the string will be put in target later
+				 */
+				if( input_string ) {
+					if( typeof input_string == 'string' )
+						defaults.inputString = input_string;
+					else
+						throw new Error(`${input_string} is not a string`);
+				}
 				else
-					console.error(`${input_string} is not a string`);
-			}
-			else
-				throw new Error('Missing argument: inputString');
+					throw new Error('Missing argument: inputString');
 
-			// Handle callback
-			if( callback_func ) {
-				if( typeof callback_func == 'function' )
-					this.settings.tw_callback = callback_func;
-				else {
-					throw new Error(`${callback_func} is not a function`);
-					_cleanCallback.call(this);
+				/**
+				 * callback function
+				 */
+				if( callback_func ) {
+					if( typeof callback_func == 'function' )
+						defaults.tw_callback = callback_func;
+					else {
+						console.error(`${callback_func} is not a function`);
+						_cleanCallback();
+					}
 				}
-			}
-			else
-				_cleanCallback.call(this);
+				else
+					_cleanCallback();
 
-			this.settings.task = 'typing';
-			_typingGo.call(this);
-		}
-
-	}
-
-	function _typingGo() {
-
-		if( this._currentNumber < this.settings.inputString.length ) {
-
-			const thisText = _getText.call(this);
-
-			if( thisText.slice(-1) == '<' ) {
-				this._inHTMLTag = true;
+				defaults.task = 'typing';
+				_typingGo();
 			}
-			else if( thisText.slice(-1) == '>' ) {
-				this._inHTMLTag = false;
-			}
 
-			this.settings.targetElement.innerHTML = thisText;
-
-			if( this._inHTMLTag )
-				_typingGo.call(this);
-			else {
-				setTimeout( function() {
-					_typingGo.call(this);
-				}.bind(this), this.settings.typing_interval);
-			}
-
 		}
-		else {
-			this.settings.task = 'ready';
-			this._currentNumber = 0;
-			this.settings.tw_callback.call();
-		}
 
-	}
+	};
 
-	function _getText() {
-		return this.settings.inputString.slice( 0, ++this._currentNumber );
-	}
+	return TypeWriting;
 
-	function _cleanCallback() {
-		this.settings.tw_callback = function(){};
-	}
-
-	// Utility method to extend defaults with user options
-	function extendDefaults(source, properties) {
-		var property;
-		for( property in properties ) {
-			if( properties.hasOwnProperty(property) ) {
-				source[property] = properties[property];
-			}
-		}
-		return source;
-	}
-
-}());
+}));

New alerts

Major refactor

Supply chain risk

Package 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

Improved metrics

Total package byte prevSize

9964

increased by1.37%

Lines of code

224

increased by28%

Number of lines in readme file

69

increased by11.29%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes