From abd8c2536a3df115be97a2ddace3dbde1fd18e0f Mon Sep 17 00:00:00 2001 From: Harry Stuart Date: Mon, 28 Nov 2022 21:32:06 +1100 Subject: [PATCH] Slide in complete --- implementation.html | 174 ++++++++++++++++++++++++-------------------- 1 file changed, 96 insertions(+), 78 deletions(-) diff --git a/implementation.html b/implementation.html index c602e32..351c5f1 100644 --- a/implementation.html +++ b/implementation.html @@ -3,7 +3,7 @@
- +

Nice thanks man awesome

Nice thanks man awesome

Nice thanks man awesome

@@ -55,93 +55,83 @@
- +
@@ -389,12 +403,24 @@ } 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(); } #render() { if (this.isConnected) { - this.#renderIcon({imgSrc: this.#icon.openImgSrc}); + this.#renderIcon({visibility: "visible"}); this.#renderForm({visibility: "hidden"}); } } @@ -402,9 +428,6 @@ #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)); @@ -434,10 +457,6 @@ } #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"); @@ -454,6 +473,15 @@ removeClassByPrefix(this.#icon, "location"); 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={}) { @@ -471,30 +499,12 @@ 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 = ""; - } + if (parameters["visibility"] == "visible") { + this.#form.classList.remove("hidden"); } - 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 = ""; - } + else if (parameters["visibility"] == "hidden") { + this.#form.classList.add("hidden"); } } } @@ -541,6 +551,10 @@ } #onIconPointerDown(e) { + if (e.button !== 0) { + return; + } + e.preventDefault(); e.stopPropagation(); @@ -564,19 +578,19 @@ } #onIconPointerUp(e) { + if (e.button !== 0) { + return; + } + 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}); + if (this.#form.classList.contains("hidden")) { + this.#renderIcon({visibility: "hidden"}); + this.#renderForm({visibility: "visible"}); } } else { @@ -613,7 +627,7 @@ } if (locationChanged) { - this.#renderIcon({imgSrc: this.#icon.openImgSrc}); + this.#renderIcon({visibility: "visible"}); 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);