ElementManager

ภาพรวม

ElementManager คือระบบจัดการ custom elements ใน Now.js Framework ใช้สำหรับ register, create และ enhance form elements

ใช้เมื่อ:

• ต้องการสร้าง custom form elements
• ต้องการ enhance existing elements
• ต้องการ manage element lifecycle
• ต้องการ auto-enhance via attributes

ทำไมต้องใช้:

• ✅ Register custom element types
• ✅ Auto-enhance via data-element
• ✅ Instance management
• ✅ Container-based cleanup
• ✅ Weak reference tracking

การใช้งานพื้นฐาน

Register Element Type

ElementManager.registerElement('currency', {
  enhance(element, config) {
    // Transform into currency input
    element.addEventListener('input', (e) => {
      e.target.value = formatCurrency(e.target.value);
    });
    return element;
  },
  destroy(instance) {
    // Cleanup
  }
});

HTML Auto-Enhance

<!-- Auto-enhanced by ElementManager -->
<input type="text" data-element="currency" name="price">
<input type="text" data-element="phone" name="phone">
<input type="text" data-element="date" name="birthday">

JavaScript API

// Create element programmatically
const element = ElementManager.create('currency', {
  name: 'amount',
  value: 1000
});

// Enhance existing element
const input = document.querySelector('#price');
ElementManager.enhance(input, { type: 'currency' });

API อ้างอิง

ElementManager.registerElement(type, implementation)

ลงทะเบียน element type

ElementManager.registerElement('rating', {
  enhance(element, config) {
    // Add star rating UI
    return element;
  },
  destroy(instance) {
    // Cleanup
  }
});

ElementManager.create(type, config)

สร้าง element ใหม่

Returns: HTMLElement

const dateInput = ElementManager.create('date', {
  name: 'startDate',
  min: '2024-01-01'
});

ElementManager.enhance(element, config)

Enhance existing element

Returns: Object - Instance

const instance = ElementManager.enhance(input, {
  type: 'tags'
});

ElementManager.getInstance(id)

รับ instance ตาม ID

Returns: Object|undefined

ElementManager.getInstanceByElement(element)

รับ instance จาก element

Returns: Object|undefined

ElementManager.scan(container)

Scan และ enhance elements ใน container

// After loading new content
ElementManager.scan(document.getElementById('form-container'));

ElementManager.destroy(id)

ทำลาย instance

ElementManager.destroyContainer(container)

ทำลายทุก instance ใน container

// Before removing container
ElementManager.destroyContainer(modal);
modal.remove();

ElementManager.hasElement(type)

ตรวจสอบว่า type ลงทะเบียนแล้วหรือไม่

Returns: boolean

Built-in Element Types

Now.js มี element types ที่ลงทะเบียนล่วงหน้า:

ตัวอย่างการใช้งานจริง

Custom Element Registration

// Register phone number element
ElementManager.registerElement('phone', {
  enhance(element, config) {
    element.type = 'tel';
    element.placeholder = '(___) ___-____';

    element.addEventListener('input', (e) => {
      let value = e.target.value.replace(/\D/g, '');
      if (value.length > 0) {
        value = '(' + value;
      }
      if (value.length > 4) {
        value = value.slice(0, 4) + ') ' + value.slice(4);
      }
      if (value.length > 10) {
        value = value.slice(0, 10) + '-' + value.slice(10, 14);
      }
      e.target.value = value;
    });

    return element;
  },

  destroy(instance) {
    // Remove listeners if needed
  }
});

Form with Auto-Enhanced Elements

<form id="contact-form">
  <input data-element="text" name="name" placeholder="Name">
  <input data-element="phone" name="phone" placeholder="Phone">
  <input data-element="email" name="email" placeholder="Email">
  <input data-element="date" name="date" placeholder="Preferred Date">
  <button type="submit">Submit</button>
</form>

<script>
// Elements are auto-enhanced on page load
// Or manually scan:
ElementManager.scan(document.getElementById('contact-form'));
</script>

Dynamic Form Fields

function addField(type, name) {
  const element = ElementManager.create(type, {
    name: name,
    id: `field-${name}`
  });

  document.getElementById('dynamic-fields').appendChild(element);
}

// Usage
addField('date', 'startDate');
addField('currency', 'budget');

ข้อควรระวัง

⚠️ 1. Register ก่อนใช้

// ❌ ใช้ type ที่ยังไม่ register
ElementManager.create('custom-type', {});

// ✅ Register ก่อน
ElementManager.registerElement('custom-type', {...});
ElementManager.create('custom-type', {});

⚠️ 2. Cleanup ก่อนลบ

// ❌ ลบ element โดยตรง
container.remove();

// ✅ Destroy ก่อน
ElementManager.destroyContainer(container);
container.remove();

เอกสารที่เกี่ยวข้อง

• FormManager - Form handling
• ComponentManager - Components