Home | History | Annotate | Download | only in iron-checked-element-behavior 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      9 -->
     10 
     11 <link rel="import" href="../polymer/polymer.html">
     12 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
     13 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
     14 
     15 <script>
     16 
     17   /**
     18    * Use `Polymer.IronCheckedElementBehavior` to implement a custom element
     19    * that has a `checked` property, which can be used for validation if the
     20    * element is also `required`. Element instances implementing this behavior
     21    * will also be registered for use in an `iron-form` element.
     22    *
     23    * @demo demo/index.html
     24    * @polymerBehavior Polymer.IronCheckedElementBehavior
     25    */
     26   Polymer.IronCheckedElementBehaviorImpl = {
     27 
     28     properties: {
     29       /**
     30        * Fired when the checked state changes.
     31        *
     32        * @event iron-change
     33        */
     34 
     35       /**
     36        * Gets or sets the state, `true` is checked and `false` is unchecked.
     37        */
     38       checked: {
     39         type: Boolean,
     40         value: false,
     41         reflectToAttribute: true,
     42         notify: true,
     43         observer: '_checkedChanged'
     44       },
     45 
     46       /**
     47        * If true, the button toggles the active state with each tap or press
     48        * of the spacebar.
     49        */
     50       toggles: {
     51         type: Boolean,
     52         value: true,
     53         reflectToAttribute: true
     54       },
     55 
     56       /* Overriden from Polymer.IronFormElementBehavior */
     57       value: {
     58         type: String,
     59         value: 'on',
     60         observer: '_valueChanged'
     61       }
     62     },
     63 
     64     observers: [
     65       '_requiredChanged(required)'
     66     ],
     67 
     68     created: function() {
     69       // Used by `iron-form` to handle the case that an element with this behavior
     70       // doesn't have a role of 'checkbox' or 'radio', but should still only be
     71       // included when the form is serialized if `this.checked === true`.
     72       this._hasIronCheckedElementBehavior = true;
     73     },
     74 
     75     /**
     76      * Returns false if the element is required and not checked, and true otherwise.
     77      * @param {*=} _value Ignored.
     78      * @return {boolean} true if `required` is false, or if `required` and `checked` are both true.
     79      */
     80     _getValidity: function(_value) {
     81       return this.disabled || !this.required || (this.required && this.checked);
     82     },
     83 
     84     /**
     85      * Update the aria-required label when `required` is changed.
     86      */
     87     _requiredChanged: function() {
     88       if (this.required) {
     89         this.setAttribute('aria-required', 'true');
     90       } else {
     91         this.removeAttribute('aria-required');
     92       }
     93     },
     94 
     95     /**
     96      * Fire `iron-changed` when the checked state changes.
     97      */
     98     _checkedChanged: function() {
     99       this.active = this.checked;
    100       this.fire('iron-change');
    101     },
    102 
    103     /**
    104      * Reset value to 'on' if it is set to `undefined`.
    105      */
    106     _valueChanged: function() {
    107       if (this.value === undefined || this.value === null) {
    108         this.value = 'on';
    109       }
    110     }
    111   };
    112 
    113   /** @polymerBehavior Polymer.IronCheckedElementBehavior */
    114   Polymer.IronCheckedElementBehavior = [
    115     Polymer.IronFormElementBehavior,
    116     Polymer.IronValidatableBehavior,
    117     Polymer.IronCheckedElementBehaviorImpl
    118   ];
    119 
    120 </script>
    121