From 757fdf1674b472268daf18fe1024a495451ae902 Mon Sep 17 00:00:00 2001
From: Alex <alex@piqueras.me>
Date: Fri, 11 Oct 2024 15:57:43 +0200
Subject: [PATCH] Move option from item-list to new component and implement
 dblclick to delete feature

---
 src/app.js                    | 15 ++--------
 src/components/custom-item.js | 54 +++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 src/components/custom-item.js

diff --git a/src/app.js b/src/app.js
index 605db4b..3642ee4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,6 +1,7 @@
 import './components/main-window.js';
 import './components/custom-button.js';
 import './components/item-list.js';
+import './components/custom-item.js';
 import './components/custom-modal.js';
 import './components/custom-text.js';
 
@@ -24,7 +25,7 @@ class AppBase extends HTMLElement {
 
   renderOptions() {
     const textList = this.store.getRecords();
-    return textList.map((item) => `<option value=${item.id}>${item.text}</option>`).join('\n');
+    return textList.map((item) => `<option is="custom-item" color="${this.properties.color}" value=${item.id}>${item.text}</option>`).join('\n');
   }
 
   render(action = 'INIT') {
@@ -69,18 +70,6 @@ class AppBase extends HTMLElement {
         color: #333333;
         opacity: 1;
       }
-      #list > option {
-        height: 40px;
-        align-content: center;
-        padding-left: 15px;
-        font-size: 18px;
-      }
-      #list > option:checked {
-        background: ${this.properties.color} linear-gradient(0deg, ${this.properties.color} 0%, ${this.properties.color} 100%);
-        box-shadow: 0 0 10px 100px ${this.properties.color} inset;
-        color: #fff;
-        outline: none;
-      }
       .button-bar {
         display: flex;
         column-gap: 35px
diff --git a/src/components/custom-item.js b/src/components/custom-item.js
new file mode 100644
index 0000000..885f172
--- /dev/null
+++ b/src/components/custom-item.js
@@ -0,0 +1,54 @@
+import Store from '../modules/store.js';
+
+class CustomItem extends HTMLOptionElement {
+  static observedAttributes = ['color'];
+
+  constructor() {
+    super();
+    this.publish = Store.publish;
+
+    this.checkedStyle = document.createElement("style");
+    this.appendChild(this.checkedStyle);
+  }
+  
+  connectedCallback() {
+    this.updateStyle();
+    this.addEventListener('dblclick', this.onDoubleClick.bind(this));
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('dblclick', this.onDoubleClick);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    
+    switch (name) {
+      case 'color':
+        this.checkedStyle.innerHTML = `
+          option:checked {
+            background: ${newValue} linear-gradient(0deg, ${newValue} 0%, ${newValue} 100%);
+            box-shadow: 0 0 10px 100px ${newValue} inset;
+            color: #fff;
+            outline: none;
+          }`;
+        break;
+      default:
+        console.error(`Unhandled attribute change: ${name}`);
+    }
+  }
+
+  updateStyle() {
+    this.style.height = '40px';
+    this.style.alignContent = 'center';
+    this.style.paddingLeft = '15px';
+    this.style.fontSize = '18px';
+  }
+
+  onDoubleClick() {
+    console.log('double click detected');
+    this.publish(Store.actions.REMOVE_LINE);
+  }
+}
+
+customElements.define('custom-item', CustomItem, { extends: 'option' });