chrome/browser/resources/options/handler_options_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 ArrayDataModel = cr.ui.ArrayDataModel;
   7   /** @const */ var List = cr.ui.List;
   8   /** @const */ var ListItem = cr.ui.ListItem;
   9   /** @const */ var HandlerOptions = options.HandlerOptions;
  10   /** @const */ var DeletableItem = options.DeletableItem;
  11   /** @const */ var DeletableItemList = options.DeletableItemList;
  12
  13   /**
  14    * Creates a new ignored protocol / content handler list item.
  15    *
  16    * Accepts values in the form
  17    *   ['mailto', 'http://www.thesite.com/%s', 'The title of the protocol'],
  18    * @param {Object} entry A dictionary describing the handlers for a given
  19    *     protocol.
  20    * @constructor
  21    * @extends {cr.ui.DeletableItemList}
  22    */
  23   function IgnoredHandlersListItem(entry) {
  24     var el = cr.doc.createElement('div');
  25     el.dataItem = entry;
  26     el.__proto__ = IgnoredHandlersListItem.prototype;
  27     el.decorate();
  28     return el;
  29   }
  30
  31   IgnoredHandlersListItem.prototype = {
  32     __proto__: DeletableItem.prototype,
  33
  34     /** @override */
  35     decorate: function() {
  36       DeletableItem.prototype.decorate.call(this);
  37
  38       // Protocol.
  39       var protocolElement = document.createElement('div');
  40       protocolElement.textContent = this.dataItem[0];
  41       protocolElement.className = 'handlers-type-column';
  42       this.contentElement_.appendChild(protocolElement);
  43
  44       // Site title.
  45       var titleElement = document.createElement('div');
  46       titleElement.textContent = this.dataItem[2];
  47       titleElement.className = 'handlers-site-column';
  48       titleElement.title = this.dataItem[1];
  49       this.contentElement_.appendChild(titleElement);
  50     },
  51   };
  52
  53
  54   var IgnoredHandlersList = cr.ui.define('list');
  55
  56   IgnoredHandlersList.prototype = {
  57     __proto__: DeletableItemList.prototype,
  58
  59     createItem: function(entry) {
  60       return new IgnoredHandlersListItem(entry);
  61     },
  62
  63     deleteItemAtIndex: function(index) {
  64       chrome.send('removeIgnoredHandler', [this.dataModel.item(index)]);
  65     },
  66
  67     /**
  68      * The length of the list.
  69      */
  70     get length() {
  71       return this.dataModel.length;
  72     },
  73
  74     /**
  75      * Set the protocol handlers displayed by this list.  See
  76      * IgnoredHandlersListItem for an example of the format the list should
  77      * take.
  78      *
  79      * @param {Object} list A list of ignored protocol handlers.
  80      */
  81     setHandlers: function(list) {
  82       this.dataModel = new ArrayDataModel(list);
  83     },
  84   };
  85
  86
  87
  88   /**
  89    * Creates a new protocol / content handler list item.
  90    *
  91    * Accepts values in the form
  92    * { protocol: 'mailto',
  93    *   handlers: [
  94    *     ['mailto', 'http://www.thesite.com/%s', 'The title of the protocol'],
  95    *     ...,
  96    *   ],
  97    * }
  98    * @param {Object} entry A dictionary describing the handlers for a given
  99    *     protocol.
 100    * @constructor
 101    * @extends {cr.ui.ListItem}
 102    */
 103   function HandlerListItem(entry) {
 104     var el = cr.doc.createElement('div');
 105     el.dataItem = entry;
 106     el.__proto__ = HandlerListItem.prototype;
 107     el.decorate();
 108     return el;
 109   }
 110
 111   HandlerListItem.prototype = {
 112     __proto__: ListItem.prototype,
 113
 114     buildWidget_: function(data, delegate) {
 115       // Protocol.
 116       var protocolElement = document.createElement('div');
 117       protocolElement.textContent = data.protocol;
 118       protocolElement.className = 'handlers-type-column';
 119       this.appendChild(protocolElement);
 120
 121       // Handler selection.
 122       var handlerElement = document.createElement('div');
 123       var selectElement = document.createElement('select');
 124       var defaultOptionElement = document.createElement('option');
 125       defaultOptionElement.selected = data.default_handler == -1;
 126       defaultOptionElement.textContent =
 127           loadTimeData.getString('handlers_none_handler');
 128       defaultOptionElement.value = -1;
 129       selectElement.appendChild(defaultOptionElement);
 130
 131       for (var i = 0; i < data.handlers.length; ++i) {
 132         var optionElement = document.createElement('option');
 133         optionElement.selected = i == data.default_handler;
 134         optionElement.textContent = data.handlers[i][2];
 135         optionElement.value = i;
 136         selectElement.appendChild(optionElement);
 137       }
 138
 139       selectElement.addEventListener('change', function(e) {
 140         var index = e.target.value;
 141         if (index == -1) {
 142           this.classList.add('none');
 143           delegate.clearDefault(data.protocol);
 144         } else {
 145           handlerElement.classList.remove('none');
 146           delegate.setDefault(data.handlers[index]);
 147         }
 148       });
 149       handlerElement.appendChild(selectElement);
 150       handlerElement.className = 'handlers-site-column';
 151       if (data.default_handler == -1)
 152         this.classList.add('none');
 153       this.appendChild(handlerElement);
 154
 155       // Remove link.
 156       var removeElement = document.createElement('div');
 157       removeElement.textContent =
 158           loadTimeData.getString('handlers_remove_link');
 159       removeElement.addEventListener('click', function(e) {
 160         var value = selectElement ? selectElement.value : 0;
 161         delegate.removeHandler(value, data.handlers[value]);
 162       });
 163       removeElement.className = 'handlers-remove-column handlers-remove-link';
 164       this.appendChild(removeElement);
 165     },
 166
 167     /** @override */
 168     decorate: function() {
 169       ListItem.prototype.decorate.call(this);
 170
 171       var self = this;
 172       var delegate = {
 173         removeHandler: function(index, handler) {
 174           chrome.send('removeHandler', [handler]);
 175         },
 176         setDefault: function(handler) {
 177           chrome.send('setDefault', [handler]);
 178         },
 179         clearDefault: function(protocol) {
 180           chrome.send('clearDefault', [protocol]);
 181         },
 182       };
 183
 184       this.buildWidget_(this.dataItem, delegate);
 185     },
 186   };
 187
 188   /**
 189    * Create a new passwords list.
 190    * @constructor
 191    * @extends {cr.ui.List}
 192    */
 193   var HandlersList = cr.ui.define('list');
 194
 195   HandlersList.prototype = {
 196     __proto__: List.prototype,
 197
 198     /** @override */
 199     createItem: function(entry) {
 200       return new HandlerListItem(entry);
 201     },
 202
 203     /**
 204      * The length of the list.
 205      */
 206     get length() {
 207       return this.dataModel.length;
 208     },
 209
 210     /**
 211      * Set the protocol handlers displayed by this list.
 212      * See HandlerListItem for an example of the format the list should take.
 213      *
 214      * @param {Object} list A list of protocols with their registered handlers.
 215      */
 216     setHandlers: function(list) {
 217       this.dataModel = new ArrayDataModel(list);
 218     },
 219   };
 220
 221   return {
 222     IgnoredHandlersListItem: IgnoredHandlersListItem,
 223     IgnoredHandlersList: IgnoredHandlersList,
 224     HandlerListItem: HandlerListItem,
 225     HandlersList: HandlersList,
 226   };
 227 });