Implemented message dialog.

resources/report/css/style.css

@@ -148,7 +148,7 @@ nav a {
     flex-shrink: 10;
 }
 
-section, #settings, #about {
+section, .dialog {
     background:white;
     overflow:hidden;
     margin:1em;
@@ -226,7 +226,7 @@ section[data-active] {
 }
 
 
-#settings, #about {
+.dialog {
     padding: 2em;
     z-index:4;
     margin: 0 auto;
@@ -260,7 +260,7 @@ section h1 {
     font-size: 1.2em;
 }
 
-#settings h1, #about h1 {
+.dialog h1 {
     margin: 0;
     margin-bottom: 1em;
     text-align: center;
@@ -324,7 +324,7 @@ ul {
 .tag.remove {
     color:red;
 }
-.hidden, #about.hidden, #settings.hidden {
+.hidden {
     display:none;
 }
 #summary li, li > ul > li {
@@ -365,4 +365,8 @@ ul {
 }
 #settings th {
     border-bottom: 1px black solid;
+}
+
+.message {
+    width: 40em;
 }

resources/report/js/script.js

@@ -183,11 +183,54 @@ function togglePlugins(evt) {
     }
     document.getElementById('hiddenPluginNo').textContent = hiddenNo;
 }
+function hideDialog(evt) {
+    hideElement(document.getElementById('overlay'));
+    var target = document.getElementById(evt.target.getAttribute('data-dialog'));
+    hideElement(target);
+    if (target.id == 'modalDialog') {
+        document.body.removeChild(target);
+    }
+}
+function showMessageDialog(title, text) {
+    var content = document.getElementById('messageDialog').content;
+    var clone = document.importNode(content, true);
+    document.body.appendChild(clone);
+    clone = document.body.lastElementChild;
+
+    clone.id = 'modalDialog';
+
+    clone.children[0].textContent = title;
+    clone.children[1].textContent = text;
+
+    var overlay = document.getElementById('overlay');
+    overlay.removeEventListener('click', hideDialog, false);
+    showElement(overlay);
+
+    clone.children[2].setAttribute('data-dialog', clone.id);
+    clone.children[2].addEventListener('click', hideDialog, false);
+
+    clone.children[3].setAttribute('data-dialog', clone.id);
+    clone.children[3].addEventListener('click', hideDialog, false);
+}
+function showMessageBox(type, title, text) {
+
+}
+function redatePlugins() {
+    showMessageDialog('Redate Plugins', 'This feature is provided so that modders using the Creation Kit may set the load order it uses. A side-effect is that any subscribed Steam Workshop mods will be re-downloaded by Steam. Do you wish to continue?');
+
+    //showMessageBox('info', 'Redate Plugins', 'Plugins were successfully redated.');
+}
+function clearAllMetadata() {
+    showMessageDialog('Clear All Metadata', 'Are you sure you want to clear all existing user-added metadata from all plugins?');
+}
+function clearMetadata(filename) {
+    showMessageDialog('Clear Plugin Metadata', 'Are you sure you want to clear all existing user-added metadata from "' + filename + '"?');
+}
 function processButtonClick(evt) {
     var overlay = document.getElementById('overlay');
     var action = evt.currentTarget.getAttribute('data-action');
-    var target = document.getElementById(evt.currentTarget.getAttribute('data-target'));
     if (action == 'view-ui') {
+        var target = document.getElementById(evt.currentTarget.getAttribute('data-target'));
         if (isVisible(target)) {
             hideElement(target);
             if (target.getAttribute('data-overlay')) {
@@ -203,6 +246,7 @@ function processButtonClick(evt) {
             showElement(target);
             if (target.getAttribute('data-overlay') == '1') {
                 overlay.setAttribute('data-dialog', target.id);
+                overlay.addEventListener('click', hideDialog, false);
                 showElement(overlay);
             } else {
                 var replace = target.getAttribute('data-replace');
@@ -218,12 +262,10 @@ function processButtonClick(evt) {
         } else {
             showElement(target);
         }
+    } else if (action == 'redate-plugins') {
+        redatePlugins();
     }
 }
-function toggleOverlay(evt) {
-    hideElement(evt.target);
-    hideElement(document.getElementById(evt.target.getAttribute('data-dialog')));
-}
 function setupEventHandlers() {
     var elements;
     if (isStorageSupported()) { /*Set up filter value and CSS setting storage read/write handlers.*/
@@ -246,7 +288,6 @@ function setupEventHandlers() {
     for (var i = 0; i < elements.length; ++i) {
         elements[i].addEventListener('click', processButtonClick, false);
     }
-    overlay.addEventListener('click', toggleOverlay, false);
 }
 function processURLParams() {
     /* Get the data path from the URL and load it. */

resources/report/report.html

@@ -46,15 +46,8 @@
             </ol>
         </section>
     </template>
-    <template id="messageBox">
-        <div class="messageBox">
-            <h1></h1>
-            <p></p>
-            <button>Close</button>
-        </div>
-    </template>
     <template id="messageDialog">
-        <div class="messageDialog">
+        <div class="message dialog">
             <h1></h1>
             <p></p>
             <button>Yes</button>
@@ -170,7 +163,7 @@
         </div>
     </div>
 
-    <div id="about" class="hidden" data-overlay="1">
+    <div id="about" class="dialog hidden" data-overlay="1">
         <h1>LOOT <span id="LOOTVersion"></span></h1>
         <p>Copyright &copy; 2012&ndash;2014 LOOT Team
         <p>Load order optimisation for Oblivion, Skyrim, Fallout 3 and Fallout: New Vegas.
@@ -191,7 +184,7 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
         </blockquote>
     </div>
 
-    <div id="settings" class="hidden" data-overlay="1">
+    <div id="settings" class="dialog hidden" data-overlay="1">
         <h1>Settings</h1>
         <form>
             <label for="defaultGameSelect">Default Game</label>