diff --git a/assets/js/hooks.js b/assets/js/hooks.js index 637618d..a983f72 100644 --- a/assets/js/hooks.js +++ b/assets/js/hooks.js @@ -1,18 +1,51 @@ -const Hooks = {}; +const Hooks = { + EnterToNewline: { + mounted() { + this.el.addEventListener('keydown', (e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); -Hooks.EnterToNewline = { - mounted() { - this.el.addEventListener('keydown', (e) => { - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); + const cursorPos = this.el.selectionStart; + const value = this.el.value; - const cursorPos = this.el.selectionStart; - const value = this.el.value; + this.el.value = value.slice(0, cursorPos) + '\\n' + value.slice(cursorPos); + this.el.selectionStart = this.el.selectionEnd = cursorPos + 2; + } + }); + }, + }, - this.el.value = value.slice(0, cursorPos) + '\\n' + value.slice(cursorPos); - this.el.selectionStart = this.el.selectionEnd = cursorPos + 2; + PersistData: { + mounted() { + const form = this.el; + const key = 'label'; + const stored = JSON.parse(localStorage.getItem(key) || '{}'); + + let updated = false; + + for (let [name, value] of Object.entries(stored)) { + const input = form.querySelector(`[name="${name}"]`); + + if (input) { + input.value = value; + updated = true; + } } - }); + + if (updated) { + this.pushEvent('update_label', stored); + } + + form.addEventListener('input', () => { + const data = {}; + + for (let el of form.elements) { + if (el.name) data[el.name] = el.value; + } + + localStorage.setItem(key, JSON.stringify(data)); + }); + }, }, }; diff --git a/lib/labelmaker_web/live/home.ex b/lib/labelmaker_web/live/home.ex index 2983be0..b549956 100644 --- a/lib/labelmaker_web/live/home.ex +++ b/lib/labelmaker_web/live/home.ex @@ -74,7 +74,7 @@ defmodule LabelmakerWeb.Home do

- Note: not all fonts are available for preview. + Note: not all fonts and colors are available for preview.

-
+