Now works in insecure contexts

This commit is contained in:
jamesread 2023-09-24 23:29:51 +01:00
parent 3ea14f1353
commit 822327edfc
5 changed files with 20 additions and 1387 deletions

File diff suppressed because it is too large Load Diff

View File

@ -16,7 +16,7 @@
<body> <body>
<main title = "main content"> <main title = "main content">
<div id = "perma-widget" hidden> <div id = "perma-widget">
<div id = "sidebar-toggle-wrapper"> <div id = "sidebar-toggle-wrapper">
<label for = "sidebar-toggler" id = "sidebar-toggler-button" title = "Toggle sidebar" tabindex = "0">&#9776;</label> <label for = "sidebar-toggler" id = "sidebar-toggler-button" title = "Toggle sidebar" tabindex = "0">&#9776;</label>
</div> </div>
@ -28,15 +28,11 @@
<input type = "checkbox" id = "sidebar-toggler" hidden checked /> <input type = "checkbox" id = "sidebar-toggler" hidden checked />
<aside> <aside>
<ul> <ul>
<li>Foo</li> <li><a id = "showActions">Actions</a></li>
<li>Bar</li> <li><a id = "showLogs">Logs</a></li>
</ul> </ul>
</aside> </aside>
</div> </div>
<fieldset id = "section-switcher" title = "Sections">
<button id = "showActions">Actions</button>
<button id = "showLogs">Logs</button>
</fieldset>
<section id = "contentLogs" title = "Logs" hidden> <section id = "contentLogs" title = "Logs" hidden>
<table title = "Logs"> <table title = "Logs">
@ -136,7 +132,7 @@
<template id = "tplActionButton"> <template id = "tplActionButton">
<div> <div>
<button> <button>
<span role = "icon" title = "button icon" class = "icon">&#x1f4a9;</span> <span role = "icon" title = "action button icon" class = "icon">&#x1f4a9;</span>
<span role = "title" class = "title">Untitled Button</span> <span role = "title" class = "title">Untitled Button</span>
</button> </button>

View File

@ -53,6 +53,14 @@ class ActionButton extends window.HTMLElement {
} }
} }
getUniqueId() {
if (window.isSecureContext) {
return window.crypto.randomUUID()
} else {
return Date.now()
}
}
startAction (actionArgs) { startAction (actionArgs) {
// this.btn.disabled = true // this.btn.disabled = true
// this.isWaiting = true // this.isWaiting = true
@ -68,7 +76,7 @@ class ActionButton extends window.HTMLElement {
const startActionArgs = { const startActionArgs = {
actionName: this.btn.title, actionName: this.btn.title,
arguments: actionArgs, arguments: actionArgs,
uuid: window.crypto.randomUUID() uuid: this.getUniqueId()
} }
const btnExecution = document.createElement('execution-button') const btnExecution = document.createElement('execution-button')

View File

@ -90,7 +90,7 @@ function processWebuiSettingsJson (settings) {
document.querySelector('#available-version').hidden = false document.querySelector('#available-version').hidden = false
} }
document.querySelector('#section-switcher').hidden = !settings.ShowNavigation document.querySelector('#perma-widget').hidden = !settings.ShowNavigation
document.querySelector('footer[title="footer"]').hidden = !settings.ShowFooter document.querySelector('footer[title="footer"]').hidden = !settings.ShowFooter
if (settings.PageTitle) { if (settings.PageTitle) {

View File

@ -33,7 +33,7 @@ fieldset#root-group {
h1 { h1 {
display: inline; display: inline;
padding-left: 1em; padding-left: .5em;
font-size: small; font-size: small;
} }
@ -42,12 +42,11 @@ label#sidebar-toggler-button {
left: 0.5em; left: 0.5em;
height: 2em; height: 2em;
width: 2em; width: 2em;
border-radius: 50%;
background-color: white; background-color: white;
text-align: center; text-align: center;
display: inline-grid; display: inline-grid;
place-items: center; place-items: center;
padding: 0; padding: .2em;
box-shadow: 0 0 5px 0 #444; box-shadow: 0 0 5px 0 #444;
color: #666; color: #666;
} }
@ -291,6 +290,7 @@ img.logo {
main { main {
padding: 1em; padding: 1em;
padding-top: 3em;
} }
summary { summary {
@ -320,6 +320,8 @@ label {
#perma-widget { #perma-widget {
position: absolute; position: absolute;
top: 1em;
left: 1em;
z-index: 2; z-index: 2;
} }