chrome/browser/resources/options/deletable_item_list.js

   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
   3 // found in the LICENSE file.
   4
   5 cr.define('options', function() {
   6   /** @const */ var List = cr.ui.List;
   7   /** @const */ var ListItem = cr.ui.ListItem;
   8
   9   /**
  10    * Creates a deletable list item, which has a button that will trigger a call
  11    * to deleteItemAtIndex(index) in the list.
  12    */
  13   var DeletableItem = cr.ui.define('li');
  14
  15   DeletableItem.prototype = {
  16     __proto__: ListItem.prototype,
  17
  18     /**
  19      * The element subclasses should populate with content.
  20      * @type {HTMLElement}
  21      * @private
  22      */
  23     contentElement_: null,
  24
  25     /**
  26      * The close button element.
  27      * @type {HTMLElement}
  28      * @private
  29      */
  30     closeButtonElement_: null,
  31
  32     /**
  33      * Whether or not this item can be deleted.
  34      * @type {boolean}
  35      * @private
  36      */
  37     deletable_: true,
  38
  39     /** @override */
  40     decorate: function() {
  41       ListItem.prototype.decorate.call(this);
  42
  43       this.classList.add('deletable-item');
  44
  45       this.contentElement_ = this.ownerDocument.createElement('div');
  46       this.appendChild(this.contentElement_);
  47
  48       this.closeButtonElement_ = this.ownerDocument.createElement('button');
  49       this.closeButtonElement_.className =
  50           'raw-button row-delete-button custom-appearance';
  51       this.closeButtonElement_.addEventListener('mousedown',
  52                                                 this.handleMouseDownUpOnClose_);
  53       this.closeButtonElement_.addEventListener('mouseup',
  54                                                 this.handleMouseDownUpOnClose_);
  55       this.closeButtonElement_.addEventListener('focus',
  56                                                 this.handleFocus_.bind(this));
  57       this.appendChild(this.closeButtonElement_);
  58     },
  59
  60     /**
  61      * Returns the element subclasses should add content to.
  62      * @return {HTMLElement} The element subclasses should popuplate.
  63      */
  64     get contentElement() {
  65       return this.contentElement_;
  66     },
  67
  68     /**
  69      * Returns the close button element.
  70      * @return {HTMLElement} The close |<button>| element.
  71      */
  72     get closeButtonElement() {
  73       return this.closeButtonElement_;
  74     },
  75
  76     /* Gets/sets the deletable property. An item that is not deletable doesn't
  77      * show the delete button (although space is still reserved for it).
  78      */
  79     get deletable() {
  80       return this.deletable_;
  81     },
  82     set deletable(value) {
  83       this.deletable_ = value;
  84       this.closeButtonElement_.disabled = !value;
  85     },
  86
  87     /**
  88      * Called when a focusable child element receives focus. Selects this item
  89      * in the list selection model.
  90      * @private
  91      */
  92     handleFocus_: function() {
  93       var list = this.parentNode;
  94       var index = list.getIndexOfListItem(this);
  95       list.selectionModel.selectedIndex = index;
  96       list.selectionModel.anchorIndex = index;
  97     },
  98
  99     /**
 100      * Don't let the list have a crack at the event. We don't want clicking the
 101      * close button to change the selection of the list or to focus on the close
 102      * button.
 103      * @param {Event} e The mouse down/up event object.
 104      * @private
 105      */
 106     handleMouseDownUpOnClose_: function(e) {
 107       if (e.target.disabled)
 108         return;
 109       e.stopPropagation();
 110       e.preventDefault();
 111     },
 112   };
 113
 114   var DeletableItemList = cr.ui.define('list');
 115
 116   DeletableItemList.prototype = {
 117     __proto__: List.prototype,
 118
 119     /** @override */
 120     decorate: function() {
 121       List.prototype.decorate.call(this);
 122       this.addEventListener('click', this.handleClick_);
 123       this.addEventListener('keydown', this.handleKeyDown_);
 124     },
 125
 126     /**
 127      * Callback for onclick events.
 128      * @param {Event} e The click event object.
 129      * @private
 130      */
 131     handleClick_: function(e) {
 132       if (this.disabled)
 133         return;
 134
 135       var target = e.target;
 136       if (target.classList.contains('row-delete-button')) {
 137         var listItem = this.getListItemAncestor(target);
 138         var selected = this.selectionModel.selectedIndexes;
 139
 140         // Check if the list item that contains the close button being clicked
 141         // is not in the list of selected items. Only delete this item in that
 142         // case.
 143         var idx = this.getIndexOfListItem(listItem);
 144         if (selected.indexOf(idx) == -1) {
 145           this.deleteItemAtIndex(idx);
 146         } else {
 147           this.deleteSelectedItems_();
 148         }
 149       }
 150     },
 151
 152     /**
 153      * Callback for keydown events.
 154      * @param {Event} e The keydown event object.
 155      * @private
 156      */
 157     handleKeyDown_: function(e) {
 158       // Map delete (and backspace on Mac) to item deletion (unless focus is
 159       // in an input field, where it's intended for text editing).
 160       if ((e.keyCode == 46 || (e.keyCode == 8 && cr.isMac)) &&
 161           e.target.tagName != 'INPUT') {
 162         this.deleteSelectedItems_();
 163         // Prevent the browser from going back.
 164         e.preventDefault();
 165       }
 166     },
 167
 168     /**
 169      * Deletes all the currently selected items that are deletable.
 170      * @private
 171      */
 172     deleteSelectedItems_: function() {
 173       var selected = this.selectionModel.selectedIndexes;
 174       // Reverse through the list of selected indexes to maintain the
 175       // correct index values after deletion.
 176       for (var j = selected.length - 1; j >= 0; j--) {
 177         var index = selected[j];
 178         if (this.getListItemByIndex(index).deletable)
 179           this.deleteItemAtIndex(index);
 180       }
 181     },
 182
 183     /**
 184      * Called when an item should be deleted; subclasses are responsible for
 185      * implementing.
 186      * @param {number} index The index of the item that is being deleted.
 187      */
 188     deleteItemAtIndex: function(index) {
 189     },
 190   };
 191
 192   return {
 193     DeletableItemList: DeletableItemList,
 194     DeletableItem: DeletableItem,
 195   };
 196 });