Refactored message dialog element into HTML import.

Part of #327.

resources/report/css/style.css

@@ -189,18 +189,6 @@ dialog > h1 {
     font-weight: normal;
     text-align: center;
 }
-dialog[is=message-dialog] > h1 {
-    margin: 0;
-    margin-bottom: 1em;
-    display: inline-block;
-    text-align: left;
-}
-dialog[is=message-dialog] > span:first-child {
-    font-size: 4em;
-    position: relative;
-    margin-right: 0.5em;
-    top: 0.2em;
-}
 dialog[data-type=warn] > span:first-child  {
     color: gold;
 }

resources/report/html/message-dialog.html

@@ -0,0 +1,126 @@
+<template id="messageDialog">
+    <style>
+    @import 'css/font-awesome.min.css';
+    h1 {
+        margin: 0;
+        margin-bottom: 1em;
+        display: inline-block;
+        text-align: left;
+        font-weight: normal;
+        text-align: center;
+    }
+    .icon {
+        font-size: 4em;
+        position: relative;
+        margin-right: 0.5em;
+        top: 0.2em;
+    }
+    :host[data-type=warn] .icon  {
+        color: gold;
+    }
+    .buttons {
+        text-align: center;
+    }
+    .accept, .cancel {
+        margin: 0.5em;
+        font-size: 2em;
+    }
+    .accept {
+        color: green;
+        cursor: pointer;
+    }
+    .cancel {
+        color: red;
+        cursor: pointer;
+    }
+    </style>
+    <span class="icon fa fa-exclamation-circle"></span>
+    <h1><content select="h1"></content></h1>
+    <p><content select="p"></content></p>
+    <div class="buttons">
+        <span class="accept fa fa-check"></span>
+        <span class="cancel fa fa-close"></span>
+    </div>
+</template>
+<script>
+'use strict';
+// Record this document.
+var importDoc = document.currentScript.ownerDocument;
+
+/* Create a <message-dialog> element type that extends from <dialog>. */
+var messageDialogProto = Object.create(HTMLDialogElement.prototype, {
+
+    onClose: {
+        value: function(evt) {
+            var ret = evt.target.returnValue == 'true';
+
+            evt.target.parentElement.removeChild(evt.target);
+
+            if (evt.target.closeCallback != undefined) {
+                evt.target.closeCallback(ret);
+            }
+        }
+    },
+
+    onButtonClick: {
+        value: function(evt) {
+            /* Call the dialog's close function. */
+            evt.currentTarget.parentElement.parentNode.host.close( evt.target.className == 'accept' );
+        }
+    },
+
+    showModal: {
+        /* A type of 'error' or 'info' produces an 'OK'-only dialog box. */
+        value: function(type, title, text, closeCallback) {
+
+            this.closeCallback = closeCallback;
+
+            this.getElementsByTagName('h1')[0].textContent = title;
+            this.getElementsByTagName('p')[0].textContent = text;
+
+
+            if (type == 'error' || type == 'info') {
+                this.shadowRoot.getElementsByClassName('cancel')[0].classList.toggle('hidden', true);
+            }
+
+            HTMLDialogElement.prototype.showModal.call(this);
+        }
+    },
+
+    createdCallback: {
+        value: function() {
+
+            var template = importDoc.querySelector('#messageDialog');
+            var clone = document.importNode(template.content, true);
+            var root = this.createShadowRoot();
+            root.appendChild(clone);
+
+            this.appendChild(document.createElement('h1'));
+            this.appendChild(document.createElement('p'));
+        }
+    },
+
+    attachedCallback: {
+        value: function() {
+            this.addEventListener('close', this.onClose, false);
+
+            this.shadowRoot.getElementsByClassName('accept')[0].addEventListener('click', this.onButtonClick, false);
+            this.shadowRoot.getElementsByClassName('cancel')[0].addEventListener('click', this.onButtonClick, false);
+        }
+    },
+
+    detachedCallback: {
+        value: function() {
+            this.removeEventListener('close', this.onClose, false);
+
+            this.shadowRoot.getElementsByClassName('accept')[0].removeEventListener('click', this.onButtonClick, false);
+            this.shadowRoot.getElementsByClassName('cancel')[0].removeEventListener('click', this.onButtonClick, false);
+        }
+    }
+
+});
+var MessageDialog = document.registerElement('message-dialog', {
+    prototype: messageDialogProto,
+    extends: 'dialog'
+});
+</script>

resources/report/js/custom.js

@@ -695,102 +695,6 @@ var PluginListItem = document.registerElement('plugin-li', {
     extends: 'li'
 });
 
-/* Create a <message-dialog> element type that extends from <dialog>. */
-var messageDialogProto = Object.create(HTMLDialogElement.prototype, {
-
-    onClose: {
-        value: function(evt) {
-            var ret = evt.target.returnValue == 'true';
-
-            evt.target.parentElement.removeChild(evt.target);
-
-            if (evt.target.closeCallback != undefined) {
-                evt.target.closeCallback(ret);
-            }
-        }
-    },
-
-    onButtonClick: {
-        value: function(evt) {
-            var dialog = evt.currentTarget.parentElement.parentElement;
-
-            dialog.getElementsByClassName('accept')[0].removeEventListener('click', dialog.onButtonClick, false);
-            dialog.getElementsByClassName('cancel')[0].removeEventListener('click', dialog.onButtonClick, false);
-
-            dialog.close( evt.target.className == 'accept' );
-        }
-    },
-
-    showModal: {
-        /* A type of 'error' or 'info' produces an 'OK'-only dialog box. */
-        value: function(type, title, text, closeCallback) {
-
-            this.closeCallback = closeCallback;
-
-            this.getElementsByTagName('h1')[0].textContent = title;
-            this.getElementsByTagName('p')[0].textContent = text;
-
-            this.getElementsByClassName('accept')[0].addEventListener('click', this.onButtonClick, false);
-            this.getElementsByClassName('cancel')[0].addEventListener('click', this.onButtonClick, false);
-
-            if (type == 'error' || type == 'info') {
-                this.getElementsByClassName('accept')[0].textContent = l10n.jed.translate("OK").fetch();
-                this.getElementsByClassName('cancel')[0].classList.toggle('hidden', true);
-            }
-
-            HTMLDialogElement.prototype.showModal.call(this);
-        }
-    },
-
-    createdCallback: {
-
-        value: function() {
-
-            var icon = document.createElement('span');
-            icon.className = 'fa fa-exclamation-circle';
-            this.appendChild(icon);
-
-            var h1 = document.createElement('h1');
-            this.appendChild(h1);
-
-            var message = document.createElement('p');
-            this.appendChild(message);
-
-            var buttons = document.createElement('div');
-            buttons.className = 'buttons';
-            this.appendChild(buttons);
-
-            var accept = document.createElement('button');
-            accept.className = 'accept';
-            accept.textContent = l10n.jed.translate("Yes").fetch();
-            buttons.appendChild(accept);
-
-            var cancel = document.createElement('button');
-            cancel.className = 'cancel';
-            cancel.textContent = l10n.jed.translate("Cancel").fetch();
-            buttons.appendChild(cancel);
-        }
-    },
-
-    attachedCallback: {
-        value: function() {
-            this.addEventListener('close', this.onClose, false);
-        }
-    },
-
-    detachedCallback: {
-        value: function() {
-            this.removeEventListener('close', this.onClose, false);
-        }
-    }
-
-});
-var MessageDialog = document.registerElement('message-dialog', {
-    prototype: messageDialogProto,
-    extends: 'dialog'
-});
-
-
 /* Create a <editable-table> element type that extends from <table>. */
 var EditableTableProto = Object.create(HTMLTableElement.prototype, {
 

resources/report/report.html

@@ -4,6 +4,7 @@
     <title>LOOT</title>
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="css/font-awesome.min.css" />
+    <link rel="import" href="loot://import/message-dialog.html">
     <script src="js/require.js"></script>
 </head>
 <!-- oncontextmenu attribute disables the right-click menu. -->