diff options
author | 2021-09-23 23:50:59 +1000 | |
---|---|---|
committer | 2021-09-23 23:59:19 +1000 | |
commit | 7a6e383cb9e7e2ae682fbb2c0efe64f4902a5047 (patch) | |
tree | 5affd94a1b65fe4f4ac802dbbffbfadd93adb6f3 /scripts/minimaws/lib | |
parent | fbc858eee2588cbb6749bafab99fb1638e45ffed (diff) |
minimaws: Added disclosure triangle controls to many sections.
Diffstat (limited to 'scripts/minimaws/lib')
-rw-r--r-- | scripts/minimaws/lib/assets/common.js | 51 | ||||
-rw-r--r-- | scripts/minimaws/lib/assets/disclosedown.svg | 4 | ||||
-rw-r--r-- | scripts/minimaws/lib/assets/discloseup.svg | 4 | ||||
-rw-r--r-- | scripts/minimaws/lib/assets/romident.js | 6 | ||||
-rw-r--r-- | scripts/minimaws/lib/assets/style.css | 2 | ||||
-rw-r--r-- | scripts/minimaws/lib/htmltmpl.py | 48 | ||||
-rw-r--r-- | scripts/minimaws/lib/wsgiserve.py | 23 |
7 files changed, 103 insertions, 35 deletions
diff --git a/scripts/minimaws/lib/assets/common.js b/scripts/minimaws/lib/assets/common.js index b7b482d5405..baedcf3940d 100644 --- a/scripts/minimaws/lib/assets/common.js +++ b/scripts/minimaws/lib/assets/common.js @@ -1,6 +1,45 @@ // license:BSD-3-Clause // copyright-holders:Vas Crabb +function make_collapsible(heading, section) +{ + var hidden = false; + var display = section.style.display; + var icon = heading.insertBefore(document.createElement('img'), heading.firstChild); + icon.setAttribute('src', assetsurl + '/disclosedown.svg'); + icon.setAttribute('class', 'disclosure'); + icon.addEventListener( + 'click', + function (event) + { + hidden = !hidden; + if (hidden) + { + icon.setAttribute('src', assetsurl + '/discloseup.svg'); + section.style.display = 'none'; + } + else + { + icon.setAttribute('src', assetsurl + '/disclosedown.svg'); + section.style.display = display; + var headingtop = 0; + for (var element = heading; element !== null; element = element.offsetParent) + headingtop += element.offsetTop; + var sectionbot = section.offsetHeight; + for (var element = section; element !== null; element = element.offsetParent) + sectionbot += element.offsetTop; + if ((window.pageYOffset + window.innerHeight) < sectionbot) + { + if ((sectionbot - headingtop) > window.innerHeight) + heading.scrollIntoView(true); + else + window.scroll(window.pageXOffset, sectionbot - window.innerHeight); + } + } + }); +} + + function make_table_sortable(tbl) { var sorticons = new Array(tbl.tHead.rows[0].cells.length); @@ -8,18 +47,16 @@ function make_table_sortable(tbl) function TableSortHelper(i) { this.column = i; - this.header = tbl.tHead.rows[0].cells[i] + this.header = tbl.tHead.rows[0].cells[i]; this.sorted = false; this.direction = 1; - this.icon = document.createElement('img'); + var container = this.header.appendChild(document.createElement('div')); + container.setAttribute('class', 'sorticon'); + + this.icon = container.appendChild(document.createElement('img')); this.icon.setAttribute('src', assetsurl + '/sortind.svg'); this.icon.addEventListener('click', this.icon_click.bind(this)); - - var container = document.createElement('div'); - container.setAttribute('class', 'sorticon'); - container.appendChild(this.icon); - this.header.appendChild(container); } TableSortHelper.prototype = (function () diff --git a/scripts/minimaws/lib/assets/disclosedown.svg b/scripts/minimaws/lib/assets/disclosedown.svg new file mode 100644 index 00000000000..ddf75e25f0f --- /dev/null +++ b/scripts/minimaws/lib/assets/disclosedown.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16" width="16"> + <path d="m 0,0 h 16 l -8,16 z" /> +</svg> diff --git a/scripts/minimaws/lib/assets/discloseup.svg b/scripts/minimaws/lib/assets/discloseup.svg new file mode 100644 index 00000000000..51e2bea9863 --- /dev/null +++ b/scripts/minimaws/lib/assets/discloseup.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16" width="16"> + <path d="m 0,0 v 16 l 16,-8 z" /> +</svg> diff --git a/scripts/minimaws/lib/assets/romident.js b/scripts/minimaws/lib/assets/romident.js index e42daf875cf..599b0674007 100644 --- a/scripts/minimaws/lib/assets/romident.js +++ b/scripts/minimaws/lib/assets/romident.js @@ -132,6 +132,7 @@ function add_unmatched(names, crc, sha1) heading.textContent = 'Unmatched'; table = div.appendChild(document.createElement('table')); table.setAttribute('id', 'table-unmatched'); + make_collapsible(heading, table); } var content; if (crc === null) @@ -160,8 +161,10 @@ function add_issues(name) var list; if (!div.hasChildNodes()) { - div.appendChild(document.createElement('h2')).textContent = 'Potential Issues'; + var heading = div.appendChild(document.createElement('h2')); + heading.textContent = 'Potential Issues'; list = div.appendChild(document.createElement('dl')); + make_collapsible(heading, list); } else { @@ -229,6 +232,7 @@ function get_machine_table(shortname, description) var table = div.appendChild(document.createElement('table')); machine_info[shortname] = table; add_matches(table, matched_names, null); + make_collapsible(heading, table); return table; } } diff --git a/scripts/minimaws/lib/assets/style.css b/scripts/minimaws/lib/assets/style.css index 8cbce4aaf0e..9ba6631a783 100644 --- a/scripts/minimaws/lib/assets/style.css +++ b/scripts/minimaws/lib/assets/style.css @@ -5,6 +5,8 @@ th { text-align: left; background-color: #ddd; padding: 0.25em } td { padding-left: 0.25em; padding-right: 0.25em } +img[class=disclosure] { height: 0.7em; margin-right: 0.25em; vertical-align: baseline } + div[class=sorticon] { float: right; height: 100%; margin-left: 0.5em } div[class=sorticon] img { height: 0.7em; vertical-align: baseline } diff --git a/scripts/minimaws/lib/htmltmpl.py b/scripts/minimaws/lib/htmltmpl.py index 7c9246865b1..a80b4099787 100644 --- a/scripts/minimaws/lib/htmltmpl.py +++ b/scripts/minimaws/lib/htmltmpl.py @@ -50,7 +50,7 @@ MACHINE_PROLOGUE = string.Template( ' <tr><th>Source file:</th><td><a href="${sourcehref}">${sourcefile}</a></td></tr>\n') MACHINE_CLONES_PROLOGUE = string.Template( - '<h2>Clones</h2>\n' \ + '<h2 id="heading-clones">Clones</h2>\n' \ '<table id="tbl-clones">\n' \ ' <thead>\n' \ ' <tr>\n' \ @@ -104,6 +104,7 @@ MACHINE_SOFTWARELISTS_TABLE_EPILOGUE = string.Template( '</table>\n' \ '<script>\n' \ ' make_table_sortable(document.getElementById("tbl-softwarelists"));\n' \ + ' make_collapsible(document.getElementById("heading-softwarelists"), document.getElementById("tbl-softwarelists"));\n' \ ' if (!document.getElementById("tbl-softwarelists").tBodies[0].rows.length)\n' \ ' {\n' \ ' document.getElementById("heading-softwarelists").style.display = "none";\n' \ @@ -112,35 +113,40 @@ MACHINE_SOFTWARELISTS_TABLE_EPILOGUE = string.Template( '</script>\n') MACHINE_OPTIONS_HEADING = string.Template( - '<h2>Options</h2>\n' \ - '<p>\n' \ - ' Format: <select id="select-options-format" onchange="update_cmd_preview()"><option value="cmd">Command line</option><option value="ini">INI file</option></select>\n' \ - ' <input type="checkbox" id="check-explicit-defaults" onchange="update_cmd_preview()"><label for="check-explicit-defaults">Explicit defaults</label>\n' \ - '</p>\n' \ - '<p id="para-cmd-preview"></p>\n') + '<h2 id="heading-options">Options</h2>\n' \ + '<div id="div-options">\n' \ + ' <p>\n' \ + ' Format: <select id="select-options-format" onchange="update_cmd_preview()"><option value="cmd">Command line</option><option value="ini">INI file</option></select>\n' \ + ' <input type="checkbox" id="check-explicit-defaults" onchange="update_cmd_preview()"><label for="check-explicit-defaults">Explicit defaults</label>\n' \ + ' </p>\n' \ + ' <p id="para-cmd-preview"></p>\n') + +MACHINE_OPTIONS_EPILOGUE = string.Template( + '</div>\n' \ + '<script>make_collapsible(document.getElementById("heading-options"), document.getElementById("div-options"));</script>\n') MACHINE_BIOS_PROLOGUE = string.Template( - '<h3>System BIOS</h3>' \ - '<select id="select-system-bios" onchange="update_cmd_preview()">') + ' <h3>System BIOS</h3>' \ + ' <select id="select-system-bios" onchange="update_cmd_preview()">') MACHINE_BIOS_OPTION = string.Template( - ' <option value="${name}" data-isdefault="${isdefault}">${name} - ${description}</option>\n') + ' <option value="${name}" data-isdefault="${isdefault}">${name} - ${description}</option>\n') MACHINE_RAM_PROLOGUE = string.Template( - '<h3>RAM Size</h3>' \ - '<select id="select-ram-option" onchange="update_cmd_preview()">') + ' <h3>RAM Size</h3>\n' \ + ' <select id="select-ram-option" onchange="update_cmd_preview()">\n') MACHINE_RAM_OPTION = string.Template( - ' <option value="${name}" data-isdefault="${isdefault}">${name} (${size})</option>\n') + ' <option value="${name}" data-isdefault="${isdefault}">${name} (${size})</option>\n') MACHINE_SLOTS_PLACEHOLDER_PROLOGUE = string.Template( - '<h3>Slots</h3>\n' \ - '<p id="para-slots-placeholder">Loading slot information…<p>\n' \ - '<script>\n') + ' <h3>Slots</h3>\n' \ + ' <p id="para-slots-placeholder">Loading slot information…<p>\n' \ + ' <script>\n') MACHINE_SLOTS_PLACEHOLDER_EPILOGUE = string.Template( - ' populate_slots(${machine});\n' - '</script>\n') + ' populate_slots(${machine});\n' + ' </script>\n') MACHINE_ROW = string.Template( ' <tr>\n' \ @@ -253,7 +259,7 @@ SOFTWARE_PROLOGUE = string.Template( ' <tr><th>Publisher:</th><td>${publisher}</td></tr>\n'); SOFTWARE_CLONES_PROLOGUE = string.Template( - '<h2>Clones</h2>\n' \ + '<h2 id="heading-clones">Clones</h2>\n' \ '<table id="tbl-clones">\n' \ ' <thead>\n' \ ' <tr>\n' \ @@ -323,7 +329,7 @@ SOFTWARELIST_PROLOGUE = string.Template( '</table>\n') SOFTWARELIST_MACHINE_TABLE_HEADER = string.Template( - '<h2>Machines</h2>\n' \ + '<h2 id="heading-machines">Machines</h2>\n' \ '<table id="tbl-machines">\n' \ ' <thead>\n' \ ' <tr>\n' \ @@ -346,7 +352,7 @@ SOFTWARELIST_MACHINE_TABLE_ROW = string.Template( ' </tr>\n') SOFTWARELIST_SOFTWARE_TABLE_HEADER = string.Template( - '<h2>Software</h2>\n' \ + '<h2 id="heading-software">Software</h2>\n' \ '<table id="tbl-software">\n' \ ' <thead>\n' \ ' <tr>\n' \ diff --git a/scripts/minimaws/lib/wsgiserve.py b/scripts/minimaws/lib/wsgiserve.py index 26e7d523904..43d5dbc1253 100644 --- a/scripts/minimaws/lib/wsgiserve.py +++ b/scripts/minimaws/lib/wsgiserve.py @@ -314,6 +314,7 @@ class MachineHandler(QueryPageHandler): manufacturer=htmlescape(clonemanufacturer or '')).encode('utf-8') if not first: yield htmltmpl.SORTABLE_TABLE_EPILOGUE.substitute(id='tbl-clones').encode('utf-8') + yield '<script>make_collapsible(document.getElementById("heading-clones"), document.getElementById("tbl-clones"));</script>\n'.encode('utf-8') # make a table of software lists yield htmltmpl.MACHINE_SOFTWARELISTS_TABLE_PROLOGUE.substitute().encode('utf-8') @@ -359,7 +360,7 @@ class MachineHandler(QueryPageHandler): size=htmlescape('{:,}'.format(size)), isdefault=('yes' if isdef else 'no')).encode('utf-8') if not first: - yield '</select>\n<script>set_default_ram_option();</script>\n'.encode('utf-8') + yield ' </select>\n <script>set_default_ram_option();</script>\n'.encode('utf-8') # placeholder for machine slots - populated by client-side JavaScript if self.dbcurs.count_slots(id): @@ -373,7 +374,7 @@ class MachineHandler(QueryPageHandler): while pending: requested = pending.pop() slots = self.slot_data(self.dbcurs.get_machine_id(requested)) - yield (' slot_info[%s] = %s;\n' % (self.sanitised_json(requested), self.sanitised_json(slots))).encode('utf-8') + yield (' slot_info[%s] = %s;\n' % (self.sanitised_json(requested), self.sanitised_json(slots))).encode('utf-8') for slotname, slot in slots['slots'].items(): for choice, card in slot.items(): carddev = card['device'] @@ -385,17 +386,21 @@ class MachineHandler(QueryPageHandler): cardid = self.dbcurs.get_machine_id(carddev) carddev = self.sanitised_json(carddev) yield ( - ' bios_sets[%s] = %s;\n machine_flags[%s] = %s;\n softwarelist_info[%s] = %s;\n' % + ' bios_sets[%s] = %s;\n machine_flags[%s] = %s;\n softwarelist_info[%s] = %s;\n' % (carddev, self.sanitised_json(self.bios_data(cardid)), carddev, self.sanitised_json(self.flags_data(cardid)), carddev, self.sanitised_json(self.softwarelist_data(cardid)))).encode('utf-8') yield htmltmpl.MACHINE_SLOTS_PLACEHOLDER_EPILOGUE.substitute( machine=self.sanitised_json(self.shortname)).encode('utf=8') + # add disclosure triangle for options if present + if haveoptions: + yield htmltmpl.MACHINE_OPTIONS_EPILOGUE.substitute().encode('utf=8') + # list devices referenced by this system/device first = True for name, desc, src in self.dbcurs.get_devices_referenced(id): if first: yield \ - '<h2>Devices Referenced</h2>\n' \ + '<h2 id="heading-dev-refs">Devices Referenced</h2>\n' \ '<table id="tbl-dev-refs">\n' \ ' <thead>\n' \ ' <tr><th>Short name</th><th>Description</th><th>Source file</th></tr>\n' \ @@ -405,13 +410,14 @@ class MachineHandler(QueryPageHandler): yield self.machine_row(name, desc, src) if not first: yield htmltmpl.SORTABLE_TABLE_EPILOGUE.substitute(id='tbl-dev-refs').encode('utf-8') + yield '<script>make_collapsible(document.getElementById("heading-dev-refs"), document.getElementById("tbl-dev-refs"));</script>\n'.encode('utf-8') # list slots where this device is an option first = True for name, desc, slot, opt, src in self.dbcurs.get_compatible_slots(id): if (first): yield \ - '<h2>Compatible Slots</h2>\n' \ + '<h2 id="heading-comp-slots">Compatible Slots</h2>\n' \ '<table id="tbl-comp-slots">\n' \ ' <thead>\n' \ ' <tr><th>Short name</th><th>Description</th><th>Slot</th><th>Choice</th><th>Source file</th></tr>\n' \ @@ -428,13 +434,14 @@ class MachineHandler(QueryPageHandler): slotoption=htmlescape(opt)).encode('utf-8') if not first: yield htmltmpl.SORTABLE_TABLE_EPILOGUE.substitute(id='tbl-comp-slots').encode('utf-8') + yield '<script>make_collapsible(document.getElementById("heading-comp-slots"), document.getElementById("tbl-comp-slots"));</script>\n'.encode('utf-8') # list systems/devices that reference this device first = True for name, desc, src in self.dbcurs.get_device_references(id): if first: yield \ - '<h2>Referenced By</h2>\n' \ + '<h2 id="heading-ref-by">Referenced By</h2>\n' \ '<table id="tbl-ref-by">\n' \ ' <thead>\n' \ ' <tr><th>Short name</th><th>Description</th><th>Source file</th></tr>\n' \ @@ -444,6 +451,7 @@ class MachineHandler(QueryPageHandler): yield self.machine_row(name, desc, src) if not first: yield htmltmpl.SORTABLE_TABLE_EPILOGUE.substitute(id='tbl-ref-by').encode('utf-8') + yield '<script>make_collapsible(document.getElementById("heading-ref-by"), document.getElementById("tbl-ref-by"));</script>\n'.encode('utf-8') yield '</html>\n'.encode('utf-8') @@ -667,6 +675,7 @@ class SoftwareListHandler(QueryPageHandler): status=htmlescape(machine_info['status'])).encode('utf-8') if not first: yield htmltmpl.SORTABLE_TABLE_EPILOGUE.substitute(id='tbl-machines').encode('utf-8') + yield '<script>make_collapsible(document.getElementById("heading-machines"), document.getElementById("tbl-machines"));</script>\n'.encode('utf-8') first = True for software_info in self.dbcurs.get_softwarelist_software(softwarelist_info['id'], self.software or None): @@ -678,6 +687,7 @@ class SoftwareListHandler(QueryPageHandler): yield '<p>No software found.</p>\n'.encode('utf-8') else: yield htmltmpl.SORTABLE_TABLE_EPILOGUE.substitute(id='tbl-software').encode('utf-8') + yield '<script>make_collapsible(document.getElementById("heading-software"), document.getElementById("tbl-software"));</script>\n'.encode('utf-8') yield '</body>\n</html>\n'.encode('utf-8') @@ -707,6 +717,7 @@ class SoftwareListHandler(QueryPageHandler): yield self.clone_row(clone_info) if not first: yield htmltmpl.SORTABLE_TABLE_EPILOGUE.substitute(id='tbl-clones').encode('utf-8') + yield '<script>make_collapsible(document.getElementById("heading-clones"), document.getElementById("tbl-clones"));</script>\n'.encode('utf-8') parts = self.dbcurs.get_software_parts(software_info['id']).fetchall() first = True |