From 7e6f90100a410d9dc0f29f3e098c5c506b7ae27e Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Thu, 13 Nov 2014 13:59:52 +0000
Subject: [PATCH] Added <loot-validated-input> element.

It wraps the paper-input stuff so there's less boilerplate, and adds
automatic validation styling.
---
 resources/report/html/editable-table.html     | 72 ++++---------------
 .../report/html/loot-validated-input.html     | 17 +++++
 2 files changed, 31 insertions(+), 58 deletions(-)
 create mode 100644 resources/report/html/loot-validated-input.html

diff --git a/resources/report/html/editable-table.html b/resources/report/html/editable-table.html
index c1458610..3cddf27f 100644
--- a/resources/report/html/editable-table.html
+++ b/resources/report/html/editable-table.html
@@ -1,20 +1,15 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/paper-input/paper-input.html">
-<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
 <link rel="import" href="../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../bower_components/core-icons/core-icons.html">
-<link rel="import" href="../bower_components/core-input/core-input.html">
 
 <link rel="import" href="loot-dropdown-menu.html">
+<link rel="import" href="loot-validated-input.html">
 
 <template id="fileRow">
     <tr>
-        <td>
-            <paper-input-decorator error="A filename is required.">
-                <input is="core-input" class="name" required>
-            </paper-input-decorator>
-        </td>
+        <td><loot-validated-input error="A filename is required." class="name" required></loot-validated-input></td>
         <td><paper-input class="display"></paper-input></td>
         <td><paper-input class="condition"></paper-input></td>
         <td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
@@ -29,11 +24,7 @@
                 <paper-item value="error">Error</paper-item>
             </loot-dropdown-menu>
         </td>
-        <td>
-            <paper-input-decorator error="A content string is required.">
-                <input is="core-input" class="content" required>
-            </paper-input-decorator>
-        </td>
+        <td><loot-validated-input error="A content string is required." class="content" required></loot-validated-input></td>
         <td><paper-input class="condition"></paper-input></td>
         <td>
             <loot-dropdown-menu class="language" valueattr="value">
@@ -51,72 +42,37 @@
                 <paper-item value="remove">Remove</paper-item>
             </loot-dropdown-menu>
         </td>
-        <td>
-            <paper-input-decorator error="A name is required.">
-                <input is="core-input" class="name" required>
-            </paper-input-decorator></td>
+        <td><loot-validated-input error="A name is required." class="name" required></loot-validated-input></td>
         <td><paper-input class="condition"></paper-input></td>
         <td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
     </tr>
 </template>
 <template id="dirtyInfoRow">
     <tr>
-        <td>
-            <paper-input-decorator error="A CRC is required.">
-                <input is="core-input" class="crc" maxlength="8" minlength="8" pattern="[0-9A-Fa-f]{8}" required>
-            </paper-input-decorator>
-        </td>
-        <td>
-            <paper-input-decorator>
-                <input is="core-input" class="itm" type="number" min="0" step="1" value="0">
-            </paper-input-decorator>
-        </td>
-        <td>
-            <paper-input-decorator>
-                <input is="core-input" class="udr" type="number" min="0" step="1" value="0">
-            </paper-input-decorator>
-        </td>
-        <td>
-            <paper-input-decorator>
-                <input is="core-input" class="nav" type="number" min="0" step="1" value="0">
-            </paper-input-decorator>
-        </td>
-        <td>
-            <paper-input-decorator error="A utility name is required.">
-                <input is="core-input" class="util" required>
-            </paper-input-decorator>
-        </td>
+        <td><loot-validated-input error="A CRC is required." class="crc" maxlength="8" minlength="8" pattern="[0-9A-Fa-f]{8}" required></loot-validated-input></td>
+        <td><loot-validated-input error="Values must be integers." class="itm" type="number" min="0" step="1" value="0"></loot-validated-input></td>
+        <td><loot-validated-input error="Values must be integers." class="udr" type="number" min="0" step="1" value="0"></loot-validated-input></td>
+        <td><loot-validated-input error="Values must be integers." class="nav" type="number" min="0" step="1" value="0"></loot-validated-input></td>
+        <td><loot-validated-input error="A utility name is required." class="util" required></loot-validated-input></td>
         <td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
     </tr>
 </template>
 <template id="locationRow">
     <tr>
-        <td>
-            <paper-input-decorator error="A link is required.">
-                <input is="core-input" class="link" required>
-            </paper-input-decorator>
-        </td>
+        <td><loot-validated-input error="A link is required." class="link" required></loot-validated-input></td>
         <td><paper-input class="ver"></paper-input></td>
         <td><paper-icon-button class="delete" icon="delete"></paper-icon-button></td>
     </tr>
 </template>
 <template id="gameRow">
     <tr>
-        <td>
-            <paper-input-decorator error="A name is required.">
-                <input is="core-input" class="name" required>
-            </paper-input-decorator>
-        </td>
+        <td><loot-validated-input error="A name is required." class="name" required></loot-validated-input></td>
         <td>
             <loot-dropdown-menu class="type" valueattr="value">
                 <!-- Game <option> elements go here. -->
             </loot-dropdown-menu>
         </td>
-        <td>
-            <paper-input-decorator error="A folder is required.">
-                <input is="core-input" class="folder" required>
-            </paper-input-decorator>
-        </td>
+        <td><loot-validated-input error="A folder is required." class="folder" required></loot-validated-input></td>
         <td><paper-input class="master"></paper-input></td>
         <td><paper-input class="repo"></paper-input></td>
         <td><paper-input class="branch"></paper-input></td>
@@ -194,7 +150,7 @@ td paper-icon-button.hidden {
                     if (trash.length > 0 && (!writableOnly || !trash[0].classList.contains('hidden'))) {
                         var rowData = {};
 
-                        var inputs = rows[i].querySelectorAll('input, paper-input, loot-dropdown-menu');
+                        var inputs = rows[i].querySelectorAll('paper-input, loot-validated-input, loot-dropdown-menu');
                         for (var j = 0; j < inputs.length; ++j) {
                             rowData[inputs[j].className] = inputs[j].value;
                         }
@@ -222,7 +178,7 @@ td paper-icon-button.hidden {
                     trash.classList.toggle('hidden', readOnly);
                 }
 
-                var inputs = row.querySelectorAll('input, paper-input, loot-dropdown-menu');
+                var inputs = row.querySelectorAll('paper-input, loot-validated-input, loot-dropdown-menu');
                 for (var i = 0; i < inputs.length; ++i) {
                     if (classMask) {
                         for (var j = 0; j < classMask.length; ++j) {
diff --git a/resources/report/html/loot-validated-input.html b/resources/report/html/loot-validated-input.html
new file mode 100644
index 00000000..d53aea53
--- /dev/null
+++ b/resources/report/html/loot-validated-input.html
@@ -0,0 +1,17 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
+<link rel="import" href="../bower_components/core-input/core-input.html">
+
+<polymer-element name="loot-validated-input" attributes="error type required maxlength minlength pattern max min step value disabled">
+    <template>
+        <paper-input-decorator error="{{error}}" isInvalid="{{!$.input.validity.valid}}" disabled?="{{disabled != undefined}}">
+            <input id="input" is="core-input" type="{{type}}" class="{{class}}" required?="{{required != undefined}}" maxlength?="{{maxlength}}" minlength?="{{minlength}}" pattern?="{{pattern}}" max?="{{max}}" min?="{{min}}" step?="{{step}}" value="{{value}}" disabled?="{{disabled != undefined}}">
+        </paper-input-decorator>
+    </template>
+    <script>
+    Polymer({
+        type: 'text',
+    });
+    </script>
+</polymer-element>
\ No newline at end of file