Socket
Socket
Sign inDemoInstall

typeit

Package Overview
Dependencies
0
Maintainers
1
Versions
117
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0 to 1.0.1

2

dist/typeit.js

@@ -21,3 +21,3 @@ /**

this.defaults = {
whatToType:'This is a test string.',
whatToType:'This is the default string. Please replace this string with your own.',
typeSpeed: 200,

@@ -24,0 +24,0 @@ lifeLike: false,

2

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 a test string.",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(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);

36

gulpfile.js

@@ -11,3 +11,3 @@ // load our plugins

gulp.task('jshint',function(){
gulp.src('../src/typeIt.js')
gulp.src('src/typeit.js')
.pipe(jshint())

@@ -19,10 +19,10 @@ .pipe(jshint.reporter('default'));

gulp.task('scripts', function() {
gulp.src('../src/typeit.js')
gulp.src('src/typeit.js')
.pipe(uglify())
.pipe(rename('typeit.min.js'))
.pipe(gulp.dest('../dist'));
.pipe(gulp.dest('dist'));
// put the unminified JavaScript into /dist
gulp.src('../src/typeit.js')
.pipe(gulp.dest('../dist'));
gulp.src('src/typeit.js')
.pipe(gulp.dest('dist'));
});

@@ -34,23 +34,23 @@

// compile & autoprefix the SCSS in the /src folder
gulp.src('../src/typeit.scss')
gulp.src('src/typeit.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefix('last 2 versions'))
.pipe(gulp.dest('../src'));
.pipe(gulp.dest('src'));
// put minified CSS into /dist
gulp.src('../src/typeit.scss')
gulp.src('src/typeit.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(autoprefix('last 2 versions'))
.pipe(rename('typeit.min.css'))
.pipe(gulp.dest('../dist'));
.pipe(gulp.dest('dist'));
// put unminified CSS into /dist
gulp.src('../src/typeit.scss')
gulp.src('src/typeit.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefix('last 2 versions'))
.pipe(gulp.dest('../dist'));
.pipe(gulp.dest('dist'));
// put original SCSS into /dist
gulp.src('../src/typeit.scss')
.pipe(gulp.dest('../dist'));
gulp.src('src/typeit.scss')
.pipe(gulp.dest('dist'));

@@ -61,6 +61,6 @@ });

// compile our local demo SCSS
gulp.src('../src/style.scss')
gulp.src('src/style.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(autoprefix('last 2 versions'))
.pipe(gulp.dest('../src'));
.pipe(gulp.dest('src'));
});

@@ -72,10 +72,10 @@

// watch for JavaScript changes
gulp.watch('../src/typeit.js', ['jshint', 'scripts']);
gulp.watch('src/typeit.js', ['jshint', 'scripts']);
// watch for SASS changes
gulp.watch('../src/typeit.scss', ['typeItSass']);
gulp.watch('src/typeit.scss', ['typeItSass']);
// watch for SASS changes
gulp.watch('../src/**/*.scss', ['demoSass']);
gulp.watch('src/**/*.scss', ['demoSass']);
});

5

package.json
{
"name": "typeit",
"license": "GPL-2.0",
"license": "General Public License",
"author": "Alex MacArthur",
"description": "jQuery plugin that types text for you.",
"license": "General Public License",
"version": "1.0.0",
"version": "1.0.1",
"repository": {

@@ -9,0 +8,0 @@ "type": "git",

42

README.md
# TypeIt: A jQuery Animated Typing Plugin
##Description
A light jQuery plugin that outputs text like it's being typed.
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>.
##Setup
### Initializing on Your Site
1. Create an empty HTML element to select.

@@ -21,12 +26,8 @@

3. Select the element and initialize the `typeit()` function. While you're doing this, enter the string you'd like to output.
You're ready to initialize it!
``
$('.type-it').typeit({
whatToType:'Enter your string here!'
});
``
##Usage
### Calling TypeIt on Your Site
You can modify the options for the plugin in two different ways -- either by inserting them directly into the function call, or by using data attributes.

@@ -62,2 +63,21 @@

```
### Typing Multiple Strings
Aside from simply typing a single string, you can configure TypeIt to type multiple strings. By default, they stack on top of each other. To use this feature, just enter an array of several strings.
``
$('.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({
whatToType: ['Enter your string here!', 'Another string!'],
breakLines: false
});
``
##Options

@@ -73,11 +93,13 @@

| 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 |
| breakWait | The amount of time between typing multiple strings. | 500 |
| delayStart | The amount of time before the plugin begins typing after initalizing. | 100 |
##Ideas for Improvement?
I'm still a web dev noob, so ideas for improvement are always welcome! 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 and Gulp are installed on your computer):
```
cd gulp
npm install
gulp
```

2

src/typeit.js

@@ -21,3 +21,3 @@ /**

this.defaults = {
whatToType:'This is a test string.',
whatToType:'This is the default string. Please replace this string with your own.',
typeSpeed: 200,

@@ -24,0 +24,0 @@ lifeLike: false,

src/scss/_main.scss

Sorry, the diff of this file is not supported yet

src/style.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc