Harry/site-falcon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed z index

Browse Source
This commit is contained in:
Harry Stuart 2022-12-03 11:34:39 +11:00
parent f3797e0f5f
commit ce236254d2
1 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
implementation.html
View File

@ -60,24 +60,29 @@
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"); @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"); @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
* { :host {
box-sizing: border-box; position: relative;
--unit-spacing: 8px; z-index: 9998!important;
--icon-default-dim: 60px; --unit-spacing: 8px;
--form-default-width: 450px; --icon-default-dim: 60px;
--form-default-height: 580px; --form-default-width: 450px;
--side-margin: calc(var(--unit-spacing) * 2); --form-default-height: 580px;
--site-falcon-purple-1: #AE55E7; --side-margin: calc(var(--unit-spacing) * 2);
--site-falcon-purple-2: #a544e3; --site-falcon-purple-1: #AE55E7;
--site-falcon-blue: #0098FF; --site-falcon-purple-2: #a544e3;
--site-falcon-red: #FF4031; --site-falcon-blue: #0098FF;
--site-falcon-grey-1: #ececec; --site-falcon-red: #FF4031;
--site-falcon-grey-2: #e0e0e0; --site-falcon-grey-1: #ececec;
--site-falcon-grey-3: #d3d3d3; --site-falcon-grey-2: #e0e0e0;
--site-falcon-grey-4: #5A5A5A; --site-falcon-grey-3: #d3d3d3;
--form-element-border-size: 2px; --site-falcon-grey-4: #5A5A5A;
--form-border-radius: var(--unit-spacing); --form-element-border-size: 2px;
} --form-border-radius: var(--unit-spacing);
}
* {
box-sizing: border-box;
}
#icon { #icon {
width: var(--icon-default-dim); width: var(--icon-default-dim);
@ -378,6 +383,7 @@
#container-snapshot .material-symbols-rounded.snapshot-taken { #container-snapshot .material-symbols-rounded.snapshot-taken {
display: block; display: block;
user-select: none;
} }
#container-snapshot .material-symbols-rounded:hover { #container-snapshot .material-symbols-rounded:hover {
@ -495,7 +501,7 @@
<div id="form"> <div id="form">
<div id="form-header"> <div id="form-header">
<span id="form-button-help" class="material-symbols-rounded form-header-button"> <span title="View Help" id="form-button-help" class="material-symbols-rounded form-header-button">
help help
</span> </span>
<div id="form-title"> <div id="form-title">
@ -564,15 +570,15 @@
</label> </label>
</div> </div>
<div id="container-snapshot"> <div id="container-snapshot">
<button id="button-snapshot" class="taken"> <button title="Take Snapshot" id="button-snapshot" class="taken">
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">
photo_camera photo_camera
</span> </span>
</button> </button>
<span id="button-view-snapshot" class="material-symbols-rounded"> <span title="View Snapshot" id="button-view-snapshot" class="material-symbols-rounded">
image image
</span> </span>
<span id="button-delete-snapshot" class="material-symbols-rounded"> <span title="Delete Snapshot" id="button-delete-snapshot" class="material-symbols-rounded">
delete delete
</span> </span>
</div> </div>
@ -673,10 +679,10 @@
inputDescription.addEventListener("input", (e) => this.#onDescriptionInput(e)); inputDescription.addEventListener("input", (e) => this.#onDescriptionInput(e));
let buttonSnapshot = this.shadowRoot.getElementById("button-snapshot"); let buttonSnapshot = this.shadowRoot.getElementById("button-snapshot");
buttonSnapshot.addEventListener("click", (e) => this.#onsnapshotButtonClicked(e)); buttonSnapshot.addEventListener("click", (e) => this.#onSnapshotButtonClicked(e));
let buttonViewSnapshot = this.shadowRoot.getElementById("button-view-snapshot"); let buttonViewSnapshot = this.shadowRoot.getElementById("button-view-snapshot");
buttonSnapshot.addEventListener("click", (e) => this.#onViewSnapshotButtonClicked(e)); buttonViewSnapshot.addEventListener("click", (e) => this.#onViewSnapshotButtonClicked(e));
let buttonDeleteSnapshot = this.shadowRoot.getElementById("button-delete-snapshot"); let buttonDeleteSnapshot = this.shadowRoot.getElementById("button-delete-snapshot");
buttonDeleteSnapshot.addEventListener("click", (e) => this.#onDeleteSnapshotButtonClicked(e)); buttonDeleteSnapshot.addEventListener("click", (e) => this.#onDeleteSnapshotButtonClicked(e));
@ -785,7 +791,7 @@
} }
} }
#onsnapshotButtonClicked(e) { #onSnapshotButtonClicked(e) {
this.#renderIcon({visibility: "visible"}); this.#renderIcon({visibility: "visible"});
this.#renderForm({visibility: "hidden"}); this.#renderForm({visibility: "hidden"});
@ -806,11 +812,12 @@
this.#canvasCtx.fill(); this.#canvasCtx.fill();
this.#canvasCtx.closePath(); this.#canvasCtx.closePath();
this.#setCanvasBrush("red"); this.#setCanvasBrush(2, "#FF4031");
} }
#setCanvasBrush(colour) { #setCanvasBrush(width, colour) {
this.#canvasCtx.globalAlpha = 1; this.#canvasCtx.globalAlpha = 1;
this.#canvasCtx.lineWidth = width;
this.#canvasCtx.strokeStyle = colour; this.#canvasCtx.strokeStyle = colour;
} }
@ -930,16 +937,17 @@
}) })
let base64image = snapshotCanvas.toDataURL("image/png"); let base64image = snapshotCanvas.toDataURL("image/png");
this.#form.snapshotBase64 = base64image;
// var image = new Image();
// image.src = base64image;
// var w = window.open("_blank");
// w.document.write(image.outerHTML);
} }
#onViewSnapshotButtonClicked(e) { #onViewSnapshotButtonClicked(e) {
if (this.#form.snapshotBase64) {
let image = new Image();
image.src = this.#form.snapshotBase64;
let w = window.open("_blank");
w.document.write(image.outerHTML);
}
} }
#onDeleteSnapshotButtonClicked(e) { #onDeleteSnapshotButtonClicked(e) {
@ -947,6 +955,8 @@
} }
#deleteSnapshot() { #deleteSnapshot() {
this.#form.snapshot = null;
this.shadowRoot.getElementById("container-snapshot").classList.remove("snapshot-taken"); this.shadowRoot.getElementById("container-snapshot").classList.remove("snapshot-taken");
this.shadowRoot.getElementById("button-view-snapshot").classList.remove("snapshot-taken"); this.shadowRoot.getElementById("button-view-snapshot").classList.remove("snapshot-taken");
this.shadowRoot.getElementById("button-delete-snapshot").classList.remove("snapshot-taken"); this.shadowRoot.getElementById("button-delete-snapshot").classList.remove("snapshot-taken");