@oix1987/yjd 1.0.0

package/lib/ui/emoji-picker.js

@@ -0,0 +1,196 @@
+/**
+ * Emoji Picker Component - Popup for selecting emojis
+ */
+import { appendPopup, calculatePopupPosition, setPopupPosition } from '../utils/popup-helper.js';
+
+class EmojiPicker {
+  constructor(options = {}) {
+    this.options = {
+      emojis: [
+        // Smileys & People
+        '😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',
+        '😋', '😎', '😍', '🥰', '😘', '😗', '😙', '😚', '🙂', '🤗',
+        '😳', '🥺', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱',
+        '🤬', '😈', '👿', '💀', '☠️', '💩', '🤡', '👹', '👺', '👻',
+      ],
+      onEmojiSelect: null,
+      ...options
+    };
+    
+    this.popup = null;
+    this.isVisible = false;
+    this.clickOutsideHandler = null;
+    
+    this.createEmojiPicker();
+  }
+
+  /**
+   * Detect operating system
+   * @returns {string} 'mac' or 'windows'
+   */
+  detectOS() {
+    const platform = navigator.platform.toLowerCase();
+    if (platform.includes('mac')) {
+      return 'mac';
+    } else if (platform.includes('win')) {
+      return 'windows';
+    }
+    // Default to windows for other platforms
+    return 'windows';
+  }
+
+  /**
+   * Get emoji shortcut message based on OS
+   * @returns {string} HTML string for the shortcut message
+   */
+  getEmojiShortcutMessage() {
+    const os = this.detectOS();
+    
+    if (os === 'mac') {
+      return `<div style="color: rgb(113, 120, 124); font-style: normal; font-weight: 400; line-height: normal; text-align: center;">Get more emojis with <span style="border-radius: 2.2px; background: #EEE; padding: 2px 4px;">⌘</span> <span style="color: #000;">+</span> <span style="border-radius: 2.2px; background: #EEE; padding: 2px 4px;">CTRL</span> <span style="color: #000;">+</span> <span style="border-radius: 2.2px; background: #EEE; padding: 2px 4px;">SPACE</span></div>`;
+    } else {
+      return `<div style="color: rgb(113, 120, 124); font-style: normal; font-weight: 400; line-height: normal; text-align: center;">Get more emojis with <span style="border-radius: 2.2px; background: #EEE; padding: 2px 4px;">WIN</span> <span style="color: #000;">+</span> <span style="border-radius: 2.2px; background: #EEE; padding: 2px 4px;">.</span></div>`;
+    }
+  }
+
+  /**
+   * Create emoji picker popup
+   */
+  createEmojiPicker() {
+    // Create popup
+    this.popup = document.createElement('div');
+    this.popup.className = 'emoji-picker-popup';
+    
+    // Create emoji grid
+    this.createEmojiGrid();
+    const emojiTextMessage = document.createElement('div');
+    emojiTextMessage.className = 'emoji-text-message';
+    
+    emojiTextMessage.innerHTML = this.getEmojiShortcutMessage();
+    this.popup.appendChild(emojiTextMessage);
+
+    // Add popup to container
+    appendPopup(this.popup);
+  }
+
+  /**
+   * Create emoji grid
+   */
+  createEmojiGrid() {
+    const emojiGrid = document.createElement('div');
+    emojiGrid.className = 'emoji-grid';
+    
+    // Create emoji buttons
+    this.options.emojis.forEach(emoji => {
+      const emojiButton = document.createElement('button');
+      emojiButton.type = 'button';
+      emojiButton.className = 'emoji-button';
+      emojiButton.textContent = emoji;
+      emojiButton.title = emoji;
+      
+      emojiButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.selectEmoji(emoji);
+      });
+      
+      emojiGrid.appendChild(emojiButton);
+    });
+    
+    this.popup.appendChild(emojiGrid);
+  }
+
+  /**
+   * Setup click outside handler
+   */
+  setupClickOutside() {
+    if (this.clickOutsideHandler) {
+      document.removeEventListener('click', this.clickOutsideHandler);
+    }
+    
+    this.clickOutsideHandler = (e) => {
+      if (!this.popup.contains(e.target)) {
+        this.hide();
+      }
+    };
+    
+    // Add slight delay to avoid immediate close
+    setTimeout(() => {
+      document.addEventListener('click', this.clickOutsideHandler);
+    }, 100);
+  }
+
+  /**
+   * Remove click outside handler
+   */
+  removeClickOutside() {
+    if (this.clickOutsideHandler) {
+      document.removeEventListener('click', this.clickOutsideHandler);
+      this.clickOutsideHandler = null;
+    }
+  }
+
+  /**
+   * Show emoji picker popup
+   * @param {HTMLElement} anchor - Element to position popup relative to
+   */
+  show(anchor) {
+    if (!anchor) return;
+    
+    // Ensure popup is in DOM
+    if (!document.body.contains(this.popup)) {
+      appendPopup(this.popup);
+    }
+    
+    // Calculate and set popup position
+    const position = calculatePopupPosition(anchor, this.popup, {
+      offsetY: 5,
+      offsetX: 0
+    });
+    setPopupPosition(this.popup, position);
+    
+    // Show popup by adding visible class
+    this.popup.classList.add('visible');
+    this.isVisible = true;
+    
+    // Setup click outside handler
+    this.setupClickOutside();
+  }
+
+  /**
+   * Hide emoji picker popup
+   */
+  hide() {
+    this.popup.classList.remove('visible');
+    this.isVisible = false;
+    this.removeClickOutside();
+  }
+
+  /**
+   * Select emoji and trigger callback
+   * @param {string} emoji - Selected emoji
+   */
+  selectEmoji(emoji) {
+    if (this.options.onEmojiSelect) {
+      this.options.onEmojiSelect(emoji);
+    }
+    
+    this.hide();
+  }
+
+  /**
+   * Destroy the emoji picker
+   */
+  destroy() {
+    this.removeClickOutside();
+    
+    if (this.popup && this.popup.parentNode) {
+      this.popup.parentNode.removeChild(this.popup);
+    }
+    
+    this.popup = null;
+    this.isVisible = false;
+  }
+}
+
+export default EmojiPicker;