wilday_ui 0.7.0 → 0.8.0

data/app/javascript/wilday_ui/controllers/tooltip_controller.js

@@ -0,0 +1,318 @@
+import { Controller } from "@hotwired/stimulus";
+
+export 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();
+
+    // Add scroll handler
+    this.scrollHandler = () => {
+      if (this.tooltipElement.style.display !== "none") {
+        // Check if trigger is in viewport
+        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) {
+          // Update position if trigger is visible
+          this.position();
+        } else {
+          // Hide tooltip if trigger is not visible
+          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") {
+      // Check if dropdown or clipboard is present
+      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) {
+        // Force hover behavior for dropdown/clipboard buttons
+        this.triggerTarget.addEventListener("mouseenter", () => this.show());
+        this.triggerTarget.addEventListener("mouseleave", () => this.hide());
+      } else {
+        // Normal click behavior
+        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"); // Add arrow class if enabled
+    tooltip.setAttribute("role", "tooltip");
+    tooltip.setAttribute("data-position", this.positionValue);
+    tooltip.setAttribute("data-align", this.alignValue);
+    tooltip.innerHTML = this.contentValue;
+
+    // Apply custom styles if present
+    if (this.hasCustomStyleValue && this.customStyleValue) {
+      tooltip.style.cssText += this.customStyleValue;
+    }
+
+    tooltip.style.display = "none";
+    return tooltip;
+  }
+
+  show() {
+    clearTimeout(this.hideTimeoutId);
+    this.showTimeoutId = setTimeout(() => {
+      // Reset any existing transforms and make tooltip visible but hidden
+      this.tooltipElement.style.transform = "none";
+      this.tooltipElement.style.visibility = "hidden";
+      this.tooltipElement.style.display = "block";
+
+      // Force a reflow to ensure dimensions are calculated correctly
+      this.tooltipElement.offsetHeight;
+
+      // Position the tooltip
+      this.position();
+
+      // Make visible with transition
+      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); // Match transition duration
+    }, 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;
+
+    // Calculate scroll position
+    const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollY = window.pageYOffset || document.documentElement.scrollTop;
+
+    // Debug initial values
+    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;
+
+    // Calculate available space in viewport
+    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;
+
+    // Debug space
+    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);
+
+    // Determine position based on available viewport space
+    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");
+    }
+
+    // Calculate viewport-relative position
+    switch (position) {
+      case "top":
+        // Position above trigger
+        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 {
+          // start
+          left = triggerRect.left;
+        }
+        break;
+      case "bottom":
+        // Position below trigger
+        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 {
+          // start
+          left = triggerRect.left;
+        }
+        break;
+      case "left":
+        // Position to the left of trigger
+        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 {
+          // start
+          top = triggerRect.top;
+        }
+        break;
+      case "right":
+        // Position to the right of trigger
+        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 {
+          // start
+          top = triggerRect.top;
+        }
+        break;
+    }
+
+    // Ensure tooltip stays within viewport
+    if (top < 0) {
+      top = this.offsetValue; // Keep some padding from top
+    } else if (top + tooltipRect.height > viewportHeight) {
+      top = viewportHeight - tooltipRect.height - this.offsetValue;
+    }
+
+    if (left < 0) {
+      left = this.offsetValue; // Keep some padding from left
+    } else if (left + tooltipRect.width > viewportWidth) {
+      left = viewportWidth - tooltipRect.width - this.offsetValue;
+    }
+
+    // Debug final position
+    console.log("\n=== Final Position ===");
+    console.log("Position:", position);
+    console.log("Top:", top);
+    console.log("Left:", left);
+    console.log("Alignment:", this.alignValue);
+
+    // Add scroll position to final coordinates
+    top += scrollY;
+    left += scrollX;
+
+    // Update tooltip position and data attribute
+    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;
+    }
+  }
+}

data/lib/wilday_ui/version.rb

@@ -1,3 +1,3 @@
 module WildayUi
-  VERSION = "0.7.0"
+  VERSION = "0.8.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: wilday_ui
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.0
 platform: ruby
 authors:
 - davidwinalda
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-12-21 00:00:00.000000000 Z
+date: 2024-12-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -54,6 +54,7 @@ files:
 - app/assets/stylesheets/wilday_ui/components/button/features/old_variants.css
 - app/assets/stylesheets/wilday_ui/components/button/features/radius.css
 - app/assets/stylesheets/wilday_ui/components/button/features/sizes.css
+- app/assets/stylesheets/wilday_ui/components/button/features/tooltip.css
 - app/assets/stylesheets/wilday_ui/components/button/features/variants.css
 - app/assets/stylesheets/wilday_ui/components/button/index.css
 - app/assets/stylesheets/wilday_ui/tokens/colors.css
@@ -61,13 +62,13 @@ files:
 - app/helpers/wilday_ui/application_helper.rb
 - app/helpers/wilday_ui/components/button_helper.rb
 - app/helpers/wilday_ui/javascript_helper.rb
-- app/helpers/wilday_ui/theme_helper.rb
 - app/javascript/wilday_ui/components/button.js
 - app/javascript/wilday_ui/controllers/button_controller.js
 - app/javascript/wilday_ui/controllers/clipboard_controller.js
 - app/javascript/wilday_ui/controllers/confirmation_controller.js
 - app/javascript/wilday_ui/controllers/dropdown_controller.js
 - app/javascript/wilday_ui/controllers/index.js
+- app/javascript/wilday_ui/controllers/tooltip_controller.js
 - app/javascript/wilday_ui/index.js
 - app/jobs/wilday_ui/application_job.rb
 - app/mailers/wilday_ui/application_mailer.rb

data/app/helpers/wilday_ui/theme_helper.rb

@@ -1,19 +0,0 @@
-module WildayUi
-  module ThemeHelper
-    def generate_theme_css_variables
-      colors = WildayUi::Config::Theme.configuration.colors
-      css_vars = colors.map do |color_name, shades|
-        shades.map do |shade, value|
-          "--w-color-#{color_name}-#{shade}: #{value};"
-        end
-      end.flatten.join("\n")
-
-      "<style>:root { #{css_vars} }</style>".html_safe
-    end
-
-    # Helper to get specific color value
-    def theme_color(name, shade = "500")
-      WildayUi::Config::Theme.configuration.colors.dig(name.to_s, shade.to_s)
-    end
-  end
-end