Implemented use of <dialog> element.

This branch now requires the CEF trunk (anything based on Chromium 37+).

resources/report/css/style.css

@@ -157,7 +157,7 @@ nav a {
     /*-webkit-perspective: 1000;*/
 }
 
-section, .dialog {
+section {
     background:white;
     overflow:hidden;
     margin:1em;
@@ -166,6 +166,16 @@ section, .dialog {
     position: relative;
 }
 
+dialog {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    overflow:hidden;
+    padding: 2em;
+    top: 3em;
+    max-width: 40em;
+}
+
 section[data-active] {
     overflow:visible;
     /*transition: 0.6s;
@@ -244,15 +254,6 @@ section[data-active] .icons {
 }
 
 
-.dialog {
-    padding: 2em;
-    z-index:4;
-    margin: 0 auto;
-    display:table;
-    position: relative;
-    top: 3em;
-    max-width: 90%;
-}
 
 #about h1, #about p {
     text-align: center;
@@ -261,6 +262,10 @@ section[data-active] .icons {
 #about blockquote {
     white-space: pre;
 }
+#about button {
+    margin: 0 auto;
+    display: block;
+}
 
 #overlay {
     z-index: 3;
@@ -278,12 +283,6 @@ section h1 {
     font-size: 1.2em;
 }
 
-.dialog h1 {
-    margin: 0;
-    margin-bottom: 1em;
-    text-align: center;
-    font-weight: normal;
-}
 #filters {
     margin: 0;
     padding: 0;
@@ -363,6 +362,10 @@ li.warn{
     background:#FFDD55;
 }
 
+#settings {
+    width: auto;
+    max-width: 90%;
+}
 #settings > select {
     float: right;
     clear: both;
@@ -376,21 +379,7 @@ li.warn{
     margin: 2px;
 }
 
-.dialog.message {
-    width: 40em;
-}
-.dialog.message span:first-child {
-    font-size: 4em;
-    position: absolute;
-    left: 1em;
-    top: 23px;
-}
-.message span.warn  {
-    color: gold;
-}
-.dialog .buttons {
-    text-align: center;
-}
+
 
 input[readonly] {
     border: none;

resources/report/js/custom.js

@@ -50,7 +50,7 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
 });
 var PluginCard = document.registerElement('plugin-card', {prototype: pluginCardProto});
 
-/* Create a <plugin-li> element type. */
+/* Create a <plugin-li> element type that extends from <li>. */
 var pluginLIProto = Object.create(HTMLLIElement.prototype, {
 
     createdCallback: {
@@ -78,3 +78,31 @@ var PluginListItem = document.registerElement('plugin-li', {
     prototype: pluginLIProto,
     extends: 'li'
 });
+
+/* Create a <message-dialog> element type that extends from <dialog>.
+   Use a data-type member on the element to style its type. */
+var messageDialogProto = Object.create(HTMLDialogElement.prototype, {
+
+    createdCallback: {
+
+        value: function() {
+
+            var template = document.getElementById('messageDialog');
+            var clone = document.importNode(template.content, true);
+
+            this.createShadowRoot().appendChild(clone);
+
+            var h1 = document.createElement('h1');
+            this.appendChild(h1);
+            var message = document.createElement('p');
+            this.appendChild(message);
+
+        }
+
+    }
+
+});
+var MessageDialog = document.registerElement('message-dialog', {
+    prototype: messageDialogProto,
+    extends: 'dialog'
+});

resources/report/js/script.js

@@ -155,60 +155,44 @@ function togglePlugins(evt) {
     document.getElementById('hiddenPluginNo').textContent = hiddenPluginNo;
 }
 function hideDialog(evt) {
-    var target = document.getElementById(evt.target.getAttribute('data-dialog'));
-    hideElement(target);
-    if (target.id == 'modalDialog') {
-        document.body.removeChild(target);
-    }
-    overlay.setAttribute('data-dialog', '');
-    overlay.removeEventListener('click', hideDialog, false);
-    hideElement(document.getElementById('overlay'));
+    var dialog = document.getElementsByTagName('dialog')[0];
+    dialog.close(evt.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';
+    var dialog = document.getElementsByTagName('dialog')[0];
 
-    clone.getElementsByTagName('span')[0].className += ' warn';
+    dialog.id = 'modalDialog';
+    dialog.setAttribute('data-type', 'warn');
 
-    clone.getElementsByTagName('h1')[0].textContent = title;
-    clone.getElementsByTagName('p')[0].textContent = text;
+    dialog.getElementsByTagName('h1')[0].textContent = title;
+    dialog.getElementsByTagName('p')[0].textContent = text;
 
-    var overlay = document.getElementById('overlay');
-    overlay.removeEventListener('click', hideDialog, false);
-    showElement(overlay);
+    dialog.shadowRoot.querySelector('#accept').setAttribute('data-dialog', dialog.id);
+    dialog.shadowRoot.querySelector('#accept').addEventListener('click', hideDialog, false);
 
-    clone.getElementsByClassName('accept')[0].setAttribute('data-dialog', clone.id);
-    clone.getElementsByClassName('accept')[0].addEventListener('click', hideDialog, false);
+    dialog.shadowRoot.querySelector('#cancel').setAttribute('data-dialog', dialog.id);
+    dialog.shadowRoot.querySelector('#cancel').addEventListener('click', hideDialog, false);
 
-    clone.getElementsByClassName('cancel')[0].setAttribute('data-dialog', clone.id);
-    clone.getElementsByClassName('cancel')[0].addEventListener('click', hideDialog, false);
+    dialog.showModal();
 }
 function showMessageBox(type, 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';
+    var dialog = document.getElementsByTagName('dialog')[0];
 
-    clone.getElementsByTagName('span')[0].classList.add(type);
+    dialog.id = 'modalDialog';
+    dialog.setAttribute('data-type', type);
 
-    clone.getElementsByTagName('h1')[0].textContent = title;
-    clone.getElementsByTagName('p')[0].textContent = text;
+    dialog.getElementsByTagName('h1')[0].textContent = title;
+    dialog.getElementsByTagName('p')[0].textContent = text;
 
-    var overlay = document.getElementById('overlay');
-    overlay.removeEventListener('click', hideDialog, false);
-    showElement(overlay);
+    dialog.shadowRoot.querySelector('#accept').textContent = 'OK';
+    dialog.shadowRoot.querySelector('#accept').setAttribute('data-dialog', dialog.id);
+    dialog.shadowRoot.querySelector('#accept').addEventListener('click', hideDialog, false);
 
-    clone.getElementsByClassName('accept')[0].textContent = 'OK';
-    clone.getElementsByClassName('accept')[0].setAttribute('data-dialog', clone.id);
-    clone.getElementsByClassName('accept')[0].addEventListener('click', hideDialog, false);
+    hideElement(dialog.shadowRoot.querySelector('#cancel'));
 
-    hideElement(clone.getElementsByClassName('cancel')[0]);
+    dialog.showModal();
 }
 function openLogLocation(evt) {
     var request_id = window.cefQuery({
@@ -446,30 +430,24 @@ function showEditor(evt) {
         /* Finally, show editor. */
         section.classList.toggle('flip');
 }
-function closeSettings(evt) {
-    var isValid = true;
-    if (evt.target.className.indexOf('accept') != -1) {
-        /* First validate table inputs. */
-        var inputs = evt.target.parentElement.parentElement.getElementsByTagName('input');
-        /* If an input is readonly, it doesn't validate, so check required / value length explicitly.
-        */
-        for (var i = 0; i < inputs.length; ++i) {
-            if (inputs[i].readOnly) {
-                if (inputs[i].required && inputs[i].value.length == 0) {
-                    isValid = false;
-                    console.log(inputs[i]);
-                    inputs[i].readOnly = false;
-                }
-            } else if (!inputs[i].checkValidity()) {
-                isValid = false;
+function areSettingsValid() {
+    /* First validate table inputs. */
+    var inputs = document.getElementById('settings').getElementsByTagName('input');
+    /* If an input is readonly, it doesn't validate, so check required / value length explicitly.
+    */
+    for (var i = 0; i < inputs.length; ++i) {
+        if (inputs[i].readOnly) {
+            if (inputs[i].required && inputs[i].value.length == 0) {
+                return false;
                 console.log(inputs[i]);
+                inputs[i].readOnly = false;
             }
+        } else if (!inputs[i].checkValidity()) {
+            return false;
+            console.log(inputs[i]);
         }
     }
-    if (isValid) {
-        hideElement(evt.target.parentElement.parentElement);
-        hideElement(document.getElementById('overlay'));
-    }
+    return true;
 }
 function toggleMenu(evt) {
     var target = document.getElementById('currentMenu');
@@ -529,26 +507,21 @@ function toggleFiltersList(evt) {
         hideElement(plugins);
     }
 }
+
+function closeAboutDialog(evt) {
+    evt.target.parentElement.close();
+}
 function showAboutDialog(evt) {
-    var target = document.getElementById('about');
-    var overlay = document.getElementById('overlay');
-
-    overlay.setAttribute('data-dialog', target.id);
-    overlay.addEventListener('click', hideDialog, false);
-
-    showElement(target);
-    showElement(overlay);
+    document.getElementById('about').showModal();
+}
+function closeSettingsDialog(evt) {
+    if (!areSettingsValid()) {
+        evt.preventDefault();
+        return;
+    }
 }
 function showSettingsDialog(evt) {
-    var target = document.getElementById('settings');
-    var overlay = document.getElementById('overlay');
-
-    var buttons = target.getElementsByTagName('button');
-    buttons[0].addEventListener('click', closeSettings, false);
-    buttons[1].addEventListener('click', closeSettings, false);
-
-    showElement(target);
-    showElement(overlay);
+    document.getElementById('settings').showModal();
 }
 function toggleInputRO(evt) {
     if (evt.target.readOnly) {
@@ -618,6 +591,23 @@ function setupEventHandlers() {
     document.getElementById('cancelSortButton').addEventListener('click', cancelSort, false);
     document.getElementById('filtersToggle').addEventListener('click', toggleFiltersList, false);
 
+    /* Set up event handlers for settings dialog. */
+    var settings = document.getElementById('settings');
+    settings.addEventListener('close', closeSettingsDialog, false);
+    settings.addEventListener('cancel', closeSettingsDialog, false);
+
+    settings.getElementsByClassName('accept')[0].addEventListener('click', function(evt){
+        evt.target.parentElement.parentElement.close(true);
+    }, false);
+    settings.getElementsByClassName('cancel')[0].addEventListener('click', function(evt){
+        evt.target.parentElement.parentElement.close(false);
+    }, false);
+
+    /* Set up about dialog handlers. */
+
+    document.getElementById('about').getElementsByTagName('button')[0].addEventListener('click', closeAboutDialog, false);
+
+
     /* Set up event handler for hover text. */
     document.body.addEventListener('mouseover', toggleHoverText, false);
 }

resources/report/report.html

@@ -131,6 +131,10 @@
             :host([data-edits=false]) .hasUserEdits {
                 visibility: hidden;
             }
+            a {
+                text-decoration: none;
+                color: black;
+            }
         </style>
         <span class="dummyPlugin fa fa-eye-slash" title="Dummy Plugin"></span>
         <span class="loadsBSA fa fa-paperclip" title="Loads BSA"></span>
@@ -140,6 +144,38 @@
             <content select=".priority"></content>
         </a>
     </template>
+    <template id="messageDialog">
+        <style>
+            @import 'css/font-awesome.min.css';
+
+            ::content > h1 {
+                margin: 0;
+                margin-bottom: 1em;
+                text-align: center;
+                font-weight: normal;
+            }
+            :host > span:first-child {
+                font-size: 4em;
+                position: absolute;
+                left: 1em;
+                top: 23px;
+            }
+            :host([data-type=warn]) > span  {
+                color: gold;
+            }
+            .buttons {
+                text-align: center;
+            }
+        </style>
+            <span class="fa fa-exclamation-circle"></span>
+            <content select="h1"></content>
+            <content></content>
+            <div class="buttons">
+                <button id="accept">Yes</button>
+                <button id="cancel">Cancel</button>
+            </div>
+        </div>
+    </template>
 
 
 
@@ -292,17 +328,6 @@
             </div>
         </div>
     </template>
-    <template id="messageDialog">
-        <div class="message dialog">
-            <span class="fa fa-exclamation-circle"></span>
-            <h1></h1>
-            <p></p>
-            <div class="buttons">
-                <button class="accept">Yes</button>
-                <button class="cancel">Cancel</button>
-            </div>
-        </div>
-    </template>
     <noscript>The LOOT Report requires Javascript to be enabled in order to function.</noscript>
     <header>
         <div id="headerOverlay"></div>
@@ -396,9 +421,9 @@
         </div>
     </div>
 
-    <div id="about" class="dialog hidden" data-overlay="1">
+    <dialog id="about">
         <h1>LOOT <span id="LOOTVersion"></span></h1>
-        <p>Copyright &copy; 2012&ndash;2014 LOOT Team
+        <p>Copyright &copy; 2012&ndash;2014 WrinklyNinja
         <p>Load order optimisation for Oblivion, Skyrim, Fallout 3 and Fallout: New Vegas.
         <p><a href="http://loot.github.io">http://loot.github.io</a>
         <blockquote>
@@ -415,9 +440,10 @@ See the GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
         </blockquote>
-    </div>
+        <button>OK</button>
+    </dialog>
 
-    <div id="settings" class="dialog hidden">
+    <dialog id="settings">
         <h1>Settings</h1>
         <label for="defaultGameSelect">Default Game</label>
         <select id="defaultGameSelect">
@@ -448,9 +474,9 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
             <button class="accept">Apply</button>
             <button class="cancel">Cancel</button>
         </div>
-    </div>
+    </dialog>
 
-    <div id="overlay" class="hidden"></div>
+    <dialog is="message-dialog"></dialog>
     <div id="hoverText" class="hidden"></div>
 
     <script src="js/script.js"></script>