Update tag list template to allow renaming.

* Add a form on each tag to handle rename action.
* Add JavaScript to handle action on the corresponding page inside the global index.js file.
* Add support for the 2 active themes : material / baggy

The form solution is cleaner than an Ajax one because it let the browser validate input data and make the POST easier without the need to handle JSON response.

1 files changed, 19 insertions, 0 deletions

diff --git a/app/Resources/static/themes/_global/index.js b/app/Resources/static/themes/_global/index.js
index ae598e56..bb3e95b6 100644
--- a/app/Resources/static/themes/_global/index.js
+++ b/app/Resources/static/themes/_global/index.js
@@ -70,4 +70,23 @@ $(document).ready(() => {
       retrievePercent(x.entryId, true);
     });
   }
+
+  document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {
+    const current = item;
+    current.wallabag_edit_mode = false;
+    current.onclick = (event) => {
+      const target = event.currentTarget;
+
+      if (target.wallabag_edit_mode === false) {
+        $(target.parentNode.querySelector('[data-handle=tag-link]')).addClass('hidden');
+        $(target.parentNode.querySelector('[data-handle=tag-rename-form]')).removeClass('hidden');
+        target.parentNode.querySelector('[data-handle=tag-rename-form] input').focus();
+        target.querySelector('.material-icons').innerHTML = 'done';
+
+        target.wallabag_edit_mode = true;
+      } else {
+        target.parentNode.querySelector('[data-handle=tag-rename-form]').submit();
+      }
+    };
+  });
 });