Extract Tag controller

assets/controllers/tag_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['link', 'edit', 'form', 'input'];
+
+  showForm() {
+    this.formTarget.classList.remove('hidden');
+    this.editTarget.classList.add('hidden');
+    this.linkTarget.classList.add('hidden');
+    this.inputTarget.focus();
+  }
+}

assets/index.js

@@ -24,27 +24,6 @@ import './js/shortcuts/entry';
 /* Theme style */
 import './scss/index.scss';
 
-$(document).ready(() => {
-  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();
-      }
-    };
-  });
-});
-
 (function darkTheme() {
   const rootEl = document.querySelector('html');
   const themeDom = {

assets/scss/_cards.scss

@@ -186,6 +186,14 @@ a.original:not(.waves-effect) {
   color: #fff;
 }
 
+.card-tag-labels button {
+  background: transparent;
+  border: none;
+  font-weight: normal;
+  color: #fff;
+  cursor: pointer;
+}
+
 .card-tag-link {
   width: calc(100% - 24px);
   line-height: 1.3;
@@ -196,6 +204,7 @@ a.original:not(.waves-effect) {
 
 .card-tag-form {
   display: flex;
+  align-items: center;
   min-width: 100px;
   flex-grow: 1;
 }

templates/Tag/tags.html.twig

@@ -17,18 +17,19 @@
                 </li>
             {% endif %}
             {% for tag in tags %}
-                <li title="{{ tag.label }} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}" class="chip">
+                <li title="{{ tag.label }} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}" class="chip" data-controller="tag">
-                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link" data-handle="tag-link">
+                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link" data-tag-target="link">
                         {{ tag.label }}&nbsp;({{ tag.nbEntries }})
                     </a>
                     {% if renameForms is defined and renameForms[tag.id] is defined %}
-                    <form class="card-tag-form hidden" data-handle="tag-rename-form" action="{{ path('tag_rename', {'slug': tag.slug, redirect: current_path}) }}" method="POST">
+                    <form class="card-tag-form hidden" data-tag-target="form" action="{{ path('tag_rename', {'slug': tag.slug, redirect: current_path}) }}" method="POST">
-                        {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label}}) }}
+                        {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label, 'data-tag-target': 'input'}}) }}
                         {{ form_rest(renameForms[tag.id]) }}
+                        <button type="submit"><i class="material-icons">done</i></button>
                     </form>
-                    <a class="card-tag-icon card-tag-rename" data-handler="tag-rename" href="javascript:void(0);">
+                    <button type="button" data-tag-target="edit" data-action="tag#showForm">
                         <i class="material-icons">mode_edit</i>
-                    </a>
+                    </button>
                     {% endif %}
                     <a id="delete-{{ tag.slug }}" href="{{ path('tag_delete', {'slug': tag.slug, redirect: current_path}) }}" class="card-tag-icon card-tag-delete" onclick="return confirm('{{ 'tag.confirm.delete'|trans({'%name%': tag.label})|escape('js') }}')">
                         <i class="material-icons">delete</i>