typewriting
Advanced tools
Comparing version 1.2.0 to 1.2.1
@@ -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}); |
{ | ||
"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", |
@@ -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 @@ |
@@ -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; | ||
} | ||
}()); | ||
})); |
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage 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
9964
224
69
1