pre-release

Author: Viktor Pöntinen

.gitignore

@@ -1,27 +1 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
+node_modules

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 Korney Vasilchenko
+Copyright (c) 2018 Viktor Pöntinen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,58 +1,63 @@
-## ⌨️  TinyTyper - a tiny library for creating a typing effect on specified text element.
-[![npm version](https://badge.fury.io/js/tinytyper.svg)](https://badge.fury.io/js/tinytyper)
-[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
-[![Build Status](https://travis-ci.org/lourenc/tinytyper.svg?branch=develop)](https://travis-ci.org/lourenc/tinytyper)
-[![Dependency Status](https://gemnasium.com/badges/github.com/lourenc/tinytyper.svg)](https://gemnasium.com/github.com/lourenc/tinytyper)
+## VueTinyTyper - a vue component for creating a typing effect element.
+
+#### Credits
+This project is forked from https://github.com/lourenc/tinytyper
+Some parts of the readme are also originally from above repository.
+
+#### Why
+This project was created because I was missing events in non-vue version.
 
 #### Demo
 <img align="center" src="https://s28.postimg.org/4qva5c1f1/tinytyper2.gif">
 
-#### Size (It's really tiny)
-  - *Minimized: 2.9KB*
-  - *Gziped:    1.1KB*
-
 #### Installation
-Library can be easily installed via either NPM or Bower:
-
-`npm i tinytyper --save`
+Library can be easily installed via either Yarn or NPM:
 
+`npm i vue-tinytyper --save`
 OR
-
-`bower i tinytyper --save`
+`yarn add vue-tinytyper`
 
 #### Usage
 
 Basic setup looks like this:
 
 ```js
-import TinyTyper from 'tinytyper';
-
-const el       = document.querySelector('.text-el')
-const options  = { /* . . . */ }
-const instance = new TinyTyper(el, options)
+import VueTinytyper from 'vue-tinytyper';
 ```
-
-In case you need to run animation again: 
+THEN
 ```js
-instance.animate()
+<vue-tinytyper text="Hello, please type this out."></vue-tinytyper>
 ```
+OR
+```js
+<vue-tinytyper>Hello, please type this out.</vue-tinytyper>
+```
+
+Available `props`:
+
+Prop           | Default      | Type | Description
+---------------- | ------------- | ----------- | --------------
+`text`           | ``           | String | The text to animate
+`textSpeed`      | `95`         | Number | Defines text speed animation
+`cursor`         | `&#9612;`   | String | Defines current cursor symbol
+`blinkSpeed`     | `0.05`       | Number | Defines blink speed of a cursor
+`containerClass` | 'tiny-typer-container'  | String | A CSS class for the container element
+`cursorClass`    | `tiny-typer-cursor` | String | A CSS class for cursor element
+`textClass`      | `tiny-typer-text` | String | A CSS class for text element
+`staticCursor`   | `false` | Boolean | Makes cursor static (disables blinking)
+`staticText`     | `false` | Boolean | Makes text static (disables animation)
+`customEvents`   | `{}`   | Object  | Pass custom "on-character" events. Example: `{ '!': 'my-event' }`, where the event 'my-event' will be triggered every time the current animation character matches the object key, eg. "!".
+
 
-Available `options`:
+Available `events`
 
-Option        | Default      | Description
-------------- | -------------|--------------
-`text`        | `innerText` of specifed `el`ement | Sets a text to be displayed
-`textSpeed`   | `95`           | Defines text speed animation
-`cursor`      | ` &#9612;`   | Defines current cursor symbol
-`blinkSpeed`  | `0.05`         | Defines blink speed of a cursor
-`cursorClass` | `tiny-typer-cursor` | A CSS class for cursor element
-`textClass`   | `tiny-typer-text` | A CSS class for text element
-`staticCursor`| `false` | Makes cursor static (disables blinking)
-`staticText`  | `false` | Makes text static (disables animation)
+Eventname     | Trigger    | Payload
+------------- | ---------- | ----------
+`animation-finished` | When animation doesn't have any more characters to animate | None
 
 #### Contributions
 
-Contributions are welcome. Feel free to create [issues](https://github.com/lourenc/tinytyper/issues) and [PRs](https://github.com/lourenc/tinytyper/pulls)
+Contributions are welcome. Feel free to create [issues](https://github.com/ViktorPontinen/vue-tinytyper/issues) and [PRs](https://github.com/ViktorPontinen/vue-tinytyper/pulls)
 
 #### License
 

package.json

@@ -21,7 +21,7 @@
 		"blinking"
 	],
 	"license": "MIT",
-	"main": "dist/vue-tiny-typer.js",
+	"main": "dist/vue-tinytyper.min.js",
 	"devDependencies": {
 		"babel-core": "^6.26.0",
 		"babel-loader": "^7.1.2",
@@ -33,6 +33,7 @@
 		"webpack-merge": "^4.1.1"
 	},
 	"scripts": {
-		"build": "yarn run rimraf ./dist && webpack --config ./webpack.config.js"
+		"cleanbuild": "yarn run rimraf ./dist && webpack --config ./webpack.config.js",
+		"build": "yarn run webpack --config ./webpack.config.js"
 	}
 }

webpack.config.js

@@ -33,22 +33,22 @@ var commonConfig = {
 module.exports = [
 
 	// Config 1: For browser environment
-	merge(commonConfig, {
-		entry: path.resolve(__dirname + '/src/plugin.js'),
-		output: {
-			filename: 'vue-tiny-typer.min.js',
-			libraryTarget: 'window',
-			library: 'VueTinyTyper'
-		}
-	}),
+	// merge(commonConfig, {
+	// 	entry: path.resolve(__dirname + '/src/plugin.js'),
+	// 	output: {
+	// 		filename: 'vue-tinytyper.min.js',
+	// 		libraryTarget: 'window',
+	// 		library: 'VueTinyTyper'
+	// 	}
+	// }),
 
 	// Config 2: For Node-based development environments
 	merge(commonConfig, {
-		entry: path.resolve(__dirname + '/src/VueTinyTyper.vue'),
+		entry: path.resolve(__dirname + '/src/VueTinytyper.vue'),
 		output: {
-			filename: 'vue-tiny-typer.js',
+			filename: 'vue-tinytyper.min.js',
 			libraryTarget: 'umd',
-			library: 'vue-tiny-typer',
+			library: 'vue-tinytyper',
 			umdNamedDefine: true
 		}
 	})