@diabolic/pointy 1.0.1 → 1.0.3

package/README.md

@@ -137,8 +137,10 @@ pointy.reset();             // Reset to initial position
 ### Content
 
 ```javascript
-pointy.setContent('New message');
-pointy.setContent(['Message 1', 'Message 2']);
+pointy.setMessages('New message');              // Replace all messages
+pointy.setMessages(['Message 1', 'Message 2']); // Set multiple messages
+
+pointy.setMessage('Updated text');             // Update current message only
 
 pointy.nextMessage();
 pointy.prevMessage();
@@ -171,6 +173,44 @@ pointy.pauseMessageCycle();
 pointy.resumeMessageCycle();
 ```
 
+### Setters
+
+All setters emit corresponding `*Change` events:
+
+```javascript
+// Animation
+pointy.setEasing('bounce');
+pointy.setAnimationDuration(800);
+pointy.setIntroFadeDuration(500);
+pointy.setBubbleFadeDuration(300);
+pointy.setMessageTransitionDuration(400);
+pointy.setFloatingAnimation(true);
+
+// Position
+pointy.setOffset(30, 20);
+pointy.setInitialPosition('top-left');
+pointy.setInitialPositionOffset(50);
+
+// Tracking
+pointy.setTracking(true);
+pointy.setTrackingFps(30);
+
+// Messages
+pointy.setMessageInterval(2000);
+
+// Autoplay
+pointy.setAutoplayInterval(3000);
+pointy.setAutoplayWaitForMessages(true);
+
+// Completion
+pointy.setResetOnComplete(true);
+pointy.setHideOnComplete(true);
+pointy.setHideOnCompleteDelay(500);
+
+// Styling
+pointy.setPointerSvg('<svg>...</svg>');
+```
+
 ## Easing Presets
 
 ```javascript
@@ -259,8 +299,8 @@ pointy.on('all', (data) => {
 #### Content
 | Event | Data |
 |-------|------|
-| `contentSet` | `{ messages, total, animated, cyclePaused }` |
-| `messagesSet` | `{ messages, total, cyclePaused }` |
+| `messagesSet` | `{ messages, total, animated, cyclePaused }` |
+| `messageUpdate` | `{ index, message, oldMessage, total, animated }` |
 | `messageChange` | `{ fromIndex, toIndex, message, total, isAuto? }` |
 
 #### Message Cycle

package/dist/pointy.esm.js

@@ -1,6 +1,6 @@
 /**
  * Pointy - A lightweight tooltip library with animated pointer
- * @version 1.0.1
+ * @version 1.0.3
  * @license MIT
  */
 /**
@@ -24,6 +24,7 @@
  * @options
  * - steps {Array<{target, content, direction?, duration?}>} - Tour steps
  * - target {string|HTMLElement} - Initial target element
+ * - content {string|string[]} - Initial content/messages (single-step use)
  * - offsetX {number} - Horizontal offset from target (default: 20)
  * - offsetY {number} - Vertical offset from target (default: 16)
  * - trackingFps {number} - Position update FPS, 0 = unlimited (default: 60)
@@ -78,9 +79,9 @@
  * - introAnimationEnd: Initial fade-in animation completed
  * 
  * Content:
- * - contentSet: Content updated via setContent()
- * - messagesSet: New messages array set for step
- * - messageChange: Message changed (manual or auto)
+ * - messagesSet: Messages array replaced via setMessages()
+ * - messageUpdate: Single message updated via setMessage()
+ * - messageChange: Message changed (navigation or auto-cycle)
  * 
  * Message Cycle:
  * - messageCycleStart: Auto message cycling started
@@ -131,7 +132,7 @@
  * Core: show(), hide(), destroy()
  * Navigation: next(), prev(), goToStep(index), reset(), restart()
  * Custom Target: pointTo(target, content?, direction?)
- * Content: setContent(content), nextMessage(), prevMessage(), goToMessage(index)
+ * Content: setMessages(content), setMessage(msg), nextMessage(), prevMessage(), goToMessage(index)
  * Message Cycle: startMessageCycle(interval?), stopMessageCycle(), pauseMessageCycle(), resumeMessageCycle()
  * Autoplay: startAutoplay(), stopAutoplay(), pauseAutoplay(), resumeAutoplay()
  * Animation: animateToInitialPosition()
@@ -506,6 +507,8 @@ class Pointy {
 
     this.bubble = document.createElement('div');
     this.bubble.className = this.classNames.bubble;
+    // Set initial bubble position for pointing up (default)
+    this.bubble.style.transform = 'translateY(28px)';
     
     this.bubbleText = document.createElement('span');
     this.bubbleText.className = this.classNames.bubbleText;
@@ -695,7 +698,7 @@ class Pointy {
       } else {
         // Default: pointing up
         this.pointer.style.transform = 'rotate(0deg)';
-        this.bubble.style.transform = 'translateY(0)';
+        this.bubble.style.transform = 'translateY(28px)';
       }
       
       this.container.style.display = 'flex';
@@ -718,9 +721,17 @@ class Pointy {
           
           this._startTracking();
           
-          // Show bubble immediately with fade
+          // Show bubble immediately with fade (only if content is not empty)
+          const hasContent = this.currentMessages.length > 0 && 
+            this.currentMessages.some(m => m !== '' && m !== null && m !== undefined);
+          
           this.bubble.style.transition = `opacity ${this.bubbleFadeDuration}ms ease`;
-          this.bubble.style.opacity = '1';
+          if (hasContent) {
+            this.bubble.style.opacity = '1';
+          } else {
+            this.bubble.style.opacity = '0';
+            this.bubble.style.pointerEvents = 'none';
+          }
           
           // Re-enable transitions after bubble fade completes
           setTimeout(() => {
@@ -749,9 +760,18 @@ class Pointy {
           this._startTracking();
           
           // Show bubble with fade after arriving at first target
+          // Show bubble with fade after arriving at first target (only if content is not empty)
           setTimeout(() => {
+            const hasContent = this.currentMessages.length > 0 && 
+              this.currentMessages.some(m => m !== '' && m !== null && m !== undefined);
+            
             this.bubble.style.transition = '';
-            this.bubble.style.opacity = '1';
+            if (hasContent) {
+              this.bubble.style.opacity = '1';
+            } else {
+              this.bubble.style.opacity = '0';
+              this.bubble.style.pointerEvents = 'none';
+            }
             
             // Start message cycle if multi-message
             if (this.messageInterval && this.currentMessages.length > 1 && !this._messageIntervalId) {
@@ -1003,6 +1023,48 @@ class Pointy {
   }
 
   updateContent(newContent, animate = true) {
+    // Check if content is empty
+    const isEmpty = newContent === '' || newContent === null || newContent === undefined ||
+      (Array.isArray(newContent) && newContent.length === 0) ||
+      (Array.isArray(newContent) && newContent.every(m => m === '' || m === null || m === undefined));
+    
+    if (isEmpty) {
+      // Hide bubble when content is empty
+      this.bubble.style.opacity = '0';
+      this.bubble.style.pointerEvents = 'none';
+      return;
+    }
+    
+    // Track if bubble was hidden (needs special handling)
+    const wasHidden = this.bubble.style.opacity === '0';
+    
+    // Show bubble if it was hidden - need to make visible BEFORE measuring
+    if (wasHidden && this.isVisible) {
+      // Temporarily disable ALL transitions for instant position update
+      const oldBubbleTransition = this.bubble.style.transition;
+      const oldPointerTransition = this.pointer.style.transition;
+      this.bubble.style.transition = 'none';
+      this.pointer.style.transition = 'none';
+      
+      this.bubble.style.opacity = '1';
+      this.bubble.style.pointerEvents = '';
+      
+      // Force reflow to apply opacity
+      this.bubble.offsetHeight;
+      
+      // Update position with bubble visible (so offsetHeight works)
+      this.updatePosition();
+      
+      // Force another reflow to apply position
+      this.bubble.offsetHeight;
+      
+      // Re-enable transitions after a frame
+      requestAnimationFrame(() => {
+        this.bubble.style.transition = oldBubbleTransition;
+        this.pointer.style.transition = oldPointerTransition;
+      });
+    }
+    
     // Skip if content is the same (only for string content)
     if (typeof newContent === 'string' && this.bubbleText.innerHTML === newContent) {
       return;
@@ -1024,7 +1086,7 @@ class Pointy {
    * @param {boolean} fromStepChange - Whether this is from a step change (internal)
    * @private
    */
-  _setMessages(content, fromStepChange = false) {
+  _applyMessages(content, fromStepChange = false) {
     // Check if cycle was running before
     const wasRunning = this._messageIntervalId !== null;
     
@@ -1038,8 +1100,8 @@ class Pointy {
     // Show first message
     this.updateContent(this.currentMessages[0]);
     
-    // Only auto-start cycle on step changes, not on manual setContent
-    // For manual setContent, user must call resumeMessageCycle()
+    // Only auto-start cycle on step changes, not on manual setMessages
+    // For manual setMessages, user must call resumeMessageCycle()
     if (fromStepChange && this.messageInterval && this.currentMessages.length > 1) {
       this._startMessageCycle();
     } else if (wasRunning && this.currentMessages.length > 1) {
@@ -1249,16 +1311,41 @@ class Pointy {
   }
 
   /**
-   * Set content programmatically (replaces current messages)
+   * Set/update the current message (at current index)
+   * @param {string} message - New message content
+   * @param {boolean} animate - Whether to animate the change (default: true)
+   */
+  setMessage(message, animate = true) {
+    const oldMessage = this.currentMessages[this.currentMessageIndex];
+    this.currentMessages[this.currentMessageIndex] = message;
+    
+    this.updateContent(message, animate);
+    
+    // Ensure position is updated immediately for non-animated changes
+    if (!animate) {
+      this.updatePosition();
+    }
+    
+    this._emit('messageUpdate', {
+      index: this.currentMessageIndex,
+      message: message,
+      oldMessage: oldMessage,
+      total: this.currentMessages.length,
+      animated: animate
+    });
+  }
+
+  /**
+   * Set messages programmatically (replaces current messages)
    * @param {string|string[]} content - Single message or array of messages
    * @param {boolean} animate - Whether to animate the change (default: true)
    */
-  setContent(content, animate = true) {
+  setMessages(content, animate = true) {
     // Check if cycle was running before
     const wasRunning = this._messageIntervalId !== null;
     
     if (animate) {
-      this._setMessages(content, false); // false = not from step change
+      this._applyMessages(content, false); // false = not from step change
     } else {
       // Stop any existing auto-cycle
       this._stopMessageCycle();
@@ -1277,7 +1364,7 @@ class Pointy {
       }
     }
     
-    this._emit('contentSet', { 
+    this._emit('messagesSet', { 
       messages: this.currentMessages, 
       total: this.currentMessages.length,
       animated: animate,
@@ -1636,6 +1723,10 @@ class Pointy {
     // Set direction: step.direction can be 'up', 'down', or undefined (auto)
     this.manualDirection = step.direction || null;
     
+    // Reset velocity tracking for new target
+    this._targetYHistory = [];
+    this.lastTargetY = null;
+    
     // Pause floating animation during movement
     this.container.classList.add(this.classNames.moving);
     if (this.moveTimeout) clearTimeout(this.moveTimeout);
@@ -1663,7 +1754,7 @@ class Pointy {
     
     this._emit('move', { index: index, step: step });
     
-    this._setMessages(step.content, true); // true = from step change, auto-start cycle
+    this._applyMessages(step.content, true); // true = from step change, auto-start cycle
     this.targetElement = Pointy.getTargetElement(step.target);
     this.updatePosition();
     
@@ -1956,6 +2047,10 @@ class Pointy {
     // Set manual direction (null means auto)
     this.manualDirection = direction || null;
     
+    // Reset velocity tracking for new target
+    this._targetYHistory = [];
+    this.lastTargetY = null;
+    
     // Pause floating animation during movement
     this.container.classList.add(this.classNames.moving);
     if (this.moveTimeout) clearTimeout(this.moveTimeout);
@@ -1972,7 +2067,7 @@ class Pointy {
     this.targetElement = toTarget;
     
     if (content !== undefined) {
-      this._setMessages(content, false); // false = not from step change, don't auto-start cycle
+      this._applyMessages(content, false); // false = not from step change, don't auto-start cycle
     }
     
     this.updatePosition();
@@ -2038,7 +2133,7 @@ class Pointy {
    * Content:
    * - messagesSet: When messages array is set for a step
    * - messageChange: When current message changes (next/prev message) - includes isAuto flag
-   * - contentSet: When setContent() is called
+   * - messagesSet: When setMessages() is called
    * - messageCycleStart: When auto message cycling starts
    * - messageCycleStop: When auto message cycling stops
    * - messageCyclePause: When message cycling is paused

package/dist/pointy.js

@@ -1,6 +1,6 @@
 /**
  * Pointy - A lightweight tooltip library with animated pointer
- * @version 1.0.1
+ * @version 1.0.3
  * @license MIT
  */
 (function (global, factory) {
@@ -30,6 +30,7 @@
    * @options
    * - steps {Array<{target, content, direction?, duration?}>} - Tour steps
    * - target {string|HTMLElement} - Initial target element
+   * - content {string|string[]} - Initial content/messages (single-step use)
    * - offsetX {number} - Horizontal offset from target (default: 20)
    * - offsetY {number} - Vertical offset from target (default: 16)
    * - trackingFps {number} - Position update FPS, 0 = unlimited (default: 60)
@@ -84,9 +85,9 @@
    * - introAnimationEnd: Initial fade-in animation completed
    * 
    * Content:
-   * - contentSet: Content updated via setContent()
-   * - messagesSet: New messages array set for step
-   * - messageChange: Message changed (manual or auto)
+   * - messagesSet: Messages array replaced via setMessages()
+   * - messageUpdate: Single message updated via setMessage()
+   * - messageChange: Message changed (navigation or auto-cycle)
    * 
    * Message Cycle:
    * - messageCycleStart: Auto message cycling started
@@ -137,7 +138,7 @@
    * Core: show(), hide(), destroy()
    * Navigation: next(), prev(), goToStep(index), reset(), restart()
    * Custom Target: pointTo(target, content?, direction?)
-   * Content: setContent(content), nextMessage(), prevMessage(), goToMessage(index)
+   * Content: setMessages(content), setMessage(msg), nextMessage(), prevMessage(), goToMessage(index)
    * Message Cycle: startMessageCycle(interval?), stopMessageCycle(), pauseMessageCycle(), resumeMessageCycle()
    * Autoplay: startAutoplay(), stopAutoplay(), pauseAutoplay(), resumeAutoplay()
    * Animation: animateToInitialPosition()
@@ -512,6 +513,8 @@
 
       this.bubble = document.createElement('div');
       this.bubble.className = this.classNames.bubble;
+      // Set initial bubble position for pointing up (default)
+      this.bubble.style.transform = 'translateY(28px)';
       
       this.bubbleText = document.createElement('span');
       this.bubbleText.className = this.classNames.bubbleText;
@@ -701,7 +704,7 @@
         } else {
           // Default: pointing up
           this.pointer.style.transform = 'rotate(0deg)';
-          this.bubble.style.transform = 'translateY(0)';
+          this.bubble.style.transform = 'translateY(28px)';
         }
         
         this.container.style.display = 'flex';
@@ -724,9 +727,17 @@
             
             this._startTracking();
             
-            // Show bubble immediately with fade
+            // Show bubble immediately with fade (only if content is not empty)
+            const hasContent = this.currentMessages.length > 0 && 
+              this.currentMessages.some(m => m !== '' && m !== null && m !== undefined);
+            
             this.bubble.style.transition = `opacity ${this.bubbleFadeDuration}ms ease`;
-            this.bubble.style.opacity = '1';
+            if (hasContent) {
+              this.bubble.style.opacity = '1';
+            } else {
+              this.bubble.style.opacity = '0';
+              this.bubble.style.pointerEvents = 'none';
+            }
             
             // Re-enable transitions after bubble fade completes
             setTimeout(() => {
@@ -755,9 +766,18 @@
             this._startTracking();
             
             // Show bubble with fade after arriving at first target
+            // Show bubble with fade after arriving at first target (only if content is not empty)
             setTimeout(() => {
+              const hasContent = this.currentMessages.length > 0 && 
+                this.currentMessages.some(m => m !== '' && m !== null && m !== undefined);
+              
               this.bubble.style.transition = '';
-              this.bubble.style.opacity = '1';
+              if (hasContent) {
+                this.bubble.style.opacity = '1';
+              } else {
+                this.bubble.style.opacity = '0';
+                this.bubble.style.pointerEvents = 'none';
+              }
               
               // Start message cycle if multi-message
               if (this.messageInterval && this.currentMessages.length > 1 && !this._messageIntervalId) {
@@ -1009,6 +1029,48 @@
     }
 
     updateContent(newContent, animate = true) {
+      // Check if content is empty
+      const isEmpty = newContent === '' || newContent === null || newContent === undefined ||
+        (Array.isArray(newContent) && newContent.length === 0) ||
+        (Array.isArray(newContent) && newContent.every(m => m === '' || m === null || m === undefined));
+      
+      if (isEmpty) {
+        // Hide bubble when content is empty
+        this.bubble.style.opacity = '0';
+        this.bubble.style.pointerEvents = 'none';
+        return;
+      }
+      
+      // Track if bubble was hidden (needs special handling)
+      const wasHidden = this.bubble.style.opacity === '0';
+      
+      // Show bubble if it was hidden - need to make visible BEFORE measuring
+      if (wasHidden && this.isVisible) {
+        // Temporarily disable ALL transitions for instant position update
+        const oldBubbleTransition = this.bubble.style.transition;
+        const oldPointerTransition = this.pointer.style.transition;
+        this.bubble.style.transition = 'none';
+        this.pointer.style.transition = 'none';
+        
+        this.bubble.style.opacity = '1';
+        this.bubble.style.pointerEvents = '';
+        
+        // Force reflow to apply opacity
+        this.bubble.offsetHeight;
+        
+        // Update position with bubble visible (so offsetHeight works)
+        this.updatePosition();
+        
+        // Force another reflow to apply position
+        this.bubble.offsetHeight;
+        
+        // Re-enable transitions after a frame
+        requestAnimationFrame(() => {
+          this.bubble.style.transition = oldBubbleTransition;
+          this.pointer.style.transition = oldPointerTransition;
+        });
+      }
+      
       // Skip if content is the same (only for string content)
       if (typeof newContent === 'string' && this.bubbleText.innerHTML === newContent) {
         return;
@@ -1030,7 +1092,7 @@
      * @param {boolean} fromStepChange - Whether this is from a step change (internal)
      * @private
      */
-    _setMessages(content, fromStepChange = false) {
+    _applyMessages(content, fromStepChange = false) {
       // Check if cycle was running before
       const wasRunning = this._messageIntervalId !== null;
       
@@ -1044,8 +1106,8 @@
       // Show first message
       this.updateContent(this.currentMessages[0]);
       
-      // Only auto-start cycle on step changes, not on manual setContent
-      // For manual setContent, user must call resumeMessageCycle()
+      // Only auto-start cycle on step changes, not on manual setMessages
+      // For manual setMessages, user must call resumeMessageCycle()
       if (fromStepChange && this.messageInterval && this.currentMessages.length > 1) {
         this._startMessageCycle();
       } else if (wasRunning && this.currentMessages.length > 1) {
@@ -1255,16 +1317,41 @@
     }
 
     /**
-     * Set content programmatically (replaces current messages)
+     * Set/update the current message (at current index)
+     * @param {string} message - New message content
+     * @param {boolean} animate - Whether to animate the change (default: true)
+     */
+    setMessage(message, animate = true) {
+      const oldMessage = this.currentMessages[this.currentMessageIndex];
+      this.currentMessages[this.currentMessageIndex] = message;
+      
+      this.updateContent(message, animate);
+      
+      // Ensure position is updated immediately for non-animated changes
+      if (!animate) {
+        this.updatePosition();
+      }
+      
+      this._emit('messageUpdate', {
+        index: this.currentMessageIndex,
+        message: message,
+        oldMessage: oldMessage,
+        total: this.currentMessages.length,
+        animated: animate
+      });
+    }
+
+    /**
+     * Set messages programmatically (replaces current messages)
      * @param {string|string[]} content - Single message or array of messages
      * @param {boolean} animate - Whether to animate the change (default: true)
      */
-    setContent(content, animate = true) {
+    setMessages(content, animate = true) {
       // Check if cycle was running before
       const wasRunning = this._messageIntervalId !== null;
       
       if (animate) {
-        this._setMessages(content, false); // false = not from step change
+        this._applyMessages(content, false); // false = not from step change
       } else {
         // Stop any existing auto-cycle
         this._stopMessageCycle();
@@ -1283,7 +1370,7 @@
         }
       }
       
-      this._emit('contentSet', { 
+      this._emit('messagesSet', { 
         messages: this.currentMessages, 
         total: this.currentMessages.length,
         animated: animate,
@@ -1642,6 +1729,10 @@
       // Set direction: step.direction can be 'up', 'down', or undefined (auto)
       this.manualDirection = step.direction || null;
       
+      // Reset velocity tracking for new target
+      this._targetYHistory = [];
+      this.lastTargetY = null;
+      
       // Pause floating animation during movement
       this.container.classList.add(this.classNames.moving);
       if (this.moveTimeout) clearTimeout(this.moveTimeout);
@@ -1669,7 +1760,7 @@
       
       this._emit('move', { index: index, step: step });
       
-      this._setMessages(step.content, true); // true = from step change, auto-start cycle
+      this._applyMessages(step.content, true); // true = from step change, auto-start cycle
       this.targetElement = Pointy.getTargetElement(step.target);
       this.updatePosition();
       
@@ -1962,6 +2053,10 @@
       // Set manual direction (null means auto)
       this.manualDirection = direction || null;
       
+      // Reset velocity tracking for new target
+      this._targetYHistory = [];
+      this.lastTargetY = null;
+      
       // Pause floating animation during movement
       this.container.classList.add(this.classNames.moving);
       if (this.moveTimeout) clearTimeout(this.moveTimeout);
@@ -1978,7 +2073,7 @@
       this.targetElement = toTarget;
       
       if (content !== undefined) {
-        this._setMessages(content, false); // false = not from step change, don't auto-start cycle
+        this._applyMessages(content, false); // false = not from step change, don't auto-start cycle
       }
       
       this.updatePosition();
@@ -2044,7 +2139,7 @@
      * Content:
      * - messagesSet: When messages array is set for a step
      * - messageChange: When current message changes (next/prev message) - includes isAuto flag
-     * - contentSet: When setContent() is called
+     * - messagesSet: When setMessages() is called
      * - messageCycleStart: When auto message cycling starts
      * - messageCycleStop: When auto message cycling stops
      * - messageCyclePause: When message cycling is paused