typed.js 2.0.7 → 2.0.11

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  singleQuote: true,
+  arrowParens: "always"
+}

package/README.md

@@ -2,61 +2,58 @@
 [![Code Climate](https://codeclimate.com/github/mattboldt/typed.js/badges/gpa.svg)](https://codeclimate.com/github/mattboldt/typed.js)
 [![GitHub release](https://img.shields.io/github/release/mattboldt/typed.js.svg)]()
 [![npm](https://img.shields.io/npm/dt/typed.js.svg)](https://img.shields.io/npm/dt/typed.js.svg)
-[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)
-[![Gratipay User](https://img.shields.io/gratipay/user/mattboldt.svg)](https://gratipay.com/Typed.js/)
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/mattboldt/typed.js/master/LICENSE.txt)
 
 <img src="https://raw.githubusercontent.com/mattboldt/typed.js/master/logo-cropped.png" width="450px" title="Typed.js" />
 
-### [View the Live Demo](http://www.mattboldt.com/demos/typed-js/) | [View All Demos](http://www.mattboldt.com/typed.js) | [View Full Docs](http://www.mattboldt.com/typed.js/docs) | [mattboldt.com](http://www.mattboldt.com)
+### [Live Demo](http://www.mattboldt.com/demos/typed-js/) | [View All Demos](http://mattboldt.github.io/typed.js/) | [View Full Docs](http://mattboldt.github.io/typed.js/docs) | [mattboldt.com](http://www.mattboldt.com)
 
 Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
 
 ---
 
-Installation
-------------
+## Installation
 
-#### NPM
+#### Choose One
 
-~~~
+```
 npm install typed.js
-~~~
-
-#### Yarn
-
-~~~
 yarn add typed.js
-~~~
+bower install typed.js
+```
 
-#### Bower
+#### CDN
 
-~~~
-bower install typed.js
-~~~
+```html
+<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
+```
 
 #### Setup
 
 This is really all you need to get going.
 
-~~~ javascript
+```javascript
 // Can also be included with a regular script tag
 import Typed from 'typed.js';
 
 var options = {
-  strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
+  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
   typeSpeed: 40
-}
+};
 
-var typed = new Typed(".element", options);
-~~~
+var typed = new Typed('.element', options);
+```
+
+## Wonderful sites that have used (or are using) Typed.js
+
+https://github.com/features/package-registry
 
-Wonderful sites using Typed.js
----
 https://slack.com/
 
 https://envato.com/
 
+https://gorails.com/
+
 https://productmap.co/
 
 https://www.typed.com/
@@ -65,103 +62,111 @@ https://apeiron.io
 
 https://git.market/
 
-http://allison.house/404
-
-http://www.maxcdn.com/
-
 https://commando.io/
 
 http://testdouble.com/agency.html
 
-http://www.stephanemartinw.com/
-
-http://www.trelab.fi/en/
+https://www.capitalfactory.com/
 
-http://jessejohnson.github.io/
+http://www.maxcdn.com/
 
+https://www.powerauth.com/
 
 ---
 
 ### Strings from static HTML (SEO Friendly)
+
 Rather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.
 This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.
 
-~~~ javascript
+```javascript
 <script>
   var typed = new Typed('#typed', {
     stringsElement: '#typed-strings'
   });
 </script>
-~~~
+```
 
-~~~ html
+```html
 <div id="typed-strings">
-    <p>Typed.js is a <strong>JavaScript</strong> library.</p>
-    <p>It <em>types</em> out sentences.</p>
+  <p>Typed.js is a <strong>JavaScript</strong> library.</p>
+  <p>It <em>types</em> out sentences.</p>
 </div>
 <span id="typed"></span>
-~~~
+```
 
 ### Type Pausing
 
 You can pause in the middle of a string for a given amount of time by including an escape character.
 
-~~~ javascript
-var typed = new Typed(".element", {
+```javascript
+var typed = new Typed('.element', {
   // Waits 1000ms after typing "First"
-  strings: ["First ^1000 sentence.", "Second sentence."]
+  strings: ['First ^1000 sentence.', 'Second sentence.']
 });
-~~~
+```
 
 ### Smart Backspacing
 
 In the following example, this would only backspace the words after "This is a"
 
-~~~ javascript
-var typed = new Typed(".element", {
-  strings: ["This is a JavaScript library", "This is an ES6 module"],
+```javascript
+var typed = new Typed('.element', {
+  strings: ['This is a JavaScript library', 'This is an ES6 module'],
   smartBackspace: true // Default value
 });
-~~~
+```
 
 ### Bulk Typing
 
-The following example would emulate how a terminal acts when typing a command and seeing its result. 
+The following example would emulate how a terminal acts when typing a command and seeing its result.
 
-~~~ javascript
-var typed = new Typed(".element", {
-  strings: [
-    "git push --force ^1000\n `pushed to origin with option force`"
-  ]
+```javascript
+var typed = new Typed('.element', {
+  strings: ['git push --force ^1000\n `pushed to origin with option force`']
 });
-~~~
+```
 
 ### CSS
 
 CSS animations are built upon initialzation in JavaScript. But, you can customize them at your will! These classes are:
+
 ```css
 /* Cursor */
-.typed-cursor {}
+.typed-cursor {
+}
 
 /* If fade out option is set */
-.typed-fade-out {}
+.typed-fade-out {
+}
 ```
 
 ### Use with ReactJS
 
 Check out this example React app using Typed.js in a component: https://jsfiddle.net/mattboldt/ovat9jmp/
 
+### Use with Vue.js
+
+Check out the Vue.js component: https://github.com/Orlandster/vue-typed-js
+
+### Use it as WebComponent
 
-Customization
-----
+Check out the WebComponent: https://github.com/Orlandster/wc-typed-js
 
-~~~ javascript
-var typed = new Typed(".element", {
+## Customization
+
+```javascript
+var typed = new Typed('.element', {
   /**
    * @property {array} strings strings to be typed
    * @property {string} stringsElement ID of element containing string children
    */
-  strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
+  strings: [
+    'These are the default values...',
+    'You know what you should do?',
+    'Use your own!',
+    'Have a great day!'
+  ],
   stringsElement: null,
 
   /**
@@ -235,6 +240,12 @@ var typed = new Typed(".element", {
    */
   contentType: 'html',
 
+  /**
+   * Before it begins typing
+   * @param {Typed} self
+   */
+  onBegin: (self) => {},
+
   /**
    * All typing is complete
    * @param {Typed} self
@@ -301,15 +312,13 @@ var typed = new Typed(".element", {
    */
   onDestroy: (self) => {}
 });
-~~~
-
+```
 
 ## Contributing
 
 ### [View Contribution Guidelines](./.github/CONTRIBUTING.md)
 
-end
----
+## end
 
 Thanks for checking this out. If you have any questions, I'll be on [Twitter](http://www.twitter.com/atmattb).
 

package/assets/demos.js

@@ -6,16 +6,39 @@ document.addEventListener('DOMContentLoaded', function() {
     startDelay: 1000,
     loop: false,
     loopCount: Infinity,
-    onComplete: function(self) { prettyLog('onComplete ' + self) },
-    preStringTyped: function(pos, self) { prettyLog('preStringTyped ' + pos + ' ' + self); },
-    onStringTyped: function(pos, self) { prettyLog('onStringTyped ' + pos + ' ' + self) },
-    onLastStringBackspaced: function(self) { prettyLog('onLastStringBackspaced ' + self) },
-    onTypingPaused: function(pos, self) { prettyLog('onTypingPaused ' + pos + ' ' + self) },
-    onTypingResumed: function(pos, self) { prettyLog('onTypingResumed ' + pos + ' ' + self) },
-    onReset: function(self) { prettyLog('onReset ' + self) },
-    onStop: function(pos, self) { prettyLog('onStop ' + pos + ' ' + self) },
-    onStart: function(pos, self) { prettyLog('onStart ' + pos + ' ' + self) },
-    onDestroy: function(self) { prettyLog('onDestroy ' + self) }
+    onBegin: function(self) {
+      prettyLog('onBegin ' + self);
+    },
+    onComplete: function(self) {
+      prettyLog('onComplete ' + self);
+    },
+    preStringTyped: function(pos, self) {
+      prettyLog('preStringTyped ' + pos + ' ' + self);
+    },
+    onStringTyped: function(pos, self) {
+      prettyLog('onStringTyped ' + pos + ' ' + self);
+    },
+    onLastStringBackspaced: function(self) {
+      prettyLog('onLastStringBackspaced ' + self);
+    },
+    onTypingPaused: function(pos, self) {
+      prettyLog('onTypingPaused ' + pos + ' ' + self);
+    },
+    onTypingResumed: function(pos, self) {
+      prettyLog('onTypingResumed ' + pos + ' ' + self);
+    },
+    onReset: function(self) {
+      prettyLog('onReset ' + self);
+    },
+    onStop: function(pos, self) {
+      prettyLog('onStop ' + pos + ' ' + self);
+    },
+    onStart: function(pos, self) {
+      prettyLog('onStart ' + pos + ' ' + self);
+    },
+    onDestroy: function(self) {
+      prettyLog('onDestroy ' + self);
+    }
   });
 
   document.querySelector('.toggle').addEventListener('click', function() {
@@ -38,7 +61,11 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   var typed2 = new Typed('#typed2', {
-    strings: ['Some <i>strings</i> with', 'Some <strong>HTML</strong>', 'Chars &times; &copy;'],
+    strings: [
+      'Some <i>strings</i> with',
+      'Some <strong>HTML</strong>',
+      'Chars &times; &copy;'
+    ],
     typeSpeed: 0,
     backSpeed: 0,
     fadeOut: true,
@@ -49,7 +76,11 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   new Typed('#typed3', {
-    strings: ['My strings are: <i>strings</i> with', 'My strings are: <strong>HTML</strong>', 'My strings are: Chars &times; &copy;'],
+    strings: [
+      'My strings are: <i>strings</i> with',
+      'My strings are: <strong>HTML</strong>',
+      'My strings are: Chars &times; &copy;'
+    ],
     typeSpeed: 0,
     backSpeed: 0,
     smartBackspace: true,
@@ -66,7 +97,11 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   new Typed('#typed5', {
-    strings: ['1 Some <i>strings</i> with', '2 Some <strong>HTML</strong>', '3 Chars &times; &copy;'],
+    strings: [
+      '1 Some <i>strings</i> with',
+      '2 Some <strong>HTML</strong>',
+      '3 Chars &times; &copy;'
+    ],
     typeSpeed: 0,
     backSpeed: 0,
     shuffle: true,
@@ -76,7 +111,9 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   new Typed('#typed6', {
-    strings: ['npm install^1000\n`installing components...` ^1000\n`Fetching from source...`'],
+    strings: [
+      'npm install^1000\n`installing components...` ^1000\n`Fetching from source...`'
+    ],
     typeSpeed: 40,
     backSpeed: 0,
     loop: true

package/bower.json

@@ -1,16 +1,11 @@
 {
   "name": "typed.js",
-  "version": "2.0.7",
+  "version": "2.0.11",
   "homepage": "https://github.com/mattboldt/typed.js",
-  "authors": [
-    "Matt Boldt <me@mattboldt.com>"
-  ],
+  "authors": ["Matt Boldt <me@mattboldt.com>"],
   "description": "A JavaScript Typing Animation Library",
   "main": "lib/typed.js",
-  "keywords": [
-    "typed",
-    "animation"
-  ],
+  "keywords": ["typed", "animation"],
   "ignore": [],
   "license": "MIT"
 }

package/docs/API.md

@@ -91,6 +91,15 @@ Returns **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer
 
 -   `contentType` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 'html' or 'null' for plaintext
 
+### onBegin
+
+Before it begins typing
+
+**Parameters**
+
+-   `self` **[Typed](#typed)** 
+
+
 ### onComplete
 
 All typing is complete

package/docs/index.html

@@ -113,7 +113,13 @@
                         class='regular pre-open'>
                         .contentType
                       </a></li>
-                    
+
+                      <li><a
+                        href='#defaults.onBegin'
+                        class='regular pre-open'>
+                        .onBegin
+                      </a></li>
+
                       <li><a
                         href='#defaults.onComplete'
                         class='regular pre-open'>
@@ -1083,6 +1089,40 @@ Ex: input placeholder, value, or just HTML text
       </div>
     </div>
   
+    <div class='border-bottom' id='defaults.onBegin'>
+      <div class="clearfix small pointer toggle-sibling">
+        <div class="py1 contain">
+            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
+            <span class='code strong strong truncate'>onBegin(self)</span>
+        </div>
+      </div>
+      <div class="clearfix display-none toggle-target">
+        <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+
+  <p>Before it begins typing</p>
+
+  <div class='pre p1 fill-light mt0'>onBegin(self: <a href="#typed">Typed</a>)</div>
+  
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+      
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
+	    
+          </div>
+          
+        </div>
+      
+    </div>
+  
+</section>
+
+      </div>
+    </div>
+
     <div class='border-bottom' id='defaults.onComplete'>
       <div class="clearfix small pointer toggle-sibling">
         <div class="py1 contain">

package/gulpfile.js

@@ -10,27 +10,33 @@ const eslint = require('gulp-eslint');
 const server = require('gulp-express');
 
 gulp.task('lint', () => {
-	return gulp.src('src/*.js')
-		// default: use local linting config
-		.pipe(eslint())
-		// format ESLint results and print them to the console
-		.pipe(eslint.format())
-    .pipe(eslint.failAfterError());
+  return (
+    gulp
+      .src('src/*.js')
+      // default: use local linting config
+      .pipe(eslint())
+      // format ESLint results and print them to the console
+      .pipe(eslint.format())
+      .pipe(eslint.failAfterError())
+  );
 });
 
 gulp.task('build', () => {
-  return gulp.src('src/*.js')
+  return gulp
+    .src('src/*.js')
     .pipe(webpack(require('./webpack.config.js')))
     .pipe(gulp.dest('./lib'))
     .pipe(sourcemaps.init({ loadMaps: true }))
-    .pipe(uglify({
-      preserveComments: 'license',
-      compress: {
-        /*eslint-disable */
-        negate_iife: false
-        /*eslint-enable */
-      }
-    }))
+    .pipe(
+      uglify({
+        preserveComments: 'license',
+        compress: {
+          /*eslint-disable */
+          negate_iife: false
+          /*eslint-enable */
+        }
+      })
+    )
     .pipe(rename('typed.min.js'))
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest('lib/'))
@@ -38,21 +44,27 @@ gulp.task('build', () => {
 });
 
 gulp.task('md-docs', () => {
-  return gulp.src('./src/*.js')
+  return gulp
+    .src('./src/*.js')
     .pipe(gulpDocumentation('md'))
     .pipe(gulp.dest('docs'));
 });
 
 gulp.task('html-docs', () => {
-  return gulp.src('./src/*.js')
-    .pipe(gulpDocumentation('html'), {}, {
-      name: 'Typed.js Docs',
-      version: '2.0.7'
-    })
+  return gulp
+    .src('./src/*.js')
+    .pipe(
+      gulpDocumentation('html'),
+      {},
+      {
+        name: 'Typed.js Docs',
+        version: '2.0.11'
+      }
+    )
     .pipe(gulp.dest('docs'));
 });
 
-gulp.task('server', function () {
+gulp.task('server', function() {
   // Start the server at the beginning of the task
   server.run(['app.js']);
   // Restart the server when file changes
@@ -61,21 +73,18 @@ gulp.task('server', function () {
   //gulp.watch(['{.tmp,app}/styles/**/*.css'], ['styles:css', server.notify]);
   //Event object won't pass down to gulp.watch's callback if there's more than one of them.
   //So the correct way to use server.notify is as following:
-  gulp.watch(['{.tmp,docs}/styles/**/*.css'], function(event){
-      gulp.run('styles:css');
-      server.notify(event);
-      //pipe support is added for server.notify since v0.1.5,
-      //see https://github.com/gimm/gulp-express#servernotifyevent
+  gulp.watch(['{.tmp,docs}/styles/**/*.css'], function(event) {
+    gulp.run('styles:css');
+    server.notify(event);
+    //pipe support is added for server.notify since v0.1.5,
+    //see https://github.com/gimm/gulp-express#servernotifyevent
   });
 
   gulp.watch(['docs/scripts/**/*.js'], ['jshint']);
   gulp.watch(['docs/images/**/*'], server.notify);
 });
 
-gulp.task('serve', [
-  'watch',
-  'server'
-]);
+gulp.task('serve', ['watch', 'server']);
 
 // Watch Task
 gulp.task('watch', () => {
@@ -83,8 +92,4 @@ gulp.task('watch', () => {
   gulp.watch('src/*.js', ['md-docs', 'html-docs', 'default']);
 });
 
-gulp.task('default', [
-  'lint',
-  'build',
-]);
-
+gulp.task('default', ['lint', 'build']);