typedjq-rails 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.gitignore +4 -0
- data/Gemfile +2 -0
- data/README.md +114 -14
- data/bin/setup +0 -2
- data/lib/typedjq/rails/version.rb +1 -1
- data/vendor/assets/javascripts/typed.js +403 -399
- metadata +2 -3
- data/typedjq-rails-0.1.0.gem +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 11b1d47606a7a4a6e551b270e03aa4467972249b
|
|
4
|
+
data.tar.gz: 89f59894057252f03a57ec5d7b8421f5c4141124
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9a5e2ae4f9aa54576be0c85c68ad57618e81fb4be9472fceeafbc07ca241ec18b0a5b467d7dc955cba7e110f2d369373e8065051bbf8fcbda9763c4fe49f980a
|
|
7
|
+
data.tar.gz: deebf017c5b3149e4c812225a3a37f9e547df273d59f076a13a9c93d494fa13557e28a46c65733f67b624a1f5e5c6b5885aa4abc7b24fe696744bcf5d0c77a5a
|
data/.gitignore
CHANGED
data/Gemfile
CHANGED
data/README.md
CHANGED
|
@@ -1,39 +1,139 @@
|
|
|
1
|
-
#
|
|
1
|
+
# TypedJQ-rails
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This gem is [**Typed.js**](https://github.com/mattboldt/typed.js) for rails.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[View the live demo](http://www.mattboldt.com/demos/typed-js/) and you'll know how awsome it is, let's use it now! :sunglasses:
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
|
-
Add this line to your
|
|
9
|
+
#### 1. Add this line to your `Gemfile`:
|
|
10
10
|
|
|
11
11
|
```ruby
|
|
12
12
|
gem 'typedjq-rails'
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
And then
|
|
15
|
+
And then `$ bundle` it, or install it yourself as:
|
|
16
16
|
|
|
17
|
-
$
|
|
17
|
+
$ gem install typedjq-rails
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
#### 2. Add require to your `application.js`
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
```javascript
|
|
22
|
+
//= require jquery
|
|
23
|
+
//= require jquery.turbolinks
|
|
24
|
+
//= require jquery_ujs
|
|
25
|
+
...
|
|
26
|
+
//= require typed
|
|
27
|
+
//= require turbolinks
|
|
28
|
+
```
|
|
22
29
|
|
|
23
30
|
## Usage
|
|
24
31
|
|
|
25
|
-
|
|
32
|
+
**HTML tags** [:speech_balloon:](https://github.com/mattboldt/typed.js/tree/master#html-tags)
|
|
33
|
+
```coffeescript
|
|
34
|
+
# Example in coffeescript
|
|
35
|
+
$(".yourelement").typed
|
|
36
|
+
string: ["Typed.js is a <strong>jQuery</strong> plugin."]
|
|
37
|
+
contentType: 'html' # or 'text'
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**Strings from static HTML (SEO Friendly)** [:speech_balloon:](https://github.com/mattboldt/typed.js/tree/master#strings-from-static-html-seo-friendly)
|
|
41
|
+
```coffeescript
|
|
42
|
+
# Example in coffeescript
|
|
43
|
+
$("#your-typed-bar").typed
|
|
44
|
+
stringElement: $("#your-typed-strings")
|
|
45
|
+
```
|
|
46
|
+
And you must wrap each string in the `typed-strings` div with a `<p>`
|
|
47
|
+
```haml
|
|
48
|
+
/ Example in haml
|
|
49
|
+
#your-typed-strings
|
|
50
|
+
%p= "Typed.js is a <strong>jQuery</strong> plugin."
|
|
51
|
+
%p= "It <em>types</em> out sentences."
|
|
52
|
+
%span#your-typed-bar
|
|
53
|
+
```
|
|
26
54
|
|
|
27
|
-
|
|
55
|
+
**Line Breaks** [:speech_balloon:](https://github.com/mattboldt/typed.js/tree/master#line-breaks)
|
|
56
|
+
* contentType: 'html'
|
|
57
|
+
```coffeescript
|
|
58
|
+
# Example in coffeescript
|
|
59
|
+
$(".yourelement").typed
|
|
60
|
+
strings: ["Sentence with <br>line break."]
|
|
61
|
+
```
|
|
28
62
|
|
|
29
|
-
|
|
63
|
+
* contentType: 'text'
|
|
30
64
|
|
|
31
|
-
|
|
65
|
+
Use `white-space: pre` in your typed text element, and then `\n` when typing out the strings.
|
|
66
|
+
```haml
|
|
67
|
+
/ Example in haml
|
|
68
|
+
%span#yourelement{ style: "white-space:pre" }
|
|
69
|
+
```
|
|
70
|
+
```coffeescript
|
|
71
|
+
# Example in coffeescript
|
|
72
|
+
$("#yourelement").typed
|
|
73
|
+
strings: ["Sentence with \n line break."]
|
|
74
|
+
```
|
|
32
75
|
|
|
33
|
-
|
|
76
|
+
**Type Pausing** [:speech_balloon:](https://github.com/mattboldt/typed.js/tree/master#type-pausing)
|
|
77
|
+
```coffeescript
|
|
78
|
+
# Example in coffeescript
|
|
79
|
+
$("#yourelement").typed
|
|
80
|
+
strings: ["First ^1000 sentence.", "Second sentence."]
|
|
81
|
+
# Waits 1000ms after typing "First"
|
|
82
|
+
```
|
|
34
83
|
|
|
35
|
-
|
|
84
|
+
**Customization** [:speech_balloon:](https://github.com/mattboldt/typed.js/tree/master#customization)
|
|
85
|
+
```coffeescript
|
|
86
|
+
# Example in coffeescript
|
|
87
|
+
$("#yourelement").typed
|
|
88
|
+
strings: ["First sentence.", "Second sentence."]
|
|
89
|
+
|
|
90
|
+
# Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
|
|
91
|
+
stringsElement: null
|
|
92
|
+
|
|
93
|
+
# typing speed
|
|
94
|
+
typeSpeed: 0
|
|
95
|
+
|
|
96
|
+
# time before typing starts
|
|
97
|
+
startDelay: 0
|
|
98
|
+
|
|
99
|
+
# backspacing speed
|
|
100
|
+
backSpeed: 0
|
|
101
|
+
|
|
102
|
+
# time before backspacing
|
|
103
|
+
backDelay: 500
|
|
104
|
+
|
|
105
|
+
# loop
|
|
106
|
+
loop: false
|
|
107
|
+
|
|
108
|
+
# false = infinite
|
|
109
|
+
loopCount: false
|
|
110
|
+
|
|
111
|
+
# show cursor
|
|
112
|
+
showCursor: true
|
|
113
|
+
|
|
114
|
+
# character for cursor
|
|
115
|
+
cursorChar: "|"
|
|
116
|
+
|
|
117
|
+
# attribute to type (null == text)
|
|
118
|
+
attr: null
|
|
119
|
+
|
|
120
|
+
# either html or text
|
|
121
|
+
contentType: 'html'
|
|
122
|
+
|
|
123
|
+
# call when done callback function
|
|
124
|
+
callback: function() {}
|
|
125
|
+
|
|
126
|
+
# starting callback function before each string
|
|
127
|
+
preStringTyped: function() {}
|
|
128
|
+
|
|
129
|
+
# callback for every typed string
|
|
130
|
+
onStringTyped: function() {}
|
|
131
|
+
|
|
132
|
+
# callback for reset
|
|
133
|
+
resetCallback: function() {}
|
|
134
|
+
```
|
|
36
135
|
|
|
136
|
+
And if you really want to get more custom, please check [**Super Custom**](https://github.com/mattboldt/typed.js/tree/master#get-super-custom) in Typed.js.
|
|
37
137
|
|
|
38
138
|
## License
|
|
39
139
|
|
data/bin/setup
CHANGED
|
@@ -25,410 +25,414 @@
|
|
|
25
25
|
|
|
26
26
|
! function($) {
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
"use strict";
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
var Typed = function(el, options) {
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
// chosen element to manipulate text
|
|
33
|
+
this.el = $(el);
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
// options
|
|
36
|
+
this.options = $.extend({}, $.fn.typed.defaults, options);
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
// attribute to type into
|
|
39
|
+
this.isInput = this.el.is('input');
|
|
40
|
+
this.attr = this.options.attr;
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
42
|
+
// show cursor
|
|
43
|
+
this.showCursor = this.isInput ? false : this.options.showCursor;
|
|
44
|
+
|
|
45
|
+
// text content of element
|
|
46
|
+
this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text();
|
|
47
|
+
|
|
48
|
+
// html or plain text
|
|
49
|
+
this.contentType = this.options.contentType;
|
|
50
|
+
|
|
51
|
+
// typing speed
|
|
52
|
+
this.typeSpeed = this.options.typeSpeed;
|
|
53
|
+
|
|
54
|
+
// add a delay before typing starts
|
|
55
|
+
this.startDelay = this.options.startDelay;
|
|
56
|
+
|
|
57
|
+
// backspacing speed
|
|
58
|
+
this.backSpeed = this.options.backSpeed;
|
|
59
|
+
|
|
60
|
+
// amount of time to wait before backspacing
|
|
61
|
+
this.backDelay = this.options.backDelay;
|
|
62
|
+
|
|
63
|
+
// div containing strings
|
|
64
|
+
this.stringsElement = this.options.stringsElement;
|
|
65
|
+
|
|
66
|
+
// input strings of text
|
|
67
|
+
this.strings = this.options.strings;
|
|
68
|
+
|
|
69
|
+
// character number position of current string
|
|
70
|
+
this.strPos = 0;
|
|
71
|
+
|
|
72
|
+
// current array position
|
|
73
|
+
this.arrayPos = 0;
|
|
74
|
+
|
|
75
|
+
// number to stop backspacing on.
|
|
76
|
+
// default 0, can change depending on how many chars
|
|
77
|
+
// you want to remove at the time
|
|
78
|
+
this.stopNum = 0;
|
|
79
|
+
|
|
80
|
+
// Looping logic
|
|
81
|
+
this.loop = this.options.loop;
|
|
82
|
+
this.loopCount = this.options.loopCount;
|
|
83
|
+
this.curLoop = 0;
|
|
84
|
+
|
|
85
|
+
// for stopping
|
|
86
|
+
this.stop = false;
|
|
87
|
+
|
|
88
|
+
// custom cursor
|
|
89
|
+
this.cursorChar = this.options.cursorChar;
|
|
90
|
+
|
|
91
|
+
// shuffle the strings
|
|
92
|
+
this.shuffle = this.options.shuffle;
|
|
93
|
+
// the order of strings
|
|
94
|
+
this.sequence = [];
|
|
95
|
+
|
|
96
|
+
// All systems go!
|
|
97
|
+
this.build();
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
Typed.prototype = {
|
|
101
|
+
|
|
102
|
+
constructor: Typed,
|
|
103
|
+
|
|
104
|
+
init: function() {
|
|
105
|
+
// begin the loop w/ first current string (global self.strings)
|
|
106
|
+
// current string will be passed as an argument each time after this
|
|
107
|
+
var self = this;
|
|
108
|
+
self.timeout = setTimeout(function() {
|
|
109
|
+
for (var i=0;i<self.strings.length;++i) self.sequence[i]=i;
|
|
110
|
+
|
|
111
|
+
// shuffle the array if true
|
|
112
|
+
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
|
|
113
|
+
|
|
114
|
+
// Start typing
|
|
115
|
+
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
|
|
116
|
+
}, self.startDelay);
|
|
117
|
+
},
|
|
118
|
+
|
|
119
|
+
build: function() {
|
|
120
|
+
var self = this;
|
|
121
|
+
// Insert cursor
|
|
122
|
+
if (this.showCursor === true) {
|
|
123
|
+
this.cursor = $("<span class=\"typed-cursor\">" + this.cursorChar + "</span>");
|
|
124
|
+
this.el.after(this.cursor);
|
|
125
|
+
}
|
|
126
|
+
if (this.stringsElement) {
|
|
127
|
+
this.strings = [];
|
|
128
|
+
this.stringsElement.hide();
|
|
129
|
+
console.log(this.stringsElement.children());
|
|
130
|
+
var strings = this.stringsElement.children();
|
|
131
|
+
$.each(strings, function(key, value){
|
|
132
|
+
self.strings.push($(value).html());
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
this.init();
|
|
136
|
+
},
|
|
137
|
+
|
|
138
|
+
// pass current string state to each function, types 1 char per call
|
|
139
|
+
typewrite: function(curString, curStrPos) {
|
|
140
|
+
// exit when stopped
|
|
141
|
+
if (this.stop === true) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// varying values for setTimeout during typing
|
|
146
|
+
// can't be global since number changes each time loop is executed
|
|
147
|
+
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
|
|
148
|
+
var self = this;
|
|
149
|
+
|
|
150
|
+
// ------------- optional ------------- //
|
|
151
|
+
// backpaces a certain string faster
|
|
152
|
+
// ------------------------------------ //
|
|
153
|
+
// if (self.arrayPos == 1){
|
|
154
|
+
// self.backDelay = 50;
|
|
155
|
+
// }
|
|
156
|
+
// else{ self.backDelay = 500; }
|
|
157
|
+
|
|
158
|
+
// contain typing function in a timeout humanize'd delay
|
|
159
|
+
self.timeout = setTimeout(function() {
|
|
160
|
+
// check for an escape character before a pause value
|
|
161
|
+
// format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
|
|
162
|
+
// single ^ are removed from string
|
|
163
|
+
var charPause = 0;
|
|
164
|
+
var substr = curString.substr(curStrPos);
|
|
165
|
+
if (substr.charAt(0) === '^') {
|
|
166
|
+
var skip = 1; // skip atleast 1
|
|
167
|
+
if (/^\^\d+/.test(substr)) {
|
|
168
|
+
substr = /\d+/.exec(substr)[0];
|
|
169
|
+
skip += substr.length;
|
|
170
|
+
charPause = parseInt(substr);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// strip out the escape character and pause value so they're not printed
|
|
174
|
+
curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
if (self.contentType === 'html') {
|
|
178
|
+
// skip over html tags while typing
|
|
179
|
+
var curChar = curString.substr(curStrPos).charAt(0)
|
|
180
|
+
if (curChar === '<' || curChar === '&') {
|
|
181
|
+
var tag = '';
|
|
182
|
+
var endTag = '';
|
|
183
|
+
if (curChar === '<') {
|
|
184
|
+
endTag = '>'
|
|
185
|
+
}
|
|
186
|
+
else {
|
|
187
|
+
endTag = ';'
|
|
188
|
+
}
|
|
189
|
+
while (curString.substr(curStrPos + 1).charAt(0) !== endTag) {
|
|
190
|
+
tag += curString.substr(curStrPos).charAt(0);
|
|
191
|
+
curStrPos++;
|
|
192
|
+
if (curStrPos + 1 > curString.length) { break; }
|
|
193
|
+
}
|
|
194
|
+
curStrPos++;
|
|
195
|
+
tag += endTag;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
// timeout for any pause after a character
|
|
200
|
+
self.timeout = setTimeout(function() {
|
|
201
|
+
if (curStrPos === curString.length) {
|
|
202
|
+
// fires callback function
|
|
203
|
+
self.options.onStringTyped(self.arrayPos);
|
|
204
|
+
|
|
205
|
+
// is this the final string
|
|
206
|
+
if (self.arrayPos === self.strings.length - 1) {
|
|
207
|
+
// animation that occurs on the last typed string
|
|
208
|
+
self.options.callback();
|
|
209
|
+
|
|
210
|
+
self.curLoop++;
|
|
211
|
+
|
|
212
|
+
// quit if we wont loop back
|
|
213
|
+
if (self.loop === false || self.curLoop === self.loopCount)
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
self.timeout = setTimeout(function() {
|
|
218
|
+
self.backspace(curString, curStrPos);
|
|
219
|
+
}, self.backDelay);
|
|
220
|
+
|
|
221
|
+
} else {
|
|
222
|
+
|
|
223
|
+
/* call before functions if applicable */
|
|
224
|
+
if (curStrPos === 0) {
|
|
225
|
+
self.options.preStringTyped(self.arrayPos);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
// start typing each new char into existing string
|
|
229
|
+
// curString: arg, self.el.html: original text inside element
|
|
230
|
+
var nextString = curString.substr(0, curStrPos + 1);
|
|
231
|
+
if (self.attr) {
|
|
232
|
+
self.el.attr(self.attr, nextString);
|
|
233
|
+
} else {
|
|
234
|
+
if (self.isInput) {
|
|
235
|
+
self.el.val(nextString);
|
|
236
|
+
} else if (self.contentType === 'html') {
|
|
237
|
+
self.el.html(nextString);
|
|
238
|
+
} else {
|
|
239
|
+
self.el.text(nextString);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
// add characters one by one
|
|
244
|
+
curStrPos++;
|
|
245
|
+
// loop the function
|
|
246
|
+
self.typewrite(curString, curStrPos);
|
|
247
|
+
}
|
|
248
|
+
// end of character pause
|
|
249
|
+
}, charPause);
|
|
250
|
+
|
|
251
|
+
// humanized value for typing
|
|
252
|
+
}, humanize);
|
|
253
|
+
|
|
254
|
+
},
|
|
255
|
+
|
|
256
|
+
backspace: function(curString, curStrPos) {
|
|
257
|
+
// exit when stopped
|
|
258
|
+
if (this.stop === true) {
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// varying values for setTimeout during typing
|
|
263
|
+
// can't be global since number changes each time loop is executed
|
|
264
|
+
var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
|
|
265
|
+
var self = this;
|
|
266
|
+
|
|
267
|
+
self.timeout = setTimeout(function() {
|
|
268
|
+
|
|
269
|
+
// ----- this part is optional ----- //
|
|
270
|
+
// check string array position
|
|
271
|
+
// on the first string, only delete one word
|
|
272
|
+
// the stopNum actually represents the amount of chars to
|
|
273
|
+
// keep in the current string. In my case it's 14.
|
|
274
|
+
// if (self.arrayPos == 1){
|
|
275
|
+
// self.stopNum = 14;
|
|
276
|
+
// }
|
|
277
|
+
//every other time, delete the whole typed string
|
|
278
|
+
// else{
|
|
279
|
+
// self.stopNum = 0;
|
|
280
|
+
// }
|
|
281
|
+
|
|
282
|
+
if (self.contentType === 'html') {
|
|
283
|
+
// skip over html tags while backspacing
|
|
284
|
+
if (curString.substr(curStrPos).charAt(0) === '>') {
|
|
285
|
+
var tag = '';
|
|
286
|
+
while (curString.substr(curStrPos - 1).charAt(0) !== '<') {
|
|
287
|
+
tag -= curString.substr(curStrPos).charAt(0);
|
|
288
|
+
curStrPos--;
|
|
289
|
+
if (curStrPos < 0) { break; }
|
|
290
|
+
}
|
|
291
|
+
curStrPos--;
|
|
292
|
+
tag += '<';
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
// ----- continue important stuff ----- //
|
|
297
|
+
// replace text with base text + typed characters
|
|
298
|
+
var nextString = curString.substr(0, curStrPos);
|
|
299
|
+
if (self.attr) {
|
|
300
|
+
self.el.attr(self.attr, nextString);
|
|
301
|
+
} else {
|
|
302
|
+
if (self.isInput) {
|
|
303
|
+
self.el.val(nextString);
|
|
304
|
+
} else if (self.contentType === 'html') {
|
|
305
|
+
self.el.html(nextString);
|
|
306
|
+
} else {
|
|
307
|
+
self.el.text(nextString);
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
// if the number (id of character in current string) is
|
|
312
|
+
// less than the stop number, keep going
|
|
313
|
+
if (curStrPos > self.stopNum) {
|
|
314
|
+
// subtract characters one by one
|
|
315
|
+
curStrPos--;
|
|
316
|
+
// loop the function
|
|
317
|
+
self.backspace(curString, curStrPos);
|
|
318
|
+
}
|
|
319
|
+
// if the stop number has been reached, increase
|
|
320
|
+
// array position to next string
|
|
321
|
+
else if (curStrPos <= self.stopNum) {
|
|
322
|
+
self.arrayPos++;
|
|
323
|
+
|
|
324
|
+
if (self.arrayPos === self.strings.length) {
|
|
325
|
+
self.arrayPos = 0;
|
|
326
|
+
|
|
327
|
+
// Shuffle sequence again
|
|
328
|
+
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
|
|
329
|
+
|
|
330
|
+
self.init();
|
|
331
|
+
} else
|
|
332
|
+
self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
// humanized value for typing
|
|
336
|
+
}, humanize);
|
|
337
|
+
|
|
338
|
+
},
|
|
339
|
+
/**
|
|
340
|
+
* Shuffles the numbers in the given array.
|
|
341
|
+
* @param {Array} array
|
|
342
|
+
* @returns {Array}
|
|
343
|
+
*/
|
|
344
|
+
shuffleArray: function(array) {
|
|
345
|
+
var tmp, current, top = array.length;
|
|
346
|
+
if(top) while(--top) {
|
|
347
|
+
current = Math.floor(Math.random() * (top + 1));
|
|
348
|
+
tmp = array[current];
|
|
349
|
+
array[current] = array[top];
|
|
350
|
+
array[top] = tmp;
|
|
351
|
+
}
|
|
352
|
+
return array;
|
|
353
|
+
},
|
|
354
|
+
|
|
355
|
+
// Start & Stop currently not working
|
|
356
|
+
|
|
357
|
+
// , stop: function() {
|
|
358
|
+
// var self = this;
|
|
359
|
+
|
|
360
|
+
// self.stop = true;
|
|
361
|
+
// clearInterval(self.timeout);
|
|
362
|
+
// }
|
|
363
|
+
|
|
364
|
+
// , start: function() {
|
|
365
|
+
// var self = this;
|
|
366
|
+
// if(self.stop === false)
|
|
367
|
+
// return;
|
|
368
|
+
|
|
369
|
+
// this.stop = false;
|
|
370
|
+
// this.init();
|
|
371
|
+
// }
|
|
372
|
+
|
|
373
|
+
// Reset and rebuild the element
|
|
374
|
+
reset: function() {
|
|
375
|
+
var self = this;
|
|
376
|
+
clearInterval(self.timeout);
|
|
377
|
+
var id = this.el.attr('id');
|
|
378
|
+
this.el.empty();
|
|
379
|
+
if (typeof this.cursor !== 'undefined') {
|
|
380
|
+
this.cursor.remove();
|
|
381
|
+
}
|
|
382
|
+
this.strPos = 0;
|
|
383
|
+
this.arrayPos = 0;
|
|
384
|
+
this.curLoop = 0;
|
|
385
|
+
// Send the callback
|
|
386
|
+
this.options.resetCallback();
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
};
|
|
390
|
+
|
|
391
|
+
$.fn.typed = function(option) {
|
|
392
|
+
return this.each(function() {
|
|
393
|
+
var $this = $(this),
|
|
394
|
+
data = $this.data('typed'),
|
|
395
|
+
options = typeof option == 'object' && option;
|
|
396
|
+
if (data) { data.reset(); }
|
|
397
|
+
$this.data('typed', (data = new Typed(this, options)));
|
|
398
|
+
if (typeof option == 'string') data[option]();
|
|
399
|
+
});
|
|
400
|
+
};
|
|
401
|
+
|
|
402
|
+
$.fn.typed.defaults = {
|
|
403
|
+
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
|
|
404
|
+
stringsElement: null,
|
|
405
|
+
// typing speed
|
|
406
|
+
typeSpeed: 0,
|
|
407
|
+
// time before typing starts
|
|
408
|
+
startDelay: 0,
|
|
409
|
+
// backspacing speed
|
|
410
|
+
backSpeed: 0,
|
|
411
|
+
// shuffle the strings
|
|
412
|
+
shuffle: false,
|
|
413
|
+
// time before backspacing
|
|
414
|
+
backDelay: 500,
|
|
415
|
+
// loop
|
|
416
|
+
loop: false,
|
|
417
|
+
// false = infinite
|
|
418
|
+
loopCount: false,
|
|
419
|
+
// show cursor
|
|
420
|
+
showCursor: true,
|
|
421
|
+
// character for cursor
|
|
422
|
+
cursorChar: "|",
|
|
423
|
+
// attribute to type (null == text)
|
|
424
|
+
attr: null,
|
|
425
|
+
// either html or text
|
|
426
|
+
contentType: 'html',
|
|
427
|
+
// call when done callback function
|
|
428
|
+
callback: function() {},
|
|
429
|
+
// starting callback function before each string
|
|
430
|
+
preStringTyped: function() {},
|
|
431
|
+
//callback for every typed string
|
|
432
|
+
onStringTyped: function() {},
|
|
433
|
+
// callback for reset
|
|
434
|
+
resetCallback: function() {}
|
|
435
|
+
};
|
|
432
436
|
|
|
433
437
|
|
|
434
438
|
}(window.jQuery);
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: typedjq-rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GeorgioWan
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-
|
|
11
|
+
date: 2016-07-26 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -71,7 +71,6 @@ files:
|
|
|
71
71
|
- bin/setup
|
|
72
72
|
- lib/typedjq/rails.rb
|
|
73
73
|
- lib/typedjq/rails/version.rb
|
|
74
|
-
- typedjq-rails-0.1.0.gem
|
|
75
74
|
- typedjq-rails.gemspec
|
|
76
75
|
- vendor/assets/javascripts/typed.js
|
|
77
76
|
homepage: https://github.com/GeorgioWan/typedjq-rails
|
data/typedjq-rails-0.1.0.gem
DELETED
|
Binary file
|