Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
烟灰好
edex-ui
提交
96677e67
E
edex-ui
项目概览
烟灰好
/
edex-ui
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
E
edex-ui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
96677e67
编写于
11月 25, 2017
作者:
G
GitSquared
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Fully working tactile keyboard \o/
上级
1851204e
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
138 addition
and
10 deletion
+138
-10
src/assets/css/keyboard.css
src/assets/css/keyboard.css
+49
-1
src/assets/kb_layouts/en-US.json
src/assets/kb_layouts/en-US.json
+0
-1
src/classes/keyboard.class.js
src/classes/keyboard.class.js
+89
-8
未找到文件。
src/assets/css/keyboard.css
浏览文件 @
96677e67
...
@@ -63,7 +63,7 @@ div.keyboard_row > .keyboard_key:last-child > *, div.keyboard_row > .keyboard_ke
...
@@ -63,7 +63,7 @@ div.keyboard_row > .keyboard_key:last-child > *, div.keyboard_row > .keyboard_ke
font-size
:
20px
;
font-size
:
20px
;
}
}
div
.keyboard_key
>
*
:not
(
:first-child
)
{
div
.keyboard_key
>
*
:not
(
h1
)
{
margin
:
0px
;
margin
:
0px
;
font-size
:
18px
;
font-size
:
18px
;
position
:
absolute
;
position
:
absolute
;
...
@@ -121,3 +121,51 @@ div.keyboard_key#keyboard_spacebar {
...
@@ -121,3 +121,51 @@ div.keyboard_key#keyboard_spacebar {
width
:
515px
;
width
:
515px
;
height
:
38px
;
height
:
38px
;
}
}
section
#keyboard
[
data-is-caps-lck-on
=
"true"
]
div
.keyboard_key
[
data-cmd
=
"ESCAPED|-- CAPSLCK: ON"
]
{
background-color
:
rgb
(
190
,
230
,
193
);
color
:
black
;
}
section
#keyboard
[
data-is-shift-on
=
"true"
]
>
div
.keyboard_row
>
div
.keyboard_key
>
h2
:not
(
:empty
),
section
#keyboard
[
data-is-caps-lck-on
=
"true"
]
>
div
.keyboard_row
>
div
.keyboard_key
>
h2
:not
(
:empty
)
{
position
:
relative
;
top
:
3px
;
font-size
:
26px
;
margin
:
0px
5px
;
}
section
#keyboard
[
data-is-shift-on
=
"true"
]
>
div
.keyboard_row
:first-child
>
div
.keyboard_key
:last-child
>
h2
,
section
#keyboard
[
data-is-caps-lck-on
=
"true"
]
>
div
.keyboard_row
:first-child
>
div
.keyboard_key
:last-child
>
h2
{
font-size
:
20px
;
opacity
:
1
;
}
section
#keyboard
[
data-is-shift-on
=
"true"
]
>
div
.keyboard_row
>
div
.keyboard_key
>
h2
:not
(
:empty
)
+
h1
,
section
#keyboard
[
data-is-caps-lck-on
=
"true"
]
>
div
.keyboard_row
>
div
.keyboard_key
>
h2
:not
(
:empty
)
+
h1
{
margin
:
0px
;
font-size
:
18px
;
position
:
absolute
;
top
:
3px
;
left
:
3px
;
}
section
#keyboard
[
data-is-shift-on
=
"true"
]
>
div
.keyboard_row
:first-child
>
div
.keyboard_key
:last-child
>
h2
+
h1
,
section
#keyboard
[
data-is-caps-lck-on
=
"true"
]
>
div
.keyboard_row
:first-child
>
div
.keyboard_key
:last-child
>
h2
+
h1
{
opacity
:
0
;
}
section
#keyboard
[
data-is-fn-on
=
"true"
]
div
.keyboard_key
[
data-cmd
=
"ESCAPED|-- FN: ON"
]
{
background-color
:
rgb
(
190
,
230
,
193
);
color
:
black
;
}
section
#keyboard
[
data-is-fn-on
=
"true"
]
>
div
.keyboard_row
>
div
.keyboard_key
>
h4
:not
(
:empty
)
{
position
:
relative
;
top
:
3px
;
font-size
:
23px
;
margin
:
0px
5px
;
opacity
:
1
;
}
section
#keyboard
[
data-is-fn-on
=
"true"
]
>
div
.keyboard_row
>
div
.keyboard_key
>
h4
:not
(
:empty
)
+
h3
,
section
#keyboard
[
data-is-fn-on
=
"true"
]
>
div
.keyboard_row
>
div
.keyboard_key
>
h4
:not
(
:empty
)
+
h3
+
h2
,
section
#keyboard
[
data-is-fn-on
=
"true"
]
>
div
.keyboard_row
>
div
.keyboard_key
>
h4
:not
(
:empty
)
+
h3
+
h2
+
h1
{
position
:
absolute
;
opacity
:
0
;
}
src/assets/kb_layouts/en-US.json
浏览文件 @
96677e67
...
@@ -224,7 +224,6 @@
...
@@ -224,7 +224,6 @@
{
{
"name"
:
"CAPS"
,
"name"
:
"CAPS"
,
"cmd"
:
"ESCAPED|-- CAPSLCK: ON"
,
"cmd"
:
"ESCAPED|-- CAPSLCK: ON"
,
"shift_name"
:
"CAPS"
,
"shift_cmd"
:
"ESCAPED|-- CAPSLCK: OFF"
"shift_cmd"
:
"ESCAPED|-- CAPSLCK: OFF"
},
},
{
{
...
...
src/classes/keyboard.class.js
浏览文件 @
96677e67
...
@@ -11,6 +11,7 @@ class Keyboard {
...
@@ -11,6 +11,7 @@ class Keyboard {
container
.
dataset
.
isCapsLckOn
=
false
;
container
.
dataset
.
isCapsLckOn
=
false
;
container
.
dataset
.
isAltOn
=
false
;
container
.
dataset
.
isAltOn
=
false
;
container
.
dataset
.
isCtrlOn
=
false
;
container
.
dataset
.
isCtrlOn
=
false
;
container
.
dataset
.
isFnOn
=
false
;
// Parse keymap and create DOM
// Parse keymap and create DOM
Object
.
keys
(
layout
).
forEach
((
row
)
=>
{
Object
.
keys
(
layout
).
forEach
((
row
)
=>
{
...
@@ -26,10 +27,10 @@ class Keyboard {
...
@@ -26,10 +27,10 @@ class Keyboard {
key
.
innerHTML
=
`<h1>
${
keyObj
.
name
}
</h1>`
;
key
.
innerHTML
=
`<h1>
${
keyObj
.
name
}
</h1>`
;
}
else
{
}
else
{
key
.
innerHTML
=
`
key
.
innerHTML
=
`
<h1>
${
keyObj
.
name
||
""
}
</h1>
<h4>
${
keyObj
.
fn_name
||
""
}
</h4>
<h2>
${
keyObj
.
shift_name
||
""
}
</h2>
<h3>
${
keyObj
.
alt_name
||
""
}
</h3>
<h3>
${
keyObj
.
alt_name
||
""
}
</h3>
<h4>
${
keyObj
.
fn_name
||
""
}
</h4>`
;
<h2>
${
keyObj
.
shift_name
||
""
}
</h2>
<h1>
${
keyObj
.
name
||
""
}
</h1>`
;
}
}
Object
.
keys
(
keyObj
).
forEach
((
property
)
=>
{
Object
.
keys
(
keyObj
).
forEach
((
property
)
=>
{
...
@@ -47,7 +48,35 @@ class Keyboard {
...
@@ -47,7 +48,35 @@ class Keyboard {
});
});
});
});
// Apply click (and/or touch) handler functions
// Apply click (and/or touch) handler functions (write to socket and animations)
let
pressKey
=
(
key
)
=>
{
let
cmd
=
key
.
dataset
.
cmd
||
""
;
if
(
container
.
dataset
.
isShiftOn
==
"
true
"
&&
key
.
dataset
.
shift_cmd
||
container
.
dataset
.
isCapsLckOn
==
"
true
"
&&
key
.
dataset
.
shift_cmd
)
cmd
=
key
.
dataset
.
shift_cmd
;
if
(
container
.
dataset
.
isCtrlOn
==
"
true
"
&&
key
.
dataset
.
ctrl_cmd
)
cmd
=
key
.
dataset
.
ctrl_cmd
;
if
(
container
.
dataset
.
isAltOn
==
"
true
"
&&
key
.
dataset
.
alt_cmd
)
cmd
=
key
.
dataset
.
alt_cmd
;
if
(
container
.
dataset
.
isFnOn
==
"
true
"
&&
key
.
dataset
.
fn_cmd
)
cmd
=
key
.
dataset
.
fn_cmd
;
if
(
cmd
.
startsWith
(
"
ESCAPED|--
"
))
{
cmd
=
cmd
.
substr
(
11
);
switch
(
cmd
)
{
case
"
CAPSLCK: ON
"
:
container
.
dataset
.
isCapsLckOn
=
"
true
"
;
break
;
case
"
CAPSLCK: OFF
"
:
container
.
dataset
.
isCapsLckOn
=
"
false
"
;
break
;
case
"
FN: ON
"
:
container
.
dataset
.
isFnOn
=
"
true
"
;
break
;
case
"
FN: OFF
"
:
container
.
dataset
.
isFnOn
=
"
false
"
;
break
;
}
}
else
{
term
.
socket
.
send
(
cmd
);
}
};
container
.
childNodes
.
forEach
((
row
)
=>
{
container
.
childNodes
.
forEach
((
row
)
=>
{
row
.
childNodes
.
forEach
((
key
)
=>
{
row
.
childNodes
.
forEach
((
key
)
=>
{
...
@@ -56,12 +85,26 @@ class Keyboard {
...
@@ -56,12 +85,26 @@ class Keyboard {
if
(
key
.
attributes
[
"
class
"
].
value
.
endsWith
(
"
keyboard_enter
"
))
{
if
(
key
.
attributes
[
"
class
"
].
value
.
endsWith
(
"
keyboard_enter
"
))
{
// The enter key is divided in two dom elements, so we bind their animations here
// The enter key is divided in two dom elements, so we bind their animations here
key
.
onmousedown
=
()
=>
{
key
.
onmousedown
=
(
e
)
=>
{
pressKey
(
key
);
key
.
holdTimeout
=
setTimeout
(()
=>
{
key
.
holdInterval
=
setInterval
(()
=>
{
pressKey
(
key
);
},
70
);
},
400
);
enterElements
.
forEach
((
key
)
=>
{
enterElements
.
forEach
((
key
)
=>
{
key
.
setAttribute
(
"
class
"
,
"
keyboard_key active keyboard_enter
"
);
key
.
setAttribute
(
"
class
"
,
"
keyboard_key active keyboard_enter
"
);
});
});
// Keep focus on the terminal
term
.
term
.
focus
();
e
.
preventDefault
();
};
};
key
.
onmouseup
=
()
=>
{
key
.
onmouseup
=
()
=>
{
clearTimeout
(
key
.
holdTimeout
);
clearInterval
(
key
.
holdInterval
);
enterElements
.
forEach
((
key
)
=>
{
enterElements
.
forEach
((
key
)
=>
{
key
.
setAttribute
(
"
class
"
,
"
keyboard_key blink keyboard_enter
"
);
key
.
setAttribute
(
"
class
"
,
"
keyboard_key blink keyboard_enter
"
);
});
});
...
@@ -72,10 +115,48 @@ class Keyboard {
...
@@ -72,10 +115,48 @@ class Keyboard {
},
100
);
},
100
);
};
};
}
else
{
}
else
{
key
.
onmousedown
=
()
=>
{
key
.
onmousedown
=
(
e
)
=>
{
if
(
key
.
dataset
.
cmd
.
startsWith
(
"
ESCAPED|--
"
))
{
let
cmd
=
key
.
dataset
.
cmd
.
substr
(
11
);
if
(
cmd
.
startsWith
(
"
CTRL
"
))
{
container
.
dataset
.
isCtrlOn
=
"
true
"
;
}
if
(
cmd
.
startsWith
(
"
SHIFT
"
))
{
container
.
dataset
.
isShiftOn
=
"
true
"
;
}
if
(
cmd
.
startsWith
(
"
ALT
"
))
{
container
.
dataset
.
isAltOn
=
"
true
"
;
}
}
else
{
key
.
holdTimeout
=
setTimeout
(()
=>
{
key
.
holdInterval
=
setInterval
(()
=>
{
pressKey
(
key
);
},
70
);
},
400
);
}
pressKey
(
key
);
// Keep focus on the terminal
term
.
term
.
focus
();
e
.
preventDefault
();
};
};
key
.
onmouseup
=
()
=>
{
key
.
onmouseup
=
(
e
)
=>
{
if
(
key
.
dataset
.
cmd
.
startsWith
(
"
ESCAPED|--
"
))
{
let
cmd
=
key
.
dataset
.
cmd
.
substr
(
11
);
if
(
cmd
.
startsWith
(
"
CTRL
"
))
{
container
.
dataset
.
isCtrlOn
=
"
false
"
;
}
if
(
cmd
.
startsWith
(
"
SHIFT
"
))
{
container
.
dataset
.
isShiftOn
=
"
false
"
;
}
if
(
cmd
.
startsWith
(
"
ALT
"
))
{
container
.
dataset
.
isAltOn
=
"
false
"
;
}
}
else
{
clearTimeout
(
key
.
holdTimeout
);
clearInterval
(
key
.
holdInterval
);
}
key
.
setAttribute
(
"
class
"
,
"
keyboard_key blink
"
);
key
.
setAttribute
(
"
class
"
,
"
keyboard_key blink
"
);
setTimeout
(()
=>
{
setTimeout
(()
=>
{
key
.
setAttribute
(
"
class
"
,
"
keyboard_key
"
);
key
.
setAttribute
(
"
class
"
,
"
keyboard_key
"
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录