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

Slide in complete

Browse Source
This commit is contained in:
Harry Stuart 2022-11-28 21:32:06 +11:00
parent 83845b6f37
commit abd8c2536a
1 changed files with 96 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
implementation.html
View File

@ -3,7 +3,7 @@
</head> </head>
<body> <body>
<div style="height: 50px; width: 10000px; background-color: blue;"></div> <div style="height: 50px; width: 10000px; background-color: blue;"></div>
<button id="button"></button>
<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>
@ -55,93 +55,83 @@
<style> <style>
* { * {
box-sizing: border-box; box-sizing: border-box;
--icon-default-dim: 60px;
--form-default-width: 350px;
--form-default-height: 500px;
--side-margin: 20px; --side-margin: 20px;
--site-falcon-purple: #AE55E7; --site-falcon-purple: #AE55E7;
} }
#icon { #icon {
width: 60px; width: var(--icon-default-dim);
height: 60px; height: var(--icon-default-dim);
position: fixed; position: fixed;
transition: scale 0.2s ease; visibility: visible;
scale: 1.0; opacity: 1;
} transition: top 0.3s ease 0s, left 0.3s ease 0s, scale 0.2s ease, transform 0.5s ease, visibility 0s linear 0.5s, opacity 0.5s linear;
#icon:hover {
scale: 1.05;
} }
#icon.location-top-left { #icon.location-top-left {
left: var(--side-margin); left: var(--side-margin);
top: var(--side-margin); top: var(--side-margin);
bottom: auto;
right: auto;
} }
#icon.location-top-right { #icon.location-top-right {
left: auto; left: calc(100% - var(--icon-default-dim) - var(--side-margin));
top: var(--side-margin); top: var(--side-margin);
bottom: auto;
right: var(--side-margin);
} }
#icon.location-bottom-left { #icon.location-bottom-left {
left: var(--side-margin); left: var(--side-margin);
top: auto; top: calc(100% - var(--icon-default-dim) - var(--side-margin));
bottom: var(--side-margin);
right: auto;
} }
#icon.location-bottom-right { #icon.location-bottom-right {
left: auto; left: calc(100% - var(--icon-default-dim) - var(--side-margin));
top: auto; top: calc(100% - var(--icon-default-dim) - var(--side-margin));
bottom: var(--side-margin);
right: var(--side-margin);
} }
#icon:hover {
scale: 1.05;
}
#icon > img { #icon > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#form { #form {
width: 350px; width: var(--form-default-width);
height: 500px; height: var(--form-default-height);
background-color: white; background-color: white;
border: 0px; border: 0px;
border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
box-shadow: 0 4px 16px rgb(0 0 0 / 25%); box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
border-radius: 15px; border-radius: 15px;
position: fixed; position: fixed;
opacity: 0; visibility: visible;
opacity: 1;
transition: transform 0.5s ease, visibility 0s linear 0.5s, opacity 0.5s linear;
} }
#form.location-top-left { #form.location-top-left {
left: var(--side-margin); left: var(--side-margin);
top: 110px; top: var(--side-margin);
bottom: auto;
right: auto;
} }
#form.location-top-right { #form.location-top-right {
left: auto; left: calc(100% - var(--form-default-width) - var(--side-margin));
top: 110px; top: var(--side-margin);
bottom: auto;
right: var(--side-margin);
} }
#form.location-bottom-left { #form.location-bottom-left {
left: var(--side-margin); left: var(--side-margin);
top: auto; top: calc(100% - var(--form-default-height) - var(--side-margin));
bottom: 110px;
right: auto;
} }
#form.location-bottom-right { #form.location-bottom-right {
left: auto; left: calc(100% - var(--form-default-width) - var(--side-margin));
top: auto; top: calc(100% - var(--form-default-height) - var(--side-margin));
bottom: 110px;
right: var(--side-margin);
} }
#form-header { #form-header {
@ -289,10 +279,34 @@
height: 150px; height: 150px;
resize: none; resize: none;
} }
#icon:not(.hidden), #form:not(.hidden) {
transition-delay: 0s;
}
#icon.hidden, #form.hidden {
pointer-events: none;
visibility: hidden;
opacity: 0;
}
#icon.hidden.location-bottom-left, #form.hidden.location-bottom-left,
#icon.hidden.location-bottom-right, #form.hidden.location-bottom-right {
transform: translateY(200%);
}
#icon.hidden.location-top-left, #form.hidden.location-top-left,
#icon.hidden.location-top-right, #form.hidden.location-top-right {
transform: translateY(-200%);
}
#icon.hidden {
scale: 1.05;
}
</style> </style>
<div id="icon"> <div id="icon">
<img> <img src="icon_open.png">
</div> </div>
<div id="form"> <div id="form">
@ -389,12 +403,24 @@
} }
connectedCallback() { connectedCallback() {
let test = document.getElementById("button");
test.style.position = "absolute";
test.style.top = "100px";
test.style.left = "100px";
test.textContent = "show icon";
test.onclick = (e) => {
if (!this.#form.classList.contains("hidden")) {
this.#renderIcon({visibility: "visible"});
this.#renderForm({visibility: "hidden"});
}
};
this.#render(); this.#render();
} }
#render() { #render() {
if (this.isConnected) { if (this.isConnected) {
this.#renderIcon({imgSrc: this.#icon.openImgSrc}); this.#renderIcon({visibility: "visible"});
this.#renderForm({visibility: "hidden"}); this.#renderForm({visibility: "hidden"});
} }
} }
@ -402,9 +428,6 @@
#createIcon() { #createIcon() {
let icon = this.shadowRoot.getElementById("icon"); 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("pointerdown", (e) => this.#onIconPointerDown(e));
icon.addEventListener("pointermove", (e) => this.#onIconPointerMove(e)); icon.addEventListener("pointermove", (e) => this.#onIconPointerMove(e));
icon.addEventListener("pointerup", (e) => this.#onIconPointerUp(e)); icon.addEventListener("pointerup", (e) => this.#onIconPointerUp(e));
@ -434,10 +457,6 @@
} }
#renderIcon(parameters={}) { #renderIcon(parameters={}) {
if (parameters["imgSrc"]) {
this.#icon.querySelector("img").src = parameters["imgSrc"];
}
if (this.#location == "top-left") { if (this.#location == "top-left") {
removeClassByPrefix(this.#icon, "location"); removeClassByPrefix(this.#icon, "location");
this.#icon.classList.add("location-top-left"); this.#icon.classList.add("location-top-left");
@ -454,6 +473,15 @@
removeClassByPrefix(this.#icon, "location"); removeClassByPrefix(this.#icon, "location");
this.#icon.classList.add("location-bottom-right"); this.#icon.classList.add("location-bottom-right");
} }
if (parameters["visibility"]) {
if (parameters["visibility"] == "visible") {
this.#icon.classList.remove("hidden");
}
else if (parameters["visibility"] == "hidden") {
this.#icon.classList.add("hidden");
}
}
} }
#renderForm(parameters={}) { #renderForm(parameters={}) {
@ -471,30 +499,12 @@
this.#form.classList.add("location-bottom-right"); this.#form.classList.add("location-bottom-right");
} }
// Not happy with how it fades in and out
if (parameters["visibility"]) { if (parameters["visibility"]) {
if (parameters["visibility"] == "visible" && this.#form.style.visibility != "visible") { if (parameters["visibility"] == "visible") {
this.#form.style.visibility = "visible"; this.#form.classList.remove("hidden");
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") { else if (parameters["visibility"] == "hidden") {
this.#form.style.visibility = "hidden"; this.#form.classList.add("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 = "";
}
} }
} }
} }
@ -541,6 +551,10 @@
} }
#onIconPointerDown(e) { #onIconPointerDown(e) {
if (e.button !== 0) {
return;
}
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -564,19 +578,19 @@
} }
#onIconPointerUp(e) { #onIconPointerUp(e) {
if (e.button !== 0) {
return;
}
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.#icon.style.cursor = "pointer"; this.#icon.style.cursor = "pointer";
if (!this.#moving) { if (!this.#moving) {
if (this.#form.style.visibility == "visible") { if (this.#form.classList.contains("hidden")) {
this.#renderIcon({imgSrc: this.#icon.openImgSrc}); this.#renderIcon({visibility: "hidden"});
this.#renderForm({visibility: "hidden", animate: true}); this.#renderForm({visibility: "visible"});
}
else {
this.#renderIcon({imgSrc: this.#icon.closeImgSrc});
this.#renderForm({visibility: "visible", animate: true});
} }
} }
else { else {
@ -613,7 +627,7 @@
} }
if (locationChanged) { if (locationChanged) {
this.#renderIcon({imgSrc: this.#icon.openImgSrc}); this.#renderIcon({visibility: "visible"});
this.#renderForm({visibility: "hidden"}); this.#renderForm({visibility: "hidden"});
} }
} }
@ -632,7 +646,11 @@
} }
} }
el.classList = filteredClassList; el.className = "";
for (let i = 0; i < filteredClassList; i++) {
el.classList.add(filteredClassList[i]);
}
} }
customElements.define("x-widget", XWidget); customElements.define("x-widget", XWidget);