├── .gitignore
├── README.md
├── bower.json
├── demo
    ├── app-theme.html
    └── index.html
├── index.html
├── test
    └── typed-text_test.html
└── typed-text.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # <typed-text>
 2 | 
 3 | Polymer 2.0 element that simulates typing similar to [typed.js](https://github.com/mattboldt/typed.js/) for jQuery.
 4 | 
 5 | Check out the [demo and full documentation](https://www.webcomponents.org/element/sespiros/typed-text)
 6 | 
 7 | <!--
 8 | ```
 9 | <custom-element-demo>
10 |   <template>
11 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
12 |     <link rel="import" href="typed-text.html">
13 |     <link rel="import" href="demo/app-theme.html">
14 |     <typed-text cursor="▍" noretype loop strings='[
15 |       "Polymer is awesome",
16 |       "Polymer is easy",
17 |       "Polymer rocks!",
18 |       "<typed-text> element rocks too!"
19 |     ]'></typed-text>
20 |   </template>
21 | </custom-element-demo>
22 | ```
23 | -->
24 | 
25 | ## Install
26 | ```bash
27 | bower install --save sespiros/typed-text
28 | ```
29 | Install with bower or [download the zip](https://github.com/sespiros/typed-text/archive/v1.0.0.zip)
30 | 
31 | ## Import
32 | ```html
33 | <link rel="import" href="/bower_components/typed-text/typed-text.html">
34 | ```
35 | 
36 | ## Usage
37 | ```html
38 | <typed-text options></typed-text>
39 | ```
40 | where `options` can be any of:
41 | * `strings`: an array of strings to be typed one after the other i.e. `["Hello world!", "typed-text is awesome"]`
42 | * `cursor`: specify a cursor string. `|` by default
43 | * `noretype`: only backspaces to erase the part of the string that is different
44 | * `noloop`: stops typing after the last string
45 | * `noblink`: stops the cursor from blinking
46 | 
47 | ### Strings
48 | The typed-text strings can be set in one of two ways:
49 | * Using the strings property:
50 | ```html
51 | <typed-text strings='["Hello world", "Another sentence"]'></typed-text>
52 | ```
53 | * Writing directly into the HTML element:
54 | ```html
55 |   <typed-text>
56 |     <p>Here is the first sentence.</p> 
57 |     <p>Here is another one!</p>
58 |   </typed-text>
59 | ```
60 | 
61 | ### Cursor
62 | ```html
63 | <typed-text cursor="|"></typed-text>
64 | ```
65 | 
66 | ## Features
67 | - Can **type** and **delete** text
68 | - Supports constant **looping** between text
69 | - Cursor **blinking** and customization with custom-style
70 | - Smart **noretype** to keep common parts of consecutive strings
71 | - Style it however you want for cool effects!
72 | 
73 | ## Contribute
74 | Feel free to extend it or propose new functionality
75 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "typed-text",
 3 |   "description": "An element that simulates typing.",
 4 |   "keywords": [
 5 |     "web-component",
 6 |     "web-components",
 7 |     "polymer",
 8 |     "typed"
 9 |   ],
10 |   "version": "2.0.0",
11 |   "homepage": "https://github.com/sespiros/typed-text/",
12 |   "license": "MIT",
13 |   "authors": [
14 |     "Seimenis Spyros <sespiros@gmail.com>",
15 |     "Dimitris Moraitis <dimo@mist.io>"
16 |   ],
17 |   "ignore": [
18 |     "**/.*",
19 |     "node_modules",
20 |     "bower_components",
21 |     "test",
22 |     "tests"
23 |   ],
24 |   "dependencies": {
25 |     "polymer": "Polymer/polymer#^2.0.0",
26 |     "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
27 |     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
28 |   },
29 |   "devDependencies": {
30 |     "web-component-tester": "^6.0.0"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/demo/app-theme.html:
--------------------------------------------------------------------------------
 1 | <!-- Blinking cursor effect from typed.js -->
 2 | <style is="custom-style">
 3 |   typed-text {
 4 |     --typed-text-cursor: {
 5 |       opacity: 0.6;
 6 |     };
 7 | 
 8 |     --typed-text-cursor-blink: {
 9 |       -webkit-animation: 2s blink step-end infinite;
10 |       -moz-animation: 2s blink step-end infinite;
11 |       -ms-animation: 2s blink step-end infinite;
12 |       -o-animation: 2s blink step-end infinite;
13 |       animation: 2s blink step-end infinite;
14 |     }
15 | 
16 |     --typed-text-cursor-blink-0: {
17 |       opacity: 0.6;
18 |       color: blue;
19 |     };
20 | 
21 |     --typed-text-cursor-blink-50: {
22 |       opacity: 0;
23 |     };
24 | 
25 |     --typed-text-cursor-blink-100: {
26 |       opacity: 1;
27 |       color: red;
28 |     };
29 |   }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 | 
 7 |     <title>typed-text Demo</title>
 8 | 
 9 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 | 
11 |     <link rel="import" href="../typed-text.html">
12 | 
13 |     <!-- Optional import for the cursor blinking effect -->
14 |     <link rel="import" href="app-theme.html">
15 |   </head>
16 |   <body>
17 |     <p>An example of <code>&lt;typed-text&gt;</code>:</p>
18 |     <!-- block cursor -->
19 |     <!-- <typed-text cursor="▍" noretype loop strings='[ -->
20 |     <typed-text noretype>
21 |         Strings can be placed directly inside the element!
22 |         <p>They can even be <span>be nested!</span></p>
23 |   </typed-text>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>typed-text</title>
 8 | 
 9 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
10 | 
11 |     <link rel="import" href="../iron-component-page/iron-component-page.html">
12 |   </head>
13 |   <body>
14 |     <iron-component-page src="typed-text.html"></iron-component-page>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/test/typed-text_test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>typed-text test</title>
 8 | 
 9 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |     <script src="../../web-component-tester/browser.js"></script>
11 | 
12 |     <link rel="import" href="../typed-text.html">
13 |   </head>
14 |   <body>
15 |     <test-fixture id="basic">
16 |       <template>
17 |         <typed-text></typed-text>
18 |       </template>
19 |     </test-fixture>
20 | 
21 |     <script>
22 |       suite('typed-text', function() {
23 |         test('instantiating the element works', function() {
24 |           var element = fixture('basic');
25 |           assert.equal(element.is, 'typed-text');
26 |         });
27 |       });
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/typed-text.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | 
  3 | <!--
  4 | `typed-text`
  5 | An element that simulates typing
  6 | 
  7 | @demo demo/index.html
  8 | -->
  9 | <dom-module id="typed-text">
 10 |   <template>
 11 |     <style>
 12 |       :host {
 13 |         display: block;
 14 |         box-sizing: border-box;
 15 |         @apply --typed-text-options;
 16 |       }
 17 | 
 18 |       .cursor {
 19 |         @apply --typed-text-cursor;
 20 |       }
 21 | 
 22 |       .blink {
 23 |         -webkit-animation: 1s blink infinite;
 24 |         -moz-animation: 1s blink infinite;
 25 |         -ms-animation: 1s blink infinite;
 26 |         -o-animation: 1s blink infinite;
 27 |         animation: 1s blink infinite;
 28 |         @apply --typed-text-cursor-blink;
 29 |       }
 30 | 
 31 |       @keyframes blink{
 32 |         0% {
 33 |           opacity: 1;
 34 |           @apply --typed-text-cursor-blink-0;
 35 |         }
 36 |         50% {
 37 |           opacity: 0;
 38 |           @apply --typed-text-cursor-blink-50;
 39 |         }
 40 |         100% {
 41 |           opacity: 1;
 42 |           @apply --typed-text-cursor-blink-100;
 43 |         }
 44 |       }
 45 | 
 46 |       @-webkit-keyframes blink{
 47 |         0% {
 48 |           opacity: 1;
 49 |           @apply --typed-text-cursor-blink-0;
 50 |         }
 51 |         50% {
 52 |           opacity: 0;
 53 |           @apply --typed-text-cursor-blink-50;
 54 |         }
 55 |         100% {
 56 |           opacity: 1;
 57 |           @apply --typed-text-cursor-blink-100;
 58 |         }
 59 |       }
 60 | 
 61 |       @-moz-keyframes blink{
 62 |         0% {
 63 |           opacity: 1;
 64 |           @apply --typed-text-cursor-blink-0;
 65 |         }
 66 |         50% {
 67 |           opacity: 0;
 68 |           @apply --typed-text-cursor-blink-50;
 69 |         }
 70 |         100% {
 71 |           opacity: 1;
 72 |           @apply --typed-text-cursor-blink-100;
 73 |         }
 74 |       }
 75 |     </style>
 76 |     <div>{{typed}}<span class$="cursor [[_isBlinking(noblink)]]">{{cursor}}</span></div>
 77 |   </template>
 78 | 
 79 |   <script>
 80 | 
 81 |     function strip(html){
 82 |       var doc = new DOMParser().parseFromString(html, 'text/html');
 83 |       return doc.body.textContent;
 84 |     }
 85 | 
 86 |     Polymer({
 87 | 
 88 |       is: 'typed-text',
 89 | 
 90 |       properties: {
 91 | 
 92 |         // Array of user provided strings for typing
 93 |         strings: {
 94 |           type: Array,
 95 |           value: function() {
 96 |             // Uncomment below if you want the element strings property to override the inner HTML text
 97 |             // return ['typed-text is awesome', 'it supports deleting!']; 
 98 |             return [];
 99 |           }
100 |         },
101 | 
102 |         // Loops between the strings
103 |         noloop: Boolean,
104 | 
105 |         noblink: {
106 |           type: Boolean,
107 |           value: false
108 |         },
109 | 
110 |         // Time to wait between typed text
111 |         wait: {
112 |           type: Number,
113 |           value: 2000
114 |         },
115 | 
116 |         // Typing speed
117 |         speed: {
118 |           type: Number,
119 |           value: 60
120 |         },
121 | 
122 |         // Deleting speed
123 |         delspeed: {
124 |           type: Number,
125 |           value: 40
126 |         },
127 | 
128 |         // custom cursor
129 |         cursor: {
130 |           type: String,
131 |           value: '|' //▍alternative block
132 |         },
133 | 
134 |         // Typed text
135 |         _typed: {
136 |           type: String,
137 |           value: ' '
138 |         },
139 | 
140 |         // Index of Strings array
141 |         _arrayIndex: {
142 |           type: Number,
143 |           value: 0
144 |         },
145 | 
146 |         // Index of typed string
147 |         _index: {
148 |           type: Number,
149 |           value: -1
150 |         },
151 | 
152 |         /* If two consecutive strings have characters in common
153 |          * do not retype them
154 |          */
155 |         noretype: Boolean,
156 | 
157 |         _subindex: {
158 |           type: Number,
159 |           value: 0
160 |         }
161 |       },
162 | 
163 |       // Element Lifecycle
164 |       ready: function() {
165 |         // Get strings from HTML if the `strings` array hasn't been set
166 |         if (this.strings.length == 0){
167 |           this.async(this._setStrings, 500);
168 |         }
169 |         this.async(this._typing, 500);
170 |       },
171 | 
172 |       // Get strings from HTML
173 |       _setStrings: function() {
174 |         this.strings = strip(this.innerHTML).replace(/ +(?= )/g, '').split("\n ");
175 |         this.strings = this.strings.filter(function(str) {
176 |           return /\S/.test(str);
177 |         }); 
178 |       },
179 | 
180 |       // Element Behavior
181 |       _typing: function() {
182 |         requestAnimationFrame(function () {
183 |           this._index += 1;
184 |           this.typed = this.strings[this._arrayIndex].substr(0, this._index);
185 | 
186 |           if(this._index <= this.strings[this._arrayIndex].length){
187 |             this.async(this._typing, this.speed);
188 |           } else {
189 |             if(!this.noloop || (this._arrayIndex != this.strings.length - 1)) {
190 |               this.async(this._deleting, this.wait);
191 |             }
192 |           }
193 |         }.bind(this));
194 |       },
195 | 
196 |       _deleting: function() {
197 |         requestAnimationFrame(function () {
198 |           this._index -= 1;
199 | 
200 |           if(this._index >= this._subindex) {
201 |             this.typed = this.strings[this._arrayIndex].substr(0, this._index - 1);
202 |             this.async(this._deleting, this.delspeed);
203 |           } else {
204 |             this._arrayIndex = (this._arrayIndex + 1)%this.strings.length;
205 |             this._calculateSubIndex(this._arrayIndex);
206 |             this._typing();
207 |           }
208 |         }.bind(this));
209 |       },
210 | 
211 |       _calculateSubIndex: function(arrayIndex) {
212 |         var i = 0;
213 |         var next = (this._arrayIndex + 1)%this.strings.length;
214 |         while(this.strings[arrayIndex][i] == this.strings[next][i] && this.strings.length != 1) {
215 |           i++;
216 |         }
217 |         this._subindex = i;
218 |       },
219 | 
220 |       _isBlinking: function() {
221 |         return !this.noblink && 'blink';
222 |       }
223 |     });
224 | 
225 |   </script>
226 | </dom-module>
227 | 


--------------------------------------------------------------------------------