Special Elements (อิลิเมนต์พิเศษ)

เอกสารสำหรับ form elements พิเศษ: ColorElementFactory, RangeElementFactory, TagsElementFactory, MaskElementFactory และ TextareaElementFactory

📋 สารบัญ

1. ภาพรวม
2. ColorElementFactory
3. RangeElementFactory
4. TagsElementFactory
5. MaskElementFactory
6. TextareaElementFactory
7. แนวทางปฏิบัติที่ดี

ภาพรวม

Special elements มอบ UI ที่ปรับปรุงสำหรับ input types เฉพาะที่ต้องการมากกว่าการจัดการ text หรือ number พื้นฐาน

ColorElementFactory

ColorElementFactory สร้าง custom color picker พร้อม predefined palette และ hex input

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

<input type="color"
       data-element="color"
       name="theme_color"
       value="#007bff">

JavaScript API

const instance = ElementManager.getInstance(colorInput);

// รับสีปัจจุบัน
const color = instance.getColor();  // '#007bff'

// ตั้งค่าสี
instance.setColor('#ff5722');

// เปิด/ปิด picker
instance.open();
instance.close();
instance.toggle();

ฟีเจอร์

• Color Palette: คลิกสีที่กำหนดไว้
• Hex Input: พิมพ์ค่า hex กำหนดเอง
• Preview: แสดงตัวอย่างสีในปุ่ม
• Copy/Paste: Ctrl+C คัดลอก, Ctrl+V วาง

RangeElementFactory

RangeElementFactory สร้าง range sliders พร้อม UX ที่ดีกว่า native range inputs รองรับ single และ dual range modes

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

<!-- Single range slider -->
<input type="range"
       data-element="range"
       min="0"
       max="100"
       value="50"
       name="volume">

<!-- Dual range slider (min-max) -->
<input type="range"
       data-element="range"
       min="0"
       max="1000"
       data-value="200-800"
       data-dual="true"
       name="price_range">

HTML Attributes

JavaScript API

const instance = ElementManager.getInstance(rangeInput);

// รับค่า
const value = instance.getValue();
// Single: 75
// Dual: {min: 2000, max: 8000}

// ตั้งค่า
instance.setValue(80);                       // Single
instance.setValue({min: 1000, max: 5000});   // Dual

// อัพเดท constraints
instance.setMin(10);
instance.setMax(200);

TagsElementFactory

TagsElementFactory แปลง text input เป็น tags/chips input พร้อม visual tags, keyboard navigation และ optional autocomplete

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

<!-- Simple tags input -->
<input type="text"
       data-element="tags"
       name="keywords"
       placeholder="เพิ่ม tags...">

<!-- Tags พร้อม autocomplete -->
<input type="text"
       data-element="tags"
       data-source="/api/tags"
       name="categories">

HTML Attributes

Keyboard Interaction

JavaScript API

const instance = ElementManager.getInstance(tagsInput);

// รับ tags ทั้งหมด
const tags = instance.getTags();
// [{key: '1', value: 'JavaScript'}, {key: '2', value: 'Python'}]

// เพิ่ม tag
instance.addTag('3', 'React');

// ลบ tag
instance.removeTag('2');

// ล้างทั้งหมด
instance.clear();

MaskElementFactory

MaskElementFactory ใช้ input masks สำหรับข้อมูลที่มีโครงสร้าง เช่น หมายเลขโทรศัพท์ วันที่ หมายเลขบัตร ฯลฯ

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

<!-- หมายเลขโทรศัพท์ไทย -->
<input type="tel"
       data-element="tel"
       name="mobile">

<!-- บัตรเครดิต -->
<input type="text"
       data-element="mask"
       data-mask="#### #### #### ####"
       name="card">

<!-- วันที่ -->
<input type="text"
       data-element="mask"
       data-mask="##/##/####"
       name="date">

Mask Pattern Characters

Common Patterns

TextareaElementFactory

TextareaElementFactory ปรับปรุง textarea ด้วยฟังก์ชัน auto-resize

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

<textarea data-element="textarea"
          name="description"
          rows="3"
          placeholder="กรอกคำอธิบาย..."></textarea>

HTML Attributes

แนวทางปฏิบัติที่ดี

1. ✅ ใช้ Element ที่เหมาะกับประเภทข้อมูล

<!-- ✅ สี -->
<input data-element="color" name="theme">

<!-- ✅ ช่วงราคา -->
<input data-element="range" data-dual="true" name="budget">

<!-- ✅ หลายหมวดหมู่ -->
<input data-element="tags" name="categories">

<!-- ✅ Input มีโครงสร้าง -->
<input data-element="mask" data-mask="##/##/####" name="date">

2. ✅ กำหนดขอบเขตที่สมเหตุสมผล

<!-- ✅ ดี: จำกัด tags -->
<input data-element="tags" data-max-tags="5" name="keywords">

<!-- ✅ ดี: จำกัด textarea -->
<textarea data-element="textarea" maxlength="1000" data-max-rows="15"></textarea>

3. ✅ ใช้ tel Type สำหรับหมายเลขโทรศัพท์

<!-- ✅ ดี: Keyboard มือถือแสดงตัวเลข -->
<input type="tel"
       data-element="tel"
       name="phone">

4. ✅ ใช้ Dual Range สำหรับ Filters

<!-- ✅ ดี: Price filter พร้อม min-max -->
<input data-element="range"
       data-dual="true"
       min="0"
       max="10000"
       step="100"
       data-format="฿{value}"
       name="price">

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

• Form Elements ภาพรวม
• ElementFactory - Base class
• Text Elements - Text inputs
• Number Elements - Number inputs
• FormManager - Form-level validation