chrome/browser/resources/settings/checkbox/checkbox.js

   1 // Copyright 2015 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 /**
   6  * @fileoverview
   7  * `cr-settings-checkbox` is a checkbox that controls a supplied preference.
   8  *
   9  * Example:
  10  *      <cr-settings-checkbox pref="{{prefs.settings.enableFoo}}"
  11  *          label="Enable foo setting." subLabel="(bar also)">
  12  *      </cr-settings-checkbox>
  13  *
  14  * @element cr-settings-checkbox
  15  */
  16 Polymer({
  17   is: 'cr-settings-checkbox',
  18
  19   properties: {
  20     /**
  21      * The boolean preference object to control.
  22      * @type {?chrome.settingsPrivate.PrefObject}
  23      */
  24     pref: {
  25       type: Object,
  26       notify: true,
  27       value: null
  28     },
  29
  30     inverted: {
  31       type: Boolean,
  32       value: false
  33     },
  34
  35     checked: {
  36       type: Boolean,
  37       value: false,
  38       observer: 'checkedChanged_'
  39     },
  40
  41     label: {
  42       type: String,
  43       value: '',
  44     },
  45
  46     subLabel: {
  47       type: String,
  48       value: '',
  49     },
  50   },
  51
  52   observers: [
  53     'prefValueChanged_(pref.value)'
  54   ],
  55
  56   /** @override */
  57   ready: function() {
  58     this.$.events.forward(this.$.checkbox, ['change']);
  59   },
  60
  61   /** @private */
  62   prefValueChanged_: function(prefValue) {
  63     // prefValue is initially undefined when Polymer initializes pref.
  64     if (prefValue !== undefined) {
  65       this.checked = this.getNewValue_(prefValue);
  66     }
  67   },
  68
  69   /** @private */
  70   checkedChanged_: function() {
  71     if (this.pref) {
  72       this.set('pref.value', this.getNewValue_(this.checked));
  73     }
  74   },
  75
  76   /** @private */
  77   getNewValue_: function(val) {
  78     return this.inverted ? !val : val;
  79   }
  80 });