@oix1987/yjd 1.0.1 → 1.0.3

package/lib/ui/import-popup.js

@@ -1,288 +0,0 @@
-/**
- * Import Popup Component - Popup for importing various file types
- */
-import { appendPopup, calculatePopupPosition, setPopupPosition } from '../utils/popup-helper.js';
-
-class ImportPopup {
-  constructor(options = {}) {
-    this.options = {
-      onImport: null,
-      ...options
-    };
-    
-    this.popup = null;
-    this.isVisible = false;
-    this.clickOutsideHandler = null;
-    this.selectedFile = null;
-    this.fileType = null;
-    
-    this.createImportPopup();
-  }
-
-  createImportPopup() {
-    this.popup = document.createElement('div');
-    this.popup.className = 'import-popup';
-    
-    const content = document.createElement('div');
-    content.className = 'import-popup-content';
-    
-    // Title
-    const title = document.createElement('h3');
-    title.textContent = 'Import File';
-    title.className = 'import-popup-title';
-    content.appendChild(title);
-    
-    // File type selector
-    const typeContainer = document.createElement('div');
-    typeContainer.className = 'import-type-container';
-    
-    const typeLabel = document.createElement('label');
-    typeLabel.textContent = 'File Type:';
-    typeLabel.className = 'import-input-label';
-    
-    this.typeSelect = document.createElement('select');
-    this.typeSelect.className = 'import-type-select';
-    this.typeSelect.innerHTML = `
-      <option value="">Select file type...</option>
-      <option value="html">HTML (.html, .htm)</option>
-      <option value="excel">Excel/CSV (.csv, .xlsx, .xls)</option>
-      <option value="pdf">PDF (.pdf)</option>
-      <option value="word">Word (.doc, .docx)</option>
-    `;
-    this.typeSelect.addEventListener('change', () => this.updateFileInput());
-    
-    typeContainer.appendChild(typeLabel);
-    typeContainer.appendChild(this.typeSelect);
-    content.appendChild(typeContainer);
-    
-    // File input
-    this.fileInput = document.createElement('input');
-    this.fileInput.type = 'file';
-    this.fileInput.className = 'import-file-input';
-    this.fileInput.disabled = true;
-    this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
-    
-    content.appendChild(this.fileInput);
-    
-    // File info
-    this.fileInfo = document.createElement('div');
-    this.fileInfo.className = 'import-file-info';
-    this.fileInfo.style.display = 'none';
-    content.appendChild(this.fileInfo);
-    
-    // Buttons
-    const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'import-button-container';
-    
-    const cancelButton = document.createElement('button');
-    cancelButton.type = 'button';
-    cancelButton.className = 'import-button cancel-button';
-    cancelButton.textContent = 'Cancel';
-    cancelButton.addEventListener('click', () => this.hide());
-    
-    this.importButton = document.createElement('button');
-    this.importButton.type = 'button';
-    this.importButton.className = 'import-button import-button-main';
-    this.importButton.textContent = 'Import';
-    this.importButton.disabled = true;
-    this.importButton.addEventListener('click', () => this.processImport());
-    
-    buttonContainer.appendChild(cancelButton);
-    buttonContainer.appendChild(this.importButton);
-    content.appendChild(buttonContainer);
-    
-    this.popup.appendChild(content);
-    appendPopup(this.popup);
-  }
-
-  updateFileInput() {
-    const selectedType = this.typeSelect.value;
-    
-    if (selectedType) {
-      this.fileType = selectedType;
-      this.fileInput.disabled = false;
-      
-      const acceptTypes = this.getAcceptTypes(selectedType);
-      this.fileInput.accept = acceptTypes;
-    } else {
-      this.fileType = null;
-      this.fileInput.disabled = true;
-      this.fileInput.accept = '';
-    }
-    
-    this.updateImportButton();
-  }
-
-  getAcceptTypes(fileType) {
-    const types = {
-      html: '.html,.htm,text/html',
-      excel: '.csv,.xlsx,.xls,text/csv',
-      pdf: '.pdf,application/pdf',
-      word: '.doc,.docx'
-    };
-    
-    return types[fileType] || '';
-  }
-
-  handleFileSelect(e) {
-    const file = e.target.files[0];
-    if (file) {
-      this.setSelectedFile(file);
-    }
-  }
-
-  setSelectedFile(file) {
-    this.selectedFile = file;
-    
-    this.fileInfo.style.display = 'block';
-    this.fileInfo.innerHTML = `
-      <div><strong>Name:</strong> ${file.name}</div>
-      <div><strong>Size:</strong> ${this.formatFileSize(file.size)}</div>
-      <div><strong>Type:</strong> ${file.type || 'Unknown'}</div>
-    `;
-    
-    this.updateImportButton();
-  }
-
-  formatFileSize(bytes) {
-    if (bytes === 0) return '0 Bytes';
-    
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  }
-
-  updateImportButton() {
-    this.importButton.disabled = !this.selectedFile || !this.fileType;
-  }
-
-  async processImport() {
-    if (!this.selectedFile || !this.fileType) return;
-    
-    try {
-      let content;
-      
-      if (this.fileType === 'html') {
-        content = await this.readAsText(this.selectedFile);
-      } else if (this.fileType === 'excel') {
-        if (this.selectedFile.name.toLowerCase().endsWith('.csv')) {
-          const csvContent = await this.readAsText(this.selectedFile);
-          content = this.parseCSV(csvContent);
-        } else {
-          alert('Excel files (.xlsx/.xls) require additional libraries. Please use CSV format.');
-          return;
-        }
-      } else if (this.fileType === 'pdf') {
-        alert('PDF import requires additional libraries. Feature coming soon.');
-        return;
-      } else if (this.fileType === 'word') {
-        alert('Word document import requires additional libraries. Feature coming soon.');
-        return;
-      }
-      
-      if (this.options.onImport) {
-        this.options.onImport(content, this.fileType);
-      }
-      
-      this.hide();
-      this.reset();
-      
-    } catch (error) {
-      console.error('Import error:', error);
-      alert('Error importing file: ' + error.message);
-    }
-  }
-
-  parseCSV(csvContent) {
-    const lines = csvContent.split('\n');
-    const result = [];
-    
-    lines.forEach(line => {
-      if (line.trim()) {
-        const cells = line.split(',').map(cell => cell.trim().replace(/^["']|["']$/g, ''));
-        result.push(cells);
-      }
-    });
-    
-    return result;
-  }
-
-  readAsText(file) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = (e) => resolve(e.target.result);
-      reader.onerror = () => reject(new Error('Failed to read file'));
-      reader.readAsText(file);
-    });
-  }
-
-  reset() {
-    this.selectedFile = null;
-    this.fileType = null;
-    this.typeSelect.value = '';
-    this.fileInput.value = '';
-    this.fileInput.disabled = true;
-    this.fileInfo.style.display = 'none';
-    this.updateImportButton();
-  }
-
-  setupClickOutside() {
-    if (this.clickOutsideHandler) {
-      document.removeEventListener('click', this.clickOutsideHandler);
-    }
-    
-    this.clickOutsideHandler = (e) => {
-      if (!this.popup.contains(e.target)) {
-        this.hide();
-      }
-    };
-    
-    setTimeout(() => {
-      document.addEventListener('click', this.clickOutsideHandler);
-    }, 100);
-  }
-
-  removeClickOutside() {
-    if (this.clickOutsideHandler) {
-      document.removeEventListener('click', this.clickOutsideHandler);
-      this.clickOutsideHandler = null;
-    }
-  }
-
-  show(anchor) {
-    if (!anchor) return;
-    
-    // Calculate and set popup position
-    const position = calculatePopupPosition(anchor, this.popup, {
-      offsetY: 5,
-      offsetX: 0
-    });
-    setPopupPosition(this.popup, position);
-    
-    this.popup.classList.add('visible');
-    this.isVisible = true;
-    
-    this.setupClickOutside();
-  }
-
-  hide() {
-    this.popup.classList.remove('visible');
-    this.isVisible = false;
-    this.removeClickOutside();
-  }
-
-  destroy() {
-    this.removeClickOutside();
-    
-    if (this.popup && this.popup.parentNode) {
-      this.popup.parentNode.removeChild(this.popup);
-    }
-    
-    this.popup = null;
-    this.isVisible = false;
-  }
-}
-
-export default ImportPopup; 

package/lib/ui/link-popup.js

@@ -1,191 +0,0 @@
-/**
- * Link Popup Component - Simple link popup
- */
-import { appendPopup, calculatePopupPosition, setPopupPosition } from '../utils/popup-helper.js';
-
-class LinkPopup {
-  constructor(options = {}) {
-    this.options = {
-      onLinkSelect: null,
-      editor: null,
-      ...options
-    };
-    
-    this.popup = null;
-    this.isVisible = false;
-    this.urlInput = null;
-    this.textInput = null;
-    
-    this.createPopup();
-  }
-
-  createPopup() {
-    this.popup = document.createElement('div');
-    this.popup.className = 'link-popup';
-    
-    const content = document.createElement('div');
-    content.className = 'link-popup-content';
-    
-    // title
-    const linkTitle = document.createElement('h2');
-    linkTitle.textContent = 'Upload link';
-    linkTitle.className = 'yjd-input-title';
-    //text label 1
-    const inputgroup1 = document.createElement('div');
-    inputgroup1.className = 'yjd-input-group';
-    const textLabel = document.createElement('p');
-    textLabel.textContent = 'Your URL';
-    textLabel.className = 'yjd-input-label';
-
-    this.urlInput = document.createElement('input');
-    this.urlInput.type = 'url';
-    this.urlInput.className = 'yjd-input';
-    this.urlInput.placeholder = 'Please enter your URL';
-    inputgroup1.appendChild(textLabel);
-    inputgroup1.appendChild(this.urlInput);
-    
-    // Text label 2
-    const inputgroup2 = document.createElement('div');
-    inputgroup2.className = 'yjd-input-group';
-    const urlLabel = document.createElement('p');
-    urlLabel.textContent = 'Your display text';
-    urlLabel.className = 'yjd-input-label';
-    
-    this.textInput = document.createElement('input');
-    this.textInput.type = 'text';
-    this.textInput.className = 'yjd-input';
-    this.textInput.placeholder = 'Please enter display text';
-    inputgroup2.appendChild(urlLabel);
-    inputgroup2.appendChild(this.textInput);
-    
-    // Buttons
-    const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'yjd-button-container';
-    
-    const okButton = document.createElement('button');
-    okButton.type = 'button';
-    okButton.className = 'yjd-button-confirm';
-    okButton.textContent = 'Add link';
-    okButton.onclick = () => {
-      this.handleOk();
-      // Maintain editor focus after action
-      if (this.options.editor) {
-        setTimeout(() => this.options.editor.focus(), 0);
-      }
-    };
-    
-    const cancelButton = document.createElement('button');
-    cancelButton.type = 'button';
-    cancelButton.className = 'yjd-button-cancel';
-    cancelButton.textContent = 'Cancel';
-    cancelButton.onclick = () => {
-      this.hide();
-      // Maintain editor focus after popup close
-      if (this.options.editor) {
-        setTimeout(() => this.options.editor.focus(), 0);
-      }
-    };
-    
-    // Enter key to submit
-    this.urlInput.onkeydown = (e) => {
-      if (e.key === 'Enter') this.handleOk();
-      if (e.key === 'Escape') this.hide();
-    };
-    
-    this.textInput.onkeydown = (e) => {
-      if (e.key === 'Enter') this.handleOk();
-      if (e.key === 'Escape') this.hide();
-    };
-    
-    buttonContainer.appendChild(cancelButton);
-    buttonContainer.appendChild(okButton);
-    
-    content.appendChild(linkTitle);
-    content.appendChild(inputgroup1);
-    content.appendChild(inputgroup2);
-    content.appendChild(buttonContainer);
-    
-    this.popup.appendChild(content);
-    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);
-    }
-  }
-
-  handleOk() {
-    const url = this.urlInput.value.trim();
-    // Kiểm tra rỗng
-    if (!url) {
-      alert('Please enter a URL');
-      this.urlInput.focus();
-      return;
-    }
-    // Kiểm tra định dạng URL
-    try {
-      new URL(url); // Nếu sai format, sẽ throw
-    } catch (e) {
-      alert('Please enter a valid URL');
-      this.urlInput.focus();
-      return;
-    }
-    
-    const text = this.textInput.value.trim();
-    
-    if (this.options.onLinkSelect) {
-      this.options.onLinkSelect({ url, text });
-    }
-    
-    this.hide();
-  }
-
-  show(anchor, existingLink = null, selectedText = '') {
-    if (!anchor) return;
-    
-    // Populate fields
-    this.urlInput.value = existingLink ? existingLink.url : '';
-    // Use selected text if available, otherwise use existing link text or empty
-    this.textInput.value = selectedText || (existingLink ? existingLink.text : '');
-    
-    // Calculate and set popup position
-    const position = calculatePopupPosition(anchor, this.popup, {
-      offsetY: 5,
-      offsetX: 0
-    });
-    setPopupPosition(this.popup, position);
-    
-    // Show popup
-    this.popup.classList.add('visible');
-    this.isVisible = true;
-    
-    // Focus URL input
-    setTimeout(() => this.urlInput.focus(), 100);
-    
-    // Click outside to close
-    setTimeout(() => {
-      document.addEventListener('click', this.closeOnClickOutside);
-    }, 100);
-  }
-
-  hide() {
-    this.popup.classList.remove('visible');
-    this.isVisible = false;
-    document.removeEventListener('click', this.closeOnClickOutside);
-  }
-
-  closeOnClickOutside = (e) => {
-    if (!this.popup.contains(e.target)) {
-      this.hide();
-    }
-  }
-
-  destroy() {
-    document.removeEventListener('click', this.closeOnClickOutside);
-    if (this.popup && this.popup.parentNode) {
-      this.popup.parentNode.removeChild(this.popup);
-    }
-  }
-}
-
-export default LinkPopup;