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

Side by Side Diff: chrome/browser/resources/options/inline_editable_list.js

Issue 2939273002: DO NOT SUBMIT: what chrome/browser/resources/ could eventually look like with clang-format (Closed)
Patch Set: Created 3 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
OLDNEW
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 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 cr.define('options', function() { 5 cr.define('options', function() {
6 /** @const */ var DeletableItem = options.DeletableItem; 6 /** @const */ var DeletableItem = options.DeletableItem;
7 /** @const */ var DeletableItemList = options.DeletableItemList; 7 /** @const */ var DeletableItemList = options.DeletableItemList;
8 8
9 /** 9 /**
10 * Creates a new list item with support for inline editing. 10 * Creates a new list item with support for inline editing.
(...skipping 304 matching lines...) Expand 10 before | Expand all | Expand 10 after
315 }, 315 },
316 316
317 /** 317 /**
318 * Returns a div containing an <input>, as well as static text if 318 * Returns a div containing an <input>, as well as static text if
319 * isPlaceholder is not true. 319 * isPlaceholder is not true.
320 * @param {string} text The text of the cell. 320 * @param {string} text The text of the cell.
321 * @return {HTMLElement} The HTML element for the cell. 321 * @return {HTMLElement} The HTML element for the cell.
322 * @private 322 * @private
323 */ 323 */
324 createEditableTextCell: function(text) { 324 createEditableTextCell: function(text) {
325 var container = /** @type {HTMLElement} */( 325 var container =
326 this.ownerDocument.createElement('div')); 326 /** @type {HTMLElement} */ (this.ownerDocument.createElement('div'));
327 var textEl = null; 327 var textEl = null;
328 if (!this.isPlaceholder) { 328 if (!this.isPlaceholder) {
329 textEl = this.ownerDocument.createElement('div'); 329 textEl = this.ownerDocument.createElement('div');
330 textEl.className = 'static-text overruleable'; 330 textEl.className = 'static-text overruleable';
331 textEl.textContent = text; 331 textEl.textContent = text;
332 textEl.setAttribute('displaymode', 'static'); 332 textEl.setAttribute('displaymode', 'static');
333 container.appendChild(textEl); 333 container.appendChild(textEl);
334 } 334 }
335 335
336 var inputEl = this.ownerDocument.createElement('input'); 336 var inputEl = this.ownerDocument.createElement('input');
(...skipping 26 matching lines...) Expand all
363 */ 363 */
364 addEditField: function(control, staticElement) { 364 addEditField: function(control, staticElement) {
365 control.staticVersion = staticElement; 365 control.staticVersion = staticElement;
366 if (this.editable) 366 if (this.editable)
367 control.tabIndex = -1; 367 control.tabIndex = -1;
368 368
369 if (control.staticVersion) { 369 if (control.staticVersion) {
370 if (this.editable) 370 if (this.editable)
371 control.staticVersion.tabIndex = -1; 371 control.staticVersion.tabIndex = -1;
372 control.staticVersion.editableVersion = control; 372 control.staticVersion.editableVersion = control;
373 control.staticVersion.addEventListener('focus', 373 control.staticVersion.addEventListener(
374 this.handleFocus.bind(this)); 374 'focus', this.handleFocus.bind(this));
375 } 375 }
376 this.editFields_.push(control); 376 this.editFields_.push(control);
377 }, 377 },
378 378
379 /** 379 /**
380 * Set the column index for a child element of this InlineEditableItem. 380 * Set the column index for a child element of this InlineEditableItem.
381 * Only elements with a column index will be keyboard focusable, e.g. by 381 * Only elements with a column index will be keyboard focusable, e.g. by
382 * pressing the tab key. 382 * pressing the tab key.
383 * @param {Element} element Element whose column index to set. Method does 383 * @param {Element} element Element whose column index to set. Method does
384 * nothing if element is null. 384 * nothing if element is null.
(...skipping 17 matching lines...) Expand all
402 */ 402 */
403 resetEditableValues_: function() { 403 resetEditableValues_: function() {
404 var editFields = this.editFields_; 404 var editFields = this.editFields_;
405 for (var i = 0; i < editFields.length; i++) { 405 for (var i = 0; i < editFields.length; i++) {
406 var staticLabel = editFields[i].staticVersion; 406 var staticLabel = editFields[i].staticVersion;
407 if (!staticLabel && !this.isPlaceholder) 407 if (!staticLabel && !this.isPlaceholder)
408 continue; 408 continue;
409 409
410 if (editFields[i].tagName == 'INPUT') { 410 if (editFields[i].tagName == 'INPUT') {
411 editFields[i].value = 411 editFields[i].value =
412 this.isPlaceholder ? '' : staticLabel.textContent; 412 this.isPlaceholder ? '' : staticLabel.textContent;
413 } 413 }
414 // Add more tag types here as new createEditable* methods are added. 414 // Add more tag types here as new createEditable* methods are added.
415 415
416 editFields[i].setCustomValidity(''); 416 editFields[i].setCustomValidity('');
417 } 417 }
418 }, 418 },
419 419
420 /** 420 /**
421 * Sets the static version of any controls created by createEditable* 421 * Sets the static version of any controls created by createEditable*
422 * to match the current value of the editable version. Called on commit so 422 * to match the current value of the editable version. Called on commit so
(...skipping 13 matching lines...) Expand all
436 } 436 }
437 }, 437 },
438 438
439 /** 439 /**
440 * Returns the index of the column that currently has focus, or -1 if no 440 * Returns the index of the column that currently has focus, or -1 if no
441 * column has focus. 441 * column has focus.
442 * @return {number} 442 * @return {number}
443 * @private 443 * @private
444 */ 444 */
445 getFocusedColumnIndex_: function() { 445 getFocusedColumnIndex_: function() {
446 var element = document.activeElement.editableVersion || 446 var element =
447 document.activeElement; 447 document.activeElement.editableVersion || document.activeElement;
448 448
449 if (element.hasAttribute('inlineeditable-column')) 449 if (element.hasAttribute('inlineeditable-column'))
450 return parseInt(element.getAttribute('inlineeditable-column'), 10); 450 return parseInt(element.getAttribute('inlineeditable-column'), 10);
451 return -1; 451 return -1;
452 }, 452 },
453 453
454 /** 454 /**
455 * Returns the element from the column that has the largest index where: 455 * Returns the element from the column that has the largest index where:
456 * where: 456 * where:
457 * + index <= startIndex, and 457 * + index <= startIndex, and
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after
541 /** 541 /**
542 * Called when this InlineEditableItem or any of its children are given 542 * Called when this InlineEditableItem or any of its children are given
543 * focus. Updates focusedColumnIndex with the index of the newly focused 543 * focus. Updates focusedColumnIndex with the index of the newly focused
544 * column, or -1 if the focused element does not have a column index. 544 * column, or -1 if the focused element does not have a column index.
545 * @param {Event} e The focusin event. 545 * @param {Event} e The focusin event.
546 * @private 546 * @private
547 */ 547 */
548 handleFocusIn_: function(e) { 548 handleFocusIn_: function(e) {
549 var target = e.target.editableVersion || e.target; 549 var target = e.target.editableVersion || e.target;
550 this.focusedColumnIndex = target.hasAttribute('inlineeditable-column') ? 550 this.focusedColumnIndex = target.hasAttribute('inlineeditable-column') ?
551 parseInt(target.getAttribute('inlineeditable-column'), 10) : -1; 551 parseInt(target.getAttribute('inlineeditable-column'), 10) :
552 -1;
552 }, 553 },
553 }; 554 };
554 555
555 /** 556 /**
556 * Takes care of committing changes to inline editable list items when the 557 * Takes care of committing changes to inline editable list items when the
557 * window loses focus. 558 * window loses focus.
558 */ 559 */
559 function handleWindowBlurs() { 560 function handleWindowBlurs() {
560 window.addEventListener('blur', function(e) { 561 window.addEventListener('blur', function(e) {
561 var itemAncestor = findAncestor(document.activeElement, function(node) { 562 var itemAncestor = findAncestor(document.activeElement, function(node) {
(...skipping 27 matching lines...) Expand all
589 * Focuses the input element of the placeholder if true. 590 * Focuses the input element of the placeholder if true.
590 * @type {boolean} 591 * @type {boolean}
591 * @private 592 * @private
592 */ 593 */
593 needsToFocusPlaceholder_: false, 594 needsToFocusPlaceholder_: false,
594 595
595 /** @override */ 596 /** @override */
596 decorate: function() { 597 decorate: function() {
597 DeletableItemList.prototype.decorate.call(this); 598 DeletableItemList.prototype.decorate.call(this);
598 this.setAttribute('inlineeditable', ''); 599 this.setAttribute('inlineeditable', '');
599 this.addEventListener('hasElementFocusChange', 600 this.addEventListener(
600 this.handleListFocusChange_); 601 'hasElementFocusChange', this.handleListFocusChange_);
601 // <list> isn't focusable by default, but cr.ui.List defaults tabindex to 602 // <list> isn't focusable by default, but cr.ui.List defaults tabindex to
602 // 0 if it's not set. 603 // 0 if it's not set.
603 this.tabIndex = -1; 604 this.tabIndex = -1;
604 }, 605 },
605 606
606 /** 607 /**
607 * Called when the list hierarchy as a whole loses or gains focus; starts 608 * Called when the list hierarchy as a whole loses or gains focus; starts
608 * or ends editing for the lead item if necessary. 609 * or ends editing for the lead item if necessary.
609 * @param {Event} e The change event. 610 * @param {Event} e The change event.
610 * @private 611 * @private
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after
689 690
690 /** 691 /**
691 * Set the selected index without changing the focused element on the page. 692 * Set the selected index without changing the focused element on the page.
692 * Used to change the selected index when the list doesn't have focus (and 693 * Used to change the selected index when the list doesn't have focus (and
693 * doesn't want to take focus). 694 * doesn't want to take focus).
694 * @param {number} index The index to select. 695 * @param {number} index The index to select.
695 */ 696 */
696 selectIndexWithoutFocusing: function(index) { 697 selectIndexWithoutFocusing: function(index) {
697 // Remove focusability from old item. 698 // Remove focusability from old item.
698 var oldItem = this.getListItemByIndex(this.selectionModel.leadIndex) || 699 var oldItem = this.getListItemByIndex(this.selectionModel.leadIndex) ||
699 this.getInitialFocusableItem(); 700 this.getInitialFocusableItem();
700 if (oldItem) { 701 if (oldItem) {
701 oldItem.setEditableValuesFocusable(false); 702 oldItem.setEditableValuesFocusable(false);
702 oldItem.setStaticValuesFocusable(false); 703 oldItem.setStaticValuesFocusable(false);
703 oldItem.setCloseButtonFocusable(false); 704 oldItem.setCloseButtonFocusable(false);
704 oldItem.lead = false; 705 oldItem.lead = false;
705 } 706 }
706 707
707 // Select the new item. 708 // Select the new item.
708 this.ignoreChangeEvents(function() { 709 this.ignoreChangeEvents(function() {
709 this.selectionModel.selectedIndex = index; 710 this.selectionModel.selectedIndex = index;
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
749 * May be overridden by subclasses to disable focusing the placeholder. 750 * May be overridden by subclasses to disable focusing the placeholder.
750 * @return {boolean} True if the placeholder element should be focused on 751 * @return {boolean} True if the placeholder element should be focused on
751 * edit commit. 752 * edit commit.
752 * @protected 753 * @protected
753 */ 754 */
754 shouldFocusPlaceholderOnEditCommit: function() { 755 shouldFocusPlaceholderOnEditCommit: function() {
755 return true; 756 return true;
756 }, 757 },
757 758
758 /** 759 /**
759 * Override to change which item is initially focusable. 760 * Override to change which item is initially focusable.
760 * @return {options.InlineEditableItem} Initially focusable item or null. 761 * @return {options.InlineEditableItem} Initially focusable item or null.
761 * @protected 762 * @protected
762 */ 763 */
763 getInitialFocusableItem: function() { 764 getInitialFocusableItem: function() {
764 return /** @type {options.InlineEditableItem} */( 765 return /** @type {options.InlineEditableItem} */ (
765 this.getListItemByIndex(0)); 766 this.getListItemByIndex(0));
766 }, 767 },
767 }; 768 };
768 769
769 // Export 770 // Export
770 return { 771 return {
771 InlineEditableItem: InlineEditableItem, 772 InlineEditableItem: InlineEditableItem,
772 InlineEditableItemList: InlineEditableItemList, 773 InlineEditableItemList: InlineEditableItemList,
773 }; 774 };
774 }); 775 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698