From 01c39aa8874a80851706ba050211a10ea0eac091 Mon Sep 17 00:00:00 2001
From: WrinklyNinja <wrinklyninja1@gmail.com>
Date: Fri, 18 Jul 2014 23:12:01 +0100
Subject: [PATCH] Refactored plugin card menu code.

Also made some classes IDs, because encapsulation.
---
 resources/report/css/style.css | 12 +++++
 resources/report/js/custom.js  | 20 ++++++++
 resources/report/js/plugin.js  | 13 -----
 resources/report/report.html   | 87 ++++++++++++++++------------------
 4 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index 436de7be..c89c6362 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -282,6 +282,18 @@ li.error{
 li.warn{
     background:#FFDD55;
 }
+.version{
+    color:#6394F8;
+}
+.crc{
+    color:#BC8923;
+}
+.tag.add {
+    color:green;
+}
+.tag.remove {
+    color:red;
+}
 
 #settings {
     width: auto;
diff --git a/resources/report/js/custom.js b/resources/report/js/custom.js
index 5e78c8ea..1051f6cb 100644
--- a/resources/report/js/custom.js
+++ b/resources/report/js/custom.js
@@ -25,6 +25,24 @@
 /* Create a <plugin-card> element type. */
 var pluginCardProto = Object.create(HTMLElement.prototype, {
 
+
+    onMenuItemClick: {
+        value: function(evt) {
+
+        }
+    },
+
+    onMenuClick: {
+        value: function(evt) {
+            var section = evt.currentTarget.parentElement.parentElement;
+            section.querySelector('#editMetadata').addEventListener('click', this.onMenuItemClick, false);
+            section.querySelector('#copyMetadata').addEventListener('click', this.onMenuItemClick, false);
+            section.querySelector('#clearMetadata').addEventListener('click', this.onMenuItemClick, false);
+
+            section.querySelector('#menu').classList.toggle('hidden');
+        }
+    },
+
     createdCallback: {
 
         value: function() {
@@ -43,6 +61,8 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
             version.className = 'version';
             this.appendChild(version);
 
+            this.shadowRoot.querySelector('#menuButton').addEventListener('click', this.onMenuClick, false);
+
         }
 
     }
diff --git a/resources/report/js/plugin.js b/resources/report/js/plugin.js
index 89f8558a..5fe1a162 100644
--- a/resources/report/js/plugin.js
+++ b/resources/report/js/plugin.js
@@ -36,16 +36,6 @@ function Plugin(obj) {
 
     this.id = this.name.replace(/\s+/g, '');
 
-    Plugin.prototype.onMenuItemClick = function(evt) {
-
-    }
-
-    Plugin.prototype.onMenuClick = function(evt) {
-        card.querySelector('.editMetadata').addEventListener('click', this.onMenuItemClick, false);
-        card.querySelector('.editMetadata').addEventListener('click', this.onMenuItemClick, false);
-        card.querySelector('.editMetadata').addEventListener('click', this.onMenuItemClick, false);
-    }
-
     Plugin.prototype.getTagsStrings = function () {
         var tagsAdded = [];
         var tagsRemoved = [];
@@ -116,9 +106,6 @@ function Plugin(obj) {
         card.setAttribute('data-bsa', this.loadsBSA);
         card.setAttribute('data-edits', this.userlist != undefined);
 
-        card.shadowRoot.querySelector('.pluginMenu').addEventListener('click', this.onMenuClick, false);
-
-
         document.getElementById('main').appendChild(card);
     }
 
diff --git a/resources/report/report.html b/resources/report/report.html
index a1135545..1d2778ad 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -24,16 +24,16 @@
             transition: 0.6s;
             transform-style: flat;
         }
-        :host([data-active=false]) .activeTick {
+        :host([data-active=false]) #activeTick {
             visibility: hidden;
         }
-        :host([data-bsa=false]) .loadsBSA {
+        :host([data-bsa=false]) #loadsBSA {
             display: none;
         }
-        :host([data-dummy=false]) .dummyPlugin {
+        :host([data-dummy=false]) #dummyPlugin {
             display: none;
         }
-        :host([data-edits=false]) .hasUserEdits {
+        :host([data-edits=false]) #hasUserEdits {
             display: none;
         }
 
@@ -59,7 +59,7 @@
             backface-visibility: visible;
             display:block;
         }
-        .icons {
+        #icons {
             background: transparent;
             margin: 0;
             padding: 0;
@@ -69,23 +69,23 @@
             right: 0.5em;
             overflow:visible;
         }
-        .icons .fa {
+        #icons .fa {
             color: grey;
             text-align: center;
             display: inline-block;
             margin: 0.2em;
             cursor: pointer;
         }
-        .icons > li:hover {
+        #icons > li:hover {
             color: black;
         }
-        .pluginMenu {
+        #menuButton {
             width: 1.5em;
             text-align: center;
             margin: 0.2em;
             cursor: pointer;
         }
-        .menu {
+        #menu {
             background: white;
             box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
             font:10pt/1.5 Helvetica,sans-serif;
@@ -98,14 +98,19 @@
             opacity: 1;
             padding:0;
             color: black;
+            top: 2em;
         }
-        .menu > li {
+        #menu > li {
             padding: 0.2em 0.5em;
             cursor: pointer;
+            display: block;
         }
-        .menu > li:hover {
+        #menu > li:hover {
             background:#e3e3e3;
         }
+        #menu span {
+            padding-right: 0.4em;
+        }
         ::content h1 {
             margin: 0;
             font-weight: normal;
@@ -123,28 +128,16 @@
         .hidden, ::content .hidden {
             display: none;
         }
-        .activeTick {
+        #activeTick {
             color: green;
             padding-right: 0.5em;
         }
-        .version{
-            color:#6394F8;
-        }
-        .crc{
-            color:#BC8923;
-        }
-        .tag.add {
-            color:green;
-        }
-        .tag.remove {
-            color:red;
-        }
 
-        .tableTabs {
+        #tableTabs {
             margin: 1.5em 1em;
             display: table;
         }
-        .tableTabs > span {
+        #tableTabs > span {
             display: inline-block;
             padding: 0.5em;
             border: 1px black solid;
@@ -152,13 +145,13 @@
             background: #e3e3e3;
             cursor: pointer;
         }
-        .tableTabs > span:not(:first-child) {
+        #tableTabs > span:not(:first-child) {
             border-left: none;
         }
-        .tableTabs > span:hover, .tableTabs span.selected {
+        #tableTabs > span:hover, .tableTabs span.selected {
             background: #f8f8f8;
         }
-        .tableTabs .editable {
+        #tableTabs .editable {
             margin: 0;
             border-collapse: collapse;
             border: 1px black solid;
@@ -167,25 +160,25 @@
         </style>
 
         <section id="front">
-            <span class="activeTick fa fa-check" title="Active Plugin"></span>
+            <span id="activeTick" class="fa fa-check" title="Active Plugin"></span>
             <content select="h1"></content>
             <content select=".version"></content>
             <content select=".crc"></content>
             <content select=".tag.add"></content>
             <content select=".tag.remove"></content>
             <content select="ul"></content>
-            <ol class="icons">
-                <li class="dummyPlugin fa fa-eye-slash" title="Dummy Plugin"></li>
-                <li class="loadsBSA fa fa-paperclip" title="Loads BSA"></li>
-                <li class="hasUserEdits fa fa-user" title="Has User Metadata"></li>
-                <li class="fa fa-ellipsis-v fa-lg pluginMenu" data-action="toggle-menu">
-                    <ol class="menu hidden">
-                        <li class="editMetadata" data-action="show-editor" data-target=""><span class="fa fa-pencil fa-fw"></span> Edit Metadata</li>
-                        <li class="copyMetadata" data-action="copy-metadata" data-target=""><span class="fa fa-copy fa-fw"></span> Copy Metadata As Text</li>
-                        <li class="clearMetadata" data-action="clear-metadata" data-target=""><span class="fa fa-trash-o fa-fw"></span> Clear User Metadata</li>
-                    </ol>
+            <ol id="icons">
+                <li id="dummyPlugin" class="fa fa-eye-slash" title="Dummy Plugin"></li>
+                <li id="loadsBSA" class="fa fa-paperclip" title="Loads BSA"></li>
+                <li id="hasUserEdits" class="fa fa-user" title="Has User Metadata"></li>
+                <li id="menuButton" class="fa fa-ellipsis-v fa-lg">
                 </li>
             </ol>
+            <ol id="menu" class="hidden">
+                <li id="editMetadata"><span class="fa fa-pencil fa-fw"></span>Edit Metadata</li>
+                <li id="copyMetadata"><span class="fa fa-copy fa-fw"></span>Copy Metadata As Text</li>
+                <li id="clearMetadata"><span class="fa fa-trash-o fa-fw"></span>Clear User Metadata</li>
+            </ol>
         </section>
         <section id="editor">
             <h1></h1>
@@ -197,9 +190,9 @@
             <label for="editorGlobalPriority" title="Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.">Global Priority</label><br>
             <label for="editorPriorityValue">Priority Value</label>
             <input id="editorPriorityValue" type="number" max="999999" min="-999999" step="1">
-            <div class="tableTabs">
+            <div id="tableTabs">
                 <span class="selected" data-for="loadAfter">Load After</span><span data-for="req">Requirements</span><span data-for="inc">Incompatibilities</span><span data-for="message">Messages</span><span data-for="tags">Bash Tags</span><span data-for="dirty">Dirty Info</span>
-                <table class="editable loadAfter">
+                <table id="loadAfter" class="editable">
                     <thead>
                         <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
                     </thead>
@@ -207,7 +200,7 @@
                         <!-- File rows go here. -->
                     </tbody>
                 </table>
-                <table class="editable req hidden">
+                <table id="req" class="editable hidden">
                     <thead>
                         <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
                     </thead>
@@ -215,7 +208,7 @@
                         <!-- File rows go here. -->
                     </tbody>
                 </table>
-                <table class="editable inc hidden">
+                <table id="inc" class="editable hidden">
                     <thead>
                         <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
                     </thead>
@@ -223,7 +216,7 @@
                         <!-- File rows go here. -->
                     </tbody>
                 </table>
-                <table class="editable message hidden">
+                <table id="message" class="editable hidden">
                     <thead>
                         <tr><th>Type</th><th>Content</th><th>Condition</th><th>Language</th><th></th></tr>
                     </thead>
@@ -231,7 +224,7 @@
                         <!-- Message rows go here. -->
                     </tbody>
                 </table>
-                <table class="editable tags hidden">
+                <table id="tags" class="editable hidden">
                     <thead>
                         <tr><th>Add/Remove</th><th>Bash Tag</th><th>Condition</th><th></th></tr>
                     </thead>
@@ -239,7 +232,7 @@
                         <!-- Bash Tag rows go here. -->
                     </tbody>
                 </table>
-                <table class="editable dirty hidden">
+                <table id="dirty" class="editable hidden">
                     <thead>
                         <tr><th>CRC</th><th>ITM Count</th><th>UDR Count</th><th>Deleted Navmeshes</th><th>Cleaning Utility</th><th></th></tr>
                     </thead>