This repository has been archived by the owner on Dec 22, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 58
/
demo.htm
120 lines (105 loc) · 5.59 KB
/
demo.htm
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
<!doctype html>
<html>
<head>
<title>⌨️ t.js/demo.htm</title>
<meta charset="utf-8"/>
<meta name="author" content="Mntn® c/o Benjamin Lips"/>
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"/>
<style type="text/css">
<!--
::selection{background:aquamarine;color:white;}
::-webkit-selection{background:aquamarine;color:white;}
::-moz-selection{background:aquamarine;color:white;}
body{background:lightyellow;color:mediumslateblue;}
*{cursor:default;font-family:'vt323',monospace;line-height:3.5vw;font-size:3vw;padding:0;outline:0;margin:0;}
#t{position:absolute;bottom:20%;left:50%;width:600px;margin-left:-300px;visibility:hidden;white-space:pre-wrap;}
a{color:mediumslateblue;text-decoration:none;border-bottom:1px solid aquamarine;}
code{background:yellow;}
.g{color:#0f0;}
.p{color:pink;}
/* t.js-related: */
ins,del{text-decoration:none;}
s{display:none;}
kbd{font-family:inherit;}
.t-caret{font-size:inherit;color:magenta;}
@media(max-width:800px){#t{width:400px;margin-left:-200px;}}
-->
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <!-- 3.3.1 -->
<script src="https://cdn.jsdelivr.net/gh/mntn-dev/t.js/t.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#t').t({
delay:2, // start delay in seconds [default:0]
speed:50, // typing speed (ms) [default:50]
speed_vary:false, // 'human like' speed variation [default:false]
beep:true, // beep while typing (Web Audio API) [default:false]
mistype:3, // mistype rate: 1:N per char [default:false]
locale:'en', // keyboard layout (to fit mistype); supported: 'en' (english) or 'de' (german) [default:'en']
caret:'\u2589', // caret content; can be html too [default:true (\u258e)]
blink:true, // blink-interval in ms; if TRUE, speed*3 [default:true]
blink_perm:false, // permanent blinking? if FALSE, caret blinks only on delay/pause/finish [default:false]
repeat:0, // repeat typing: if TRUE, infinite or N times [default:0]
tag:'span', // wrapper tag (.t-container, .t-caret) [default:'span']
pause_on_click:true, // pauses/continues typing on click/tap (elm) [default:false]
pause_on_tab_switch:true, // pauses typing if window is inactive (Page Visibility API) [default:false]
// init callback (ready-to-type)
init:function(elm){},
// typing callback
typing:function(elm,chr_or_elm,left,total){},
// finished callback
fin:function(elm){}
});
/*
Methods
$(elm).t('add',content); // adds content; shorthand: $(elm).a(content);
$(elm).t('queue',content); // queued type processing; shorthand: $(elm).q(content);
$(elm).t('pause'[,true/false]); // pauses typing (toggles if 2nd param omitted); shorthand: $(elm).p([true/false]);
$(elm).t('beep'); // manual beepin' (initialised/not-typing); shorthand: $(elm).b();
$(elm).t('speed',ms); // typing speed change at runtime; shorthand: $(elm).s(ms);
$(elm).t_off([true]); // destroys typer's instance; if TRUE, also clears content; shorthand: n/a
Data/properties
$(elm).data().t; // TRUE if initialised
$(elm).data().is_typing; // typing
$(elm).data().paused; // paused
# How to stop caret blinking? (e.g., if finished)
-> https://github.com/mntn-dev/t.js/issues/5#issuecomment-340739907
# Hint: unset default/unwatend styles via CSS
ins,del{text-decoration:none;}
kbd{font-family:inherit;}
s{display:none;}
[...]
--------
# "Hypertyping Markup Language" Cheatsheet:
<del>*</del> -> clears everything typed before (still stored in case of repeating [repeat:N])
<del>foo</del> -> deletes 'foo' (by default, t.js delays 0.25s before removing)
<del>foo<ins>2</ins></del> -> custom del-delay: numeric-filled <ins> inside <del>
<del>select me<s>red,white</s></del> -> text selection: <s> inside <del> (comma seperated background/forground color values, or .class name)
(!) Note: except <ins> and <s>, <del> doesn't handle nested html-tags (dropped)
<ins>2.5</ins> -> stops typing for 2.5 seconds (numeric-filled)
<ins>content to <u>insert</u></ins> -> inserts instantly (non-numeric)
<kbd>some <strong>typing text</strong></kbd> -> will apply setting's mistype[=1:N] rate here (will be 10 if unset)
<s>20</s> -> changes typing speed to 20 milliseconds
*/
});
//]]>
</script>
</head>
<body>
<div id="t"><strong>Yay.</strong> <img style="height:1.5vw;width:auto;" src="https://twemoji.maxcdn.com/2/72x72/1f44b.png" alt=""/>
~~~~~~~~
<ins>1.5</ins>I'm <em><del>r.j<ins>1</ins></del>t.js</em>, a <kbd>lightweight</kbd> jQuery typewriter script.
I provide full <strong><u title="Hypertext Markup Language">HTML</u> tag</strong> support, also i can:<ins>1</ins>
<span class="g">*</span> <kbd>mistype</kbd> (<code><kbd></code>)<ins>.5</ins>
<span class="g">*</span> dele<del>eeeeee</del>te (<code><del></code>)</ins><ins>.5</ins>
<span class="g">*</span> delay<ins>2</ins> (numeric <code><ins></code>)<ins>.5</ins>
<span class="g">*</span> <ins>insert</ins> (non-numeric <code><ins></code>)<ins>.5</ins>
<span class="g">*</span> <s>10</s>change typing <s>250</s>speed<s>50</s> (<code><s></code>)<ins>.5</ins>
<em>→ Hypertypin' Markup Language (HTyML)</em>
<a target="_blank" href="https://mntn-dev.github.io/t.js">Learn more</a>.
<ins>5</ins>(Open console)<br/><span style="border-bottom:1px dashed magenta;">$('#t').a('<span class="p">text/html content</span>')</span>
</div>
<br/>
</body>
</html>