mirrors/wallabag
1
0
Fork 0
mirror of https://github.com/wallabag/wallabag.git synced 2025-03-13 22:52:39 +00:00
Code Issues Projects Releases Wiki Activity

Extract Topbar controller

Browse source
This commit is contained in:
Yassine Guedidi 2025-03-08 14:43:33 +01:00
parent 9d16516289
commit 7c7c2cd398
5 changed files with 41 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
assets/controllers/topbar_controller.js Normal file
View file

@ -0,0 +1,31 @@
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
static targets = ['addUrl', 'addUrlInput', 'search', 'searchInput', 'actions'];
showAddUrl() {
this.actionsTarget.style.display = 'none';
this.addUrlTarget.style.display = 'flex';
this.searchTarget.style.display = 'none';
this.addUrlInputTarget.focus();
}
submittingUrl(e) {
e.currentTarget.disabled = true;
this.addUrlInputTarget.readOnly = true;
this.addUrlInputTarget.blur();
}
showSearch() {
this.actionsTarget.style.display = 'none';
this.addUrlTarget.style.display = 'none';
this.searchTarget.style.display = 'flex';
this.searchInputTarget.focus();
}
showActions() {
this.actionsTarget.style.display = 'flex';
this.addUrlTarget.style.display = 'none';
this.searchTarget.style.display = 'none';
}
}

28
assets/index.js
View file

@ -139,38 +139,10 @@ const stickyNav = () => {
$(document).ready(() => {
stickyNav();
const toggleNav = (toShow, toFocus) => {
$('.nav-panel-actions').hide();
$(toShow).show();
$(toFocus).focus();
};
$('#nav-btn-add-tag').on('click', () => {
$('.nav-panel-add-tag').toggle();
$('.nav-panel-menu').addClass('hidden');
$('#tag_label').focus();
return false;
});
$('#nav-btn-add').on('click', () => {
toggleNav('.nav-panel-add', '#entry_url');
return false;
});
const materialAddForm = $('.nav-panel-add');
materialAddForm.on('submit', () => {
materialAddForm.addClass('disabled');
$('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur');
});
$('#nav-btn-search').on('click', () => {
toggleNav('.nav-panel-search', '#search_entry_term');
return false;
});
$('.close').on('click', (e) => {
$(e.target).parent('.nav-panel-item').hide();
$('.nav-panel-actions').show();
return false;
});
});

6
templates/Entry/new_form.html.twig
View file

@ -1,4 +1,4 @@
<form class="input-field nav-panel-item nav-panel-add" style="display: none" name="entry" method="post" action="{{ path('new_entry') }}">
<form class="input-field nav-panel-item nav-panel-add" style="display: none" name="entry" method="post" action="{{ path('new_entry') }}" data-topbar-target="addUrl" data-action="topbar#submittingUrl">
{% if form_errors(form) %}
<span class="black-text">{{ form_errors(form) }}</span>
{% endif %}
@ -8,8 +8,8 @@
<span class="black-text">{{ form_errors(form.url) }}</span>
{% endif %}
{{ form_widget(form.url, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder'}}) }}
<i class="material-icons close" aria-label="clear" role="button"></i>
{{ form_widget(form.url, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder', 'data-topbar-target': 'addUrlInput'}}) }}
<i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions"></i>
{{ form_rest(form) }}
</form>

6
templates/Entry/search_form.html.twig
View file

@ -1,4 +1,4 @@
<form class="input-field nav-panel-item nav-panel-search" style="display: none" name="search" method="GET" action="{{ path('search') }}">
<form class="input-field nav-panel-item nav-panel-search" style="display: none" name="search" method="GET" action="{{ path('search') }}" data-topbar-target="search">
{% if form_errors(form) %}
<span class="black-text">{{ form_errors(form) }}</span>
{% endif %}
@ -10,8 +10,8 @@
<input type="hidden" name="currentRoute" value="{{ currentRoute }}" />
{{ form_widget(form.term, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.search.placeholder'}}) }}
<i class="material-icons close" aria-label="clear" role="button"></i>
{{ form_widget(form.term, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.search.placeholder', 'data-topbar-target': 'searchInput'}}) }}
<i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions"></i>
{{ form_rest(form) }}
</form>

8
templates/layout.html.twig
View file

@ -77,8 +77,8 @@
<a class="waves-effect" href="{{ path('tag') }}">{{ 'menu.left.tags'|trans }} <span class="items-number grey-text">{{ count_tags() }}</span></a>
</li>
</ul>
<div class="nav-panels">
<div class="nav-panel-actions nav-panel-item">
<div class="nav-panels" data-controller="topbar">
<div class="nav-panel-actions nav-panel-item" data-topbar-target="actions">
<div class="nav-panel-top">
<a href="#" data-target="slide-out" class="nav-panel-menu sidenav-trigger"><i class="material-icons">menu</i></a>
<h1 class="left action">
@ -88,12 +88,12 @@
</div>
<ul class="input-field nav-panel-buttom">
<li class="bold toggle-add-url-container">
<a class="waves-effect toggle-add-url" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add">
<a class="waves-effect toggle-add-url" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add" data-action="topbar#showAddUrl:prevent:stop">
<i class="material-icons">add</i>
</a>
</li>
<li>
<a class="waves-effect" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search">
<a class="waves-effect" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search" data-action="topbar#showSearch:prevent:stop">
<i class="material-icons">search</i>
</a>
</li>