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
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
|
<!--
-- Copyright 2013 The Chromium Authors. All rights reserved.
-- Use of this source code is governed by a BSD-style license that can be
-- found in the LICENSE file.
-->
<polymer-element name="kb-key" extends="kb-key-base"
attributes="image imageSize keyCode keyName shiftModifier weight">
<template>
<style>
:host {
/* TODO(kevers): A regression in the Polymer library broke
* handling of {{}} in CSS rules. Switch back to
* "-webkit-box-flex: {{weight}}" once the regression is fixed
* (https://github.com/Polymer/polymer/issues/270). */
background-color: #3b3b3e;
/* TODO(rsadam): remove when {{}} regression is fixed */
background-image: none;
background-position: center center;
background-repeat: no-repeat;
/* TODO(rsadam): remove when {{}} regression is fixed */
background-size: 50%;
border-radius: 2px;
border-style: solid;
border-width: 1px 0px;
color: #ffffff;
font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
font-weight: 300;
}
::part(key) {
bottom: 0;
height: 1.2em;
left: 0;
margin: auto;
padding-left: 0.7em;
padding-right: 0.7em;
position: absolute;
right: 0;
top: 0;
}
::part(hint) {
color: #313131;
font-size: 70%;
position: absolute;
right: 7%;
top: 5%;
}
:host[invert] ::part(key) {
color: #313131;
}
:host[invert] ::part(hint) {
color: #ffffff;
}
</style>
<div id="key" part="key">
<content></content>
</div>
<div part="hint">{{hintText}}</div>
</template>
<script>
Polymer('kb-key', {
/**
* The background image to display on this key. Does not display an
* image if this is the empty string.
* @type {string}
*/
image: "",
/**
* The background image size to use if an image is specified. The size
* is provided as a string, for example, "50%".
* @type {string}
*/
imageSize: "",
/**
* Key codes have been deprecated in DOM3 key events, but are required
* for legacy web content. The key codes depend on the position of the
* key on the keyboard and is independent of which modifier keys (shift,
* alt, ...) are active.
* @type {number|undefined}
*/
keyCode: undefined,
/**
* Name of the key as defined in the DOM3 specification for key events.
* Like the keyCode, the keyName is independent of the state of the
* modifier keys.
* @type {string|undefined}
*/
keyName: undefined,
/**
* Whether the shift key is pressed when producing the key value.
* @type {boolean}
*/
shiftModifier: false,
/**
* Weighting to use for layout in order to properly size the key.
* Keys with a high weighting are wider than normal keys.
* @type {number}
*/
weight: 100,
/**
* Called when the image attribute changes. This is used to set the
* background image of the key.
* TODO(rsadam): Remove when polymer {{}} syntax regression is fixed.
*/
imageChanged: function() {
if (!this.image)
this.style.backgroundImage = "none";
else
this.style.backgroundImage = "url(images/" + this.image + ".svg)";
},
/**
* Called when the image attribute changes. This is used to set the
* background image of the key.
* TODO(rsadam): Remove when polymer {{}} syntax regression is fixed.
*/
imageSizeChanged: function() {
this.style.backgroundSize = this.imageSize;
},
/**
* Returns a subset of the key attributes.
* @param {string} caller The id of the function that called
* populateDetails.
* @return {Object} Mapping of attributes for the key element.
*/
populateDetails: function(caller) {
var details = this.super([caller]);
details.keyCode = this.keyCode;
details.keyName = this.keyName;
details.shiftModifier = this.shiftModifier;
return details;
},
});
</script>
</polymer-element>
<!-- Special keys -->
<polymer-element name="kb-abc-key" class="symbol dark" char="Invalid"
extends="kb-key" weight="125">
<script>
Polymer('kb-abc-key', {
populateDetails: function(caller) {
var detail = this.super([caller]);
switch (caller) {
case ('down'):
detail.relegateToShift = true;
break;
default:
break;
}
return detail;
}
});
</script>
</polymer-element>
<polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark"
align="right" char="Invalid" extends="kb-key">
<script>
Polymer('kb-hide-keyboard-key', {
/**
* Timer for a long press event which triggers the display of a keyboard
* options menu.
* @type {?Function}
*/
longPressTimer: undefined,
down: function(event) {
this.longPressTimer = this.async(function() {
if (this.longPressTimer) {
clearTimeout(this.longPressTimer);
this.longPressTimer = undefined;
var details = {
left: this.offsetLeft,
top: this.offsetTop,
width: this.clientWidth,
};
this.fire('show-options', details);
}
}, null, LONGPRESS_DELAY_MSEC);
},
up: function(event) {
if (this.longPressTimer) {
clearTimeout(this.longPressTimer);
hideKeyboard();
this.longPressTimer = undefined;
}
}
});
</script>
</polymer-element>
|
