Added Emojis

biofects · Aug 31, 2024 · a0c2188 · a0c2188
1 parent f7b91ee
commit a0c2188
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/custom_components/simple_sticky_note/js/sticky_note_card.js b/custom_components/simple_sticky_note/js/sticky_note_card.js
@@ -53,6 +53,12 @@ class SimpleStickyNote extends HTMLElement {
       .edit-button, .delete-button {
         --mdc-icon-button-size: 40px;
       }
+      .emoji-picker {
+        position: absolute;
+        bottom: 48px;
+        right: 8px;
+        z-index: 1000;
+      }
     `;
     this.appendChild(style);
   }
@@ -97,9 +103,15 @@ class SimpleStickyNote extends HTMLElement {
     buttonContainer.style.display = 'flex';
     const saveButton = document.createElement('ha-icon-button');
     saveButton.innerHTML = '<ha-icon icon="mdi:check-circle" style="color: green;"></ha-icon>';
-    
+
     const cancelButton = document.createElement('ha-icon-button');
     cancelButton.innerHTML = '<ha-icon icon="mdi:close-circle" style="color: red;"></ha-icon>';
+
+    const emojiButton = document.createElement('ha-icon-button');
+    emojiButton.innerHTML = '<ha-icon icon="mdi:emoticon-happy-outline"></ha-icon>';
+    emojiButton.addEventListener('click', () => this.toggleEmojiPicker(textarea));
+
+    buttonContainer.appendChild(emojiButton);
     buttonContainer.appendChild(saveButton);
     buttonContainer.appendChild(cancelButton);
     this.querySelector('ha-card').appendChild(textarea);
@@ -109,6 +121,30 @@ class SimpleStickyNote extends HTMLElement {
     cancelButton.addEventListener('click', () => this.cancelEdit(oldContent));
   }
 
+  toggleEmojiPicker(textarea) {
+    if (this.emojiPicker) {
+      this.emojiPicker.remove();
+      this.emojiPicker = null;
+    } else {
+      this.emojiPicker = document.createElement('div');
+      this.emojiPicker.classList.add('emoji-picker');
+      this.emojiPicker.innerHTML = this.getEmojiList();
+      this.querySelector('ha-card').appendChild(this.emojiPicker);
+      this.emojiPicker.addEventListener('click', (e) => {
+        if (e.target.tagName === 'SPAN') {
+          textarea.value += e.target.textContent;
+          this.emojiPicker.remove();
+          this.emojiPicker = null;
+        }
+      });
+    }
+  }
+
+  getEmojiList() {
+    const emojis = ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹', '😣', '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯', '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕'];
+    return emojis.map(emoji => `<span style="cursor: pointer; font-size: 1.5em; padding: 5px;">${emoji}</span>`).join('');
+  }
+
   saveNote(newContent) {
     if (!this._hass) {
       console.error('Hass object is not available');
@@ -146,6 +182,7 @@ class SimpleStickyNote extends HTMLElement {
     const buttonContainer = this.querySelector('ha-card > div:last-child');
     if (textarea) textarea.remove();
     if (buttonContainer) buttonContainer.remove();
+    if (this.emojiPicker) this.emojiPicker.remove();
     this.content.style.display = 'block';
     this.querySelector('.button-container').style.display = 'flex';
   }

diff --git a/custom_components/simple_sticky_note/manifest.json b/custom_components/simple_sticky_note/manifest.json
@@ -8,5 +8,5 @@
   "iot_class": "local_push",
   "issue_tracker": "https://github.com/biofects/simple_sticky_note/issues",
   "requirements": [],
-  "version": "1.4.0"
+  "version": "1.5.0"
 }