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 Sticky Nav controller

Browse source
This commit is contained in:
Yassine Guedidi 2025-03-08 14:56:53 +01:00
parent 7c7c2cd398
commit ead400e6c2
4 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/controllers/materialize/fab_controller.js
View file

@ -22,6 +22,10 @@ export default class extends Controller {
}
}
click() {
this.dispatch('click');
}
disconnect() {
this.instance.destroy();
}

7
assets/controllers/sticky_nav_controller.js Normal file
View file

@ -0,0 +1,7 @@
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
toggle() {
this.element.classList.toggle('entry-nav-top--sticky');
}
}

9
assets/index.js
View file

@ -129,16 +129,7 @@ import './scss/index.scss';
addDarkThemeListeners();
}());
const stickyNav = () => {
const nav = $('.js-entry-nav-top');
$('[data-toggle="actions"]').click(() => {
nav.toggleClass('entry-nav-top--sticky');
});
};
$(document).ready(() => {
stickyNav();
$('#nav-btn-add-tag').on('click', () => {
$('.nav-panel-add-tag').toggle();
$('.nav-panel-menu').addClass('hidden');

4
templates/Entry/entry.html.twig
View file

@ -10,7 +10,7 @@
<div class="progress">
<div class="determinate" data-controller="scroll-indicator" data-action="scroll@window->scroll-indicator#updateWidth"></div>
</div>
<nav class="hide-on-large-only js-entry-nav-top">
<nav class="hide-on-large-only" data-controller="sticky-nav" data-action="materialize--fab:click@window->sticky-nav#toggle">
<div class="nav-panel-item cyan darken-1">
<ul>
<li>
@ -334,7 +334,7 @@
{{ entry.content|raw }}
</article>
<div class="fixed-action-btn horizontal click-to-toggle hide-on-large-only" data-controller="materialize--fab" data-action="scroll@window->materialize--fab#autoDisplay">
<div class="fixed-action-btn horizontal click-to-toggle hide-on-large-only" data-controller="materialize--fab" data-action="scroll@window->materialize--fab#autoDisplay click->materialize--fab#click">
<a class="btn-floating btn-large" data-toggle="actions">
<i class="material-icons">menu</i>
</a>