diff options
Diffstat (limited to 'ui/keyboard/resources')
16 files changed, 356 insertions, 443 deletions
diff --git a/ui/keyboard/resources/elements/kb-accent-container.html b/ui/keyboard/resources/elements/kb-altkey-container.html index 45c5df8..8866652 100644 --- a/ui/keyboard/resources/elements/kb-accent-container.html +++ b/ui/keyboard/resources/elements/kb-altkey-container.html @@ -4,7 +4,7 @@ -- found in the LICENSE file. --> -<polymer-element name="kb-accent-container" attributes="keyset" on-pointerup="up"> +<polymer-element name="kb-altkey-container" attributes="keyset" on-pointerup="up"> <template> <style> @host { @@ -22,7 +22,7 @@ <content select="#{{keyset}}"></content> </template> <script> - Polymer('kb-accent-container', { + Polymer('kb-altkey-container', { resetActiveElement: function() { var activeAccentKeySet = this.querySelector('#' + this.keyset); var offset = activeAccentKeySet.offset; diff --git a/ui/keyboard/resources/elements/kb-altkey-data.html b/ui/keyboard/resources/elements/kb-altkey-data.html new file mode 100644 index 0000000..8f8b9a9 --- /dev/null +++ b/ui/keyboard/resources/elements/kb-altkey-data.html @@ -0,0 +1,119 @@ +<!-- + -- 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-altkey-data" attributes="char list"> +<script> + (function() { + var altKeys = {}; + var idMap = {}; + + function createId(char) { + return 'id' + char.charCodeAt(0); + } + + Polymer('kb-altkey-data', { + + /** + * Retrieves a list of alternative keys to display on a long-press. + * @param {string} char The base character. + * @param {boolean=} opt_force If true, force the creation of a list + * even if empty. Used when constructing a set of alternates for keys + * with superscripts. + * @return {?Object.{id: string, list: string}} + */ + getAltkeys: function(char, opt_force) { + var id = idMap[char]; + if (id) { + return { + 'id': id, + 'keys': altKeys[id] + }; + } + if (opt_force) { + return { + 'id': createId(char), + 'keys': [] + }; + } + }, + + /** + * Registers lists of alternative keys displayed on a long-press. + * @param {Object.<string, Array.<string>>} data Mapping of characters to + * lists of alternatives. + */ + registerAltkeys: function(data) { + for (var key in data) { + var id = idMap[key]; + if (!id) + idMap[key] = id = createId(key); + altKeys[id] = data[key]; + } + }, + + /** + * Creates a list of alternate candidates to display in a popup on a + * long-press. + * @param {string} char The base character. + * @param {number} maxLeftOffset Limits the number of candidates + * displayed to the left of the base character to prevent running + * past the left edge of the keyboard. + * @param {number} maxRightOffset Limits the number of candidates + * displayed to the right of the base character to prvent running + * past the right edge of the keyboard. + * @param {string=} opt_additionalKeys Optional list of additional keys + * to include in the candidates list. + */ + createAltkeySet: function(char, + maxLeftOffset, + maxRightOffset, + opt_additionalKeys) { + var altKeys = this.getAltkeys(char, true /* forced */); + if (altKeys) { + var list = altKeys.keys; + if (opt_additionalKeys) + list = opt_additionalKeys.split('').concat(list); + list = [char].concat(list); + + var set = document.createElement('kb-altkey-set'); + // Candiates are approximately in decreasing order of usage, and are + // arranged in a single row in the popup display. To reduce the + // expected length of the drag gesture for selecting a candidate, + // more likely candidates are placed in the center of the popup, + // which is achieved by alternately appending and prepending + // candiates in the alternatives popup. + var prepend = false; + var leftOffset = 0; + var rightOffset = 0; + for (var i = 0; i < list.length; i++) { + var key = document.createElement('kb-altkey'); + key.textContent = list[i]; + if (prepend) { + set.insertBefore(key, set.firstChild); + leftOffset++; + } else { + set.appendChild(key); + rightOffset++; + } + prepend = !prepend; + // Verify that there is room remaining for an additional character. + if (leftOffset == maxLeftOffset && rightOffset == maxRightOffset) + break; + if (leftOffset == maxLeftOffset) + prepend = false; + else if (rightOffset == maxRightOffset) + prepend = true; + } + set.id = altKeys.id; + set.offset = leftOffset; + return set; + } + }, + + }); + })(); +</script> +</polymer-element> diff --git a/ui/keyboard/resources/elements/kb-accent-set.html b/ui/keyboard/resources/elements/kb-altkey-set.html index a5b0a67..65b7b0b 100644 --- a/ui/keyboard/resources/elements/kb-accent-set.html +++ b/ui/keyboard/resources/elements/kb-altkey-set.html @@ -4,7 +4,7 @@ -- found in the LICENSE file. --> -<polymer-element name="kb-accent-set" attributes="offset"> +<polymer-element name="kb-altkey-set" attributes="offset char"> <template> <style> /* TODO(stevet): Migrate this to main.css using custom pseudo @@ -33,7 +33,7 @@ */ } - content::-webkit-distributed(kb-accent-key) { + content::-webkit-distributed(kb-altkey) { -webkit-flex: 1 auto; background-color: #3b3b3e; border-left: 1px solid rgba(0, 0, 0, 0.15); @@ -43,12 +43,12 @@ font-weight: 100; } - content::-webkit-distributed(kb-accent-key:first-child) { + content::-webkit-distributed(kb-altkey:first-child) { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } - content::-webkit-distributed(kb-accent-key:last-child) { + content::-webkit-distributed(kb-altkey:last-child) { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } @@ -56,8 +56,8 @@ <content select="*"></content> </template> <script> - Polymer('kb-accent-set', { - offset: 0 + Polymer('kb-altkey-set', { + offset: 0, }); </script> </polymer-element> diff --git a/ui/keyboard/resources/elements/kb-accent-key.html b/ui/keyboard/resources/elements/kb-altkey.html index c889e36..42324cd 100644 --- a/ui/keyboard/resources/elements/kb-accent-key.html +++ b/ui/keyboard/resources/elements/kb-altkey.html @@ -4,7 +4,7 @@ -- found in the LICENSE file. --> -<polymer-element name="kb-accent-key" attributes="char" on-pointerover="over" +<polymer-element name="kb-altkey" attributes="char" on-pointerover="over" on-pointerout="out" on-pointerup="up"> <template> <style> @@ -35,7 +35,7 @@ return !(node.compareDocumentPosition(event.relatedTarget) & Node.DOCUMENT_POSITION_CONTAINED_BY); }; - Polymer('kb-accent-key', { + Polymer('kb-altkey', { over: function(event) { if (isRelevantEvent(this, event)) { // Dragging over an accent key is equivalent to pressing on the accent diff --git a/ui/keyboard/resources/elements/kb-key-base.html b/ui/keyboard/resources/elements/kb-key-base.html index 6f45acf..497da30f6 100644 --- a/ui/keyboard/resources/elements/kb-key-base.html +++ b/ui/keyboard/resources/elements/kb-key-base.html @@ -122,7 +122,7 @@ this.longPressTimer = this.asyncMethod(function() { var detail = { char: this.char || this.textContent, - accents: this.accents + superscript: this.superscript }; if (this.keysetRules && this.keysetRules.long != undefined) { detail.toKeyset = this.keysetRules.long[TO_KEYSET - OFFSET]; diff --git a/ui/keyboard/resources/elements/kb-keyset.html b/ui/keyboard/resources/elements/kb-keyset.html index 40de2df..365649d 100644 --- a/ui/keyboard/resources/elements/kb-keyset.html +++ b/ui/keyboard/resources/elements/kb-keyset.html @@ -1,5 +1,5 @@ <!-- - -- Copyright (c) 2013 The Chromium Authors. All rights reserved. + -- 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. --> @@ -17,8 +17,9 @@ } </style> <content select="kb-row"></content> - <content select="kb-accent-container" id="accentContainer" + <content select="kb-altkey-container" id="altkeyContainer" touch-action="none"></content> + <kb-altkey-data id="altkeyMetadata"></kb-altkey-data> </template> <script> Polymer('kb-keyset', { @@ -30,23 +31,46 @@ detail.toKeyset = this.nextKeyset; }, keyLongpress: function(event, detail) { - if (detail.accents) { - var accentContainer = this.$.accentContainer.getDistributedNodes()[0]; - var activeAccentKeySet = accentContainer.querySelector('#' + - detail.accents); - if (!activeAccentKeySet) - return; - accentContainer.keyset = detail.accents; - event.target.classList.remove('active'); - activeAccentKeySet.style.width = event.target.clientWidth * - activeAccentKeySet.childElementCount + 'px'; - activeAccentKeySet.style.height = event.target.clientHeight + 'px'; - activeAccentKeySet.style.top = event.target.offsetTop + 'px'; - var leftOffset = activeAccentKeySet.offset * event.target.clientWidth; - activeAccentKeySet.style.left = event.target.offsetLeft - leftOffset + - 'px'; - accentContainer.hidden = false; + if (!detail.char) + return; + + var altkeyContainer = this.$.altkeyContainer.getDistributedNodes()[0]; + if (!altkeyContainer) + return; + + var altkeyMetadata = this.$.altkeyMetadata; + var altkeys = altkeyMetadata.getAltkeys(detail.char, + !!detail.superscript); + if (!altkeys) + return; + + var id = altkeys.id; + var activeAltKeySet = altkeyContainer.querySelector('#' + id); + if (!activeAltKeySet) { + var keyWidth = event.target.clientWidth; + var leftMargin = event.target.offsetLeft; + var maxLeftOffset = Math.round(leftMargin / keyWidth); + var rightMargin = this.clientWidth - leftMargin - keyWidth; + var maxRightOffset = Math.round(rightMargin / keyWidth); + activeAltKeySet = altkeyMetadata.createAltkeySet(detail.char, + maxLeftOffset, + maxRightOffset, + detail.superscript); + altkeyContainer.appendChild(activeAltKeySet); } + + altkeyContainer.keyset = id; + event.target.classList.remove('active'); + activeAltKeySet.style.width = event.target.clientWidth * + activeAltKeySet.childElementCount + 'px'; + activeAltKeySet.style.height = event.target.clientHeight + 'px'; + activeAltKeySet.style.top = event.target.offsetTop + 'px'; + var leftOffset = activeAltKeySet.offset * event.target.clientWidth; + activeAltKeySet.style.left = event.target.offsetLeft - leftOffset + + 'px'; + var nodes = activeAltKeySet.childNodes; + nodes[activeAltKeySet.offset].classList.add('active'); + altkeyContainer.hidden = false; } }); </script> diff --git a/ui/keyboard/resources/index.html b/ui/keyboard/resources/index.html index 97b147a..ac2982b 100644 --- a/ui/keyboard/resources/index.html +++ b/ui/keyboard/resources/index.html @@ -13,9 +13,17 @@ <script src="polymer.min.js"></script> <script src="api_adapter.js"></script> <script src="voice_input.js"></script> - <link rel="import" href="elements/kb-accent-container.html"> - <link rel="import" href="elements/kb-accent-set.html"> - <link rel="import" href="elements/kb-accent-key.html"> + <script src="main.js"></script> + + <!-- TODO(kevers): Dynamically load alternative keys based on locale. --> + <script src="layouts/latin-accents.js"></script> + <script src="layouts/symbol-altkeys.js"></script> + + <link rel="import" href="elements/kb-altkey-container.html"> + <link rel="import" href="elements/kb-altkey.html"> + <link rel="import" href="elements/kb-altkey-data.html"> + <link rel="import" href="elements/kb-altkey-set.html"> + <link rel="import" href="elements/kb-key-base.html"> <link rel="import" href="elements/kb-key.html"> <link rel="import" href="elements/kb-keyboard.html"> @@ -26,7 +34,6 @@ <link id="dvorak" rel="import" href="layouts/dvorak.html"> <link id="qwerty" rel="import" href="layouts/qwerty.html"> <!--TODO(stevet): Import 'Open Sans' font. --> - <script src="main.js"></script> </head> <body> <kb-keyboard id="keyboard" touch-action="none" layout="qwerty"> diff --git a/ui/keyboard/resources/layouts/dvorak.html b/ui/keyboard/resources/layouts/dvorak.html index 89c4b70..2f90470 100644 --- a/ui/keyboard/resources/layouts/dvorak.html +++ b/ui/keyboard/resources/layouts/dvorak.html @@ -31,8 +31,8 @@ <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key> <kb-layout-selector></kb-layout-selector> </kb-row> - <kb-accent-container hidden> - </kb-accent-container> + <kb-altkey-container hidden> + </kb-altkey-container> </kb-keyset> <kb-keyset id="dvorak-lower" isDefault=true> @@ -57,8 +57,8 @@ <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key> <kb-layout-selector></kb-layout-selector> </kb-row> - <kb-accent-container hidden> - </kb-accent-container> + <kb-altkey-container hidden> + </kb-altkey-container> </kb-keyset> <kb-keyset id="dvorak-symbol"> @@ -83,8 +83,8 @@ <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key> <kb-layout-selector></kb-layout-selector> </kb-row> - <kb-accent-container hidden> - </kb-accent-container> + <kb-altkey-container hidden> + </kb-altkey-container> </kb-keyset> <kb-keyset id="dvorak-more"> diff --git a/ui/keyboard/resources/layouts/latin-accents.js b/ui/keyboard/resources/layouts/latin-accents.js new file mode 100644 index 0000000..e395ea8 --- /dev/null +++ b/ui/keyboard/resources/layouts/latin-accents.js @@ -0,0 +1,81 @@ +// 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. + +var uppercaseAccents = { + 'A': ['\u00C0', // Capital A grave + '\u00C1', // Capital A acute + '\u00C2', // Capital A circumflex + '\u00C3', // Capital A tilde + '\u00C4', // Capital A diaeresis + '\u00C5', // Capital A ring + '\u00C6', // Capital ligature AE + '\u0100'], // Capital A macron + 'C': ['\u00C7'], // Capital C cedilla + 'E': ['\u00C8', // Capital E grave + '\u00C9', // Capital E acute + '\u00CA', // Capital E circumflex + '\u00CB', // Capital E diaeresis + '\u0112'], // Capital E macron + 'I': ['\u00CC', // Capital I grave + '\u00CD', // Capital I acute + '\u00CE', // Capital I circumflex + '\u00CF', // Capital I diaeresis + '\u012A'], // Capital I macron + 'N': ['\u00D1'], // Capital N tilde + 'O': ['\u00D2', // Capital O grave + '\u00D3', // Capital O acute + '\u00D4', // Capital O circumflex + '\u00D5', // Capital O tilde + '\u00D6', // Capital O diaeresis + '\u014C', // Capital O macron + '\u0152'], // Capital ligature OE + 'S': ['\u1E9E'], // Capital sharp S + 'U': ['\u00D9', // Capital U grave + '\u00DA', // Capital U acute + '\u00DB', // Capital U circumflex + '\u00DC', // Capital U diaeresis + '\u016A'], // Capital U macron +}; + +var lowercaseAccents = { + 'a': ['\u00E0', // Lowercase A grave + '\u00E1', // Lowercase A acute + '\u00E2', // Lowercase A circumflex + '\u00E3', // Lowercase A tilde + '\u00E4', // Lowercase A diaeresis + '\u00E5', // Lowercase A ring + '\u00E6', // Lowercase ligature AE + '\u0101'], // Lowercase A macron? + 'c': ['\u00E7'], // Lowercase C cedilla + 'e': ['\u00E8', // Lowercase E grave + '\u00E9', // Lowercase E acute + '\u00EA', // Lowercase E circumflex + '\u00EB', // Lowercase E diaeresis + '\u0113'], // Lowercase E macron + 'i': ['\u00EC', // Lowercase I grave + '\u00ED', // Lowercase I acute + '\u00EE', // Lowercase I circumflex + '\u00EF', // Lowercase I diaeresis + '\u012B'], // Lowercase I macron + 'n': ['\u00F1'], // Lowercase N tilde + 'o': ['\u00F2', // Lowercase O grave + '\u00F3', // Lowercase O acute + '\u00F4', // Lowercase O circumflex + '\u00F5', // Lowercase O tilde + '\u00F6', // Lowercase O diaeresis + '\u00F8', // Lowercase O stroke + '\u0153'], // Lowercase ligature OE + 's': ['\u00DF'], // Lowercase sharp S + 'u': ['\u00F9', // Lowercase U grave + '\u00FA', // Lowercase U acute + '\u00FB', // Lowercase U circumflex + '\u00FC', // Lowercase U diaeresis + '\u016B'], // Lowercase U macron +}; + +document.addEventListener('WebComponentsReady', function() { + var altkeyMetadata = document.createElement('kb-altkey-data'); + altkeyMetadata.registerAltkeys(uppercaseAccents); + altkeyMetadata.registerAltkeys(lowercaseAccents); +}); diff --git a/ui/keyboard/resources/layouts/qwerty.html b/ui/keyboard/resources/layouts/qwerty.html index 1783565..0f19ebf 100644 --- a/ui/keyboard/resources/layouts/qwerty.html +++ b/ui/keyboard/resources/layouts/qwerty.html @@ -33,93 +33,8 @@ <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key> <kb-layout-selector toLayout="dvorak"></kb-layout-selector> </kb-row> - <kb-accent-container hidden> - <kb-accent-set id="Q" offset=1> - <kb-accent-key>1</kb-accent-key> - <kb-accent-key class="active">Q</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="W" offset=1> - <kb-accent-key>2</kb-accent-key> - <kb-accent-key class="active">W</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="E" offset=3> - <kb-accent-key>Ë</kb-accent-key> - <kb-accent-key>É</kb-accent-key> - <kb-accent-key>3</kb-accent-key> - <kb-accent-key class="active">E</kb-accent-key> - <kb-accent-key>È</kb-accent-key> - <kb-accent-key>Ê</kb-accent-key> - <kb-accent-key>Ē</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="R" offset=1> - <kb-accent-key>4</kb-accent-key> - <kb-accent-key class="active">R</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="T" offset=1> - <kb-accent-key>5</kb-accent-key> - <kb-accent-key class="active">T</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="Y" offset=1> - <kb-accent-key>6</kb-accent-key> - <kb-accent-key class="active">Y</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="U" offset=3> - <kb-accent-key>Û</kb-accent-key> - <kb-accent-key>Ú</kb-accent-key> - <kb-accent-key>7</kb-accent-key> - <kb-accent-key class="active">U</kb-accent-key> - <kb-accent-key>Ù</kb-accent-key> - <kb-accent-key>Ü</kb-accent-key> - <kb-accent-key>Ū</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="I" offset=3> - <kb-accent-key>Ï</kb-accent-key> - <kb-accent-key>Í</kb-accent-key> - <kb-accent-key>8</kb-accent-key> - <kb-accent-key class="active">I</kb-accent-key> - <kb-accent-key>Ì</kb-accent-key> - <kb-accent-key>Î</kb-accent-key> - <kb-accent-key>Ī</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="O" offset=5> - <kb-accent-key>Ō</kb-accent-key> - <kb-accent-key>Ö</kb-accent-key> - <kb-accent-key>Ô</kb-accent-key> - <kb-accent-key>Ò</kb-accent-key> - <kb-accent-key>9</kb-accent-key> - <kb-accent-key class="active">O</kb-accent-key> - <kb-accent-key>Ó</kb-accent-key> - <kb-accent-key>Õ</kb-accent-key> - <kb-accent-key>Œ</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="P" offset=1> - <kb-accent-key>0</kb-accent-key> - <kb-accent-key class="active">P</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="A" offset=2> - <kb-accent-key>Â</kb-accent-key> - <kb-accent-key>À</kb-accent-key> - <kb-accent-key class="active">A</kb-accent-key> - <kb-accent-key>Á</kb-accent-key> - <kb-accent-key>Ã</kb-accent-key> - <kb-accent-key>Ä</kb-accent-key> - <kb-accent-key>Å</kb-accent-key> - <kb-accent-key>Æ</kb-accent-key> - <kb-accent-key>Ā</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="S" offset=1> - <kb-accent-key>ẞ</kb-accent-key> - <kb-accent-key class="active">S</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="C" offset=1> - <kb-accent-key>Ç</kb-accent-key> - <kb-accent-key class="active">C</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="N" offset=1> - <kb-accent-key>Ñ</kb-accent-key> - <kb-accent-key class="active">N</kb-accent-key> - </kb-accent-set> - </kb-accent-container> + <kb-altkey-container hidden> + </kb-altkey-container> </kb-keyset> <kb-keyset id="qwerty-lower" isDefault=true> @@ -136,7 +51,7 @@ <kb-row> <kb-shift-key toKeyset="up:upper:lower; long:upper; dbl:upper" weight="1.8" align="left">shift</kb-shift-key> <kb-key-sequence keys="zxcvbnm"></kb-key-sequence> - <kb-key superscript="!" accents="comma">,</kb-key><kb-key superscript="?" accents="period">.</kb-key> + <kb-key superscript="!">,</kb-key><kb-key superscript="?">.</kb-key> <kb-shift-key toKeyset="up:upper:lower; long:upper; dbl:upper" weight="1.8" align="right">shift</kb-shift-key> </kb-row> <kb-row> @@ -145,125 +60,32 @@ <kb-key class="symbol dark" toKeyset="up:symbol" char="Invalid" align="right">#123</kb-key> <kb-layout-selector toLayout="dvorak"></kb-layout-selector> </kb-row> - <kb-accent-container hidden> - <kb-accent-set id="q" offset=1> - <kb-accent-key>1</kb-accent-key> - <kb-accent-key class="active">q</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="w" offset=1> - <kb-accent-key>2</kb-accent-key> - <kb-accent-key class="active">w</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="e" offset=3> - <kb-accent-key>ë</kb-accent-key> - <kb-accent-key>é</kb-accent-key> - <kb-accent-key>3</kb-accent-key> - <kb-accent-key class="active">e</kb-accent-key> - <kb-accent-key>è</kb-accent-key> - <kb-accent-key>ê</kb-accent-key> - <kb-accent-key>ē</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="r" offset=1> - <kb-accent-key>4</kb-accent-key> - <kb-accent-key class="active">r</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="t" offset=1> - <kb-accent-key>5</kb-accent-key> - <kb-accent-key class="active">t</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="y" offset=1> - <kb-accent-key>6</kb-accent-key> - <kb-accent-key class="active">y</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="u" offset=3> - <kb-accent-key>û</kb-accent-key> - <kb-accent-key>ú</kb-accent-key> - <kb-accent-key>7</kb-accent-key> - <kb-accent-key class="active">u</kb-accent-key> - <kb-accent-key>ù</kb-accent-key> - <kb-accent-key>ü</kb-accent-key> - <kb-accent-key>ū</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="i" offset=3> - <kb-accent-key>ï</kb-accent-key> - <kb-accent-key>í</kb-accent-key> - <kb-accent-key>8</kb-accent-key> - <kb-accent-key class="active">i</kb-accent-key> - <kb-accent-key>î</kb-accent-key> - <kb-accent-key>ì</kb-accent-key> - <kb-accent-key>ī</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="o" offset=5> - <kb-accent-key>ø</kb-accent-key> - <kb-accent-key>ö</kb-accent-key> - <kb-accent-key>ô</kb-accent-key> - <kb-accent-key>ò</kb-accent-key> - <kb-accent-key>9</kb-accent-key> - <kb-accent-key class="active">o</kb-accent-key> - <kb-accent-key>ó</kb-accent-key> - <kb-accent-key>õ</kb-accent-key> - <kb-accent-key>œ</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="p" offset=1> - <kb-accent-key>0</kb-accent-key> - <kb-accent-key class="active">p</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="a" offset=2> - <kb-accent-key>â</kb-accent-key> - <kb-accent-key>à</kb-accent-key> - <kb-accent-key class="active">a</kb-accent-key> - <kb-accent-key>á</kb-accent-key> - <kb-accent-key>ã</kb-accent-key> - <kb-accent-key>ä</kb-accent-key> - <kb-accent-key>å</kb-accent-key> - <kb-accent-key>æ</kb-accent-key> - <kb-accent-key>ā</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="s" offset=1> - <kb-accent-key>ß</kb-accent-key> - <kb-accent-key class="active">s</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="c" offset=1> - <kb-accent-key>ç</kb-accent-key> - <kb-accent-key class="active">c</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="n" offset=1> - <kb-accent-key>ñ</kb-accent-key> - <kb-accent-key class="active">n</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="comma" offset=1> - <kb-accent-key>!</kb-accent-key> - <kb-accent-key class="active">,</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="period" offset=1> - <kb-accent-key>?</kb-accent-key> - <kb-accent-key class="active">.</kb-accent-key> - </kb-accent-set> - </kb-accent-container> + <kb-altkey-container hidden> + </kb-altkey-container> </kb-keyset> <kb-keyset id="qwerty-symbol"> <kb-row> <kb-key class="tab dark" char="	" align="left">tab</kb-key> - <kb-key accents="one">1</kb-key><kb-key accents="two">2</kb-key> - <kb-key accents="three">3</kb-key><kb-key accents="four">4</kb-key> - <kb-key accents="five">5</kb-key><kb-key>6</kb-key><kb-key accents="seven">7</kb-key> - <kb-key>8</kb-key><kb-key>9</kb-key><kb-key accents="zero">0</kb-key> + <kb-key>1</kb-key><kb-key>2</kb-key> + <kb-key>3</kb-key><kb-key>4</kb-key> + <kb-key>5</kb-key><kb-key>6</kb-key><kb-key>7</kb-key> + <kb-key>8</kb-key><kb-key>9</kb-key><kb-key>0</kb-key> <kb-key class="backspace dark" char="" repeat align="right">backspace</kb-key> </kb-row> <kb-row> <kb-key class="microphone dark" char="Microphone"></kb-key> - <kb-key>@</kb-key><kb-key>#</kb-key><kb-key accents="dollar">$</kb-key> - <kb-key accents="percent">%</kb-key><kb-key>&</kb-key> - <kb-key accents="star">*</kb-key><kb-key accents="slash">/</kb-key> - <kb-key accents="lparen">(</kb-key><kb-key accents="rparen">)</kb-key> + <kb-key>@</kb-key><kb-key>#</kb-key><kb-key>$</kb-key> + <kb-key>%</kb-key><kb-key>&</kb-key> + <kb-key>*</kb-key><kb-key>/</kb-key> + <kb-key>(</kb-key><kb-key>)</kb-key> <kb-key class='return dark' char="
" align="right">enter</kb-key> </kb-row> <kb-row> <kb-key class="left-more dark" toKeyset="up:more" char="Invalid" align="left">more</kb-key> - <kb-key>:</kb-key><kb-key>;</kb-key><kb-key accents="dash">-</kb-key><kb-key>'</kb-key> - <kb-key accents="doublequote">"</kb-key><kb-key accents="excla">!</kb-key> - <kb-key accents="quest">?</kb-key><kb-key>,</kb-key><kb-key>.</kb-key> + <kb-key>:</kb-key><kb-key>;</kb-key><kb-key>-</kb-key><kb-key>'</kb-key> + <kb-key>"</kb-key><kb-key>!</kb-key> + <kb-key>?</kb-key><kb-key>,</kb-key><kb-key>.</kb-key> <kb-key class="right-more dark" toKeyset="up:more" char="Invalid" align="right">more</kb-key> </kb-row> <kb-row> @@ -272,97 +94,8 @@ <kb-key class="symbol dark" toKeyset="up:lower" char="Invalid" align="right">abc</kb-key> <kb-layout-selector toLayout="dvorak"></kb-layout-selector> </kb-row> - <kb-accent-container hidden> - <kb-accent-set id="one" offset=1> - <kb-accent-key>¹</kb-accent-key> - <kb-accent-key class="active">1</kb-accent-key> - <kb-accent-key>½</kb-accent-key> - <kb-accent-key>⅓</kb-accent-key> - <kb-accent-key>¼</kb-accent-key> - <kb-accent-key>⅛</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="two" offset=1> - <kb-accent-key>²</kb-accent-key> - <kb-accent-key class="active">2</kb-accent-key> - <kb-accent-key>⅔</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="three" offset=1> - <kb-accent-key>³</kb-accent-key> - <kb-accent-key class="active">3</kb-accent-key> - <kb-accent-key>⅜</kb-accent-key> - <kb-accent-key>¾</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="four" offset=1> - <kb-accent-key>⁴</kb-accent-key> - <kb-accent-key class="active">4</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="five" offset=1> - <kb-accent-key>⅝</kb-accent-key> - <kb-accent-key class="active">5</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="seven" offset=1> - <kb-accent-key>⅞</kb-accent-key> - <kb-accent-key class="active">7</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="zero" offset=1> - <kb-accent-key>Ø</kb-accent-key> - <kb-accent-key class="active">0</kb-accent-key> - <kb-accent-key>ⁿ</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="dollar" offset=2> - <kb-accent-key>£</kb-accent-key> - <kb-accent-key>¢</kb-accent-key> - <kb-accent-key class="active">$</kb-accent-key> - <kb-accent-key>€</kb-accent-key> - <kb-accent-key>¥</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="percent" offset=2> - <kb-accent-key>‰</kb-accent-key> - <kb-accent-key class="active">%</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="star" offset=1> - <kb-accent-key>★</kb-accent-key> - <kb-accent-key class="active">*</kb-accent-key> - <kb-accent-key>†</kb-accent-key> - <kb-accent-key>‡</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="slash" offset=1> - <kb-accent-key>\</kb-accent-key> - <kb-accent-key class="active">/</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="doublequote" offset=2> - <kb-accent-key>„</kb-accent-key> - <kb-accent-key>“</kb-accent-key> - <kb-accent-key class="active">"</kb-accent-key> - <kb-accent-key>«</kb-accent-key> - <kb-accent-key>»</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="dash" offset=1> - <kb-accent-key>_</kb-accent-key> - <kb-accent-key class="active">-</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="excla" offset=1> - <kb-accent-key>¡</kb-accent-key> - <kb-accent-key class="active">!</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="quest" offset=1> - <kb-accent-key>¿</kb-accent-key> - <kb-accent-key class="active">?</kb-accent-key> - <kb-accent-key>‽</kb-accent-key><!-- Interrobang --> - </kb-accent-set> - <kb-accent-set id="lparen" offset=2> - <kb-accent-key><</kb-accent-key> - <kb-accent-key>{</kb-accent-key> - <kb-accent-key class="active">(</kb-accent-key> - <kb-accent-key>[</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="rparen" offset=2> - <kb-accent-key>></kb-accent-key> - <kb-accent-key>}</kb-accent-key> - <kb-accent-key class="active">)</kb-accent-key> - <kb-accent-key>]</kb-accent-key> - </kb-accent-set> - </kb-accent-container> + <kb-altkey-container hidden> + </kb-altkey-container> </kb-keyset> <kb-keyset id="qwerty-more"> diff --git a/ui/keyboard/resources/layouts/symbol-altkeys.js b/ui/keyboard/resources/layouts/symbol-altkeys.js new file mode 100644 index 0000000..24dfed8 --- /dev/null +++ b/ui/keyboard/resources/layouts/symbol-altkeys.js @@ -0,0 +1,45 @@ +// 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. + +var symbolAltKeys = { + '1': ['\u00B9', // Superscript 1 + '\u00BD', // Vulgar fraction 1/2 + '\u2153', // Vulgar fraction 1/3 + '\u00BC', // Vulgar fraction 1/4 + '\u215B'], // Vulgar fraction 1/8 + '2': ['\u00B2', // Superscript 2 + '\u2154'], // Vulgar fraction 2/3 + '3': ['\u00B3', // Superscript 3 + '\u00BE', // Vulgar fraction 3/4 + '\u215C'], // Vulgar fraction 3/8 + '4': ['\u2074'], // Superscript 4 + '5': ['\u215D'], // Vulgar fraction 5/8 + '7': ['\u215E'], // Vulgar fraction 7/8 + '0': ['\u00D8', // Empty set + '\u207F'], // Superscript small n + '$': ['\u20AC', // Euro sign + '\u00A5', // Yen sign + '\u00A3', // Pound sign + '\u00A2'], // Cent sign + '%': ['\u2030'], // Per Mille sign + '*': ['\u2605', // Black star + '\u2020', // Dagger + '\u2021'], // Double dagger + '\\': ['/'], + '"': ['\u201C', // Left double quote + '\u201D', // Right double quote + '\u201E', // Double low-9 quotation mark + '\u00AB', // Left double angle quote + '\u00BB'], // Right double angle quote + '-': ['_'], + '!': ['\u00A1'], // Inverted exclamation mark + '?': ['\u00BF'], // Inverted question mark + '(': ['<', '{', '['], + ')': ['>', '}', ']'] +}; + +document.addEventListener('WebComponentsReady', function() { + var altkeyMetadata = document.createElement('kb-altkey-data'); + altkeyMetadata.registerAltkeys(symbolAltKeys); +}); diff --git a/ui/keyboard/resources/layouts/webui_qwerty.html b/ui/keyboard/resources/layouts/webui_qwerty.html index 00bbdc5..4b8f32b 100644 --- a/ui/keyboard/resources/layouts/webui_qwerty.html +++ b/ui/keyboard/resources/layouts/webui_qwerty.html @@ -7,13 +7,13 @@ <template> <kb-keyset id="qwerty-upper"> <kb-row class="top"> - <kb-key>Q</kb-key><kb-key>W</kb-key><kb-key accents="E">E</kb-key><kb-key>R</kb-key> - <kb-key>T</kb-key><kb-key>Y</kb-key><kb-key accents="U">U</kb-key> - <kb-key accents="I">I</kb-key><kb-key accents="O">O</kb-key><kb-key>P</kb-key> + <kb-key>Q</kb-key><kb-key>W</kb-key><kb-key>E</kb-key><kb-key>R</kb-key> + <kb-key>T</kb-key><kb-key>Y</kb-key><kb-key>U</kb-key> + <kb-key>I</kb-key><kb-key>O</kb-key><kb-key>P</kb-key> </kb-row> <kb-row> <div class="half-key-spacer"></div> - <kb-key accents="A">A</kb-key><kb-key>S</kb-key><kb-key>D</kb-key><kb-key>F</kb-key> + <kb-key>A</kb-key><kb-key>S</kb-key><kb-key>D</kb-key><kb-key>F</kb-key> <kb-key>G</kb-key><kb-key>H</kb-key><kb-key>J</kb-key><kb-key>K</kb-key> <kb-key>L</kb-key> <div class="half-key-spacer"></div> @@ -32,68 +32,19 @@ <kb-key class="dark">.</kb-key> <kb-key class="return dark" char="�A;">enter</kb-key> </kb-row> - <kb-accent-container hidden> - <kb-accent-set id="E" offset=2> - <kb-accent-key>É</kb-accent-key> - <kb-accent-key>3</kb-accent-key> - <kb-accent-key class="active">E</kb-accent-key> - <kb-accent-key>È</kb-accent-key> - <kb-accent-key>Ê</kb-accent-key> - <kb-accent-key>Ë</kb-accent-key> - <kb-accent-key>Ē</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="U" offset=3> - <kb-accent-key>Û</kb-accent-key> - <kb-accent-key>Ú</kb-accent-key> - <kb-accent-key>7</kb-accent-key> - <kb-accent-key class="active">U</kb-accent-key> - <kb-accent-key>Ù</kb-accent-key> - <kb-accent-key>Ü</kb-accent-key> - <kb-accent-key>Ū</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="I" offset=4> - <kb-accent-key>Ï</kb-accent-key> - <kb-accent-key>Í</kb-accent-key> - <kb-accent-key>Ì</kb-accent-key> - <kb-accent-key>8</kb-accent-key> - <kb-accent-key class="active">I</kb-accent-key> - <kb-accent-key>Î</kb-accent-key> - <kb-accent-key>Ī</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="O" offset=7> - <kb-accent-key>Œ</kb-accent-key> - <kb-accent-key>Ō</kb-accent-key> - <kb-accent-key>Ô</kb-accent-key> - <kb-accent-key>Ò</kb-accent-key> - <kb-accent-key>Ó</kb-accent-key> - <kb-accent-key>Õ</kb-accent-key> - <kb-accent-key>9</kb-accent-key> - <kb-accent-key class="active">O</kb-accent-key> - <kb-accent-key>Ö</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="A" offset=0> - <kb-accent-key class="active">A</kb-accent-key> - <kb-accent-key>Á</kb-accent-key> - <kb-accent-key>À</kb-accent-key> - <kb-accent-key>Â</kb-accent-key> - <kb-accent-key>Ã</kb-accent-key> - <kb-accent-key>Ä</kb-accent-key> - <kb-accent-key>Å</kb-accent-key> - <kb-accent-key>Æ</kb-accent-key> - <kb-accent-key>Ā</kb-accent-key> - </kb-accent-set> - </kb-accent-container> + <kb-altkey-container hidden> + </kb-altkey-container> </kb-keyset> <kb-keyset id="qwerty-lower" isDefault=true> <kb-row class="top"> - <kb-key>q</kb-key><kb-key>w</kb-key><kb-key accents="e">e</kb-key><kb-key>r</kb-key> - <kb-key>t</kb-key><kb-key>y</kb-key><kb-key accents="u">u</kb-key> - <kb-key accents="i">i</kb-key><kb-key accents="o">o</kb-key><kb-key>p</kb-key> + <kb-key>q</kb-key><kb-key>w</kb-key><kb-key>e</kb-key><kb-key>r</kb-key> + <kb-key>t</kb-key><kb-key>y</kb-key><kb-key>u</kb-key> + <kb-key>i</kb-key><kb-key>o</kb-key><kb-key>p</kb-key> </kb-row> <kb-row> <div class="half-key-spacer"></div> - <kb-key accents="a">a</kb-key><kb-key>s</kb-key><kb-key>d</kb-key><kb-key>f</kb-key> + <kb-key>a</kb-key><kb-key>s</kb-key><kb-key>d</kb-key><kb-key>f</kb-key> <kb-key>g</kb-key><kb-key>h</kb-key><kb-key>j</kb-key><kb-key>k</kb-key> <kb-key>l</kb-key> <div class="half-key-spacer"></div> @@ -112,57 +63,8 @@ <kb-key class="dark">.</kb-key> <kb-key class='return dark' char="
">enter</kb-key> </kb-row> - <kb-accent-container hidden> - <kb-accent-set id="e" offset=2> - <kb-accent-key>è</kb-accent-key> - <kb-accent-key>é</kb-accent-key> - <kb-accent-key class="active">e</kb-accent-key> - <kb-accent-key>3</kb-accent-key> - <kb-accent-key>ê</kb-accent-key> - <kb-accent-key>ë</kb-accent-key> - <kb-accent-key>ē</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="u" offset=3> - <kb-accent-key>ù</kb-accent-key> - <kb-accent-key>ú</kb-accent-key> - <kb-accent-key>7</kb-accent-key> - <kb-accent-key class="active">u</kb-accent-key> - <kb-accent-key>û</kb-accent-key> - <kb-accent-key>ü</kb-accent-key> - <kb-accent-key>ū</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="i" offset=4> - <kb-accent-key>î</kb-accent-key> - <kb-accent-key>í</kb-accent-key> - <kb-accent-key>ì</kb-accent-key> - <kb-accent-key>8</kb-accent-key> - <kb-accent-key class="active">i</kb-accent-key> - <kb-accent-key>ï</kb-accent-key> - <kb-accent-key>ī</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="o" offset=7> - <kb-accent-key>ø</kb-accent-key> - <kb-accent-key>œ</kb-accent-key> - <kb-accent-key>ö</kb-accent-key> - <kb-accent-key>ô</kb-accent-key> - <kb-accent-key>ò</kb-accent-key> - <kb-accent-key>õ</kb-accent-key> - <kb-accent-key>9</kb-accent-key> - <kb-accent-key class="active">o</kb-accent-key> - <kb-accent-key>ó</kb-accent-key> - </kb-accent-set> - <kb-accent-set id="a" offset=0> - <kb-accent-key class="active">a</kb-accent-key> - <kb-accent-key>à</kb-accent-key> - <kb-accent-key>á</kb-accent-key> - <kb-accent-key>â</kb-accent-key> - <kb-accent-key>ã</kb-accent-key> - <kb-accent-key>ä</kb-accent-key> - <kb-accent-key>å</kb-accent-key> - <kb-accent-key>æ</kb-accent-key> - <kb-accent-key>ā</kb-accent-key> - </kb-accent-set> - </kb-accent-container> + <kb-altkey-container hidden> + </kb-altkey-container> </kb-keyset> <kb-keyset id="qwerty-symbol"> diff --git a/ui/keyboard/resources/main.css b/ui/keyboard/resources/main.css index f76268c..149384f 100644 --- a/ui/keyboard/resources/main.css +++ b/ui/keyboard/resources/main.css @@ -76,7 +76,7 @@ kb-key.dark { } /* TODO(stevet): We can probably share most of this with kb-key::x-key. */ -kb-accent-key::x-key { +kb-altkey::x-key { bottom: 0; height: 1.2em; left: 0; diff --git a/ui/keyboard/resources/main.js b/ui/keyboard/resources/main.js index 9e1f00c..0abc0f1 100644 --- a/ui/keyboard/resources/main.js +++ b/ui/keyboard/resources/main.js @@ -1,4 +1,4 @@ -// Copyright (c) 2013 The Chromium Authors. All rights reserved. +// 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. @@ -27,7 +27,7 @@ function importHTML(content) { }); } return dom; -}; +} /** * Replace all kb-key-sequence elements with generated kb-key elements. @@ -41,7 +41,7 @@ function expandHTML(importedContent) { element.parentNode.replaceChild(generatedDom, element); }); } -}; +} /** * Flatten the keysets which represents a keyboard layout. It has two steps: @@ -54,7 +54,7 @@ function flattenKeysets(content) { var importedContent = importHTML(content); expandHTML(importedContent); return importedContent; -}; +} addEventListener('resize', onResize); diff --git a/ui/keyboard/resources/webui/main.css b/ui/keyboard/resources/webui/main.css index fe674c8..c2faba0 100644 --- a/ui/keyboard/resources/webui/main.css +++ b/ui/keyboard/resources/webui/main.css @@ -70,7 +70,7 @@ kb-key.dark { border-top: 2px solid #3a3a3c; } -kb-accent-key::x-key { +kb-altkey::x-key { bottom: 0; height: 1.2em; left: 0; diff --git a/ui/keyboard/resources/webui_index.html b/ui/keyboard/resources/webui_index.html index 47e1378..cc3566c 100644 --- a/ui/keyboard/resources/webui_index.html +++ b/ui/keyboard/resources/webui_index.html @@ -20,9 +20,10 @@ <script src="polymer.min.js"></script> <script src="api_adapter.js"></script> <script src="voice_input.js"></script> - <link rel="import" href="elements/kb-accent-container.html"> - <link rel="import" href="elements/kb-accent-set.html"> - <link rel="import" href="elements/kb-accent-key.html"> + <link rel="import" href="elements/kb-altkey.html"> + <link rel="import" href="elements/kb-altkey-container.html"> + <link rel="import" href="elements/kb-altkey-data.html"> + <link rel="import" href="elements/kb-altkey-set.html"> <link rel="import" href="elements/kb-key-base.html"> <link rel="import" href="elements/kb-key.html"> <link rel="import" href="elements/kb-keyboard.html"> @@ -31,6 +32,7 @@ <link id="qwerty" rel="import" href="layouts/qwerty.html"> <!--TODO(stevet): Import 'Open Sans' font. --> <script src="main.js"></script> + <script src="layouts/latin-accents.js"></script> </head> <body> <kb-keyboard id="keyboard" touch-action="none" layout="qwerty"> |