Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(436)

Side by Side Diff: chrome/browser/resources/keyboard/main.js

Issue 7058046: Adjust virtual keyboard size base on input method candidates. (Closed) Base URL: http://git.chromium.org/git/chromium.git@trunk
Patch Set: Rebase on trunk Created 9 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * @fileoverview A simple, English virtual keyboard implementation. 6 * @fileoverview A simple, English virtual keyboard implementation.
7 */ 7 */
8 8
9 var KEY_MODE = 'key'; 9 var KEY_MODE = 'key';
10 var SHIFT_MODE = 'shift'; 10 var SHIFT_MODE = 'shift';
(...skipping 445 matching lines...) Expand 10 before | Expand all | Expand 10 after
456 for (var i = 0; i < MODES.length; ++i) { 456 for (var i = 0; i < MODES.length; ++i) {
457 var mode = MODES[i]; 457 var mode = MODES[i];
458 this.modeElements_[mode] = document.createElement('div'); 458 this.modeElements_[mode] = document.createElement('div');
459 this.modeElements_[mode].style.display = 'none'; 459 this.modeElements_[mode].style.display = 'none';
460 this.element_.appendChild(this.modeElements_[mode]); 460 this.element_.appendChild(this.modeElements_[mode]);
461 } 461 }
462 462
463 for (var j = 0; j < this.keys_.length; ++j) { 463 for (var j = 0; j < this.keys_.length; ++j) {
464 var key = this.keys_[j]; 464 var key = this.keys_[j];
465 for (var i = 0; i < MODES.length; ++i) { 465 for (var i = 0; i < MODES.length; ++i) {
466 this.modeElements_[MODES[i]].appendChild(key.makeDOM(MODES[i]), height); 466 this.modeElements_[MODES[i]].appendChild(key.makeDOM(MODES[i], height));
467 } 467 }
468 } 468 }
469 469
470 for (var i = 0; i < MODES.length; ++i) { 470 for (var i = 0; i < MODES.length; ++i) {
471 var clearingDiv = document.createElement('div'); 471 var clearingDiv = document.createElement('div');
472 clearingDiv.style.clear = 'both'; 472 clearingDiv.style.clear = 'both';
473 this.modeElements_[MODES[i]].appendChild(clearingDiv); 473 this.modeElements_[MODES[i]].appendChild(clearingDiv);
474 } 474 }
475 475
476 for (var i = 0; i < this.keys_.length; ++i) { 476 for (var i = 0; i < this.keys_.length; ++i) {
(...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after
571 * @type {Array.<Row>} 571 * @type {Array.<Row>}
572 */ 572 */
573 var allRows = []; // Populated during start() 573 var allRows = []; // Populated during start()
574 574
575 /** 575 /**
576 * Calculate the height of the row based on the size of the page. 576 * Calculate the height of the row based on the size of the page.
577 * @return {number} The height of each row, in pixels. 577 * @return {number} The height of each row, in pixels.
578 */ 578 */
579 function getRowHeight() { 579 function getRowHeight() {
580 var x = window.innerWidth; 580 var x = window.innerWidth;
581 var y = window.innerHeight - (imeui ? IME_HEIGHT - 2 : 0); 581 var y = window.innerHeight - ((imeui && imeui.visible) ? IME_HEIGHT : 0);
582 return (x > kKeyboardAspect * y) ? 582 return (x > kKeyboardAspect * y) ?
583 (height = Math.floor(y / 4)) : 583 (height = Math.floor(y / 4)) :
584 (height = Math.floor(x / (kKeyboardAspect * 4))); 584 (height = Math.floor(x / (kKeyboardAspect * 4)));
585 } 585 }
586 586
587 /** 587 /**
588 * Set the keyboard mode. 588 * Set the keyboard mode.
589 * @param {string} mode The new mode. 589 * @param {string} mode The new mode.
590 * @return {void} 590 * @return {void}
591 */ 591 */
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
640 * Create a closure for the sendKey function. 640 * Create a closure for the sendKey function.
641 * @param {string} key The parameter to sendKey. 641 * @param {string} key The parameter to sendKey.
642 * @return {void} 642 * @return {void}
643 */ 643 */
644 function sendKeyFunction(key) { 644 function sendKeyFunction(key) {
645 return function() { 645 return function() {
646 sendKey(key); 646 sendKey(key);
647 } 647 }
648 } 648 }
649 649
650 var oldHeight = 0;
651 var oldX = 0;
650 /** 652 /**
651 * Resize the keyboard according to the new window size. 653 * Resize the keyboard according to the new window size.
652 * @return {void} 654 * @return {void}
653 */ 655 */
654 window.onresize = function() { 656 window.onresize = function() {
655 var height = getRowHeight(); 657 var height = getRowHeight();
656 var newX = document.documentElement.clientWidth; 658 var newX = document.documentElement.clientWidth;
657 659
658 // All rows should have the same aspect, so just use the first one 660 if (newX != oldX || height != oldHeight) {
659 var totalWidth = Math.floor(height * allRows[0].aspect); 661 // All rows should have the same aspect, so just use the first one
660 var leftPadding = Math.floor((newX - totalWidth) / 2); 662 var totalWidth = Math.floor(height * allRows[0].aspect);
661 document.getElementById('b').style.paddingLeft = leftPadding + 'px'; 663 var leftPadding = Math.floor((newX - totalWidth) / 2);
664 document.getElementById('b').style.paddingLeft = leftPadding + 'px';
665 }
662 666
663 for (var i = 0; i < allRows.length; ++i) { 667 if (height != oldHeight) {
664 allRows[i].resize(height); 668 for (var i = 0; i < allRows.length; ++i) {
669 allRows[i].resize(height);
670 }
665 } 671 }
666 672
667 updateIme(); 673 updateIme();
674
675 oldHeight = height;
676 oldX = newX;
668 } 677 }
669 678
670 /** 679 /**
671 * Init the keyboard. 680 * Init the keyboard.
672 * @return {void} 681 * @return {void}
673 */ 682 */
674 window.onload = function() { 683 window.onload = function() {
675 var body = document.getElementById('b'); 684 var body = document.getElementById('b');
676 685
677 initIme(body); 686 initIme(body);
678 687
679 for (var i = 0; i < KEYS.length; ++i) { 688 for (var i = 0; i < KEYS.length; ++i) {
680 allRows.push(new Row(i, KEYS[i])); 689 allRows.push(new Row(i, KEYS[i]));
681 } 690 }
682 691
692 height = getRowHeight();
683 for (var i = 0; i < allRows.length; ++i) { 693 for (var i = 0; i < allRows.length; ++i) {
684 body.appendChild(allRows[i].makeDOM(getRowHeight())); 694 body.appendChild(allRows[i].makeDOM(height));
685 allRows[i].showMode(KEY_MODE); 695 allRows[i].showMode(KEY_MODE);
686 } 696 }
687 697 oldHeight = height;
688 window.onresize(); 698 window.onresize();
689 699
690 // Restore the keyboard to the default state when it is hidden. 700 // Restore the keyboard to the default state when it is hidden.
691 // Ref: dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html 701 // Ref: dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html
692 document.addEventListener("webkitvisibilitychange", function() { 702 document.addEventListener("webkitvisibilitychange", function() {
693 if (document.webkitHidden) { 703 if (document.webkitHidden) {
694 currentMode = KEY_MODE; 704 currentMode = KEY_MODE;
695 setMode(currentMode); 705 setMode(currentMode);
696 } 706 }
697 }, false); 707 }, false);
698 } 708 }
699 // TODO(bryeung): would be nice to leave less gutter (without causing 709 // TODO(bryeung): would be nice to leave less gutter (without causing
700 // rendering issues with floated divs wrapping at some sizes). 710 // rendering issues with floated divs wrapping at some sizes).
OLDNEW
« no previous file with comments | « chrome/browser/resources/keyboard/main.css ('k') | chrome/browser/ui/touch/frame/touch_browser_frame_view.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698