From 0d3eba01f48a917dce1b10c92f09a3d7f4d4ed7e Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Fri, 14 Nov 2014 16:07:19 +0000
Subject: [PATCH] Added data binding to <loot-plugin-card>.

Started to use it. Individual data members will need their own
observers, just like was the case in the Plugin object.
---
 resources/report/html/loot-plugin-card.html   | 54 +++++++++++++----
 resources/report/html/loot-plugin-editor.html | 20 ++++---
 resources/report/js/plugin.js                 | 58 +++++++------------
 resources/report/report.html                  |  2 +-
 4 files changed, 75 insertions(+), 59 deletions(-)

diff --git a/resources/report/html/loot-plugin-card.html b/resources/report/html/loot-plugin-card.html
index 19a074a4..068f97c2 100644
--- a/resources/report/html/loot-plugin-card.html
+++ b/resources/report/html/loot-plugin-card.html
@@ -24,7 +24,7 @@ loot-clear-metadata
 <link rel="import" href="loot-plugin-editor.html">
 
 
-<polymer-element name="loot-plugin-card">
+<polymer-element name="loot-plugin-card" attributes="data">
     <template>
         <style>
         /* Host and front/editor styling. */
@@ -153,15 +153,17 @@ loot-clear-metadata
                 <content select=".tag.remove"></content>
                 <content select="ul"></content>
             </section>
-            <loot-plugin-editor id="editor">
-                <h1></h1>
-                <span class="version"></span>
-                <span class="crc"></span>
-            </loot-plugin-editor>
+            <loot-plugin-editor id="editor" data="{{data}}"></loot-plugin-editor>
         </div>
     </template>
     <script>
     Polymer({
+        data: undefined,
+
+        observe: {
+            'data.crc': 'onCrcChange',
+        },
+
         attached: function() {
             this.shadowRoot.getElementById('showOnlyConflicts').addEventListener('change', this.onShowOnlyConflicts, false);
             this.shadowRoot.getElementById('editMetadata').addEventListener('click', this.onShowEditor, false);
@@ -189,6 +191,40 @@ loot-clear-metadata
             this.shadowRoot.getElementById('clearMetadata').addEventListener('click', this.onClearMetadata, false);
         },
 
+        dataChanged: function(oldValue, newValue) {
+            /* Share the data with the editor. */
+            this.shadowRoot.getElementById('editor').data = this.data;
+            if (newValue != undefined) {
+                /* Also initialise the non-simple-string data. */
+
+                /* CRC */
+                this.getElementsByClassName('crc')[0].textContent = newValue.getCrcString();
+
+                /* Bash Tags */
+                var tags = newValue.getTagStrings();
+                this.getElementsByClassName('tag add')[0].textContent = tags.added;
+                this.getElementsByClassName('tag add')[0].classList.toggle('hidden', tags.added.length == 0);
+                this.getElementsByClassName('tag remove')[0].textContent = tags.removed;
+                this.getElementsByClassName('tag remove')[0].classList.toggle('hidden', tags.removed.length == 0);
+
+                /* Messages */
+                /* First clear any existing messages. */
+                var messageUL = this.getElementsByTagName('ul')[0];
+                while(messageUL.firstElementChild) {
+                    messageUL.removeChild(messageUL.firstElementChild);
+                }
+                var messages = newValue.getUIMessages();
+                for (var i = 0; i < messages.length; ++i) {
+                    messageUL.appendChild(messages[i]);
+                }
+                messageUL.classList.toggle('hidden', messages.length == 0);
+            }
+        },
+
+        onCrcChange: function(oldValue, newValue) {
+            this.getElementsByClassName('crc')[0].textContent = this.data.getCrcString();
+        },
+
         getName: function() {
             return this.getElementsByTagName('h1')[0].textContent;
         },
@@ -196,12 +232,6 @@ loot-clear-metadata
         onShowEditor: function(evt) {
             var card = evt.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentNode.host;
 
-            /* Fill in editor toolbar. */
-            var editor = card.shadowRoot.getElementById('editor');
-            editor.querySelector('h1').textContent = card.querySelector('h1').textContent;
-            editor.querySelector('.version').textContent = card.querySelector('.version').textContent;
-            editor.querySelector('.crc').textContent = card.querySelector('.crc').textContent;
-
             /* Fire an open event, so that the UI can enter edit mode. */
             card.dispatchEvent(new CustomEvent('loot-editor-open', {
                 bubbles: true,
diff --git a/resources/report/html/loot-plugin-editor.html b/resources/report/html/loot-plugin-editor.html
index c172ccb7..050c5d3b 100644
--- a/resources/report/html/loot-plugin-editor.html
+++ b/resources/report/html/loot-plugin-editor.html
@@ -20,7 +20,7 @@ loot-editor-close
 
 <link rel="import" href="editable-table.html">
 
-<polymer-element name="loot-plugin-editor">
+<polymer-element name="loot-plugin-editor" attributes="{{data}}">
     <template>
         <style>
         /* Icon styling. */
@@ -38,17 +38,21 @@ loot-editor-close
         }
 
         /* Content styling. */
-        ::content .version, .version {
+        h1 {
+            font-weight: normal;
+            font-size: 1em;
+        }
+        .version {
             display: inline-block;
             margin-left: 1em;
             color:#6394F8;
         }
-        ::content .crc, .crc {
+        .crc {
             display: inline-block;
             margin-left: 1em;
             color:#BC8923;
         }
-        ::content .hidden, .hidden {
+        .hidden {
             display: none;
         }
 
@@ -121,9 +125,9 @@ loot-editor-close
             <core-tooltip id="activeTick" label="Active Plugin">
                 <core-icon icon="check"></core-icon>
             </core-tooltip>
-            <content select="h1"></content>
-            <content select=".version"></content>
-            <span flex><content select=".crc"></content></span>
+            <h1>{{data.name}}</h1>
+            <span class="version">{{data.version}}</span>
+            <span class="crc" flex>{{data.crc}}</span>
             <core-tooltip id="dummyPlugin" label="Dummy Plugin">
                 <core-icon icon="visibility-off"></core-icon>
             </core-tooltip>
@@ -139,7 +143,7 @@ loot-editor-close
             <div horizontal layout center>
                 <div>Priority Value</div>
                 <paper-input-decorator>
-                    <input id="priorityValue" is="core-input" type="number" max="999999" min="-999999" step="1" value="0" preventInvalidInput>
+                    <input id="priorityValue" is="core-input" type="number" max="999999" min="-999999" step="1" value="{{data.modPriority}}" preventInvalidInput>
                 </paper-input-decorator>
             </div>
             <div id="tableTabs">
diff --git a/resources/report/js/plugin.js b/resources/report/js/plugin.js
index a515aa11..24736a75 100644
--- a/resources/report/js/plugin.js
+++ b/resources/report/js/plugin.js
@@ -63,7 +63,7 @@ function Plugin(obj) {
         return tag;
     }
 
-    Plugin.prototype.updateCardTags = function() {
+    Plugin.prototype.getTagStrings = function() {
         var tagsAdded = [];
         var tagsRemoved = [];
 
@@ -88,18 +88,10 @@ function Plugin(obj) {
             }
         }
 
-        if (tagsAdded.length != 0) {
-            this.card.getElementsByClassName('tag add')[0].textContent = tagsAdded.join(', ');
-            this.card.getElementsByClassName('tag add')[0].classList.toggle('hidden', false);
-        } else {
-            this.card.getElementsByClassName('tag add')[0].classList.toggle('hidden', true);
-        }
-        if (tagsRemoved.length != 0) {
-            this.card.getElementsByClassName('tag remove')[0].textContent = tagsRemoved.join(', ');
-            this.card.getElementsByClassName('tag remove')[0].classList.toggle('hidden', false);
-        } else {
-            this.card.getElementsByClassName('tag remove')[0].classList.toggle('hidden', true);
-        }
+        return {
+            added: tagsAdded.join(', '),
+            removed: tagsRemoved.join(', ')
+        };
     }
 
     Plugin.prototype.getPriorityString = function() {
@@ -110,12 +102,16 @@ function Plugin(obj) {
         }
     }
 
-    Plugin.prototype.updateCardMessages = function() {
-        var messageUL = this.card.getElementsByTagName('ul')[0];
-        /* First clear any existing messages. */
-        while(messageUL.firstElementChild) {
-            messageUL.removeChild(messageUL.firstElementChild);
+    Plugin.prototype.getCrcString = function() {
+        if (this.crc == 0) {
+            return '';
+        } else {
+            return this.crc.toString(16).toUpperCase();
         }
+    }
+
+    Plugin.prototype.getUIMessages = function() {
+        var uiMessages = [];
         /* Now add the new messages. */
         if (this.messages && this.messages.length != 0) {
             this.messages.forEach(function(message) {
@@ -123,25 +119,18 @@ function Plugin(obj) {
                 messageLi.className = message.type;
                 // Use the Marked library for Markdown formatting support.
                 messageLi.innerHTML = marked(message.content[0].str);
-                messageUL.appendChild(messageLi);
+                uiMessages.push(messageLi);
 
             });
-            this.card.getElementsByTagName('ul')[0].classList.toggle('hidden', false);
-        } else {
-            this.card.getElementsByTagName('ul')[0].classList.toggle('hidden', true);
         }
+
+        return uiMessages;
     }
 
     Plugin.prototype.observer = function(changes) {
         changes.forEach(function(change) {
-            if (change.name == 'userlist') {
-                change.object.card.setAttribute('data-edits', change.object[change.name] != undefined);
-            } else if (change.name == 'modPriority') {
-                change.object.card.shadowRoot.getElementById('priorityValue').value = change.object[change.name];
-            } else if (change.name == 'messages') {
-                change.object.updateCardMessages();
-                /* For messages, the card's messages need updating,
-                   as do the message counts. */
+            if (change.name == 'messages') {
+                /* Update the message counts. */
                 var oldTotal = 0;
                 var newTotal = 0;
                 var oldWarns = 0;
@@ -176,20 +165,13 @@ function Plugin(obj) {
                 document.getElementById('totalMessageNo').textContent = parseInt(document.getElementById('totalMessageNo').textContent, 10) + newTotal - oldTotal;
                 document.getElementById('totalWarningNo').textContent = parseInt(document.getElementById('totalWarningNo').textContent, 10) + newWarns - oldWarns;
                 document.getElementById('totalErrorNo').textContent = parseInt(document.getElementById('totalErrorNo').textContent, 10) + newErrs - oldErrs;
-            } else if (change.name == 'tags') {
-                change.object.updateCardTags();
             } else if (change.name == 'isDirty') {
+                /* Update dirty counts. */
                 if (change.object[change.name]) {
                     document.getElementById('dirtyPluginNo').textContent = ++parseInt(document.getElementById('dirtyPluginNo').textContent, 10);
                 } else {
                     document.getElementById('dirtyPluginNo').textContent = --parseInt(document.getElementById('dirtyPluginNo').textContent, 10);
                 }
-            } else if (change.name == 'crc') {
-                if (change.object[change.name] != 0) {
-                    change.object.card.getElementsByClassName('crc')[0].textContent = change.object[change.name].toString(16).toUpperCase();
-                }
-            } else if (change.name == 'isDummy') {
-                change.object.card.setAttribute('data-dummy', change.object[change.name]);
             }
         });
     }
diff --git a/resources/report/report.html b/resources/report/report.html
index 84c65a0b..6b2cd1e1 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -201,7 +201,7 @@
             </section>
             <core-list>
                 <template>
-                    <loot-plugin-card id="{{model.id}}" data-active="{{model.isActive}}" data-dummy="{{model.isDummy}}" data-bsa="{{model.loadsBSA}}" data-edits="{{model.userlist != undefined}}">
+                    <loot-plugin-card data="{{model}}" id="{{model.id}}" data-active="{{model.isActive}}" data-dummy="{{model.isDummy}}" data-bsa="{{model.loadsBSA}}" data-edits="{{model.userlist != undefined}}">
                         <h1>{{model.name}}</h1>
                         <span class="version">{{model.version}}</span>
                         <span class="crc"></span>