Upstream version 10.39.225.0
[platform/framework/web/crosswalk.git] / src / chrome / browser / resources / options / pref_ui.js
index b4f2830..f2b6a4c 100644 (file)
@@ -42,7 +42,11 @@ cr.define('options', function() {
   /////////////////////////////////////////////////////////////////////////////
   // PrefInputElement class:
 
-  // Define a constructor that uses an input element as its underlying element.
+  /**
+   * Define a constructor that uses an input element as its underlying element.
+   * @constructor
+   * @extends {HTMLInputElement}
+   */
   var PrefInputElement = cr.ui.define('input');
 
   PrefInputElement.prototype = {
@@ -81,12 +85,14 @@ cr.define('options', function() {
     },
 
     /**
-     * Update the input element's state when the associated pref changes.
+     * Handles changes to the pref. If a custom change handler does not suppress
+     * it, a default handler is invoked that update the input element's state.
      * @param {Event} event Pref change event.
      * @private
      */
     updateStateFromPref_: function(event) {
-      this.value = event.value.value;
+      if (!this.customPrefChangeHandler(event))
+        this.value = event.value.value;
     },
 
     /**
@@ -107,18 +113,27 @@ cr.define('options', function() {
     customChangeHandler: function(event) {
       return false;
     },
+
+    /**
+     * Custom change handler that is invoked first when the preference
+     * associated with the input element changes. If it returns false, a default
+     * handler is invoked next that updates the input element. If it returns
+     * true, the default handler is suppressed.
+     * @param {Event} event Input element change event.
+     */
+    customPrefChangeHandler: function(event) {
+      return false;
+    },
   };
 
   /**
    * The name of the associated preference.
-   * @type {string}
    */
   cr.defineProperty(PrefInputElement, 'pref', cr.PropertyKind.ATTR);
 
   /**
    * The data type of the associated preference, only relevant for derived
    * classes that support different data types.
-   * @type {string}
    */
   cr.defineProperty(PrefInputElement, 'dataType', cr.PropertyKind.ATTR);
 
@@ -127,27 +142,28 @@ cr.define('options', function() {
    * in the settings UI immediately but are only actually committed when the
    * user confirms the dialog. If the user cancels the dialog instead, the
    * changes are rolled back in the settings UI and never committed.
-   * @type {boolean}
    */
   cr.defineProperty(PrefInputElement, 'dialogPref', cr.PropertyKind.BOOL_ATTR);
 
   /**
    * Whether the associated preference is controlled by a source other than the
    * user's setting (can be 'policy', 'extension', 'recommended' or unset).
-   * @type {string}
    */
   cr.defineProperty(PrefInputElement, 'controlledBy', cr.PropertyKind.ATTR);
 
   /**
    * The user metric string.
-   * @type {string}
    */
   cr.defineProperty(PrefInputElement, 'metric', cr.PropertyKind.ATTR);
 
   /////////////////////////////////////////////////////////////////////////////
   // PrefCheckbox class:
 
-  // Define a constructor that uses an input element as its underlying element.
+  /**
+   * Define a constructor that uses an input element as its underlying element.
+   * @constructor
+   * @extends {options.PrefInputElement}
+   */
   var PrefCheckbox = cr.ui.define('input');
 
   PrefCheckbox.prototype = {
@@ -184,6 +200,8 @@ cr.define('options', function() {
      * @private
      */
     updateStateFromPref_: function(event) {
+      if (this.customPrefChangeHandler(event))
+        return;
       var value = Boolean(event.value.value);
       this.checked = this.inverted_pref ? !value : value;
     },
@@ -191,7 +209,6 @@ cr.define('options', function() {
 
   /**
    * Whether the mapping between checkbox state and associated pref is inverted.
-   * @type {boolean}
    */
   cr.defineProperty(PrefCheckbox, 'inverted_pref', cr.PropertyKind.BOOL_ATTR);
 
@@ -264,14 +281,19 @@ cr.define('options', function() {
      * @private
      */
     updateStateFromPref_: function(event) {
-      this.checked = this.value == String(event.value.value);
+      if (!this.customPrefChangeHandler(event))
+        this.checked = this.value == String(event.value.value);
     },
   };
 
   /////////////////////////////////////////////////////////////////////////////
   // PrefRange class:
 
-  // Define a constructor that uses an input element as its underlying element.
+  /**
+   * Define a constructor that uses an input element as its underlying element.
+   * @constructor
+   * @extends {options.PrefInputElement}
+   */
   var PrefRange = cr.ui.define('input');
 
   PrefRange.prototype = {
@@ -296,6 +318,8 @@ cr.define('options', function() {
       // https://bugs.webkit.org/show_bug.cgi?id=52256
       this.addEventListener('keyup', this.handleRelease_.bind(this));
       this.addEventListener('mouseup', this.handleRelease_.bind(this));
+      this.addEventListener('touchcancel', this.handleRelease_.bind(this));
+      this.addEventListener('touchend', this.handleRelease_.bind(this));
     },
 
     /**
@@ -303,8 +327,11 @@ cr.define('options', function() {
      * @private
      */
     updatePrefFromState_: function() {
-      Preferences.setIntegerPref(this.pref, this.mapPositionToPref(this.value),
-                                 !this.dialogPref, this.metric);
+      Preferences.setIntegerPref(
+          this.pref,
+          this.mapPositionToPref(parseInt(this.value, 10)),
+          !this.dialogPref,
+          this.metric);
     },
 
     /**
@@ -328,11 +355,15 @@ cr.define('options', function() {
     },
 
     /**
-     * Update the slider position when the associated pref changes.
+     * Handles changes to the pref associated with the slider. If a custom
+     * change handler does not suppress it, a default handler is invoked that
+     * updates the slider position.
      * @param {Event} event Pref change event.
      * @private
      */
     updateStateFromPref_: function(event) {
+      if (this.customPrefChangeHandler(event))
+        return;
       var value = event.value.value;
       this.value = this.valueMap ? this.valueMap.indexOf(value) : value;
     },
@@ -392,9 +423,12 @@ cr.define('options', function() {
      * @private
      */
     updateStateFromPref_: function(event) {
+      if (this.customPrefChangeHandler(event))
+        return;
+
       // Make sure the value is a string, because the value is stored as a
       // string in the HTMLOptionElement.
-      value = String(event.value.value);
+      var value = String(event.value.value);
 
       var found = false;
       for (var i = 0; i < this.options.length; i++) {
@@ -536,20 +570,19 @@ cr.define('options', function() {
 
   /**
    * The name of the associated preference.
-   * @type {string}
    */
   cr.defineProperty(PrefButton, 'pref', cr.PropertyKind.ATTR);
 
   /**
    * Whether the associated preference is controlled by a source other than the
    * user's setting (can be 'policy', 'extension', 'recommended' or unset).
-   * @type {string}
    */
   cr.defineProperty(PrefButton, 'controlledBy', cr.PropertyKind.ATTR);
 
   // Export
   return {
     PrefCheckbox: PrefCheckbox,
+    PrefInputElement: PrefInputElement,
     PrefNumber: PrefNumber,
     PrefRadio: PrefRadio,
     PrefRange: PrefRange,