-
Notifications
You must be signed in to change notification settings - Fork 24
/
Copy pathREADME.md~
171 lines (123 loc) · 5.5 KB
/
README.md~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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
jQuery Teletype Plugin
======================
Teletype is a jQuery plugin that types out text, and then optionally deletes it, replicating human interaction.
Additional options provide the ability to preserve the typed text, in a console / terminal format, pause during typing and delete characters.
An online demo can be found at <http://teletype.rocks>.
Installation
---
Via [bower](https://github.com/stvwhtly/jquery-teletype-plugin/blob/master/bower.json):
```bash
bower install jquery.teletype
```
Manual:
<script src="jquery.js"></script>
<script src="jquery.teletype.js"></script>
<script>
$( function() {
$( '.type-text' ).teletype( {
text: [ 'one', 'two', 'three' ],
typeDelay: 0,
backDelay: 20
} );
} );
</script>
...
<div class="type-text"></div>
Options
-------
Option | Default | Description
----------------------|-------------------------------------|------------
text | `['one','two','three']` (array) | List of strings to output.
typeDelay | `100` (integer) | Minimum delay, in ms, between typing characters.
backDelay | `50` (integer) | Minimum delay, in ms, between deleting characters.
blinkSpeed | `1000` (integer) | Interval, in ms, that the cursor will flash.
cursor | <code>"|"</code> (string) | Character used to represent the cursor.
delay | `2000` (int) | Time in ms to pause before deleting the current text.
preserve | `false` (boolean) | Prevent auto delete of the current string and begin outputting the next string.
prefix | `""` (string) | Begin each string with this prefix value.
loop | `0` (int) | Number of times to loop through the output strings, for unlimited use `0`.
humanise | `true` (boolean) | Add a random delay before each character to represent human interaction.
callbackNext | `null` (function) | Callback function called every text item. See `Callback functions` below.
callbackType | `null` (function) | Callback function called every 'letter'. See `Callback functions` below.
callbackFinished | `null` (function) | Callback function called once everything is finished. See `Callback functions` below.
Methods
-------
**teletype.setCursor(string cursor)**
Change the cursor value. Can be used at any time although particularly useful
when combined with callback functions.
Deleting characters `~`
---
It is possible to delete a defined number of characters then proceed with the rest of the text output.
Use `~x` within the text string, where x is an integer value defining the characters to backspace.
Example, type "auti", delete 1 character and continue to type "o", resulting in the word "auto":
```
auti~1o^`
```
Pause / Delay `^`
---
Delay typing the next character using `^x` where x in an integer value of milliseconds to pause.
To pause for 2 seconds after typing the word "pause" before continuing to type:
```
pause^2000 more
```
Line Breaks `\n`
---
Line breaks can be added using `\n`, which are converted to `<br />` during output.
Generated Markup
---
The following markup is used to output the teletype text.
```
<span class="teletype-prefix">[prefix]</span>
<span class="teletype-text">[string]</span>
<span class="teletype-cursor">[cursor]</span>
```
This provides the ability to customise the style of the output text in your CSS.
Callback functions
---
There are two callback functions available, `callbackNext` and `callbackType`.
**Using the `callbackNext` callback**
Called every time a new text item begins. Two parameters are passed back here,
`current` and `teletype`.
The `current` object holds details of the current text and position pointers.
```
current = {
string: '', // The full text line being written.
index: 0, // Array index of the text array.
position: 0, // Character index position within the current text string.
loop: 0 // Current loop number, increments if settings.loop is enabled.
};
```
The second parameter `teletype` returns the teletype object itself, allowing
you to easily interact with the teletyper.
Example, change the cursor when moving to the 3rd text item (index 2).
```
callbackNext: function( current, teletype ) {
if ( current.index == 2 ) {
teletype.setCursor( '▋' );
}
}
```
**Using the `callbackType` callback**
Callback function called every 'letter', when either typing or deleting output.
There are three parameters used here, `letter`, `current` and `teletype`.
The value of `letter` is the text that will be written, usually a single
character but can be HTML markup for special characters.
The other two parameters are the same as those used by `callbackNext` (see above).
```
callbackType: function( letter, current, teletype ) {
if ( current.index == 2 && current.position == 13 ) {
teletype.setCursor( '_' );
}
}
```
**Using the `callbackFinished` callback**
Callback function called immediately once the teletype process is entirely finished.
The single parameter `teletype` returns the teletype object itself.
```
callbackFinished: function( teletype ) {
alert( 'Nothing left to type!' );
}
```
Minification
---
The Minified version of this script was provided by UglifyJS 2 - an online version can be found at <http://gpbmike.github.io/refresh-sf/>.