Merge pull request #5 from unicef-polymer/develop

readonly state updates
unicef-polymer · May 30, 2017 · 07121d8 · 07121d8
2 parents 0e9f32e + 64f9fdb
commit 07121d8
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,7 @@ Available attributes:
 * isDisabled: Boolean, disabled state
 * labelTextTransform: String, values: 'capitalize' or 'uppercase',
 * readonly: Boolean, default: false
+* unchangedReadonlyStyle: Boolean, default: true - readonly state will look like active state, if this property is false, readonly style will have the colors reversed
 
 ## Styling
 

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "etools-checkable-input",
   "description": "Checkbox or radio input with label aligned top, right, bottom and left.",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "https://github.com/unicef-polymer/etools-checkable-input/blob/master/LICENSE.md",
   "main": "etools-checkable-input.html",
   "dependencies": {

diff --git a/etools-checkable-input.html b/etools-checkable-input.html
@@ -70,7 +70,7 @@
         max-width: calc(100% - 25px);
       }
 
-      :host(:not([readonly])) .disabled label {
+      :host .disabled label {
         color: var(--etools-checkable-input-disabled-color, #d1d1d1);
         cursor: not-allowed;
       }
@@ -96,16 +96,25 @@
         cursor: default;
       }
 
+      :host([readonly][checked][unchanged-readonly-style]) {
+        --paper-checkbox-unchecked-color: var(--etools-checkable-input-checked-color, #4a90e2);
+        --paper-radio-button-unchecked-color: var(--etools-checkable-input-checked-color, #4a90e2);
+      }
+      :host([readonly][is-disabled][unchanged-readonly-style]),
+      :host([readonly][is-disabled][checked][unchanged-readonly-style]) {
+        --paper-checkbox-unchecked-color: var(--etools-checkable-input-unchecked-color, #737373);
+        --paper-radio-button-unchecked-color: var(--etools-checkable-input-unchecked-color, #737373);
+      }
     </style>
     <div class$="[[_getElementWrapperClasses(labelAlignment)]] [[disabledClass]]">
       <label id="chLabel" class$="[[_getLabelAlignmentClasses(labelAlignment)]] [[labelTextTransform]]">[[label]]</label>
       <div class$="[[_getInputAlignmentClasses(labelAlignment)]]">
         <template is="dom-if" if="[[_isCheckbox(type)]]">
-          <paper-checkbox id="el" checked="{{checked}}" disabled$="[[isDisabled]]"
+          <paper-checkbox id="el" checked="{{checked}}" disabled$="[[_isDisabled(isDisabled, readonly)]]"
                           on-iron-change="_valueChanged"></paper-checkbox>
         </template>
         <template is="dom-if" if="[[_isRadioBtn(type)]]">
-          <paper-radio-button id="el" checked="{{checked}}" disabled$="[[isDisabled]]"
+          <paper-radio-button id="el" checked="{{checked}}" disabled$="[[_isDisabled(isDisabled, readonly)]]"
                               on-iron-change="_valueChanged"></paper-radio-button>
         </template>
       </div>
@@ -146,27 +155,59 @@
           isDisabled: {
             type: Boolean,
             value: false,
+            reflectToAttribute: true,
             observer: '_updateDisabledClass'
           },
           readonly: {
             type: Boolean,
             value: false,
             reflectToAttribute: true
+          },
+          unchangedReadonlyStyle: {
+            type: Boolean,
+            value: true,
+            reflectToAttribute: true
           }
         },
-
-        ready: function() {
+        observers: ['_stateChanged(readonly, isDisabled, checked)'],
+        listeners: {
+          'chLabel.tap': '_updateInputVal'
+        },
+        _stateChanged: function(readonly, isDisabled, checked) {
           this.async(function() {
-            if (this.readonly) {
-              this.$$('#el')._buttonStateChanged = function() {
-                return false;
-              };
+            var el = this.$$('#el');
+            if (el) {
+              var elem;
+              if (this.type === 'checkbox') {
+                // checkbox
+                elem = [el.$.checkbox];
+              } else {
+                // radio
+                elem = [el.$.offRadio, el.$.onRadio];
+              }
+              if (isDisabled) {
+                this._updateOpacity(elem, '');
+                return;
+              }
+              if (readonly) {
+                this._updateOpacity(elem, '1');
+              } else {
+                this._updateOpacity(elem, '');
+              }
             }
-          }.bind(this));
+          });
         },
-
-        listeners: {
-          'chLabel.tap': '_updateInputVal'
+        _updateOpacity: function(elements, opacityValue) {
+          if (!(elements instanceof Array && elements.length)) {
+            return;
+          }
+          elements.forEach(function(el) {
+            el.style.opacity = opacityValue;
+          });
+          this.updateStyles();
+        },
+        _isDisabled: function(isDisabled, readonly) {
+          return isDisabled || readonly;
         },
         _valueChanged: function() {
           this.fire('value-changed', {checked: this.checked === true ? true : false});