1 <!-- 2 -- Copyright 2013 The Chromium Authors. All rights reserved. 3 -- Use of this source code is governed by a BSD-style license that can be 4 -- found in the LICENSE file. 5 --> 6 7 <polymer-element name="kb-key" extends="kb-key-base" 8 attributes="image imageSize keyCode keyName shiftModifier weight"> 9 <template> 10 <style> 11 :host { 12 /* TODO(kevers): A regression in the Polymer library broke 13 * handling of {{}} in CSS rules. Switch back to 14 * "-webkit-box-flex: {{weight}}" once the regression is fixed 15 * (https://github.com/Polymer/polymer/issues/270). */ 16 -webkit-box-flex: 100; 17 background-color: #3b3b3e; 18 /* TODO(rsadam): remove when {{}} regression is fixed */ 19 background-image: none; 20 background-position: center center; 21 background-repeat: no-repeat; 22 /* TODO(rsadam): remove when {{}} regression is fixed */ 23 background-size: 50%; 24 border-top: 2px solid #4b4b4e; 25 border-radius: 2px; 26 color: #ffffff; 27 display: -webkit-box; 28 font-family: 'Open Sans', 'Noto Sans UI', sans-serif; 29 font-weight: 300; 30 margin-left: 0.25em; 31 position: relative; 32 } 33 34 ::part(key) { 35 bottom: 0; 36 height: 1.2em; 37 left: 0; 38 margin: auto; 39 padding-left: 0.7em; 40 padding-right: 0.7em; 41 position: absolute; 42 right: 0; 43 top: 0; 44 } 45 46 ::part(hint) { 47 color: #7c7c7c; 48 font-size: 70%; 49 position: absolute; 50 right: 7%; 51 top: 5%; 52 } 53 54 :host[invert] ::part(key) { 55 color: #7c7c7c; 56 } 57 58 :host[invert] ::part(hint) { 59 color: #ffffff; 60 } 61 </style> 62 <div id="key" part="key"> 63 <content></content> 64 </div> 65 <div part="hint">{{hintText}}</div> 66 </template> 67 <script> 68 Polymer('kb-key', { 69 /** 70 * The background image to display on this key. Does not display an 71 * image if this is the empty string. 72 * @type {string} 73 */ 74 image: "", 75 76 /** 77 * The background image size to use if an image is specified. The size 78 * is provided as a string, for example, "50%". 79 * @type {string} 80 */ 81 imageSize: "", 82 83 /** 84 * Key codes have been deprecated in DOM3 key events, but are required 85 * for legacy web content. The key codes depend on the position of the 86 * key on the keyboard and is independent of which modifier keys (shift, 87 * alt, ...) are active. 88 * @type {number|undefined} 89 */ 90 keyCode: undefined, 91 92 /** 93 * Name of the key as defined in the DOM3 specification for key events. 94 * Like the keyCode, the keyName is independent of the state of the 95 * modifier keys. 96 * @type {string|undefined} 97 */ 98 keyName: undefined, 99 100 /** 101 * Whether the shift key is pressed when producing the key value. 102 * @type {boolean} 103 */ 104 shiftModifier: false, 105 /** 106 * Weighting to use for layout in order to properly size the key. 107 * Keys with a high weighting are wider than normal keys. 108 * @type {number} 109 */ 110 weight: 100, 111 112 /** 113 * Called when the image attribute changes. This is used to set the 114 * background image of the key. 115 * TODO(rsadam): Remove when polymer {{}} syntax regression is fixed. 116 */ 117 imageChanged: function() { 118 if (!this.image) 119 this.style.backgroundImage = "none"; 120 else 121 this.style.backgroundImage = "url(images/" + this.image + ".svg)"; 122 }, 123 124 /** 125 * Called when the image attribute changes. This is used to set the 126 * background image of the key. 127 * TODO(rsadam): Remove when polymer {{}} syntax regression is fixed. 128 */ 129 imageSizeChanged: function() { 130 this.style.backgroundSize = this.imageSize; 131 }, 132 133 /** 134 * Returns a subset of the key attributes. 135 * @param {string} caller The id of the function that called 136 * populateDetails. 137 * @return {Object} Mapping of attributes for the key element. 138 */ 139 populateDetails: function(caller) { 140 var details = this.super([caller]); 141 details.keyCode = this.keyCode; 142 details.keyName = this.keyName; 143 details.shiftModifier = this.shiftModifier; 144 return details; 145 }, 146 147 /** 148 * Adjusts the CSS rules for rendering the key to reflect the new 149 * weight. The preferred way is to use {{weight}} directly in the CSS 150 * rules; however, this is currently broken in the Polymer library. 151 * TODO(kevers): Cleanup once handling of {{}} in CSS rules is fixed. 152 */ 153 weightChanged: function() { 154 if (this.weight > 0) 155 this.style['webkitBoxFlex'] = this.weight; 156 }, 157 }); 158 </script> 159 </polymer-element> 160 161 <!-- Special keys --> 162 <polymer-element name="kb-abc-key" class="symbol dark" char="Invalid" 163 extends="kb-key" weight="125"> 164 <script> 165 Polymer('kb-abc-key', { 166 populateDetails: function(caller) { 167 var detail = this.super([caller]); 168 switch (caller) { 169 case ('down'): 170 detail.relegateToShift = true; 171 break; 172 default: 173 break; 174 } 175 return detail; 176 } 177 }); 178 </script> 179 </polymer-element> 180 181 <polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark" 182 char="Invalid" extends="kb-key"> 183 <script> 184 Polymer('kb-hide-keyboard-key', { 185 /** 186 * Timer for a long press event which triggers the display of a keyboard 187 * options menu. 188 * @type {?Function} 189 */ 190 longPressTimer: undefined, 191 192 down: function(event) { 193 var self = this; 194 this.longPressTimer = this.asyncMethod(function() { 195 if (self.longPressTimer) { 196 clearTimeout(self.longPressTimer); 197 self.longPressTimer = undefined; 198 var details = { 199 left: this.offsetLeft, 200 top: this.offsetTop, 201 width: this.clientWidth, 202 }; 203 this.fire('show-options', details); 204 } 205 }, null, LONGPRESS_DELAY_MSEC); 206 }, 207 208 /** @override */ 209 ready: function() { 210 this.super(); 211 this.image = "keyboard"; 212 }, 213 214 up: function(event) { 215 if (this.longPressTimer) { 216 clearTimeout(this.longPressTimer); 217 hideKeyboard(); 218 this.longPressTimer = undefined; 219 } 220 } 221 }); 222 </script> 223 </polymer-element> 224
