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 0
/
demo.htm
126 lines (66 loc) · 3.26 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
121
122
123
124
125
126
<!doctype html><html>
<head>
<title>⌨ $.kbd-demo</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/mntn-dev/kbd/kbd.css" rel="stylesheet"/> <!-- 0.5.1 -->
<style type="text/css">
<!--
*{padding:0;margin:0;outline:0;border:0;font-family:roboto;}
body{background:#fee;overflow:hidden;}
html{height:100%;width:100%;}
#txt{position:absolute;padding:10%;width:80%;height:80%;left:0;top:0;font-size:3vw;line-height:3vw;}
#txt pre{white-space:pre-wrap;word-wrap:break-word;display:inline;}
#txt span{color:magenta;}
#ops{z-index:999;position:absolute;top:3%;left:3%;width:100%;height:auto;font-size:1vw;line-height:1vw;}
#ops button{background:white;border:1px solid #999;border-radius:5px;padding:5px;margin-bottom:5px;}
#ops button:hover{background:#fafafa;}#ops button:active{background:#111;color:white;}
-->
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script> <!-- 3.3.1 -->
<script src="https://cdn.jsdelivr.net/gh/mntn-dev/kbd/kbd.min.js"></script> <!-- 0.5.1 -->
<script type="text/javascript">
//<![CDATA[
var t=0;
function input_cb(c){
if(c==$.BS/*backspace*/){t=1;$('#txt pre').text($('#txt pre').text().slice(0,-1));return;}
$('#txt pre').append((c==$.OK)?'\n':c);
t=1;
}
$(function(){
$.kbd({
qwertz:false,
toggle_btn:true,
input:input_cb,
white:true,
hidden:true,
coffee:false
});
setTimeout(function(){$.kbd.show();},2e3);
setInterval(function(){if(t<0)$('#txt span').toggle();else{$('#txt span').show();--t}},5e2);//caret-blinking
});
//]]>
</script>
</head>
<body>
<div id="txt"><pre></pre><span>|</span></div>
<div id="ops">
<button onclick="$.kbd.show();">$.kbd.show()</button>
<button onclick="$.kbd.hide();">$.kbd.hide()</button>
<button onclick="$.kbd.white();" title="white kbd">$.kbd.white([<span style="color:tomato;">true</span>])</button>
<button onclick="$.kbd.white(false);" title="=black">$.kbd.white(<span style="color:tomato;">false</span>)</button>
<button onclick="$.kbd.caps(true);" title="longpress: permanent caps">$.kbd.caps(<span style="color:tomato;">true</span>)</button>
<button onclick="$.kbd.caps(false);" title="unset permanent caps">$.kbd.caps(<span style="color:tomato;">false</span>)</button>
<button onclick="$.kbd.caps();" title="1-time-caps toggle / unset permanent caps">$.kbd.caps()</button>
<br/>
<button onclick="$.kbd.alt(true);" title="ABC→123">$.kbd.alt(<span style="color:tomato;">true</span>)</button>
<button onclick="$.kbd.alt(false);" title="123→ABC">$.kbd.alt(<span style="color:tomato;">false</span>)</button>
<button onclick="$.kbd.alt();" title="toggle 123/ABC">$.kbd.alt()</button>
<br/>
<button onclick="$.kbd.lock();" title="locks kbd">$.kbd.lock([<span style="color:tomato;">true</span>])</button>
<button onclick="$.kbd.lock(false);" title="unlock">$.kbd.lock(<span style="color:tomato;">false</span>)</button>
(<strong>Vars: $.OK</strong> (Return/Enter), <strong>$.BS</strong> (Backspace))
</div>
</body>
</html>