From 437defa050ca941b58a79d41147cd4d6db357cfe Mon Sep 17 00:00:00 2001 From: WrinklyNinja Date: Fri, 18 Jul 2014 14:56:22 +0100 Subject: [PATCH] Implemented use of element. This branch now requires the CEF trunk (anything based on Chromium 37+). --- resources/report/css/style.css | 51 +++++------- resources/report/js/custom.js | 30 ++++++- resources/report/js/script.js | 140 +++++++++++++++------------------ resources/report/report.html | 60 ++++++++++---- 4 files changed, 157 insertions(+), 124 deletions(-) diff --git a/resources/report/css/style.css b/resources/report/css/style.css index 92ee08ad..3f19864b 100644 --- a/resources/report/css/style.css +++ b/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; diff --git a/resources/report/js/custom.js b/resources/report/js/custom.js index 77f2e337..9003963b 100644 --- a/resources/report/js/custom.js +++ b/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 element type. */ +/* Create a element type that extends from
  • . */ var pluginLIProto = Object.create(HTMLLIElement.prototype, { createdCallback: { @@ -78,3 +78,31 @@ var PluginListItem = document.registerElement('plugin-li', { prototype: pluginLIProto, extends: 'li' }); + +/* Create a element type that extends from . + 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' +}); diff --git a/resources/report/js/script.js b/resources/report/js/script.js index 232832f4..71cca719 100644 --- a/resources/report/js/script.js +++ b/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); } diff --git a/resources/report/report.html b/resources/report/report.html index 04b921b1..5e94fbbe 100644 --- a/resources/report/report.html +++ b/resources/report/report.html @@ -131,6 +131,10 @@ :host([data-edits=false]) .hasUserEdits { visibility: hidden; } + a { + text-decoration: none; + color: black; + } @@ -140,6 +144,38 @@ + @@ -292,17 +328,6 @@ -
    @@ -396,9 +421,9 @@ - + +
    -