Merge pull request #2 from chadweimer/feature/readonly

Added the ability to mark the element as readonly
chadweimer · Jul 1, 2018 · 52657f9 · 52657f9
2 parents 4edad88 + fdebb3f
commit 52657f9
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -32,6 +32,12 @@ <h3>Pre-assigned rating demo</h3>
           <iron-star-rating value="3"></iron-star-rating>
         </template>
       </demo-snippet>
+      <h3>Readonly demo</h3>
+      <demo-snippet>
+        <template>
+          <iron-star-rating value="2" readonly></iron-star-rating>
+        </template>
+      </demo-snippet>
       <h3>Custom icon demo</h3>
       <demo-snippet>
         <template>

diff --git a/iron-star-rating.html b/iron-star-rating.html
@@ -8,10 +8,12 @@
         <style>
             :host {
                 display: inline-block;
-                cursor: pointer;
                 --iron-icon-width: var(--star-rating-size, 24px);
                 --iron-icon-height: var(--star-rating-size, 24px);
             }
+            :host(:not([readonly])) {
+                cursor: pointer;
+            }
             :host[hidden] {
                 display: none !important;
             }
@@ -41,8 +43,8 @@
             iron-icon.selected ~ iron-icon {
                 color: #fdd835;
             }
-            iron-icon:hover,
-            iron-icon:hover ~ iron-icon {
+            :host(:not([readonly])) iron-icon:hover,
+            :host(:not([readonly])) iron-icon:hover ~ iron-icon {
                 color: #ffeb3b !important;
             }
         </style>
@@ -67,6 +69,7 @@
                 return {
                     value: {
                         type: Number,
+                        value: 0,
                         notify: true,
                         observer: '_valueChanged'
                     },
@@ -77,6 +80,11 @@
                     disableAutoUpdate: {
                         type: Boolean,
                         value: false,
+                    },
+                    readonly: {
+                        type: Boolean,
+                        value: false,
+                        reflectToAttribute: true,
                     }
                 };
             }
@@ -120,6 +128,10 @@
             _starClicked(e) {
                 e.preventDefault();
 
+                if (this.readonly) {
+                    return;
+                }
+
                 if (!this.disableAutoUpdate) {
                     this.value = e.model.item.value;
                 }

diff --git a/test/iron-star-rating_test.html b/test/iron-star-rating_test.html
@@ -19,9 +19,15 @@
       </template>
     </test-fixture>
 
-    <test-fixture id="ChangedPropertyTestFixture">
+    <test-fixture id="InitialValueTestFixture">
       <template>
-        <iron-star-rating prop1="new-prop1"></iron-star-rating>
+        <iron-star-rating value="3"></iron-star-rating>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ReadonlyTestFixture">
+      <template>
+        <iron-star-rating readonly></iron-star-rating>
       </template>
     </test-fixture>
 
@@ -30,19 +36,18 @@
 
         test('instantiating the element with default properties works', function() {
           var element = fixture('BasicTestFixture');
-          assert.equal(element.prop1, 'iron-star-rating');
-          var elementShadowRoot = element.shadowRoot;
-          var elementHeader = elementShadowRoot.querySelector('h2');
-          assert.equal(elementHeader.innerHTML, 'Hello iron-star-rating!');
+          assert.equal(element.value, 0);
+          assert.equal(element.readonly, false);
+        });
+
+        test('setting a value on the element works', function() {
+          var element = fixture('InitialValueTestFixture');
+          assert.equal(element.value, 3);
         });
 
-        test('setting a property on the element works', function() {
-          // Create a test fixture
-          var element = fixture('ChangedPropertyTestFixture');
-          assert.equal(element.prop1, 'new-prop1');
-          var elementShadowRoot = element.shadowRoot;
-          var elementHeader = elementShadowRoot.querySelector('h2');
-          assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+        test('setting readonly on the element works', function() {
+          var element = fixture('ReadonlyTestFixture');
+          assert.equal(element.readonly, true);
         });
 
       });