Added severity select

This commit is contained in:
Harry Stuart 2022-11-27 18:31:55 +11:00
parent b0e6d13fa6
commit fe5d0de374
3 changed files with 104 additions and 348 deletions

View File

@ -1,3 +0,0 @@
<style>
</style>
<h1>yeehaw</h1>

View File

@ -1,340 +0,0 @@
const template = document.createElement("template");
{
let url = import.meta.url;
let path = url.substring(0, url.lastIndexOf("/"))
let response = await fetch(`${path}/XIconButton.html`);
template.innerHTML = await response.text();
}
class XWidget extends HTMLElement {
#icon;
#form;
#location;
#margin;
#pointerDown;
#moving;
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
this.#icon = this.#createIcon();
shadowRoot.appendChild(this.#icon)
this.#form = this.#createForm();
shadowRoot.appendChild(this.#form);
this.#margin = "20px";
this.#pointerDown = false;
this.#moving = false;
this.#location = "bottom-right";
}
connectedCallback() {
this.#render();
}
#render() {
if (this.isConnected) {
this.#renderIcon({width: "60px", height: "60px", imgSrc: this.#icon.openImgSrc});
this.#renderForm({visibility: "hidden"});
}
}
#createIcon() {
let icon = document.createElement("div");
icon.openImgSrc = "icon_open.png";
icon.closeImgSrc = "icon_close.png";
icon.addEventListener("pointerdown", (e) => this.#onIconPointerDown(e));
icon.addEventListener("pointermove", (e) => this.#onIconPointerMove(e));
icon.addEventListener("pointerup", (e) => this.#onIconPointerUp(e));
icon.addEventListener("pointerover", (e) => this.#onIconPointerOver(e));
icon.addEventListener("pointerout", (e) => this.#onIconPointerOut(e));
let iconImage = document.createElement("img");
iconImage.style.width = "100%";
iconImage.style.height = "100%";
icon.appendChild(iconImage)
return icon;
}
#createForm() {
let form = document.createElement("div");
let header = document.createElement("div");
header.id = "form-header";
form.appendChild(header);
let title = document.createElement("div");
title.id = "form-title";
header.appendChild(title);
// let headerBottom = document.createElement("hr");
// headerBottom.id = "form-header-bottom";
// form.appendChild(headerBottom);
// let nameInput = document.createElement("input");
// nameInput.id = "name-input";
// form.appendChild(nameInput);
// let commentInput = document.createElement("textarea");
// commentInput.id = "comment-input";
// form.appendChild(commentInput);
return form;
}
#renderIcon(parameters={}) {
this.#icon.style.position = "fixed";
this.#icon.style.transition = "scale 0.2s ease";
if (parameters["width"]) {
this.#icon.style.width = parameters["width"];
}
if (parameters["height"]) {
this.#icon.style.height = parameters["height"];
}
if (parameters["scale"]) {
this.#icon.style.scale = parameters["scale"];
}
if (parameters["imgSrc"]) {
this.#icon.querySelector("img").src = parameters["imgSrc"];
}
if (this.#location == "top-left") {
this.#icon.style.left = this.#margin;
this.#icon.style.top = this.#margin;
this.#icon.style.bottom = "auto";
this.#icon.style.right = "auto";
} else if (this.#location == "top-right") {
this.#icon.style.left = "auto";
this.#icon.style.top = this.#margin;
this.#icon.style.bottom = "auto";
this.#icon.style.right = this.#margin;
} else if (this.#location == "bottom-left") {
this.#icon.style.left = this.#margin;
this.#icon.style.top = "auto";
this.#icon.style.bottom = this.#margin;
this.#icon.style.right = "auto";
} else if (this.#location == "bottom-right") {
this.#icon.style.left = "auto";
this.#icon.style.top = "auto";
this.#icon.style.bottom = this.#margin;
this.#icon.style.right = this.#margin;
}
}
#renderForm(parameters={}) {
this.#form.style.width = "350px";
this.#form.style.height = "500px";
this.#form.style.backgroundColor = "white";
this.#form.style.border = "0px";
this.#form.style.borderRadius = "10px 10px 10px 10px"
this.#form.style.boxShadow = "0 4px 16px rgb(0 0 0 / 25%)";
this.#form.style.borderRadius = "15px";
this.#form.style.position = "fixed";
this.#form.style.opacity = "0";
if (this.#location == "top-left") {
this.#form.style.left = this.#margin;
this.#form.style.top = this.#icon.clientHeight + 50 + "px";
this.#form.style.bottom = "auto";
this.#form.style.right = "auto";
} else if (this.#location == "top-right") {
this.#form.style.left = "auto";
this.#form.style.top = this.#icon.clientHeight + 50 + "px";
this.#form.style.bottom = "auto";
this.#form.style.right = this.#margin;
} else if (this.#location == "bottom-left") {
this.#form.style.left = this.#margin;
this.#form.style.top = "auto";
this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
this.#form.style.right = "auto";
} else if (this.#location == "bottom-right") {
this.#form.style.left = "auto";
this.#form.style.top = "auto";
this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
this.#form.style.right = this.#margin;
}
if (parameters["visibility"]) {
// This animation feels messy - especially since opacity is always declared above as 0
if (parameters["visibility"] == "visible" && this.#form.style.visibility != "visible") {
this.#form.style.visibility = "visible";
if (parameters["animate"]) {
this.#form.style.opacity = "1";
this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
this.#form.style.transitionDelay = "0s";
}
else {
this.#form.style.transition = "";
}
}
else if (parameters["visibility"] == "hidden" && this.#form.style.visibility != "hidden") {
this.#form.style.visibility = "hidden";
if (parameters["animate"]) {
this.#form.style.opacity = "0";
this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
}
else {
this.#form.style.transition = "";
}
}
}
let header = this.#form.querySelector("#form-header");
header.style.top = "0px";
header.style.width = "100%";
header.style.height = "60px";
header.style.backgroundColor = "#AE55E7";
header.style.borderRadius = "15px 15px 0px 0px";
header.style.border = "0px";
header.style.justifyContent = "center";
header.style.alignItems = "center";
header.style.display = "flex";
// let headerBottom = this.#form.querySelector("#form-header-bottom");
// headerBottom.style.width = "100%";
// headerBottom.style.height = "10px";
// headerBottom.style.backgroundColor = "#AE55E7";
// headerBottom.style.margin = "0px";
// headerBottom.style.border = "0px";
// headerBottom.style.boxShadow = "0 0 26px -2px rgba(0, 0, 0, 0.5)";
// headerBottom.style.clipPath = "polygon(0% 0%, 100% 0%, 100% 500%, 0% 500%)";
let title = this.#form.querySelector("#form-title");
title.textContent = "New Ticket";
title.style.fontFamily = "Alexandria, sans-serif";
title.style.fontWeight = "400";
title.style.fontSize = "24px";
title.style.color = "white";
title.style.textAlign = "center";
// let nameInput = this.#form.querySelector("#name-input");
// nameInput.setAttribute("type", "text");
// nameInput.setAttribute("placeholder", "Name");
// nameInput.style.fontFamily = "Alexandria, sans-serif";
// nameInput.style.fontWeight = "300";
// nameInput.style.fontSize = "12px";
// let commentInput = this.#form.querySelector("#comment-input");
// commentInput.setAttribute("resize", "none");
// commentInput.setAttribute("overflow-y", "scroll");
// commentInput.setAttribute("rows", "15");
// commentInput.setAttribute("cols", "30");
}
#onIconPointerOver(e) {
e.preventDefault();
e.stopPropagation();
this.#renderIcon({scale: 1.05});
}
#onIconPointerOut(e) {
e.preventDefault();
e.stopPropagation();
this.#renderIcon({scale: 1});
}
#onIconPointerDown(e) {
e.preventDefault();
e.stopPropagation();
this.#pointerDown = true;
this.#icon.setPointerCapture(e.pointerId);
}
#onIconPointerMove(e) {
e.preventDefault();
e.stopPropagation();
this.#icon.style.cursor = "pointer";
if (this.#pointerDown) {
this.#moving = true;
this.#icon.style.cursor = "grabbing";
this.#snapToCorner(e.clientX, e.clientY);
}
}
#onIconPointerUp(e) {
e.preventDefault();
e.stopPropagation();
this.#icon.style.cursor = "pointer";
if (!this.#moving) {
if (this.#form.style.visibility == "visible") {
this.#renderIcon({imgSrc: this.#icon.openImgSrc});
this.#renderForm({visibility: "hidden", animate: true});
}
else {
this.#renderIcon({imgSrc: this.#icon.closeImgSrc});
this.#renderForm({visibility: "visible", animate: true});
}
}
else {
this.#moving = false;
}
this.#pointerDown = false;
this.#icon.releasePointerCapture(e.pointerId);
}
#toggleDisplayForm() {
let visibility =
this.#form.style.visibility == "visible" ?
"hidden" : "visible";
this.#renderForm({visibility: visibility})
}
#snapToCorner(anchorX, anchorY) {
let locationChanged = false;
if (anchorX < window.innerWidth / 5) {
if (this.#location != "top-left" && anchorY < window.innerHeight / 5) {
this.#location = "top-left";
locationChanged = true;
}
else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 5) {
this.#location = "bottom-left";
locationChanged = true;
}
}
else if (anchorX > window.innerWidth - window.innerWidth / 5) {
if (this.#location != "top-right" && anchorY < window.innerHeight / 5) {
this.#location = "top-right";
locationChanged = true;
}
else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 5) {
this.#location = "bottom-right";
locationChanged = true;
}
}
if (locationChanged) {
this.#renderIcon({imgSrc: this.#icon.openImgSrc});
this.#renderForm({visibility: "hidden"});
}
}
}
customElements.define("x-widget", XWidget);
document.body.appendChild(document.createElement("x-widget"));

View File

@ -1,8 +1,5 @@
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div style="height: 50px; width: 10000px; background-color: blue;"></div>
@ -50,6 +47,11 @@
<template id="x-widget-template">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,300,0,0" />
<style>
* {
box-sizing: border-box;
@ -167,16 +169,19 @@
display: flex;
flex-direction: column;
align-items: center;
padding-left: 32px;
padding-right: 32px;
}
#input-name-container {
margin-top: 50px;
width: 100%;
margin-top: 48px;
position: relative;
}
#input-name {
height: 48px;
width: 280px;
width: 100%;
border: 1px solid #c0c0c0;
border-radius: 4px;
box-sizing: border-box;
@ -220,6 +225,42 @@
#input-name:focus + #label-input-name > div {
color: var(--site-falcon-purple);
}
#select-severity-container {
margin-top: 48px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 0px;
justify-content: center;
align-items: center;
}
.severity-option {
margin: 0px;
height: 48px;
background-color: #ececec;
border: 2px solid #d3d3d3;
border-left: 0px;
}
.severity-option:hover:not(.selected) {
background-color: #e0e0e0;
cursor: pointer;
}
.severity-option.selected {
background-color: #d3d3d3;
}
#select-severity-container :first-child {
border-left: 2px solid #d3d3d3;
border-radius: 10px 0px 0px 10px;
}
#select-severity-container :last-child {
border-radius: 0px 10px 10px 0px;
}
</style>
<div id="icon">
@ -245,6 +286,37 @@
<div>Name</div>
</label>
</div>
<div id="select-severity-container">
<div class="severity-option" id="option-low-severity">
<!-- <span class="material-symbols-rounded">
priority_high
</span> -->
</div>
<div class="severity-option" id="option-medium-severity">
<!-- <span class="material-symbols-rounded">
priority_high
</span>
<span class="material-symbols-rounded">
priority_high
</span> -->
</div>
<div class="severity-option" id="option-high-severity">
<!-- <span class="material-symbols-rounded">
priority_high
</span>
<span class="material-symbols-rounded">
priority_high
</span>
<span class="material-symbols-rounded">
priority_high
</span> -->
</div>
<div class="severity-option" id="option-no-severity">
<!-- <span class="material-symbols-rounded">
campaign
</span> -->
</div>
</div>
</div>
</div>
</template>
@ -306,6 +378,13 @@
let inputName = this.shadowRoot.getElementById("input-name");
inputName.addEventListener("input", (e) => this.#onNameInput(e));
let selectSeverityContainer = this.shadowRoot.getElementById("select-severity-container");
for (let i = 0; i < selectSeverityContainer.childElementCount; i++) {
let severityOption = selectSeverityContainer.children[i];
severityOption.addEventListener("click", (e) => this.#OnSeverityOptionClicked(e));
}
return form;
}
@ -381,6 +460,26 @@
inputName.setAttribute('value', inputName.value);
}
#OnSeverityOptionClicked(e) {
let selectedSeverityOption = e.currentTarget;
let selectSeverityContainer = this.shadowRoot.getElementById("select-severity-container");
for (let i = 0; i < selectSeverityContainer.childElementCount; i++) {
let severityOption = selectSeverityContainer.children[i];
if (severityOption == selectedSeverityOption) {
if (!severityOption.classList.contains("selected")) {
console.log(severityOption.innerHTML);
severityOption.classList.add("selected");
}
}
else {
severityOption.classList.remove("selected");
}
}
}
#onIconPointerOver(e) {
e.preventDefault();
e.stopPropagation();