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

added snapshot utilities

Browse Source
This commit is contained in:
Harry Stuart 2022-12-02 23:40:27 +11:00
parent 4c4372833e
commit b3f35d1a81
1 changed files with 128 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
implementation.html
View File

@ -65,10 +65,12 @@
--unit-spacing: 8px; --unit-spacing: 8px;
--icon-default-dim: 60px; --icon-default-dim: 60px;
--form-default-width: 450px; --form-default-width: 450px;
--form-default-height: 600px; --form-default-height: 580px;
--side-margin: calc(var(--unit-spacing) * 2); --side-margin: calc(var(--unit-spacing) * 2);
--site-falcon-purple-1: #AE55E7; --site-falcon-purple-1: #AE55E7;
--site-falcon-purple-2: #a544e3; --site-falcon-purple-2: #a544e3;
--site-falcon-blue: #0098FF;
--site-falcon-red: #FF4031;
--site-falcon-grey-1: #ececec; --site-falcon-grey-1: #ececec;
--site-falcon-grey-2: #e0e0e0; --site-falcon-grey-2: #e0e0e0;
--site-falcon-grey-3: #d3d3d3; --site-falcon-grey-3: #d3d3d3;
@ -126,6 +128,8 @@
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: transform 0.4s ease, visibility 0s linear 0.3s, opacity 0.3s linear; transition: transform 0.4s ease, visibility 0s linear 0.3s, opacity 0.3s linear;
display: flex;
flex-direction: column;
} }
#form.location-top-left { #form.location-top-left {
@ -193,16 +197,18 @@
#form-content-container { #form-content-container {
width: 100%; width: 100%;
display: flex;
flex-direction: column;
align-items: center; align-items: center;
padding-left: calc(var(--unit-spacing) * 4); padding-left: calc(var(--unit-spacing) * 4);
padding-right: calc(var(--unit-spacing) * 4); padding-right: calc(var(--unit-spacing) * 4);
padding: calc(var(--unit-spacing) * 4);
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
#input-name-container { #input-name-container {
width: 100%; width: 100%;
margin-top: calc(var(--unit-spacing) * 3);
position: relative; position: relative;
} }
@ -230,11 +236,11 @@
align-items: center; align-items: center;
} }
#input-comment + .label-md-input { #input-description + .label-md-input {
margin-top: calc(var(--unit-spacing) * 2); margin-top: calc(var(--unit-spacing) * 2);
} }
#input-name:not(#input-name[value=""]), #input-comment:not(#input-comment[value=""]) { #input-name:not(#input-name[value=""]), #input-description:not(#input-description[value=""]) {
font-size: 16px; font-size: 16px;
} }
@ -262,7 +268,7 @@
padding-right: calc(var(--unit-spacing) / 2); padding-right: calc(var(--unit-spacing) / 2);
} }
#input-comment:focus + .label-md-input > div, #input-comment:not(#input-comment[value=""]) + .label-md-input > div { #input-description:focus + .label-md-input > div, #input-description:not(#input-description[value=""]) + .label-md-input > div {
font-size: 14px; font-size: 14px;
transform: translate(0, -150%); transform: translate(0, -150%);
background-color: white; background-color: white;
@ -275,7 +281,6 @@
} }
#select-severity-container { #select-severity-container {
margin-top: calc(var(--unit-spacing) * 3);
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
@ -325,13 +330,12 @@
border-radius: 0px calc(var(--unit-spacing) / 2) calc(var(--unit-spacing) / 2) 0px; border-radius: 0px calc(var(--unit-spacing) / 2) calc(var(--unit-spacing) / 2) 0px;
} }
#input-comment-container { #input-description-container {
width: 100%; width: 100%;
margin-top: calc(var(--unit-spacing) * 3);
position: relative; position: relative;
} }
#input-comment { #input-description {
height: calc(var(--unit-spacing) * 19); height: calc(var(--unit-spacing) * 19);
resize: none; resize: none;
} }
@ -360,8 +364,27 @@
scale: 1.05; scale: 1.05;
} }
#container-snapshot {
width: 100%;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
align-items: center;
}
#container-snapshot.snapshot-taken {
grid-template-columns: 7fr 1fr 1fr;
}
#container-snapshot .material-symbols-rounded.snapshot-taken {
display: block;
}
#container-snapshot .material-symbols-rounded:hover {
cursor: pointer;
}
#button-snapshot { #button-snapshot {
margin-top: calc(var(--unit-spacing) * 3);
width: 100%; width: 100%;
height: calc(var(--unit-spacing) * 6); height: calc(var(--unit-spacing) * 6);
border-radius: calc(var(--unit-spacing) / 2); border-radius: calc(var(--unit-spacing) / 2);
@ -384,8 +407,31 @@
background-color: var(--site-falcon-grey-3); background-color: var(--site-falcon-grey-3);
} }
#container-snapshot > .material-symbols-rounded {
display: none;
margin-left: auto;
font-size: 30px;
}
#button-view-snapshot {
color: var(--site-falcon-blue);
}
#button-delete-snapshot {
color: var(--site-falcon-red);
}
#name-snapshot {
margin-left: auto;
font-family: "Alexandria", sans-serif;
font-weight: 400;
font-size: 24px;
color: green;
text-align: right;
user-select: none;
}
#button-submit { #button-submit {
margin-top: calc(var(--unit-spacing) * 3);
width: 100%; width: 100%;
height: calc(var(--unit-spacing) * 6); height: calc(var(--unit-spacing) * 6);
border-radius: calc(var(--unit-spacing) / 2); border-radius: calc(var(--unit-spacing) / 2);
@ -484,24 +530,32 @@
<div>Name</div> <div>Name</div>
</label> </label>
</div> </div>
<div id="input-comment-container"> <div id="input-description-container">
<textarea <textarea
type="text" type="text"
id="input-comment" id="input-description"
class="md-input" class="md-input"
name="comment" name="description"
value="" value=""
aria-labelledby="label-input-comment" aria-labelledby="label-input-description"
></textarea> ></textarea>
<label for="comment" class="label-md-input"> <label for="description" class="label-md-input">
<div>Comment</div> <div>Description</div>
</label> </label>
</div> </div>
<button id="button-snapshot"> <div id="container-snapshot">
<span class="material-symbols-outlined"> <button id="button-snapshot" class="taken">
photo_camera <span class="material-symbols-outlined">
photo_camera
</span>
</button>
<span id="button-view-snapshot" class="material-symbols-rounded">
image
</span> </span>
</button> <span id="button-delete-snapshot" class="material-symbols-rounded">
delete
</span>
</div>
<button id="button-submit"> <button id="button-submit">
Submit Submit
</button> </button>
@ -590,11 +644,17 @@
severityOption.addEventListener("click", (e) => this.#OnSeverityOptionClicked(e)); severityOption.addEventListener("click", (e) => this.#OnSeverityOptionClicked(e));
} }
let inputComment = this.shadowRoot.getElementById("input-comment"); let inputDescription = this.shadowRoot.getElementById("input-description");
inputComment.addEventListener("input", (e) => this.#onCommentInput(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");
buttonSnapshot.addEventListener("click", (e) => this.#onViewSnapshotButtonClicked(e));
let buttonDeleteSnapshot = this.shadowRoot.getElementById("button-delete-snapshot");
buttonDeleteSnapshot.addEventListener("click", (e) => this.#onDeleteSnapshotButtonClicked(e));
let buttonSubmit = this.shadowRoot.getElementById("button-submit"); let buttonSubmit = this.shadowRoot.getElementById("button-submit");
buttonSubmit.addEventListener("click", (e) => this.#onSubmitButtonClicked(e)); buttonSubmit.addEventListener("click", (e) => this.#onSubmitButtonClicked(e));
@ -672,10 +732,10 @@
inputName.setAttribute('value', inputName.value); inputName.setAttribute('value', inputName.value);
} }
#onCommentInput(e) { #onDescriptionInput(e) {
let inputComment = this.shadowRoot.getElementById("input-comment"); let inputDescription = this.shadowRoot.getElementById("input-description");
inputComment.setAttribute('value', inputComment.value); inputDescription.setAttribute('value', inputDescription.value);
} }
#OnSeverityOptionClicked(e) { #OnSeverityOptionClicked(e) {
@ -817,6 +877,10 @@
if (Math.abs(offsetX - this.#canvas.initialX) > 10 && Math.abs(offsetY - this.#canvas.initialY) > 10) { if (Math.abs(offsetX - this.#canvas.initialX) > 10 && Math.abs(offsetY - this.#canvas.initialY) > 10) {
await this.#takeSnapshotAsync(offsetX, offsetY); await this.#takeSnapshotAsync(offsetX, offsetY);
this.shadowRoot.getElementById("container-snapshot").classList.add("snapshot-taken");
this.shadowRoot.getElementById("button-view-snapshot").classList.add("snapshot-taken");
this.shadowRoot.getElementById("button-delete-snapshot").classList.add("snapshot-taken");
} }
this.#canvas.initialX = null; this.#canvas.initialX = null;
@ -846,8 +910,41 @@
// w.document.write(image.outerHTML); // w.document.write(image.outerHTML);
} }
#onViewSnapshotButtonClicked(e) {
}
#onDeleteSnapshotButtonClicked(e) {
this.#deleteSnapshot();
}
#deleteSnapshot() {
this.shadowRoot.getElementById("container-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");
}
#onSubmitButtonClicked(e) { #onSubmitButtonClicked(e) {
this.#renderIcon({visibility: "visible"});
this.#renderForm({visibility: "hidden"});
this.#resetForm();
}
#resetForm() {
let selectSeverityContainer = this.shadowRoot.getElementById("select-severity-container");
selectSeverityContainer.children[0].classList.add("selected");
for (let i = 1; i < selectSeverityContainer.childElementCount; i++) {
let severityOption = selectSeverityContainer.children[i];
severityOption.classList.remove("selected");
}
let inputDescription = this.shadowRoot.getElementById("input-description");
inputDescription.setAttribute("value", "");
inputDescription.value = null;
this.#deleteSnapshot();
} }
#onIconPointerOver(e) { #onIconPointerOver(e) {