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

initial commit

Browse Source
This commit is contained in:
Harry Stuart 2022-11-27 17:16:56 +11:00
commit b0e6d13fa6
11 changed files with 2028 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
XWidget.html Normal file
View File

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

340
XWidget.js Normal file
View File

@ -0,0 +1,340 @@
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"));

BIN
icon_close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
icon_open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

493
implementation.html Normal file
View File

@ -0,0 +1,493 @@
<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>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
v
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<template id="x-widget-template">
<style>
* {
box-sizing: border-box;
--side-margin: 20px;
--site-falcon-purple: #AE55E7;
}
#icon {
width: 60px;
height: 60px;
position: fixed;
transition: scale 0.2s ease;
scale: 1.0;
}
#icon:hover {
scale: 1.05;
}
#icon.location-top-left {
left: var(--side-margin);
top: var(--side-margin);
bottom: auto;
right: auto;
}
#icon.location-top-right {
left: auto;
top: var(--side-margin);
bottom: auto;
right: var(--side-margin);
}
#icon.location-bottom-left {
left: var(--side-margin);
top: auto;
bottom: var(--side-margin);
right: auto;
}
#icon.location-bottom-right {
left: auto;
top: auto;
bottom: var(--side-margin);
right: var(--side-margin);
}
#icon > img {
width: 100%;
height: 100%;
}
#form {
width: 350px;
height: 500px;
background-color: white;
border: 0px;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
border-radius: 15px;
position: fixed;
opacity: 0;
}
#form.location-top-left {
left: var(--side-margin);
top: 110px;
bottom: auto;
right: auto;
}
#form.location-top-right {
left: auto;
top: 110px;
bottom: auto;
right: var(--side-margin);
}
#form.location-bottom-left {
left: var(--side-margin);
top: auto;
bottom: 110px;
right: auto;
}
#form.location-bottom-right {
left: auto;
top: auto;
bottom: 110px;
right: var(--side-margin);
}
#form-header {
top: 0px;
width: 100%;
height: 60px;
background-color: var(--site-falcon-purple);
border-radius: 15px 15px 0px 0px;
border: 0px;
justify-content: center;
align-items: center;
display: flex;
}
#form-title {
font-family: Alexandria, sans-serif;
font-weight: 400;
font-size: 24px;
color: white;
text-align: center;
}
#form-content-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#input-name-container {
margin-top: 50px;
position: relative;
}
#input-name {
height: 48px;
width: 280px;
border: 1px solid #c0c0c0;
border-radius: 4px;
box-sizing: border-box;
padding: 16px;
}
#label-input-name {
position: absolute;
top: 0;
bottom: 0;
left: 16px;
display: flex;
align-items: center;
pointer-events: none;
}
#input-name, #label-input-name > div {
font-family: Alexandria, sans-serif;
font-weight: 300;
font-size: 16px;
}
#label-input-name > div {
transition: all 0.15s ease-out, visibility 0s;
color: grey;
}
#input-name:focus {
outline: none;
border: 2px solid var(--site-falcon-purple);
}
#input-name:focus + #label-input-name > div, :not(#input-name[value=""]) + #label-input-name > div {
font-size: 14px;
transform: translate(0, -150%);
background-color: white;
padding-left: 4px;
padding-right: 4px;
}
#input-name:focus + #label-input-name > div {
color: var(--site-falcon-purple);
}
</style>
<div id="icon">
<img>
</div>
<div id="form">
<div id="form-header">
<div id="form-title">
New Ticket
</div>
</div>
<div id="form-content-container">
<div id="input-name-container">
<input
type="text"
id="input-name"
name="name"
value=""
aria-labelledby="label-input-name"
/>
<label for="name" id="label-input-name">
<div>Name</div>
</label>
</div>
</div>
</div>
</template>
<script>
class XWidget extends HTMLElement {
#icon;
#form;
#location;
#pointerDown;
#moving;
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
let v = document.getElementById("x-widget-template").content.cloneNode(true);
shadowRoot.appendChild(document.getElementById("x-widget-template").content.cloneNode(true));
this.#icon = this.#createIcon();
this.#form = this.#createForm();
this.#pointerDown = false;
this.#moving = false;
this.#location = "bottom-right";
}
connectedCallback() {
this.#render();
}
#render() {
if (this.isConnected) {
this.#renderIcon({imgSrc: this.#icon.openImgSrc});
this.#renderForm({visibility: "hidden"});
}
}
#createIcon() {
let icon = this.shadowRoot.getElementById("icon");
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));
return icon;
}
#createForm() {
let form = this.shadowRoot.getElementById("form");
let inputName = this.shadowRoot.getElementById("input-name");
inputName.addEventListener("input", (e) => this.#onNameInput(e));
return form;
}
#renderIcon(parameters={}) {
if (parameters["imgSrc"]) {
this.#icon.querySelector("img").src = parameters["imgSrc"];
}
if (this.#location == "top-left") {
removeClassByPrefix(this.#icon, "location");
this.#icon.classList.add("location-top-left");
}
else if (this.#location == "top-right") {
removeClassByPrefix(this.#icon, "location");
this.#icon.classList.add("location-top-right");
}
else if (this.#location == "bottom-left") {
removeClassByPrefix(this.#icon, "location");
this.#icon.classList.add("location-bottom-left");
}
else if (this.#location == "bottom-right") {
removeClassByPrefix(this.#icon, "location");
this.#icon.classList.add("location-bottom-right");
}
}
#renderForm(parameters={}) {
if (this.#location == "top-left") {
removeClassByPrefix(this.#form, "location");
this.#form.classList.add("location-top-left");
} else if (this.#location == "top-right") {
removeClassByPrefix(this.#form, "location");
this.#form.classList.add("location-top-right");
} else if (this.#location == "bottom-left") {
removeClassByPrefix(this.#form, "location");
this.#form.classList.add("location-bottom-left");
} else if (this.#location == "bottom-right") {
removeClassByPrefix(this.#form, "location");
this.#form.classList.add("location-bottom-right");
}
// Not happy with how it fades in and out
if (parameters["visibility"]) {
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 = "";
}
}
}
}
#onNameInput(e) {
let inputName = this.shadowRoot.getElementById("input-name");
inputName.setAttribute('value', inputName.value);
}
#onIconPointerOver(e) {
e.preventDefault();
e.stopPropagation();
}
#onIconPointerOut(e) {
e.preventDefault();
e.stopPropagation();
}
#onIconPointerDown(e) {
e.preventDefault();
e.stopPropagation();
this.#pointerDown = true;
this.#icon.setPointerCapture(e.pointerId);
}
#onIconPointerMove(e) {
e.preventDefault();
e.stopPropagation();
if (this.#pointerDown) {
this.#moving = true;
this.#icon.style.cursor = "grabbing";
this.#snapToCorner(e.clientX, e.clientY);
}
else {
this.#icon.style.cursor = "pointer";
}
}
#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);
}
#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"});
}
}
}
function removeClassByPrefix(el, prefix) {
if (!el.classList) {
return;
}
let filteredClassList = [];
for (let i = 0; i < el.classList.length; i++) {
if (!el.classList[i].startsWith(prefix)) {
filteredClassList.push(el.classList[i])
}
}
el.classList = filteredClassList;
}
customElements.define("x-widget", XWidget);
document.body.appendChild(document.createElement("x-widget"));
</script>
</body>
</html>

143
old/CornerSnap.html Normal file
View File

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<style>
p {
font-size: 24;
}
</style>
<div style="height: 50px; width: 10000px; background-color: blue;"></div>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
v
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
</div>
<div id="widget" style="position: fixed; top: 0px; left: 0px; width: 100px; height: 100px; background-color: red;"></div>
<script type="text/javascript">
let widget = document.getElementById("widget");
let isDown = false;
function onMouseDown(e) {
e.preventDefault();
e.stopPropagation();
isDown = true;
this.setPointerCapture(e.pointerId);
}
function setCorner(anchorX, anchorY, element) {
let offsets = element.getBoundingClientRect();
if (anchorX < window.innerWidth / 2){
// left half
if (anchorY < window.innerHeight / 2) {
// top left
element.style.left = "0px";
element.style.top = "0px";
}
else {
// bottom left
element.style.left = "0px";
element.style.top = window.innerHeight - offsets.height + "px";
}
}
else {
// right half
if (anchorY < window.innerHeight / 2) {
// top right
element.style.left = window.innerWidth - offsets.width + "px";4
element.style.top = "0px";
}
else {
// bottom right
element.style.left = window.innerWidth - offsets.width + "px";
element.style.top = window.innerHeight - offsets.height + "px";
}
}
}
function onMouseMove(e) {
e.preventDefault();
e.stopPropagation();
if (isDown) {
setCorner(e.clientX, e.clientY, this);
}
}
function onMouseUp(e) {
e.preventDefault();
e.stopPropagation();
isDown = false;
this.releasePointerCapture(e.pointerId);
}
function onMouseLeave(e) {
e.preventDefault();
e.stopPropagation();
if (isDown) {
}
}
widget.addEventListener("pointerdown", onMouseDown);
widget.addEventListener("pointermove", onMouseMove);
widget.addEventListener("pointerleave", onMouseLeave);
widget.addEventListener("pointerup", onMouseUp);
window.addEventListener("resize", () => {
let offsets = widget.getBoundingClientRect();
setCorner(offsets.left, offsets.top, widget);
});
</script>
</body>
</html>

288
old/Screenshot.html Normal file
View File

@ -0,0 +1,288 @@
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
</script>
</head>
<body>
<div>
<style>
p {
font-size: 24;
}
</style>
<img />
<button id="snapshot-button">Take snapshot</button>
<div style="height: 50px; width: 10000px; background-color: blue;"></div>
<!-- <img width="400px" height="700px" src="alley.jpg" /> -->
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
v
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
</div>
<script type="text/javascript">
let canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.style = "position: fixed; top: 0px; left: 0px; cursor: crosshair;";
function setCanvasDimensions(canvas) {
let bodyMarginLeft = window.getComputedStyle(document.body).getPropertyValue('margin-left');
let bodyMarginRight = window.getComputedStyle(document.body).getPropertyValue('margin-right');
if (bodyMarginLeft || bodyMarginRight) {
canvas.width = document.body.offsetWidth + parseInt(bodyMarginLeft) + parseInt(bodyMarginRight);
}
else {
canvas.width = document.body.offsetWidth;
}
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.hidden = true;
}
setCanvasDimensions(canvas);
window.addEventListener("resize", () => setCanvasDimensions(canvas))
let ctx = canvas.getContext("2d");
let hiddenCanvas = document.createElement("canvas");
document.body.appendChild(hiddenCanvas);
hiddenCanvas.hidden = true;
let hiddenCtx = hiddenCanvas.getContext("2d");
let initialX;
let initialY;
let isDown = false;
function onMouseDown(e) {
e.preventDefault();
e.stopPropagation();
initialX = e.offsetX;
initialY = e.offsetY;
isDown = true;
this.setPointerCapture(e.pointerId);
}
function onMouseMove(e) {
e.preventDefault();
e.stopPropagation();
if (isDown) {
let offsetX;
let offsetY;
if (e.offsetX < 0) {
offsetX = 0;
}
else if (e.offsetX > canvas.width - 1) {
offsetX = canvas.width - 1;
}
else {
offsetX = e.offsetX;
}
if (e.offsetY < 0) {
offsetY = 0;
}
else if (e.offsetY > canvas.height - 1) {
offsetY = canvas.height - 1;
}
else {
offsetY = e.offsetY;
}
let width = offsetX - initialX;
let height = offsetY - initialY;
setCanvas();
ctx.beginPath();
ctx.clearRect(initialX, initialY, width, height);
ctx.rect(initialX, initialY, width, height);
ctx.stroke();
ctx.closePath();
}
}
async function onMouseUp(e) {
e.preventDefault();
e.stopPropagation();
if (isDown) {
let offsetX;
let offsetY;
if (e.offsetX < 0) {
offsetX = 0;
}
else if (e.offsetX > canvas.width - 1) {
offsetX = canvas.width - 1;
}
else {
offsetX = e.offsetX;
}
if (e.offsetY < 0) {
offsetY = 0;
}
else if (e.offsetY > canvas.height - 1) {
offsetY = canvas.height - 1;
}
else {
offsetY = e.offsetY;
}
unloadCanvas();
this.releasePointerCapture(e.pointerId);
if (Math.abs(offsetX - initialX) > 10 && Math.abs(offsetY - initialY) > 10) {
await takeScreenshot(offsetX, offsetY);
}
initialX = null;
initialY = null;
isDown = false;
}
}
function onMouseLeave(e) {
e.preventDefault();
e.stopPropagation();
if (isDown) {
}
}
async function takeScreenshot(offsetX, offsetY) {
let width = offsetX - initialX;
let height = offsetY - initialY;
let offsetInitialX = initialX;
let offsetInitialY = initialY;
if (width < 0) {
width = width * -1;
offsetInitialX = initialX - width;
}
if (height < 0) {
height = height * -1;
offsetInitialY = initialY - height;
}
let documentCanvas;
await html2canvas(document.body, {
logging: true,
letterRendering: 1,
allowTaint: true,
useCORS: true
}).then(
function (canvas) {
console.log("nice")
documentCanvas = canvas;
});
return;
hiddenCanvas.width = width;
hiddenCanvas.height = height;
hiddenCtx.drawImage(documentCanvas, offsetInitialX, offsetInitialY, width, height, 0, 0, width, height);
let base64image = canvas.toDataURL("image/png");
console.log(base64image);
hiddenCtx.clearRect(0, 0, hiddenCanvas.width, hiddenCanvas.height);
hiddenCanvas.width = 0;
hiddenCanvas.height = 0;
}
function setCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 0.5;
ctx.fillStyle = "white";
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.closePath();
setBrush();
}
function setBrush() {
ctx.globalAlpha = 1;
ctx.strokeStyle = 'red';
}
canvas.addEventListener("pointerdown", onMouseDown);
canvas.addEventListener("pointermove", onMouseMove);
canvas.addEventListener("pointerleave", onMouseLeave);
canvas.addEventListener("pointerup", onMouseUp);
function loadCanvas() {
setCanvas();
canvas.hidden = false;
}
function unloadCanvas() {
setCanvas();
canvas.hidden = true;
}
let snapshotButton = document.getElementById("snapshot-button");
snapshotButton.addEventListener("click", () => { loadCanvas() });
</script>
</body>
</html>

27
old/ScreenshotTest.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
</script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello wytorld!</h4>
<img width="400px" height="700px" src="alley.jpg" />
</div>
<script type="text/javascript">
async function Do() {
await html2canvas(document.body)
.then(
function (canvas) {
document.body.appendChild(canvas);
});
}
Do();
</script>
</body>
</html>

197
old/Widget.html Normal file
View File

@ -0,0 +1,197 @@
<html>
<head>
</head>
<body>
<div>
<style>
p {
font-size: 24;
}
</style>
<img />
<button id="snapshot-button">Take snapshot</button>
<div style="height: 50px; width: 10000px; background-color: blue;"></div>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
v
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
</div>
<x-widget></x-widget>
<script>
class XWidget extends HTMLElement {
frame;
icon;
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
let frame = document.createElement("div");
frame.style.position = "fixed";
frame.style.top = "0px";
frame.style.left = "0px";
frame.style.right = "0px";
frame.style.bottom = "0px";
frame.style.border = "5px dotted blue";
shadowRoot.append(frame);
this.frame = frame;
let icon = document.createElement("x-widget-icon");
this.frame.appendChild(icon);
this.icon = icon;
}
connectedCallback() {
}
}
class XWidgetIcon extends HTMLElement {
iconContainer;
isPressed;
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
let iconContainer = document.createElement("div");
shadowRoot.append(iconContainer);
this.iconContainer = iconContainer;
}
connectedCallback() {
this.#render();
this.isPressed = false;
this.iconContainer.addEventListener("pointerdown", (e) => {
e.preventDefault();
e.stopPropagation();
this.isPressed = true;
this.iconContainer.setPointerCapture(e.pointerId);
});
this.iconContainer.addEventListener("pointermove", (e) => {
e.preventDefault();
e.stopPropagation();
if (this.isPressed) {
this.#snapToCorner();
}
});
this.iconContainer.addEventListener("pointerleave", (e) => {
if (this.isPressed) {
}
});
this.iconContainer.addEventListener("pointerup", (e) => {
this.isPressed = false;
this.iconContainer.releasePointerCapture(e.pointerId);
});
}
#render() {
this.iconContainer.style.position = "fixed";
this.iconContainer.style.bottom = "0px";
this.iconContainer.style.right = "0px";
this.iconContainer.style.width = "50px";
this.iconContainer.style.height = "50px";
this.iconContainer.style.backgroundColor = "red";
}
#snapToCorner(x, y) {
let maxWidth = window.innerWidth;
let maxHeight = window.innerHeight;
if (x < maxWidth / 2){
// left half
if (y < maxHeight / 2) {
// top left
this.style.left = "0px";
this.style.top = "0px";
this.style.bottom = null;
this.style.right = null;
}
else {
// bottom left
this.style.left = "0px";
this.style.top = null;
this.style.bottom = "0px";
this.style.right = null;
}
}
else {
// right half
if (y < maxHeight / 2) {
// top right
this.style.left = null;
this.style.top = "0px";
this.style.bottom = null;
this.style.right = "0px";
}
else {
// bottom right
this.style.left = null;
this.style.top = null;
this.style.bottom = "0px";
this.style.right = "0px";
}
}
}
}
customElements.define("x-widget", XWidget);
customElements.define("x-widget-icon", XWidgetIcon);
</script>
</body>
</html>

131
old/WidgetNew.html Normal file
View File

@ -0,0 +1,131 @@
<html>
<head>
</head>
<body>
<div>
<style>
p {
font-size: 24;
}
</style>
<img />
<button id="snapshot-button">Take snapshot</button>
<div style="height: 50px; width: 10000px; background-color: blue;"></div>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
v
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
</div>
<x-widget></x-widget>
<script>
class XWidget extends HTMLElement {
frame;
icon;
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
let frame = document.createElement("div");
frame.style.position = "fixed";
frame.style.top = "0px";
frame.style.left = "0px";
frame.style.right = "0px";
frame.style.bottom = "0px";
frame.style.border = "5px dotted blue";
shadowRoot.append(frame);
this.frame = frame;
let icon = document.createElement("x-widget-icon");
this.frame.appendChild(icon);
this.icon = icon;
frame.addEventListener("click", (e) => {
if (e.target == icon) {
console.log("Clicked on icon");
}
});
}
connectedCallback() {
}
}
class XWidgetIcon extends HTMLElement {
iconContainer;
isPressed;
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
let iconContainer = document.createElement("div");
shadowRoot.append(iconContainer);
this.iconContainer = iconContainer;
}
connectedCallback() {
this.#render();
}
#render() {
this.iconContainer.style.position = "fixed";
this.iconContainer.style.bottom = "0px";
this.iconContainer.style.right = "0px";
this.iconContainer.style.width = "50px";
this.iconContainer.style.height = "50px";
this.iconContainer.style.backgroundColor = "red";
}
}
customElements.define("x-widget", XWidget);
customElements.define("x-widget-icon", XWidgetIcon);
</script>
</body>
</html>

406
old/implementationold.html Normal file
View File

@ -0,0 +1,406 @@
<html>
<head>
</head>
<body>
<div style="height: 50px; width: 10000px; background-color: blue;"></div>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
v
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<p>Nice thanks man awesome</p>
<template>
<h1>yeehaw</h1>
</template>
<script>
loadExternalStyles();
function loadExternalStyles() {
let gfPreconnectLink = document.createElement("link");
gfPreconnectLink.setAttribute("rel", "preconnect");
gfPreconnectLink.setAttribute("href", "https://fonts.googleapis.com");
document.head.appendChild(gfPreconnectLink);
let gfPreconnectCOLink = document.createElement("link");
gfPreconnectCOLink.setAttribute("rel", "preconnect");
gfPreconnectCOLink.setAttribute("href", "https://fonts.gstatic.com");
gfPreconnectCOLink.setAttribute("crossorigin", true);
document.head.appendChild(gfPreconnectCOLink);
let gfLink = document.createElement("link");
gfLink.setAttribute("rel", "stylesheet");
gfLink.setAttribute("href", "https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap");
document.head.appendChild(gfLink);
}
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("b6d215dc-03ff-4ca5-bc48-879e821a07f0", XWidget);
document.body.appendChild(document.createElement("b6d215dc-03ff-4ca5-bc48-879e821a07f0"));
</script>
</body>
</html>