mirror of
https://github.com/wallabag/wallabag.git
synced 2025-03-13 22:52:39 +00:00
Extract Tag controller
This commit is contained in:
parent
a61fe358a1
commit
80a5580be1
4 changed files with 28 additions and 27 deletions
12
assets/controllers/tag_controller.js
Normal file
12
assets/controllers/tag_controller.js
Normal 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();
|
||||
}
|
||||
}
|
|
@ -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 = {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 }} ({{ 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>
|
||||
|
|
Loading…
Reference in a new issue