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

Side by Side Diff: ui/keyboard/resources/main.js

Issue 150783002: Aligns the Q A Z keys on the a11y keyboard. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix nits. Created 6 years, 10 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
« no previous file with comments | « ui/keyboard/resources/layouts/system-qwerty.html ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright 2013 The Chromium Authors. All rights reserved. 1 // Copyright 2013 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 (function(exports) { 4 (function(exports) {
5 /** 5 /**
6 * Alignment options for a keyset. 6 * Alignment options for a keyset.
7 * @param {Object=} opt_keyset The keyset to calculate the dimensions for. 7 * @param {Object=} opt_keyset The keyset to calculate the dimensions for.
8 * Defaults to the current active keyset. 8 * Defaults to the current active keyset.
9 */ 9 */
10 var AlignmentOptions = function(opt_keyset) { 10 var AlignmentOptions = function(opt_keyset) {
(...skipping 290 matching lines...) Expand 10 before | Expand all | Expand 10 after
301 * @param {number} width The total extraneous width to distribute. 301 * @param {number} width The total extraneous width to distribute.
302 * @param {number} keyHeight The height of each key. 302 * @param {number} keyHeight The height of each key.
303 * @param {number} yOffset The y-coordinate of the top edge of the row. 303 * @param {number} yOffset The y-coordinate of the top edge of the row.
304 */ 304 */
305 function redistribute(allKeys, pitch, xOffset, width, keyHeight, yOffset) { 305 function redistribute(allKeys, pitch, xOffset, width, keyHeight, yOffset) {
306 var weight = 0; 306 var weight = 0;
307 for (var i = 0; i < allKeys.length; i++) { 307 for (var i = 0; i < allKeys.length; i++) {
308 weight += allKeys[i].weight; 308 weight += allKeys[i].weight;
309 } 309 }
310 var availableWidth = width - (allKeys.length - 1) * pitch; 310 var availableWidth = width - (allKeys.length - 1) * pitch;
311 var pixelsPerWeight = width / weight; 311 var pixelsPerWeight = availableWidth / weight;
312 for (var i = 0; i < allKeys.length; i++) { 312 for (var i = 0; i < allKeys.length; i++) {
313 var keyWidth = Math.floor(allKeys[i].weight * pixelsPerWeight); 313 var keyWidth = Math.floor(allKeys[i].weight * pixelsPerWeight);
314 if (i == allKeys.length -1) { 314 if (i == allKeys.length -1) {
315 keyWidth = availableWidth; 315 keyWidth = availableWidth;
316 } 316 }
317 updateKey(allKeys[i], keyWidth, keyHeight, xOffset, yOffset) 317 updateKey(allKeys[i], keyWidth, keyHeight, xOffset, yOffset)
318 availableWidth -= keyWidth; 318 availableWidth -= keyWidth;
319 xOffset += keyWidth + pitch; 319 xOffset += keyWidth + pitch;
320 } 320 }
321 } 321 }
(...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after
408 } 408 }
409 409
410 /** 410 /**
411 * Realigns a given row based on the parameters provided. 411 * Realigns a given row based on the parameters provided.
412 * @param {!kb-row} row The row to realign. 412 * @param {!kb-row} row The row to realign.
413 * @param {!AlignmentOptions} params The parameters used to align the keyset. 413 * @param {!AlignmentOptions} params The parameters used to align the keyset.
414 * @param {number} heightOffset The offset caused by rows above it. 414 * @param {number} heightOffset The offset caused by rows above it.
415 */ 415 */
416 function realignRow(row, params, heightOffset) { 416 function realignRow(row, params, heightOffset) {
417 var all = row.children; 417 var all = row.children;
418 var stretch = []; 418 var nStretch = 0;
419 var stretchWeightSum = 0; 419 var stretchWeightSum = 0;
420 var allSum = 0; 420 var allSum = 0;
421 421 // Keeps track of where to distribute pixels caused by round off errors.
422 var deltaWidth = [];
422 for (var i = 0; i < all.length; i++) { 423 for (var i = 0; i < all.length; i++) {
424 deltaWidth.push(0)
423 var key = all[i]; 425 var key = all[i];
424 if (key.weight == DEFAULT_KEY_WEIGHT_X){ 426 if (key.weight == DEFAULT_KEY_WEIGHT_X){
425 allSum += params.keyWidth; 427 allSum += params.keyWidth;
426 continue; 428 continue;
427 } 429 }
428 stretch.push(key) 430 nStretch++;
429 var width = 431 var width =
430 Math.floor((params.keyWidth/DEFAULT_KEY_WEIGHT_X) * key.weight); 432 Math.floor((params.keyWidth/DEFAULT_KEY_WEIGHT_X) * key.weight);
431 allSum += width; 433 allSum += width;
432 stretchWeightSum += key.weight; 434 stretchWeightSum += key.weight;
433 } 435 }
434 var nStretch = stretch.length;
435 var nRegular = all.length - nStretch; 436 var nRegular = all.length - nStretch;
436 // Extra space. 437 // Extra space.
437 var extra = params.availableWidth - 438 var extra = params.availableWidth -
438 allSum - 439 allSum -
439 (params.pitchX * (all.length -1)); 440 (params.pitchX * (all.length -1));
440 var xOffset = params.offsetLeft; 441 var xOffset = params.offsetLeft;
442
441 var alignment = row.align; 443 var alignment = row.align;
442 switch (alignment) { 444 switch (alignment) {
443 case RowAlignment.STRETCH: 445 case RowAlignment.STRETCH:
444 var extraPerWeight = extra/stretchWeightSum; 446 var extraPerWeight = extra/stretchWeightSum;
445 for (var i = 0; i < stretch.length; i++) { 447 for (var i = 0; i < all.length; i++) {
446 var bonus = Math.floor(stretch[i].weight * extraPerWeight); 448 if (all[i].weight == DEFAULT_KEY_WEIGHT_X)
447 extra -= bonus; 449 continue;
450 var delta = Math.floor(all[i].weight * extraPerWeight);
451 extra -= delta;
452 deltaWidth[i] = delta;
448 // All left-over pixels assigned to right most key. 453 // All left-over pixels assigned to right most key.
449 if (i == (stretch.length - 1)) 454 nStretch--;
450 stretch[i].setAttribute('bonus', bonus + extra); 455 if (nStretch == 0)
451 else 456 deltaWidth[i] += extra;
452 stretch[i].setAttribute('bonus', bonus);
453 } 457 }
454 break; 458 break;
455 case RowAlignment.CENTER: 459 case RowAlignment.CENTER:
456 xOffset += Math.floor(extra/2) 460 xOffset += Math.floor(extra/2)
457 break; 461 break;
458 case RowAlignment.JUSTIFY: 462 case RowAlignment.RIGHT:
459 xOffset += extra; 463 xOffset += extra;
460 break; 464 break;
465 case RowAlignment.STRETCHRIGHT:
466 deltaWidth[all.length - 1] = extra;
461 default: 467 default:
462 break; 468 break;
463 }; 469 };
464 470
465 var yOffset = params.offsetTop + heightOffset; 471 var yOffset = params.offsetTop + heightOffset;
466 var left = xOffset; 472 var left = xOffset;
467 for (var i = 0; i < all.length; i++) { 473 for (var i = 0; i < all.length; i++) {
468 var key = all[i]; 474 var key = all[i];
469 var width = params.keyWidth; 475 var width = params.keyWidth;
470 if (key.weight != DEFAULT_KEY_WEIGHT_X) { 476 if (key.weight != DEFAULT_KEY_WEIGHT_X)
471 width = Math.floor((params.keyWidth/DEFAULT_KEY_WEIGHT_X) * key.weight) 477 width = Math.floor((params.keyWidth/DEFAULT_KEY_WEIGHT_X) * key.weight)
472 var bonus = key.getAttribute('bonus') 478 width += deltaWidth[i];
473 if (bonus)
474 width += parseInt(bonus)
475 }
476 updateKey(key, width, params.keyHeight, left, yOffset) 479 updateKey(key, width, params.keyHeight, left, yOffset)
477 left += (width + params.pitchX); 480 left += (width + params.pitchX);
478 } 481 }
479 } 482 }
480 483
481 /** 484 /**
482 * Realigns the keysets in all layouts of the keyboard. 485 * Realigns the keysets in all layouts of the keyboard.
483 */ 486 */
484 function realignAll() { 487 function realignAll() {
485 var keyboard = $('keyboard'); 488 var keyboard = $('keyboard');
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
518 keyboard.stale = false; 521 keyboard.stale = false;
519 } 522 }
520 523
521 /* 524 /*
522 * Realigns a given keyset. 525 * Realigns a given keyset.
523 * @param {Object} keyset The keyset to realign. 526 * @param {Object} keyset The keyset to realign.
524 * @param {!AlignmentOptions} params The parameters used to align the keyset. 527 * @param {!AlignmentOptions} params The parameters used to align the keyset.
525 */ 528 */
526 function realignKeyset(keyset, params) { 529 function realignKeyset(keyset, params) {
527 var rows = keyset.querySelectorAll('kb-row').array(); 530 var rows = keyset.querySelectorAll('kb-row').array();
531 var maxSize = getKeyboardBounds();
532 var height = (maxSize.width > ASPECT_RATIO * maxSize.height) ?
533 maxSize.height : Math.floor(maxSize.width / ASPECT_RATIO);
534 keyset.style.fontSize = (height / FONT_SIZE_RATIO / rows.length) + 'px';
535
528 var heightOffset = 0; 536 var heightOffset = 0;
529 for (var i = 0; i < rows.length; i++) { 537 for (var i = 0; i < rows.length; i++) {
530 var row = rows[i]; 538 var row = rows[i];
531 if (row.querySelector('.space') && (i > 1)) { 539 if (row.querySelector('.space') && (i > 1)) {
532 realignSpacebarRow(row, rows[i-1], params, heightOffset) 540 realignSpacebarRow(row, rows[i-1], params, heightOffset)
533 } else { 541 } else {
534 realignRow(row, params, heightOffset); 542 realignRow(row, params, heightOffset);
535 } 543 }
536 heightOffset += (params.keyHeight + params.pitchY); 544 heightOffset += (params.keyHeight + params.pitchY);
537 } 545 }
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after
587 var importedContent = importHTML(content); 595 var importedContent = importHTML(content);
588 expandHTML(importedContent); 596 expandHTML(importedContent);
589 return importedContent; 597 return importedContent;
590 } 598 }
591 599
592 // Prevents all default actions of touch. Keyboard should use its own gesture 600 // Prevents all default actions of touch. Keyboard should use its own gesture
593 // recognizer. 601 // recognizer.
594 addEventListener('touchstart', function(e) { e.preventDefault() }); 602 addEventListener('touchstart', function(e) { e.preventDefault() });
595 addEventListener('touchend', function(e) { e.preventDefault() }); 603 addEventListener('touchend', function(e) { e.preventDefault() });
596 addEventListener('touchmove', function(e) { e.preventDefault() }); 604 addEventListener('touchmove', function(e) { e.preventDefault() });
OLDNEW
« no previous file with comments | « ui/keyboard/resources/layouts/system-qwerty.html ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698