Extract Tag controller

This commit is contained in:
Yassine Guedidi 2025-03-08 03:04:16 +01:00
parent a61fe358a1
commit 80a5580be1
4 changed files with 28 additions and 27 deletions

View file

@ -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();
}
}

View file

@ -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 = {

View file

@ -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;
}

View file

@ -17,18 +17,19 @@
</li>
{% endif %}
{% for tag in tags %}
<li title="{{ tag.label }} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}" class="chip">
<a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link" data-handle="tag-link">
<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-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_widget(renameForms[tag.id].label, {'attr': {'value': tag.label}}) }}
<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, '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>