diff --git a/custom_components/simple_sticky_note/js/sticky_note_card.js b/custom_components/simple_sticky_note/js/sticky_note_card.js index 259c948..9bdfd1c 100644 --- 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 = ''; - + const cancelButton = document.createElement('ha-icon-button'); cancelButton.innerHTML = ''; + + const emojiButton = document.createElement('ha-icon-button'); + emojiButton.innerHTML = ''; + 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 => `${emoji}`).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 index 083fe2a..474978b 100644 --- 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" }