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);