From 274e03c3b8fdbd2c12215cb17aa252e4c0d3e4f1 Mon Sep 17 00:00:00 2001 From: Saul Hardman Date: Mon, 1 Jun 2015 19:42:57 +0100 Subject: [PATCH] feat(Init): initial commit --- .gitignore | 6 + .jshintrc | 15 +++ Gruntfile.js | 59 ++++++++++ LICENSE | 22 ++++ README.md | 40 +++++++ autotyper.jquery.json | 35 ++++++ bower.json | 31 +++++ demo/index.html | 18 +++ dist/jquery.autotyper.js | 218 +++++++++++++++++++++++++++++++++++ dist/jquery.autotyper.min.js | 9 ++ package.json | 30 +++++ src/jquery.autotyper.js | 210 +++++++++++++++++++++++++++++++++ 12 files changed, 693 insertions(+) create mode 100644 .gitignore create mode 100644 .jshintrc create mode 100644 Gruntfile.js create mode 100644 LICENSE create mode 100644 README.md create mode 100644 autotyper.jquery.json create mode 100644 bower.json create mode 100644 demo/index.html create mode 100644 dist/jquery.autotyper.js create mode 100644 dist/jquery.autotyper.min.js create mode 100644 package.json create mode 100644 src/jquery.autotyper.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ce85b8a --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +# OS +.DS_Store +._* + +# NPM dependencies +node_modules/ \ No newline at end of file diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..34e8388 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,15 @@ +{ + "boss": true, + "curly": true, + "eqeqeq": true, + "eqnull": true, + "expr": true, + "immed": true, + "noarg": true, + "onevar": true, + "quotmark": "double", + "smarttabs": true, + "trailing": true, + "unused": true, + "node": true +} diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..42df440 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,59 @@ +module.exports = function(grunt) { + + grunt.initConfig({ + + // Import package manifest + pkg: grunt.file.readJSON("autotyper.jquery.json"), + + // Banner definitions + meta: { + banner: "/*\n" + + " * <%= pkg.title || pkg.name %> - v<%= pkg.version %>\n" + + " * <%= pkg.description %>\n" + + " * <%= pkg.homepage %>\n" + + " *\n" + + " * Made by <%= pkg.author.name %>\n" + + " * Under <%= pkg.licenses[0].type %> License\n" + + " */\n" + }, + + // Concat definitions + concat: { + dist: { + src: ["src/jquery.<%= pkg.name %>.js"], + dest: "dist/jquery.<%= pkg.name %>.js" + }, + options: { + banner: "<%= meta.banner %>" + } + }, + + // Lint definitions + jshint: { + files: ["src/jquery.<%= pkg.name %>.js"], + options: { + jshintrc: ".jshintrc" + } + }, + + // Minify definitions + uglify: { + my_target: { + src: ["dist/jquery.<%= pkg.name %>.js"], + dest: "dist/jquery.<%= pkg.name %>.min.js" + }, + options: { + banner: "<%= meta.banner %>" + } + } + + }); + + grunt.loadNpmTasks("grunt-contrib-concat"); + grunt.loadNpmTasks("grunt-contrib-jshint"); + grunt.loadNpmTasks("grunt-contrib-uglify"); + + grunt.registerTask("default", ["jshint", "concat", "uglify"]); + grunt.registerTask("travis", ["jshint"]); + +}; diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9853b8c --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015 Saul Hardman + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..dc35491 --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +# Autotyper + +A simple JavaScript (currently jQuery) plugin to automatically type out text. + +## Instructions + +`bower install --save autotyper` + +```javascript +$('.js-element').autotyper(); +``` + +## Options + +### Text + +### Interval + +### Loop + +## Methods + +Entire API is exposed and methods can be called by passing their name to the plugin function like so:- + +```javascript +var $element = $('.js-element').autotyper({ autoStart: false }); + +// somewhere later in your code... + +$element.autotyper('start'); +``` + +## Events + +### Init +### Start +### Type +### Stop +### Loop +### Destroy diff --git a/autotyper.jquery.json b/autotyper.jquery.json new file mode 100644 index 0000000..28eab8e --- /dev/null +++ b/autotyper.jquery.json @@ -0,0 +1,35 @@ +{ + "name": "autotyper", + "title": "Autotyper", + "description": "A simple JavaScript (currently jQuery) plugin to automatically type out text.", + "keywords": [ + "jquery", + "jquery-plugin", + "automatic", + "auto", + "typer", + "autotyper" + ], + "version": "0.1.0", + "author": { + "name": "Saul Hardman", + "email": "hello@iamsaul.co.uk", + "url": "https://github.com/saulhardman" + }, + "maintainers": [{ + "name": "Saul Hardman", + "email": "hello@iamsaul.co.uk", + "url": "https://github.com/saulhardman" + }], + "licenses": [{ + "type": "MIT", + "url": "http://saulhardman.mit-license.org/" + }], + "bugs": "https://github.com/saulhardman/autotyper/issues", + "homepage": "https://github.com/saulhardman/autotyper", + "docs": "https://github.com/saulhardman/autotyper#readme", + "download": "https://github.com/saulhardman/autotyper/archive/master.zip", + "dependencies": { + "jquery": ">=1.4" + } +} diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..47852df --- /dev/null +++ b/bower.json @@ -0,0 +1,31 @@ +{ + "name": "autotyper", + "version": "0.1.0", + "authors": [ + "Saul Hardman " + ], + "description": "A simple JavaScript (currently jQuery) plugin to automatically type out text.", + "main": "dist/jquery.autotyper.js", + "keywords": [ + "jquery", + "jquery-plugin", + "automatic", + "auto", + "typer", + "autotyper" + ], + "license": "MIT", + "homepage": "http://github.com/saulhardman/autotyper", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests", + "demo", + "src", + "*.json", + "*.js", + "*.md" + ] +} diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..cc38595 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,18 @@ + + + + Autotyper + + + + +

Autotyper

+

A simple JavaScript (currently jQuery) plugin to automatically type out text.

+
This is the no-JavaScript fallback.
+ + + diff --git a/dist/jquery.autotyper.js b/dist/jquery.autotyper.js new file mode 100644 index 0000000..660e710 --- /dev/null +++ b/dist/jquery.autotyper.js @@ -0,0 +1,218 @@ +/* + * Autotyper - v0.0.1 + * A simple JavaScript (currently jQuery) plugin to automatically type out text. + * https://github.com/saulhardman/autotyper + * + * Made by Saul Hardman + * Under MIT License + */ +(function (factory) { + + if (typeof define === "function" && define.amd) { + define(["jquery"], factory); + } else if (typeof exports === "object") { + factory(require("jquery")); + } else { + factory(jQuery); + } + +}(function ($) { + + "use strict"; + + var autotyper = { + name: "autotyper", + defaults: { + interval: [200, 300], + autoStart: true, + loop: false + }, + init: function init(element, options) { + var text; + + this.element = element; + this.$element = $(element); + + text = this.$element.text(); + + this.settings = $.extend({ text: text }, this.defaults, options); + + this.text = text; + this.isRunning = false; + + if (this.settings.autoStart) { + this.start(); + } + + this.$element.trigger("autotyper:init", this); + + return this; + }, + start: function start() { + if (this.isRunning) { + return this; + } + + clearTimeout(this.timeout); + + this.isRunning = true; + + this.setText(""); + + this.letterTotal = this.settings.text.length; + this.letterCount = 0; + + if (this.settings.loop) { + if (typeof this.settings.loop === "number") { + this.loopTotal = this.settings.loop; + } + + this.loopCount = 0; + } + + this.tick(); + + this.$element.trigger("autotyper:start", this); + + return this; + }, + setText: function setText(text) { + this.$element.text(text); + + return this; + }, + type: function type() { + this.tick(); + + this.setText(this.settings.text.substring(0, this.letterCount++)); + + this.$element.trigger("autotyper:type", this); + + if (this.letterCount > this.letterTotal) { + if (this.settings.loop) { + return this.loop(); + } + + return this.stop(); + } + + return this; + }, + stop: function stop() { + if (!this.isRunning) { + return this; + } + + clearTimeout(this.timeout); + + this.isRunning = false; + + this.$element.trigger("autotyper:stop", this); + + return this; + }, + reset: function reset() { + this.setText(this.text); + + return this; + }, + destroy: function destroy() { + if (this.isRunning) { + this.stop(); + } + + this.$element + .removeData(this.name) + .trigger("autotyper:destroy", this); + + this.element = this.$element = null; + + return; + }, + tick: function tick(interval) { + clearTimeout(this.timeout); + + this.timeout = setTimeout(this.type.bind(this), interval || this.interval()); + + return this; + }, + loop: function loop() { + this.tick(this.settings.loopInterval); + + if (this.loopCount === this.loopTotal) { + return this.stop(); + } + + this.loopCount++; + + this.letterTotal = this.settings.text.length; + this.letterCount = 0; + + this.$element.trigger("autotyper:loop", this); + + return this; + }, + interval: function interval() { + if (Array.isArray(this.settings.interval) && + this.settings.interval.length === 2) { + return this.random(this.settings.interval[0], this.settings.interval[1]); + } + + return this.settings.interval; + }, + random: function random(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }, + parseOptionName: function parseOptionName(name) { + name = name.replace(this.name, ""); + + return name.charAt(0).toLowerCase() + name.slice(1); + } + }; + + // Object.create support test, and fallback for browsers without it + // Source: https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.prototypal-inheritance.plugin-boilerplate.js + if (typeof Object.create !== "function") { + Object.create = function (o) { + function F () {} + F.prototype = o; + return new F(); + }; + } + + $.fn.autotyper = function (options) { + return this.each(function () { + var $this = $(this), + data = $this.data(), + method, + i; + + if (typeof options === "undefined") { + options = {}; + } else if (typeof options === "string") { + method = options; + + if (data.hasOwnProperty("autotyper")) { + return data.autotyper[method].apply(data.autotyper, [].slice.call(arguments, 1)); + } + + throw new Error("An autotyper instance must be instantiated on an element before methods can be called."); + } + + for (i in data) { + if (data.hasOwnProperty(i) && i.indexOf(autotyper.name) > -1) { + if (i === autotyper.name + "Options") { + options = $.extend(data[i], options); + } else { + options[autotyper.parseOptionName(i)] = data[i]; + } + } + } + + $this.data(autotyper.name, Object.create(autotyper).init(this, options)); + }); + }; + + return autotyper; + +})); diff --git a/dist/jquery.autotyper.min.js b/dist/jquery.autotyper.min.js new file mode 100644 index 0000000..9cac31e --- /dev/null +++ b/dist/jquery.autotyper.min.js @@ -0,0 +1,9 @@ +/* + * Autotyper - v0.0.1 + * A simple JavaScript (currently jQuery) plugin to automatically type out text. + * https://github.com/saulhardman/autotyper + * + * Made by Saul Hardman + * Under MIT License + */ +!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){"use strict";var b={name:"autotyper",defaults:{interval:[200,300],autoStart:!0,loop:!1},init:function(b,c){var d;return this.element=b,this.$element=a(b),d=this.$element.text(),this.settings=a.extend({text:d},this.defaults,c),this.text=d,this.isRunning=!1,this.settings.autoStart&&this.start(),this.$element.trigger("autotyper:init",this),this},start:function(){return this.isRunning?this:(clearTimeout(this.timeout),this.isRunning=!0,this.setText(""),this.letterTotal=this.settings.text.length,this.letterCount=0,this.settings.loop&&("number"==typeof this.settings.loop&&(this.loopTotal=this.settings.loop),this.loopCount=0),this.tick(),this.$element.trigger("autotyper:start",this),this)},setText:function(a){return this.$element.text(a),this},type:function(){return this.tick(),this.setText(this.settings.text.substring(0,this.letterCount++)),this.$element.trigger("autotyper:type",this),this.letterCount>this.letterTotal?this.settings.loop?this.loop():this.stop():this},stop:function(){return this.isRunning?(clearTimeout(this.timeout),this.isRunning=!1,this.$element.trigger("autotyper:stop",this),this):this},reset:function(){return this.setText(this.text),this},destroy:function(){this.isRunning&&this.stop(),this.$element.removeData(this.name).trigger("autotyper:destroy",this),this.element=this.$element=null},tick:function(a){return clearTimeout(this.timeout),this.timeout=setTimeout(this.type.bind(this),a||this.interval()),this},loop:function(){return this.tick(this.settings.loopInterval),this.loopCount===this.loopTotal?this.stop():(this.loopCount++,this.letterTotal=this.settings.text.length,this.letterCount=0,this.$element.trigger("autotyper:loop",this),this)},interval:function(){return Array.isArray(this.settings.interval)&&2===this.settings.interval.length?this.random(this.settings.interval[0],this.settings.interval[1]):this.settings.interval},random:function(a,b){return Math.floor(Math.random()*(b-a+1))+a},parseOptionName:function(a){return a=a.replace(this.name,""),a.charAt(0).toLowerCase()+a.slice(1)}};return"function"!=typeof Object.create&&(Object.create=function(a){function b(){}return b.prototype=a,new b}),a.fn.autotyper=function(c){return this.each(function(){var d,e,f=a(this),g=f.data();if("undefined"==typeof c)c={};else if("string"==typeof c){if(d=c,g.hasOwnProperty("autotyper"))return g.autotyper[d].apply(g.autotyper,[].slice.call(arguments,1));throw new Error("An autotyper instance must be instantiated on an element before methods can be called.")}for(e in g)g.hasOwnProperty(e)&&e.indexOf(b.name)>-1&&(e===b.name+"Options"?c=a.extend(g[e],c):c[b.parseOptionName(e)]=g[e]);f.data(b.name,Object.create(b).init(this,c))})},b}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..c7de866 --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "autotyper", + "title": "Autotyper", + "description": "A simple JavaScript (currently jQuery) plugin to automatically type out text.", + "keywords": [ + "jquery", + "jquery-plugin", + "automatic", + "auto", + "typer", + "autotyper" + ], + "author": "Saul Hardman ", + "homepage": "https://github.com/saulhardman/autotyper/", + "version": "0.1.0", + "repository": { + "type": "git", + "url": "https://github.com/saulhardman/autotyper.git" + }, + "readme": "README.md", + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-jshint": "~0.4.3", + "grunt-contrib-concat": "~0.3.0", + "grunt-contrib-uglify": "~0.2.0" + }, + "scripts": { + "test": "grunt travis --verbose" + } +} diff --git a/src/jquery.autotyper.js b/src/jquery.autotyper.js new file mode 100644 index 0000000..838d3e9 --- /dev/null +++ b/src/jquery.autotyper.js @@ -0,0 +1,210 @@ +(function (factory) { + + if (typeof define === "function" && define.amd) { + define(["jquery"], factory); + } else if (typeof exports === "object") { + factory(require("jquery")); + } else { + factory(jQuery); + } + +}(function ($) { + + "use strict"; + + var autotyper = { + name: "autotyper", + defaults: { + interval: [200, 300], + autoStart: true, + loop: false + }, + init: function init(element, options) { + var text; + + this.element = element; + this.$element = $(element); + + text = this.$element.text(); + + this.settings = $.extend({ text: text }, this.defaults, options); + + this.text = text; + this.isRunning = false; + + if (this.settings.autoStart) { + this.start(); + } + + this.$element.trigger("autotyper:init", this); + + return this; + }, + start: function start() { + if (this.isRunning) { + return this; + } + + clearTimeout(this.timeout); + + this.isRunning = true; + + this.setText(""); + + this.letterTotal = this.settings.text.length; + this.letterCount = 0; + + if (this.settings.loop) { + if (typeof this.settings.loop === "number") { + this.loopTotal = this.settings.loop; + } + + this.loopCount = 0; + } + + this.tick(); + + this.$element.trigger("autotyper:start", this); + + return this; + }, + setText: function setText(text) { + this.$element.text(text); + + return this; + }, + type: function type() { + this.tick(); + + this.setText(this.settings.text.substring(0, this.letterCount++)); + + this.$element.trigger("autotyper:type", this); + + if (this.letterCount > this.letterTotal) { + if (this.settings.loop) { + return this.loop(); + } + + return this.stop(); + } + + return this; + }, + stop: function stop() { + if (!this.isRunning) { + return this; + } + + clearTimeout(this.timeout); + + this.isRunning = false; + + this.$element.trigger("autotyper:stop", this); + + return this; + }, + reset: function reset() { + this.setText(this.text); + + return this; + }, + destroy: function destroy() { + if (this.isRunning) { + this.stop(); + } + + this.$element + .removeData(this.name) + .trigger("autotyper:destroy", this); + + this.element = this.$element = null; + + return; + }, + tick: function tick(interval) { + clearTimeout(this.timeout); + + this.timeout = setTimeout(this.type.bind(this), interval || this.interval()); + + return this; + }, + loop: function loop() { + this.tick(this.settings.loopInterval); + + if (this.loopCount === this.loopTotal) { + return this.stop(); + } + + this.loopCount++; + + this.letterTotal = this.settings.text.length; + this.letterCount = 0; + + this.$element.trigger("autotyper:loop", this); + + return this; + }, + interval: function interval() { + if (Array.isArray(this.settings.interval) && + this.settings.interval.length === 2) { + return this.random(this.settings.interval[0], this.settings.interval[1]); + } + + return this.settings.interval; + }, + random: function random(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }, + parseOptionName: function parseOptionName(name) { + name = name.replace(this.name, ""); + + return name.charAt(0).toLowerCase() + name.slice(1); + } + }; + + // Object.create support test, and fallback for browsers without it + // Source: https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.prototypal-inheritance.plugin-boilerplate.js + if (typeof Object.create !== "function") { + Object.create = function (o) { + function F () {} + F.prototype = o; + return new F(); + }; + } + + $.fn.autotyper = function (options) { + return this.each(function () { + var $this = $(this), + data = $this.data(), + method, + i; + + if (typeof options === "undefined") { + options = {}; + } else if (typeof options === "string") { + method = options; + + if (data.hasOwnProperty("autotyper")) { + return data.autotyper[method].apply(data.autotyper, [].slice.call(arguments, 1)); + } + + throw new Error("An autotyper instance must be instantiated on an element before methods can be called."); + } + + for (i in data) { + if (data.hasOwnProperty(i) && i.indexOf(autotyper.name) > -1) { + if (i === autotyper.name + "Options") { + options = $.extend(data[i], options); + } else { + options[autotyper.parseOptionName(i)] = data[i]; + } + } + } + + $this.data(autotyper.name, Object.create(autotyper).init(this, options)); + }); + }; + + return autotyper; + +}));