@oix1987/yjd 1.0.0 → 1.0.2

package/lib/ui/color-picker.js

@@ -1,296 +0,0 @@
-/**
- * Color Picker Component - Simple color picker with popup
- */
-import IconUtils from './icons.js';
-import { appendPopup, calculatePopupPosition, setPopupPosition } from '../utils/popup-helper.js';
-
-class ColorPicker {
-  constructor(options = {}) {
-    this.options = {
-      colors: [
-        '#000000', '#333333', '#666666', '#999999', '#cccccc', '#eeeeee',
-        '#ff0000', '#ff6600', '#ffcc00', '#ffff00', '#99ff00', '#00ff00',
-        '#00ffcc', '#00ccff', '#0066ff', '#0000ff', '#6600ff', '#cc00ff',
-        '#ff00cc', '#ff0066', '#800000', '#ff8000', '#808000', '#008000',
-        '#008080', '#0080ff', '#004080', '#800080', '#804080', '#ff0080'
-      ],
-      customColorEnabled: true,
-      onColorSelect: null,
-      editor: null,
-      ...options
-    };
-    
-    this.popup = null;
-    this.isVisible = false;
-    this.currentColor = '#000000';
-    this.clickOutsideHandler = null;
-    
-    this.createColorPicker();
-  }
-
-  /**
-   * Create color picker popup
-   */
-  createColorPicker() {
-    // Create popup
-    this.popup = document.createElement('div');
-    this.popup.className = 'color-picker-popup';
-    
-    // Create color grid
-    this.createColorGrid();
-    
-    // Create custom color input if enabled
-    if (this.options.customColorEnabled) {
-      this.createCustomColorInput();
-    }
-    
-    // Add popup to container
-    appendPopup(this.popup);
-    
-    // Prevent focus loss when clicking on popup
-    if (this.options.editor && typeof this.options.editor.preventFocusLoss === 'function') {
-      this.options.editor.preventFocusLoss(this.popup);
-    }
-  }
-
-  /**
-   * Create color grid
-   */
-  createColorGrid() {
-    const grid = document.createElement('div');
-    grid.className = 'color-grid';
-    
-    this.options.colors.forEach(color => {
-      const colorButton = document.createElement('button');
-      colorButton.type = 'button';
-      colorButton.className = 'color-button';
-      colorButton.style.backgroundColor = color;
-      colorButton.dataset.color = color;
-      colorButton.title = color;
-      
-      colorButton.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.selectColor(color);
-        // Maintain editor focus after color selection
-        if (this.options.editor) {
-          setTimeout(() => this.options.editor.focus(), 0);
-        }
-      });
-      
-      grid.appendChild(colorButton);
-    });
-    
-    this.popup.appendChild(grid);
-  }
-
-  /**
-   * Create custom color input
-   */
-  createCustomColorInput() {
-    const customContainer = document.createElement('div');
-    customContainer.className = 'custom-color-container';
-    
-    // No color button
-    const noColorButton = document.createElement('button');
-    noColorButton.type = 'button';
-    noColorButton.className = 'color-button no-color-button';
-    noColorButton.title = 'No Color';
-    noColorButton.style.backgroundColor = 'transparent';
-    
-    // Add icon to button
-    const noColorIcon = IconUtils.createIconElement('no-color', {
-      width: '24',
-      height: '24'
-    });
-    noColorButton.appendChild(noColorIcon);
-    
-    noColorButton.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.selectColor('transparent');
-      // Maintain editor focus after color selection
-      if (this.options.editor) {
-        setTimeout(() => this.options.editor.focus(), 0);
-      }
-    });
-    
-    // White button
-    const whiteButton = document.createElement('button');
-    whiteButton.type = 'button';
-    whiteButton.className = 'color-button white-button';
-    whiteButton.style.backgroundColor = '#ffffff';
-    whiteButton.style.border = '1px solid #ccc';
-    whiteButton.title = 'White';
-    
-    whiteButton.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.selectColor('#ffffff');
-      // Maintain editor focus after color selection
-      if (this.options.editor) {
-        setTimeout(() => this.options.editor.focus(), 0);
-      }
-    });
-    
-    // Black button
-    const blackButton = document.createElement('button');
-    blackButton.type = 'button';
-    blackButton.className = 'color-button black-button';
-    blackButton.style.backgroundColor = '#000000';
-    blackButton.title = 'Black';
-    
-    blackButton.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.selectColor('#000000');
-      // Maintain editor focus after color selection
-      if (this.options.editor) {
-        setTimeout(() => this.options.editor.focus(), 0);
-      }
-    });
-    
-    // Custom color button with hidden input
-    const customColorButton = document.createElement('button');
-    customColorButton.type = 'button';
-    customColorButton.className = 'color-button custom-color-button';
-    customColorButton.title = 'Custom Color';
-    customColorButton.style.backgroundColor = 'transparent';
-    customColorButton.style.border = '1px solid #ccc';
-    customColorButton.style.font = 'none !important';
-    // Add icon to button
-    const iconElement = IconUtils.createIconElement('custom-color', {
-      width: '16px',
-      height: '16px'
-    });
-    customColorButton.appendChild(iconElement);
-    
-    const customInput = document.createElement('input');
-    customInput.type = 'color';
-    customInput.className = 'custom-color-input';
-    customInput.value = this.currentColor;
-    customInput.style.visibility = 'hidden';
-    customInput.style.pointerEvents = 'none'; // ngăn không cho click
-    customInput.style.opacity = '0'; // ẩn hẳn về mặt thị giác
-    customColorButton.addEventListener('click', (e) => {
-      customInput.style.visibility = 'visible';
-      customInput.style.pointerEvents = 'auto';
-      customInput.style.opacity = '1';
-      e.preventDefault();
-      e.stopPropagation();
-      customInput.click();
-
-    });
-    
-    customInput.addEventListener('change', (e) => {
-      customInput.style.visibility = 'hidden';
-      customInput.style.pointerEvents = 'none'; // ngăn không cho click
-      customInput.style.opacity = '0'; // ẩn hẳn về mặt thị giác
-      this.selectColor(e.target.value);
-      // Maintain editor focus after color selection
-      if (this.options.editor) {
-        setTimeout(() => this.options.editor.focus(), 0);
-      }
-    });
-    
-    customContainer.appendChild(noColorButton);
-    customContainer.appendChild(whiteButton);
-    customContainer.appendChild(blackButton);
-    customContainer.appendChild(customColorButton);
-    customContainer.appendChild(customInput);
-    
-    this.popup.appendChild(customContainer);
-  }
-
-  /**
-   * 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 color 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 color picker popup
-   */
-  hide() {
-    this.popup.classList.remove('visible');
-    this.isVisible = false;
-    this.removeClickOutside();
-  }
-
-  /**
-   * Select color and trigger callback
-   * @param {string} color - Selected color
-   */
-  selectColor(color) {
-    this.currentColor = color;
-    
-    if (this.options.onColorSelect) {
-      this.options.onColorSelect(color);
-    }
-    
-    this.hide();
-  }
-
-  /**
-   * Destroy color picker
-   */
-  destroy() {
-    this.removeClickOutside();
-    if (this.popup && this.popup.parentNode) {
-      this.popup.parentNode.removeChild(this.popup);
-    }
-  }
-}
-
-export default ColorPicker; 

package/lib/ui/customselect.js

@@ -1,319 +0,0 @@
-import IconUtils from './icons.js';
-import { appendPopup, calculatePopupPosition, setPopupPosition } from '../utils/popup-helper.js';
-
-/**
- * Custom Select Component - Reusable dropdown/popup select component
- */
-class CustomSelect {
-  constructor(options = {}) {
-    this.options = {
-      items: [], // Array of items to display
-      onItemSelect: null, // Callback when item is selected
-      displayProperty: 'label', // Property to display as text
-      valueProperty: 'value', // Property to use as value
-      className: 'custom-select', // CSS class for the popup
-      width: 200, // Popup width
-      height: 280, // Popup height
-      ...options
-    };
-    
-    this.popup = null;
-    this.isVisible = false;
-    this.currentValue = null;
-    this.clickOutsideHandler = null;
-    this.initialized = false;
-    
-    this.createSelect();
-  }
-
-  /**
-   * Create select popup
-   */
-  createSelect() {
-    // Create popup
-    this.popup = document.createElement('div');
-    this.popup.className = `${this.options.className}-popup`;
-
-    // Add popup to container
-    appendPopup(this.popup);
-    
-    // Initialize async
-    this.init();
-  }
-
-  /**
-   * Initialize component with async operations
-   */
-  async init() {
-    // Create item list
-    await this.createItemList();
-    this.initialized = true;
-  }
-
-  /**
-   * Create item list
-   */
-  async createItemList() {
-    const list = document.createElement('div');
-    list.className = 'item-list';
-    
-    // Get check icon
-    const checkIconSvg = IconUtils.getIcon('check');
-    
-    this.options.items.forEach(item => {
-      const itemButton = document.createElement('button');
-      itemButton.type = 'button';
-      itemButton.className = 'custom-select-item-button';
-      itemButton.dataset.value = this.getItemValue(item);
-      
-      // Create item content with text and checkmark
-      const itemText = document.createElement('div');
-      itemText.className = 'item-text';
-      itemText.innerHTML = this.getItemDisplay(item);
-      
-      const checkmark = document.createElement('span');
-      checkmark.className = 'item-checkmark';
-      checkmark.innerHTML = checkIconSvg || '';
-      
-      itemButton.appendChild(itemText);
-      itemButton.appendChild(checkmark);
-      
-      itemButton.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.selectItem(item);
-      });
-      
-      list.appendChild(itemButton);
-    });
-    
-    this.popup.appendChild(list);
-  }
-
-  /**
-   * Get display text for item
-   */
-  getItemDisplay(item) {
-    return item[this.options.displayProperty] || item.toString();
-  }
-
-  /**
-   * Get value for item
-   */
-  getItemValue(item) {
-    return item[this.options.valueProperty] || item[this.options.displayProperty] || item;
-  }
-
-  /**
-   * Update items in the select
-   */
-  async updateItems(items) {
-    this.options.items = items;
-    
-    // Remove existing list
-    const existingList = this.popup.querySelector('.item-list');
-    if (existingList) {
-      existingList.remove();
-    }
-    
-    // Create new list
-    await this.createItemList();
-  }
-
-  /**
-   * Setup click outside handler
-   */
-  setupClickOutside() {
-    if (this.clickOutsideHandler) {
-      document.removeEventListener('click', this.clickOutsideHandler);
-    }
-    
-    this.clickOutsideHandler = (e) => {
-      // Don't hide if clicking on block toolbar or its buttons
-      if (e.target.closest('.block-toolbar')) {
-        return;
-      }
-      
-      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;
-    }
-  }
-  
-  /**
-   * Setup scroll handler to update popup position
-   */
-  setupScrollHandler() {
-    if (this.scrollHandler) {
-      window.removeEventListener('scroll', this.scrollHandler);
-    }
-    
-    this.scrollHandler = () => {
-      if (this.isVisible) {
-        this.updatePosition();
-      }
-    };
-    
-    window.addEventListener('scroll', this.scrollHandler);
-  }
-  
-  /**
-   * Remove scroll handler
-   */
-  removeScrollHandler() {
-    if (this.scrollHandler) {
-      window.removeEventListener('scroll', this.scrollHandler);
-      this.scrollHandler = null;
-    }
-  }
-
-  /**
-   * Show select popup
-   */
-  async show(anchor) {
-    if (!anchor) return;
-    
-    // Wait for initialization if not ready
-    if (!this.initialized) {
-      await new Promise(resolve => {
-        const checkInit = () => {
-          if (this.initialized) {
-            resolve();
-          } else {
-            setTimeout(checkInit, 10);
-          }
-        };
-        checkInit();
-      });
-    }
-    
-    // Ensure popup is in DOM
-    if (!document.body.contains(this.popup)) {
-      appendPopup(this.popup);
-    }
-    
-    // Update current selection highlight
-    this.highlightCurrentItem(this.currentValue);
-    
-    // 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();
-    
-    // Setup scroll handler to update position
-    this.setupScrollHandler();
-    
-    // Store reference to anchor for potential repositioning
-    this.currentAnchor = anchor;
-  }
-
-  /**
-   * Hide select popup
-   */
-  hide() {
-    this.popup.classList.remove('visible');
-    this.isVisible = false;
-    this.removeClickOutside();
-    this.currentAnchor = null;
-  }
-  
-  /**
-   * Update popup position based on current anchor
-   */
-  updatePosition() {
-    if (this.isVisible && this.currentAnchor) {
-      // Calculate and set popup position
-      const position = calculatePopupPosition(this.currentAnchor, this.popup, {
-        offsetY: 5,
-        offsetX: 0
-      });
-      setPopupPosition(this.popup, position);
-    }
-  }
-
-  /**
-   * Set current value
-   */
-  setCurrentValue(value) {
-    this.currentValue = value;
-    this.highlightCurrentItem(value);
-  }
-
-  /**
-   * Highlight current item in the list
-   */
-  highlightCurrentItem(value) {
-    // Remove previous highlights
-    this.popup.querySelectorAll('.custom-select-item-button.current').forEach(btn => {
-      btn.classList.remove('current');
-    });
-    
-    // Highlight current item - find by comparing dataset.value directly
-    if (value != null) {
-      const buttons = this.popup.querySelectorAll('.custom-select-item-button');
-      for (const button of buttons) {
-        if (button.dataset.value === value.toString()) {
-          button.classList.add('current');
-          break;
-        }
-      }
-    }
-  }
-
-  /**
-   * Select item and trigger callback
-   */
-  selectItem(item) {
-    const value = this.getItemValue(item);
-    this.currentValue = value;
-    
-    if (this.options.onItemSelect) {
-      this.options.onItemSelect(value, item);
-    }
-    
-    this.hide();
-  }
-
-  /**
-   * Get current selected value
-   */
-  getCurrentValue() {
-    return this.currentValue;
-  }
-
-  /**
-   * Destroy select component
-   */
-  destroy() {
-    this.removeClickOutside();
-    if (this.popup && this.popup.parentNode) {
-      this.popup.parentNode.removeChild(this.popup);
-    }
-  }
-}
-
-export default CustomSelect;