From 4a29977bb1022190b17222679d80099bd53ee394 Mon Sep 17 00:00:00 2001 From: Niko Date: Sat, 19 Mar 2022 21:50:40 +0100 Subject: [PATCH] WIP: added overlay for editing settings via an input text (configurable) --- web/src/app/css/app.css | 3 + web/src/app/js/app.js | 15 +++- web/src/app/js/pages/settings.js | 16 +++++ web/src/app/js/templates/overlay/input.html | 68 +++++++++++++++++++ .../app/js/templates/settings/profile.html | 3 +- web/src/config/lang/en.php | 3 + web/src/config/lang/es.php | 3 + 7 files changed, 107 insertions(+), 4 deletions(-) create mode 100644 web/src/app/js/templates/overlay/input.html diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css index e2e8114..df9b4f2 100644 --- a/web/src/app/css/app.css +++ b/web/src/app/css/app.css @@ -228,6 +228,9 @@ main { .panel input.card-item { padding: .5em !important; } +.overlay #input-text { + margin-top: 3em; +} .button span { user-select: none; diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js index c5633d1..bedd5de 100644 --- a/web/src/app/js/app.js +++ b/web/src/app/js/app.js @@ -363,11 +363,11 @@ app.emoji = { app.overlay = { create: async function(template, data, options, cback) { options = options || {}; + const id = 'overlay-'+uuidv4(); + data['oid'] = id; await app.template.loadMany([template], function(tpl) { tpl = tpl[0]; - const id = 'overlay-'+uuidv4(); const div = document.createElement('div'); - data['oid'] = id; div.id = id; div.className = 'overlay height-mobile'; if (options.dark) @@ -378,14 +378,23 @@ app.overlay = { if (options.removable) div.setAttribute('onclick', `app.overlay.remove("${id}")`); document.body.appendChild(div); + const _script = div.querySelector('script'); + if (_script !== null) { + eval(_script.innerText); + _script.remove(); + } calcHeightMobile(); }); - return true; + return id; }, remove: function(id) { const elem = document.getElementById(id); if (elem !== undefined && elem !== null) elem.remove(); + if (window._onOverlayRemove !== undefined) { + window._onOverlayRemove(); + delete window._onOverlayRemove; + } }, hideAll: function() { document.querySelectorAll('.overlay') diff --git a/web/src/app/js/pages/settings.js b/web/src/app/js/pages/settings.js index 61e3618..a49ab3a 100644 --- a/web/src/app/js/pages/settings.js +++ b/web/src/app/js/pages/settings.js @@ -17,6 +17,7 @@ app.pages.settings = { !== undefined }, 10000, 50); page().data.profile = json; page().paint.profile(json); + app.template.loadMany(['overlay.input']); }); }, }, @@ -35,5 +36,20 @@ app.pages.settings = { }, }, actions: { + profile: { + changeName: { + show: function() { + app.overlay.create('overlay.input', { + type: 'text', + placeholder: s('form.name'), + value: page().data.profile.account.name, + action: 'page().actions.profile.changeName.save()', + }, { dark: true, removable: true }); + }, + save: function() { + console.log('save'); + }, + }, + }, }, } diff --git a/web/src/app/js/templates/overlay/input.html b/web/src/app/js/templates/overlay/input.html new file mode 100644 index 0000000..36f5f6d --- /dev/null +++ b/web/src/app/js/templates/overlay/input.html @@ -0,0 +1,68 @@ + + + diff --git a/web/src/app/js/templates/settings/profile.html b/web/src/app/js/templates/settings/profile.html index a398adb..b93198b 100644 --- a/web/src/app/js/templates/settings/profile.html +++ b/web/src/app/js/templates/settings/profile.html @@ -3,7 +3,8 @@
- {.account.name}