default to required, use invalid attr instead of class

GoogleWebComponents · Oct 7, 2015 · 1bb4083 · 1bb4083
1 parent f85d80c
commit 1bb4083
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 21 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -59,8 +59,7 @@
 
   <form is="iron-form" style="border: 1px solid #ccc; padding: 0 25px 25px;">
     <h2>Demo within an iron-form</h2>
-    <google-recaptcha required sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"
-      style="display: inline-block; padding-top: 2px; padding-left: 2px;"></google-recaptcha>
+    <google-recaptcha sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"></google-recaptcha>
     <div><button type="submit">Submit</button></div>
   </form>
 

diff --git a/google-recaptcha.html b/google-recaptcha.html
@@ -24,16 +24,18 @@
 @demo demo/index.html
 -->
 <dom-module id="google-recaptcha">
-  <style>
-    :host {
-      display: block;
-    }
-    :host.invalid {
-      border: 1px solid red;
-      border-radius: 3px;
-    }
-  </style>
-  <template><content></content></template>
+  <template class="foo">
+    <style>
+      :host {
+        display: inline-block;
+        padding: 2px 0 0 2px;
+      }
+      :host[invalid]:not([pristine]) {
+        border: 1px solid red;
+        border-radius: 3px;
+      }
+    </style>
+  </template>
 </dom-module>
 
 <script>
@@ -49,19 +51,38 @@
       _containerId:'',
       _captchaId:'',
 
-      _invalid: true,
-
       behaviors: [
         Polymer.IronFormElementBehavior,
         Polymer.IronValidatableBehavior
       ],
 
       _getValidity: function () {
-        this.toggleClass('invalid', this._invalid);
-        return !this._invalid;
+        this.pristine = false;
+        return !this.invalid;
       },
 
       properties: {
+        /**
+         * Whether a captcha in an iron-form is a required input.
+         */
+        required: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: true
+        },
+
+        invalid: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: true
+        },
+
+        pristine: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: true
+        },
+
         /**
          * The total time (in milliseconds) to wait for API loading
          */
@@ -153,7 +174,6 @@
         return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
       },
       ready: function () {
-
       },
       attached: function () {
         if(this.sitekey===''){
@@ -235,8 +255,7 @@
        *  @param {String} response response to store
        */
       _responseHandler: function (response) {
-        this._invalid = false;
-        this.toggleClass('invalid', this._invalid);
+        this.invalid = false;
         this.response=response;
         this.fire('captcha-response',{response:response});
       },
@@ -252,8 +271,7 @@
        * The `expiredHandler` method fires the captcha-expired event.
        */
       _expiredHandler: function () {
-        this._invalid = true;
-        this.toggleClass('invalid', this._invalid);
+        this.invalid = true;
         this.fire('captcha-expired');
       }
     });