release

Author: Viktor Pöntinen

.nvmrc

@@ -0,0 +1 @@
+8.9.4

README.md

@@ -1,20 +1,23 @@
 ## VueTinyTyper - a vue component for creating a typing effect element.
 
 #### Credits
-This project is forked from https://github.com/lourenc/tinytyper
+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.
+This project was created because I was missing events in the non-vue version.
 
 #### Demo
+Full credits to https://github.com/lourenc/tinytyper
 <img align="center" src="https://s28.postimg.org/4qva5c1f1/tinytyper2.gif">
 
 #### Installation
 Library can be easily installed via either Yarn or NPM:
 
 `npm i vue-tinytyper --save`
-OR
+
+or
+
 `yarn add vue-tinytyper`
 
 #### Usage
@@ -24,11 +27,11 @@ Basic setup looks like this:
 ```js
 import VueTinytyper from 'vue-tinytyper';
 ```
-THEN
+then
 ```js
 <vue-tinytyper text="Hello, please type this out."></vue-tinytyper>
 ```
-OR
+or
 ```js
 <vue-tinytyper>Hello, please type this out.</vue-tinytyper>
 ```
@@ -40,7 +43,7 @@ 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
+`blinkSpeed`     | `0.05`       | Number | Defines blink speed of the 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
@@ -57,7 +60,7 @@ Eventname     | Trigger    | Payload
 
 #### Contributions
 
-Contributions are welcome. Feel free to create [issues](https://github.com/ViktorPontinen/vue-tinytyper/issues) and [PRs](https://github.com/ViktorPontinen/vue-tinytyper/pulls)
+Contributions are welcome. Feel free to create [issues](https://github.com/ViktorPontinen/vue-tinytyper/issues)
 
 #### License
 

dist/vue-tinytyper.min.js

@@ -0,0 +1,122 @@
+<template>
+	<div :class="containerClass" ref="containerElement"><slot></slot></div>
+</template>
+<script>
+import blink from './blinker.js'
+
+export default {
+	name: 'VueTinytyper',
+	data() {
+		return {
+			element: null,
+			cursorEl: null,
+			textEl: null,
+			textString: null,
+			finishedEventTriggered: false,
+		}
+	},
+	methods: {
+		init() {
+			this.element.innerHTML = ''
+			this.element.innerText = ''
+			this.element.appendChild(this.textEl)
+			this.element.appendChild(this.cursorEl)
+
+			if(!this.staticCursor) this.blinker = blink(this.cursorEl, this.blinkSpeed)
+			if(!this.staticText) {
+				this.animate()
+			} else {
+				this.redraw(this.textString)
+			}
+		},
+		animate() {
+			let symbols = this.textString.split('')
+			let result = []
+			let animation = () => setTimeout(tick, this.textSpeed)
+			let tick = () => {
+				let character = symbols.shift()
+				result.push(character)
+				if(character in this.customEvents) this.$emit(this.customEvents[character])
+				this.redraw(result.join(''))
+				if(symbols.length) animation()
+				else {
+					if(!this.finishedEventTriggered) this.$emit('animation-finished')
+					this.finishedEventTriggered = true
+				}
+			}
+
+			animation()
+		},
+		redraw(text) {
+			this.textEl.innerText = text
+		}
+	},
+	mounted() {
+		this.element = this.$refs.containerElement
+		this.cursorEl = document.createElement('span')
+		this.textEl = document.createElement('span')
+
+		this.textString = this.text || this.element.innerText
+
+		this.textEl.className = this.textClass
+		this.cursorEl.className = this.cursorClass
+		this.cursorEl.innerHTML = this.cursor
+
+		this.init()
+	},
+	props: {
+		customEvents: {
+			type: Object,
+			required: false,
+			default() {
+				return {}
+			}
+		},
+		text: {
+			type: String,
+			required: false,
+			default: ''
+		},
+		textSpeed: {
+			type: Number,
+			required: false,
+			default: 95,
+		},
+		cursor: {
+			type: String,
+			required: false,
+			default: '&#9612;',
+		},
+		blinkSpeed: {
+			type: Number,
+			required: false,
+			default: 0.05,
+		},
+		cursorClass: {
+			type: String,
+			required: false,
+			default: 'tiny-typer-cursor',
+		},
+		textClass: {
+			type: String,
+			required: false,
+			default: 'tiny-typer-text',
+		},
+		containerClass: {
+			type: String,
+			required: false,
+			default: 'tiny-typer-container',
+		},
+		staticCursor: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		staticText: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+}
+</script>

example/index.html

@@ -0,0 +1,7 @@
+import VueTinytyper from './VueTinyTyper.vue';
+
+module.exports = {
+	install: function (Vue, options) {
+		Vue.component('vue-tinytyper', VueTinytyper);
+	}
+};