wilday_ui 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 50912590c0a438d5c271b389672df9d96c03ddf8001899804d072ddb9e18e925
-  data.tar.gz: 8924aaef953638212799214a462b906eb05c010a260670e78977e683200b9716
+  metadata.gz: 6aae81001c80b4c0fd86eaca5391e6de697a87b88e38215bd1889a70163dafe7
+  data.tar.gz: 87cff2dba0f7408ae84456cec4b6aac1927f1bcc27ad09309091c2b43c3df45a
 SHA512:
-  metadata.gz: 6d58f3efc56e7e0e32330dd9f5fa5b7098271926a00eeca6c594afe1e496abba345438a82d654a5c0952847e5edc875ed754487135580bfc4e19879b6f801216
-  data.tar.gz: a771bc6e4cbd382061fa53349d9232cec601776158ff18160bb41132dad50bafaa84286a3c90993a91bc888beab239890ce2088a0ece112cd7abcc2d4404809c
+  metadata.gz: '09d8ec007fb7c0757f65ded7d2e059281752c2fdc07cee90aea77dc82b008adb9e07c6161cd527635ceb289121a030b29234a6d5c306a24e68b3d9378e0bfc0e'
+  data.tar.gz: da49ca71e648b9e527d02668a83cc6130dcb53ada46f195e9bb19dc4e3a5cf716b9d0b7353f4e68cfdc01416c6bdc5b8a15afc8ea349ea9fe8053be3c74bf318

data/app/assets/builds/wilday_ui/index.js

@@ -2929,6 +2929,242 @@ var confirmation_controller_default = class extends Controller {
   }
 };
 
+// app/javascript/wilday_ui/controllers/tooltip_controller.js
+var tooltip_controller_default = class extends Controller {
+  static targets = ["trigger"];
+  static values = {
+    content: String,
+    position: { type: String, default: "top" },
+    align: { type: String, default: "center" },
+    trigger: { type: String, default: "hover" },
+    showDelay: { type: Number, default: 0 },
+    hideDelay: { type: Number, default: 0 },
+    offset: { type: Number, default: 8 },
+    theme: { type: String, default: "light" },
+    size: { type: String, default: "md" },
+    arrow: { type: Boolean, default: false },
+    customStyle: String
+  };
+  connect() {
+    this.tooltipElement = null;
+    this.showTimeoutId = null;
+    this.hideTimeoutId = null;
+    this.setupTooltip();
+    this.scrollHandler = () => {
+      if (this.tooltipElement.style.display !== "none") {
+        const triggerRect = this.triggerTarget.getBoundingClientRect();
+        const isInViewport = triggerRect.top >= 0 && triggerRect.left >= 0 && triggerRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && triggerRect.right <= (window.innerWidth || document.documentElement.clientWidth);
+        if (isInViewport) {
+          this.position();
+        } else {
+          this.hide();
+        }
+      }
+    };
+    window.addEventListener("scroll", this.scrollHandler);
+  }
+  disconnect() {
+    if (this.clickOutsideHandler) {
+      document.removeEventListener("click", this.clickOutsideHandler);
+    }
+    window.removeEventListener("scroll", this.scrollHandler);
+    this.removeTooltip();
+  }
+  setupTooltip() {
+    this.tooltipElement = this.createTooltipElement();
+    document.body.appendChild(this.tooltipElement);
+    if (this.triggerValue === "hover") {
+      this.triggerTarget.addEventListener("mouseenter", () => this.show());
+      this.triggerTarget.addEventListener("mouseleave", () => this.hide());
+      this.triggerTarget.addEventListener("focusin", () => this.show());
+      this.triggerTarget.addEventListener("focusout", () => this.hide());
+    } else if (this.triggerValue === "click") {
+      const hasDropdown = this.element.hasAttribute("data-controller") && this.element.getAttribute("data-controller").includes("dropdown");
+      const hasClipboard = this.element.hasAttribute("data-controller") && this.element.getAttribute("data-controller").includes("clipboard");
+      if (hasDropdown || hasClipboard) {
+        this.triggerTarget.addEventListener("mouseenter", () => this.show());
+        this.triggerTarget.addEventListener("mouseleave", () => this.hide());
+      } else {
+        this.triggerTarget.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.toggle();
+        });
+        this.clickOutsideHandler = (e) => {
+          if (!this.triggerTarget.contains(e.target) && !this.tooltipElement.contains(e.target)) {
+            this.hide();
+          }
+        };
+        document.addEventListener("click", this.clickOutsideHandler);
+      }
+    }
+  }
+  createTooltipElement() {
+    const tooltip = document.createElement("div");
+    tooltip.id = this.triggerTarget.getAttribute("aria-describedby");
+    tooltip.className = `w-tooltip w-tooltip-${this.themeValue} w-tooltip-size-${this.sizeValue}`;
+    if (this.arrowValue) tooltip.classList.add("w-tooltip-arrow");
+    tooltip.setAttribute("role", "tooltip");
+    tooltip.setAttribute("data-position", this.positionValue);
+    tooltip.setAttribute("data-align", this.alignValue);
+    tooltip.innerHTML = this.contentValue;
+    if (this.hasCustomStyleValue && this.customStyleValue) {
+      tooltip.style.cssText += this.customStyleValue;
+    }
+    tooltip.style.display = "none";
+    return tooltip;
+  }
+  show() {
+    clearTimeout(this.hideTimeoutId);
+    this.showTimeoutId = setTimeout(() => {
+      this.tooltipElement.style.transform = "none";
+      this.tooltipElement.style.visibility = "hidden";
+      this.tooltipElement.style.display = "block";
+      this.tooltipElement.offsetHeight;
+      this.position();
+      this.tooltipElement.style.visibility = "visible";
+      requestAnimationFrame(() => {
+        this.tooltipElement.classList.add("w-tooltip-visible");
+      });
+    }, this.showDelayValue);
+  }
+  hide() {
+    clearTimeout(this.showTimeoutId);
+    this.hideTimeoutId = setTimeout(() => {
+      this.tooltipElement.classList.remove("w-tooltip-visible");
+      setTimeout(() => {
+        this.tooltipElement.style.display = "none";
+      }, 150);
+    }, this.hideDelayValue);
+  }
+  toggle() {
+    if (this.tooltipElement.style.display === "none") {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+  position() {
+    const triggerRect = this.triggerTarget.getBoundingClientRect();
+    const tooltipRect = this.tooltipElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    const arrowOffset = this.arrowValue ? 2 : 0;
+    const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollY = window.pageYOffset || document.documentElement.scrollTop;
+    console.log("=== Initial Values ===");
+    console.log("Viewport Height:", viewportHeight);
+    console.log("Viewport Width:", viewportWidth);
+    console.log("Trigger Top:", triggerRect.top);
+    console.log("Trigger Bottom:", triggerRect.bottom);
+    console.log("Trigger Left:", triggerRect.left);
+    console.log("Trigger Right:", triggerRect.right);
+    console.log("Tooltip Height:", tooltipRect.height);
+    console.log("Tooltip Width:", tooltipRect.width);
+    let position = this.positionValue;
+    let top, left;
+    const spaceBelow = viewportHeight - triggerRect.bottom;
+    const spaceAbove = triggerRect.top;
+    const spaceRight = viewportWidth - triggerRect.right;
+    const spaceLeft = triggerRect.left;
+    const requiredSpaceVertical = tooltipRect.height + this.offsetValue + arrowOffset;
+    const requiredSpaceHorizontal = tooltipRect.width + this.offsetValue + arrowOffset;
+    console.log("\n=== Space Calculation ===");
+    console.log("Space Above:", spaceAbove);
+    console.log("Space Below:", spaceBelow);
+    console.log("Space Left:", spaceLeft);
+    console.log("Space Right:", spaceRight);
+    console.log("Required Space Vertical:", requiredSpaceVertical);
+    console.log("Required Space Horizontal:", requiredSpaceHorizontal);
+    if (position === "right" && spaceRight >= requiredSpaceHorizontal) {
+      position = "right";
+      console.log("Using right - sufficient space");
+    } else if (position === "left" && spaceLeft >= requiredSpaceHorizontal) {
+      position = "left";
+      console.log("Using left - sufficient space");
+    } else if (position === "top" && spaceAbove >= requiredSpaceVertical) {
+      position = "top";
+      console.log("Using top - sufficient space");
+    } else if (position === "bottom" && spaceBelow >= requiredSpaceVertical) {
+      position = "bottom";
+      console.log("Using bottom - sufficient space");
+    } else if (spaceBelow >= requiredSpaceVertical) {
+      position = "bottom";
+      console.log("Fallback to bottom - sufficient space");
+    } else {
+      position = "top";
+      console.log("Fallback to top - insufficient space below");
+    }
+    switch (position) {
+      case "top":
+        top = triggerRect.top - tooltipRect.height - this.offsetValue - arrowOffset;
+        if (this.alignValue === "end") {
+          left = triggerRect.right - tooltipRect.width;
+        } else if (this.alignValue === "center") {
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        } else {
+          left = triggerRect.left;
+        }
+        break;
+      case "bottom":
+        top = triggerRect.bottom + this.offsetValue + arrowOffset;
+        if (this.alignValue === "end") {
+          left = triggerRect.right - tooltipRect.width;
+        } else if (this.alignValue === "center") {
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        } else {
+          left = triggerRect.left;
+        }
+        break;
+      case "left":
+        left = triggerRect.left - tooltipRect.width - this.offsetValue - arrowOffset;
+        if (this.alignValue === "end") {
+          top = triggerRect.bottom - tooltipRect.height;
+        } else if (this.alignValue === "center") {
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        } else {
+          top = triggerRect.top;
+        }
+        break;
+      case "right":
+        left = triggerRect.right + this.offsetValue + arrowOffset;
+        if (this.alignValue === "end") {
+          top = triggerRect.bottom - tooltipRect.height;
+        } else if (this.alignValue === "center") {
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        } else {
+          top = triggerRect.top;
+        }
+        break;
+    }
+    if (top < 0) {
+      top = this.offsetValue;
+    } else if (top + tooltipRect.height > viewportHeight) {
+      top = viewportHeight - tooltipRect.height - this.offsetValue;
+    }
+    if (left < 0) {
+      left = this.offsetValue;
+    } else if (left + tooltipRect.width > viewportWidth) {
+      left = viewportWidth - tooltipRect.width - this.offsetValue;
+    }
+    console.log("\n=== Final Position ===");
+    console.log("Position:", position);
+    console.log("Top:", top);
+    console.log("Left:", left);
+    console.log("Alignment:", this.alignValue);
+    top += scrollY;
+    left += scrollX;
+    this.tooltipElement.setAttribute("data-position", position);
+    this.tooltipElement.style.top = `${top}px`;
+    this.tooltipElement.style.left = `${left}px`;
+  }
+  removeTooltip() {
+    if (this.tooltipElement) {
+      this.tooltipElement.remove();
+      this.tooltipElement = null;
+    }
+  }
+};
+
 // app/javascript/wilday_ui/controllers/index.js
 var application = Application.start();
 window.Stimulus = application;
@@ -2936,6 +3172,7 @@ application.register("button", ButtonController);
 application.register("dropdown", dropdown_controller_default);
 application.register("clipboard", clipboard_controller_default);
 application.register("confirmation", confirmation_controller_default);
+application.register("tooltip", tooltip_controller_default);
 
 // app/javascript/wilday_ui/components/button.js
 document.addEventListener("DOMContentLoaded", () => {