https://www.eventeny.com/js/Components/TrashButton.js?v=1790189618

1/*
2The Trash Button component is a custom HTML element that creates a button element with an x icon, which is used for deleting items. 
3The component also has an attribute called "confirm" that, when present, shows inline confirmation dialogue of "Are you sure?" with check and close buttons.
4Input a custom icon by using the "icon" attribute with the URL of the icon.
5
6@class TrashButton
7@extends HTMLElement
8
9@attribute {boolean} [confirm] - When present, shows inline confirmation dialogue of "Are you sure?" with check and close buttons.
10
11@example How to use confirm attribute
12<trash-button-element confirm id="delete-confirmation"></trash-button-element>
13document.querySelector('trash-button-element').addEventListener('delete', (e) => {
14  // Delete logic (e.g., removing the item from the DOM, database, etc.)
15  const itemToDelete = document.getElementById('item-id-to-delete');
16  if (itemToDelete) {
17    itemToDelete.remove(); // Remove the element from the DOM
18		document.getElementById('delete-confirmation').remove(); // Remove the trash button
19  }
20});
21
22@example When using custom modal
23<trash-button-element id="delete-confirm-btn"/>
24<modal-element id="update-picture-modal"/>
25$('.delete-confirm-btn').on('click', function(e){
26	e.preventDefault();
27	const updatePictureModal = document.querySelector('modal-element#update-picture-modal');
28	updatePictureModal.openModal();
29})
30
31@example How to use icon attribute
32<trash-button-element icon="uil uil-trash"></trash-button-element>
33*/
34
35class TrashButton extends HTMLElement {
36  constructor() {
37    super();
38    this.attachShadow({ mode: 'open' });
39
40    // CSS styles for confirm buttons
41    const confirmBtnStyles = document.createElement('link');
42    confirmBtnStyles.rel = 'stylesheet';
43    confirmBtnStyles.href = '/css/base-2018-11-17.css';
44
45    // CSS styles for material icons
46    const iconStyles = document.createElement('link');
47    iconStyles.rel = 'stylesheet';
48    iconStyles.href = '/css/material-icons.css';
49
50    const uniconsLink = document.createElement('link');
51    uniconsLink.rel = 'stylesheet';
52    uniconsLink.href = 'https://unicons.iconscout.com/release/v4.0.8/css/line.css';
53    this.shadowRoot.appendChild(uniconsLink);
54
55    this.shadowRoot.appendChild(confirmBtnStyles);
56    this.shadowRoot.appendChild(iconStyles);
57
58    // Create the initial delete button element
59    const button = this.createButton();
60    this.shadowRoot.appendChild(button);
61
62    const style = document.createElement('style');
63    style.textContent = `
64      button {
65        background: none;
66        border: none;
67        cursor: pointer;
68      }
69
70      .confirm-ui {
71        display: flex;
72        gap: 6px;
73        align-items: center;
74      }
75
76      .icon {
77        width: 16px;
78        height: 16px;
79      }
80    `;
81    this.shadowRoot.appendChild(style);
82
83    button.addEventListener('keydown', (e) => {
84      if (e.key === 'Enter' || e.key === ' ') {
85        e.preventDefault();
86        this.handleClick();
87      }
88    });
89  }
90
91  handleClick() {
92    if (this.hasAttribute('confirm')) {
93      // Trigger inline confirmation
94      this.triggerConfirmation();
95    } else {
96      // Direct delete
97      this.dispatchDeleteEvent();
98    }
99  }
100
101  triggerConfirmation() {
102    // Replace the button with inline confirmation logic
103    const container = this.shadowRoot.querySelector('button').parentNode;
104
105    const confirmUI = document.createElement('div');
106    confirmUI.classList.add('confirm-ui');
107
108    const confirmButton = document.createElement('button');
109    confirmButton.classList.add('btn', 'btn-small', 'btn-primary-23');
110    confirmButton.style.width = '38px';
111    confirmButton.style.height = '29.19px';
112    confirmButton.innerHTML = '<i class="material-icons">check</i>';
113    confirmButton.addEventListener('click', () => this.dispatchDeleteEvent());
114
115    const discardButton = document.createElement('button');
116    discardButton.classList.add('btn', 'btn-small', 'btn-secondary-23');
117    discardButton.style.width = '38px';
118    discardButton.style.height = '29.19px';
119    discardButton.innerHTML = '<i class="material-icons">close</i>';
120    discardButton.addEventListener('click', () => this.discardInlineConfirmation(confirmUI));
121
122    confirmUI.appendChild(document.createTextNode('Are you sure?'));
123    confirmUI.appendChild(confirmButton);
124    confirmUI.appendChild(discardButton);
125
126    container.replaceChild(confirmUI, this.shadowRoot.querySelector('button'));
127  }
128
129  discardInlineConfirmation(confirmUI) {
130    // Restore the original button
131    confirmUI.replaceWith(this.createButton());
132  }
133
134  dispatchDeleteEvent() {
135    this.dispatchEvent(new CustomEvent('delete', { bubbles: true, composed: true }));
136  }
137
138  // Recreate the original button
139  createButton() {
140    const button = document.createElement('button');
141    button.innerHTML = this.innerHTML;
142
143    // Create default icon <i class="uil uil-times">
144    const icon = document.createElement('i');
145    const iconClass = this.getAttribute('icon') || 'uil uil-times';
146    icon.style.color = '#FD5D6B';
147    icon.className = iconClass;
148
149    button.appendChild(icon);
150
151    button.addEventListener('click', () => this.handleClick());
152    return button;
153  }
154
155  setClickHandler(callback) {
156    this.handleClick = callback;
157  }
158
159  static get observedAttributes() {
160    return ['confirm', 'icon'];
161  }
162
163  attributeChangedCallback(name, oldValue, newValue) {
164    const button = this.shadowRoot.querySelector('button');
165    if (newValue !== null) {
166      button.setAttribute(name, '');
167    } else {
168      button.removeAttribute(name);
169    }
170  }
171}
172
173customElements.define('trash-button-element', TrashButton);