chrome/browser/resources/options/pref_ui.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   var Preferences = options.Preferences;
   7
   8   /**
   9    * Allows an element to be disabled for several reasons.
  10    * The element is disabled if at least one reason is true, and the reasons
  11    * can be set separately.
  12    * @private
  13    * @param {!HTMLElement} el The element to update.
  14    * @param {string} reason The reason for disabling the element.
  15    * @param {boolean} disabled Whether the element should be disabled or enabled
  16    * for the given |reason|.
  17    */
  18   function updateDisabledState(el, reason, disabled) {
  19     if (!el.disabledReasons)
  20       el.disabledReasons = {};
  21
  22     if (el.disabled && (Object.keys(el.disabledReasons).length == 0)) {
  23       // The element has been previously disabled without a reason, so we add
  24       // one to keep it disabled.
  25       el.disabledReasons.other = true;
  26     }
  27
  28     if (!el.disabled) {
  29       // If the element is not disabled, there should be no reason, except for
  30       // 'other'.
  31       delete el.disabledReasons.other;
  32       if (Object.keys(el.disabledReasons).length > 0)
  33         console.error('Element is not disabled but should be');
  34     }
  35
  36     if (disabled)
  37       el.disabledReasons[reason] = true;
  38     else
  39       delete el.disabledReasons[reason];
  40
  41     el.disabled = Object.keys(el.disabledReasons).length > 0;
  42   }
  43
  44   /////////////////////////////////////////////////////////////////////////////
  45   // PrefInputElement class:
  46
  47   /**
  48    * Define a constructor that uses an input element as its underlying element.
  49    * @constructor
  50    * @extends {HTMLInputElement}
  51    */
  52   var PrefInputElement = cr.ui.define('input');
  53
  54   PrefInputElement.prototype = {
  55     // Set up the prototype chain
  56     __proto__: HTMLInputElement.prototype,
  57
  58     /**
  59      * Initialization function for the cr.ui framework.
  60      */
  61     decorate: function() {
  62       var self = this;
  63
  64       // Listen for user events.
  65       this.addEventListener('change', this.handleChange.bind(this));
  66
  67       // Listen for pref changes.
  68       Preferences.getInstance().addEventListener(this.pref, function(event) {
  69         if (event.value.uncommitted && !self.dialogPref)
  70           return;
  71         self.updateStateFromPref(event);
  72         updateDisabledState(self, 'notUserModifiable', event.value.disabled);
  73         self.controlledBy = event.value.controlledBy;
  74       });
  75     },
  76
  77     /**
  78      * Handle changes to the input element's state made by the user. If a custom
  79      * change handler does not suppress it, a default handler is invoked that
  80      * updates the associated pref.
  81      * @param {Event} event Change event.
  82      * @protected
  83      */
  84     handleChange: function(event) {
  85       if (!this.customChangeHandler(event))
  86         this.updatePrefFromState();
  87     },
  88
  89     /**
  90      * Handles changes to the pref. If a custom change handler does not suppress
  91      * it, a default handler is invoked that updates the input element's state.
  92      * @param {Event} event Pref change event.
  93      * @protected
  94      */
  95     updateStateFromPref: function(event) {
  96       if (!this.customPrefChangeHandler(event))
  97         this.value = event.value.value;
  98     },
  99
 100     /**
 101      * An abstract method for all subclasses to override to update their
 102      * preference from existing state.
 103      * @protected
 104      */
 105     updatePrefFromState: assertNotReached,
 106
 107     /**
 108      * See |updateDisabledState| above.
 109      */
 110     setDisabled: function(reason, disabled) {
 111       updateDisabledState(this, reason, disabled);
 112     },
 113
 114     /**
 115      * Custom change handler that is invoked first when the user makes changes
 116      * to the input element's state. If it returns false, a default handler is
 117      * invoked next that updates the associated pref. If it returns true, the
 118      * default handler is suppressed (i.e., this works like stopPropagation or
 119      * cancelBubble).
 120      * @param {Event} event Input element change event.
 121      */
 122     customChangeHandler: function(event) {
 123       return false;
 124     },
 125
 126     /**
 127      * Custom change handler that is invoked first when the preference
 128      * associated with the input element changes. If it returns false, a default
 129      * handler is invoked next that updates the input element. If it returns
 130      * true, the default handler is suppressed.
 131      * @param {Event} event Input element change event.
 132      */
 133     customPrefChangeHandler: function(event) {
 134       return false;
 135     },
 136   };
 137
 138   /**
 139    * The name of the associated preference.
 140    */
 141   cr.defineProperty(PrefInputElement, 'pref', cr.PropertyKind.ATTR);
 142
 143   /**
 144    * The data type of the associated preference, only relevant for derived
 145    * classes that support different data types.
 146    */
 147   cr.defineProperty(PrefInputElement, 'dataType', cr.PropertyKind.ATTR);
 148
 149   /**
 150    * Whether this input element is part of a dialog. If so, changes take effect
 151    * in the settings UI immediately but are only actually committed when the
 152    * user confirms the dialog. If the user cancels the dialog instead, the
 153    * changes are rolled back in the settings UI and never committed.
 154    */
 155   cr.defineProperty(PrefInputElement, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
 156
 157   /**
 158    * Whether the associated preference is controlled by a source other than the
 159    * user's setting (can be 'policy', 'extension', 'recommended' or unset).
 160    */
 161   cr.defineProperty(PrefInputElement, 'controlledBy', cr.PropertyKind.ATTR);
 162
 163   /**
 164    * The user metric string.
 165    */
 166   cr.defineProperty(PrefInputElement, 'metric', cr.PropertyKind.ATTR);
 167
 168   /////////////////////////////////////////////////////////////////////////////
 169   // PrefCheckbox class:
 170
 171   /**
 172    * Define a constructor that uses an input element as its underlying element.
 173    * @constructor
 174    * @extends {options.PrefInputElement}
 175    */
 176   var PrefCheckbox = cr.ui.define('input');
 177
 178   PrefCheckbox.prototype = {
 179     // Set up the prototype chain
 180     __proto__: PrefInputElement.prototype,
 181
 182     /**
 183      * Initialization function for the cr.ui framework.
 184      */
 185     decorate: function() {
 186       PrefInputElement.prototype.decorate.call(this);
 187       this.type = 'checkbox';
 188
 189       // Consider a checked dialog checkbox as a 'suggestion' which is committed
 190       // once the user confirms the dialog.
 191       if (this.dialogPref && this.checked)
 192         this.updatePrefFromState();
 193     },
 194
 195     /**
 196      * Update the associated pref when when the user makes changes to the
 197      * checkbox state.
 198      * @override
 199      */
 200     updatePrefFromState: function() {
 201       var value = this.inverted_pref ? !this.checked : this.checked;
 202       Preferences.setBooleanPref(this.pref, value,
 203                                  !this.dialogPref, this.metric);
 204     },
 205
 206     /** @override */
 207     updateStateFromPref: function(event) {
 208       if (!this.customPrefChangeHandler(event))
 209         this.defaultPrefChangeHandler(event);
 210     },
 211
 212     /**
 213      * @param {Event} event A pref change event.
 214      */
 215     defaultPrefChangeHandler: function(event) {
 216       var value = Boolean(event.value.value);
 217       this.checked = this.inverted_pref ? !value : value;
 218     },
 219   };
 220
 221   /**
 222    * Whether the mapping between checkbox state and associated pref is inverted.
 223    */
 224   cr.defineProperty(PrefCheckbox, 'inverted_pref', cr.PropertyKind.BOOL_ATTR);
 225
 226   /////////////////////////////////////////////////////////////////////////////
 227   // PrefNumber class:
 228
 229   // Define a constructor that uses an input element as its underlying element.
 230   var PrefNumber = cr.ui.define('input');
 231
 232   PrefNumber.prototype = {
 233     // Set up the prototype chain
 234     __proto__: PrefInputElement.prototype,
 235
 236     /**
 237      * Initialization function for the cr.ui framework.
 238      */
 239     decorate: function() {
 240       PrefInputElement.prototype.decorate.call(this);
 241       this.type = 'number';
 242     },
 243
 244     /**
 245      * Update the associated pref when the user inputs a number.
 246      * @override
 247      */
 248     updatePrefFromState: function() {
 249       if (this.validity.valid) {
 250         Preferences.setIntegerPref(this.pref, this.value,
 251                                    !this.dialogPref, this.metric);
 252       }
 253     },
 254   };
 255
 256   /////////////////////////////////////////////////////////////////////////////
 257   // PrefRadio class:
 258
 259   //Define a constructor that uses an input element as its underlying element.
 260   var PrefRadio = cr.ui.define('input');
 261
 262   PrefRadio.prototype = {
 263     // Set up the prototype chain
 264     __proto__: PrefInputElement.prototype,
 265
 266     /**
 267      * Initialization function for the cr.ui framework.
 268      */
 269     decorate: function() {
 270       PrefInputElement.prototype.decorate.call(this);
 271       this.type = 'radio';
 272     },
 273
 274     /**
 275      * Update the associated pref when when the user selects the radio button.
 276      * @override
 277      */
 278     updatePrefFromState: function() {
 279       if (this.value == 'true' || this.value == 'false') {
 280         Preferences.setBooleanPref(this.pref,
 281                                    this.value == String(this.checked),
 282                                    !this.dialogPref, this.metric);
 283       } else {
 284         Preferences.setIntegerPref(this.pref, this.value,
 285                                    !this.dialogPref, this.metric);
 286       }
 287     },
 288
 289     /** @override */
 290     updateStateFromPref: function(event) {
 291       if (!this.customPrefChangeHandler(event))
 292         this.checked = this.value == String(event.value.value);
 293     },
 294   };
 295
 296   /////////////////////////////////////////////////////////////////////////////
 297   // PrefRange class:
 298
 299   /**
 300    * Define a constructor that uses an input element as its underlying element.
 301    * @constructor
 302    * @extends {options.PrefInputElement}
 303    */
 304   var PrefRange = cr.ui.define('input');
 305
 306   PrefRange.prototype = {
 307     // Set up the prototype chain
 308     __proto__: PrefInputElement.prototype,
 309
 310     /**
 311      * The map from slider position to corresponding pref value.
 312      */
 313     valueMap: undefined,
 314
 315     /**
 316      * Initialization function for the cr.ui framework.
 317      */
 318     decorate: function() {
 319       PrefInputElement.prototype.decorate.call(this);
 320       this.type = 'range';
 321
 322       // Listen for user events.
 323       // TODO(jhawkins): Add onmousewheel handling once the associated WK bug is
 324       // fixed.
 325       // https://bugs.webkit.org/show_bug.cgi?id=52256
 326       this.addEventListener('keyup', this.handleRelease_.bind(this));
 327       this.addEventListener('mouseup', this.handleRelease_.bind(this));
 328       this.addEventListener('touchcancel', this.handleRelease_.bind(this));
 329       this.addEventListener('touchend', this.handleRelease_.bind(this));
 330     },
 331
 332     /**
 333      * Update the associated pref when when the user releases the slider.
 334      * @override
 335      */
 336     updatePrefFromState: function() {
 337       Preferences.setIntegerPref(
 338           this.pref,
 339           this.mapPositionToPref(parseInt(this.value, 10)),
 340           !this.dialogPref,
 341           this.metric);
 342     },
 343
 344     /** @override */
 345     handleChange: function() {
 346       // Ignore changes to the slider position made by the user while the slider
 347       // has not been released.
 348     },
 349
 350     /**
 351      * Handle changes to the slider position made by the user when the slider is
 352      * released. If a custom change handler does not suppress it, a default
 353      * handler is invoked that updates the associated pref.
 354      * @param {Event} event Change event.
 355      * @private
 356      */
 357     handleRelease_: function(event) {
 358       if (!this.customChangeHandler(event))
 359         this.updatePrefFromState();
 360     },
 361
 362     /**
 363      * Handles changes to the pref associated with the slider. If a custom
 364      * change handler does not suppress it, a default handler is invoked that
 365      * updates the slider position.
 366      * @override.
 367      */
 368     updateStateFromPref: function(event) {
 369       if (this.customPrefChangeHandler(event))
 370         return;
 371       var value = event.value.value;
 372       this.value = this.valueMap ? this.valueMap.indexOf(value) : value;
 373     },
 374
 375     /**
 376      * Map slider position to the range of values provided by the client,
 377      * represented by |valueMap|.
 378      * @param {number} position The slider position to map.
 379      */
 380     mapPositionToPref: function(position) {
 381       return this.valueMap ? this.valueMap[position] : position;
 382     },
 383   };
 384
 385   /////////////////////////////////////////////////////////////////////////////
 386   // PrefSelect class:
 387
 388   // Define a constructor that uses a select element as its underlying element.
 389   var PrefSelect = cr.ui.define('select');
 390
 391   PrefSelect.prototype = {
 392     // Set up the prototype chain
 393     __proto__: PrefInputElement.prototype,
 394
 395     /**
 396      * Update the associated pref when when the user selects an item.
 397      * @override
 398      */
 399     updatePrefFromState: function() {
 400       var value = this.options[this.selectedIndex].value;
 401       switch (this.dataType) {
 402         case 'number':
 403           Preferences.setIntegerPref(this.pref, value,
 404                                      !this.dialogPref, this.metric);
 405           break;
 406         case 'double':
 407           Preferences.setDoublePref(this.pref, value,
 408                                     !this.dialogPref, this.metric);
 409           break;
 410         case 'boolean':
 411           Preferences.setBooleanPref(this.pref, value == 'true',
 412                                      !this.dialogPref, this.metric);
 413           break;
 414         case 'string':
 415           Preferences.setStringPref(this.pref, value,
 416                                     !this.dialogPref, this.metric);
 417           break;
 418         default:
 419           console.error('Unknown data type for <select> UI element: ' +
 420                         this.dataType);
 421       }
 422     },
 423
 424     /** @override */
 425     updateStateFromPref: function(event) {
 426       if (this.customPrefChangeHandler(event))
 427         return;
 428
 429       // Make sure the value is a string, because the value is stored as a
 430       // string in the HTMLOptionElement.
 431       var value = String(event.value.value);
 432
 433       var found = false;
 434       for (var i = 0; i < this.options.length; i++) {
 435         if (this.options[i].value == value) {
 436           this.selectedIndex = i;
 437           found = true;
 438         }
 439       }
 440
 441       // Item not found, select first item.
 442       if (!found)
 443         this.selectedIndex = 0;
 444
 445       // The "onchange" event automatically fires when the user makes a manual
 446       // change. It should never be fired for a programmatic change. However,
 447       // these two lines were here already and it is hard to tell who may be
 448       // relying on them.
 449       if (this.onchange)
 450         this.onchange(event);
 451     },
 452   };
 453
 454   /////////////////////////////////////////////////////////////////////////////
 455   // PrefTextField class:
 456
 457   // Define a constructor that uses an input element as its underlying element.
 458   var PrefTextField = cr.ui.define('input');
 459
 460   PrefTextField.prototype = {
 461     // Set up the prototype chain
 462     __proto__: PrefInputElement.prototype,
 463
 464     /**
 465      * Initialization function for the cr.ui framework.
 466      */
 467     decorate: function() {
 468       PrefInputElement.prototype.decorate.call(this);
 469       var self = this;
 470
 471       // Listen for user events.
 472       window.addEventListener('unload', function() {
 473         if (document.activeElement == self)
 474           self.blur();
 475       });
 476     },
 477
 478     /**
 479      * Update the associated pref when when the user inputs text.
 480      * @override
 481      */
 482     updatePrefFromState: function(event) {
 483       switch (this.dataType) {
 484         case 'number':
 485           Preferences.setIntegerPref(this.pref, this.value,
 486                                      !this.dialogPref, this.metric);
 487           break;
 488         case 'double':
 489           Preferences.setDoublePref(this.pref, this.value,
 490                                     !this.dialogPref, this.metric);
 491           break;
 492         case 'url':
 493           Preferences.setURLPref(this.pref, this.value,
 494                                  !this.dialogPref, this.metric);
 495           break;
 496         default:
 497           Preferences.setStringPref(this.pref, this.value,
 498                                     !this.dialogPref, this.metric);
 499           break;
 500       }
 501     },
 502   };
 503
 504   /////////////////////////////////////////////////////////////////////////////
 505   // PrefPortNumber class:
 506
 507   // Define a constructor that uses an input element as its underlying element.
 508   var PrefPortNumber = cr.ui.define('input');
 509
 510   PrefPortNumber.prototype = {
 511     // Set up the prototype chain
 512     __proto__: PrefTextField.prototype,
 513
 514     /**
 515      * Initialization function for the cr.ui framework.
 516      */
 517     decorate: function() {
 518       var self = this;
 519       self.type = 'text';
 520       self.dataType = 'number';
 521       PrefTextField.prototype.decorate.call(this);
 522       self.oninput = function() {
 523         // Note that using <input type="number"> is insufficient to restrict
 524         // the input as it allows negative numbers and does not limit the
 525         // number of charactes typed even if a range is set.  Furthermore,
 526         // it sometimes produces strange repaint artifacts.
 527         var filtered = self.value.replace(/[^0-9]/g, '');
 528         if (filtered != self.value)
 529           self.value = filtered;
 530       };
 531     }
 532   };
 533
 534   /////////////////////////////////////////////////////////////////////////////
 535   // PrefButton class:
 536
 537   // Define a constructor that uses a button element as its underlying element.
 538   var PrefButton = cr.ui.define('button');
 539
 540   PrefButton.prototype = {
 541     // Set up the prototype chain
 542     __proto__: HTMLButtonElement.prototype,
 543
 544     /**
 545      * Initialization function for the cr.ui framework.
 546      */
 547     decorate: function() {
 548       var self = this;
 549
 550       // Listen for pref changes.
 551       // This element behaves like a normal button and does not affect the
 552       // underlying preference; it just becomes disabled when the preference is
 553       // managed, and its value is false. This is useful for buttons that should
 554       // be disabled when the underlying Boolean preference is set to false by a
 555       // policy or extension.
 556       Preferences.getInstance().addEventListener(this.pref, function(event) {
 557         updateDisabledState(self, 'notUserModifiable',
 558                             event.value.disabled && !event.value.value);
 559         self.controlledBy = event.value.controlledBy;
 560       });
 561     },
 562
 563     /**
 564      * See |updateDisabledState| above.
 565      */
 566     setDisabled: function(reason, disabled) {
 567       updateDisabledState(this, reason, disabled);
 568     },
 569   };
 570
 571   /**
 572    * The name of the associated preference.
 573    */
 574   cr.defineProperty(PrefButton, 'pref', cr.PropertyKind.ATTR);
 575
 576   /**
 577    * Whether the associated preference is controlled by a source other than the
 578    * user's setting (can be 'policy', 'extension', 'recommended' or unset).
 579    */
 580   cr.defineProperty(PrefButton, 'controlledBy', cr.PropertyKind.ATTR);
 581
 582   // Export
 583   return {
 584     PrefCheckbox: PrefCheckbox,
 585     PrefInputElement: PrefInputElement,
 586     PrefNumber: PrefNumber,
 587     PrefRadio: PrefRadio,
 588     PrefRange: PrefRange,
 589     PrefSelect: PrefSelect,
 590     PrefTextField: PrefTextField,
 591     PrefPortNumber: PrefPortNumber,
 592     PrefButton: PrefButton
 593   };
 594 });