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 Materialize FAB controller

Browse source
This commit is contained in:
Yassine Guedidi 2025-03-02 12:32:11 +01:00
parent 117b26faba
commit 5f2dd66948
3 changed files with 29 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/controllers/materialize/fab_controller.js Normal file
View file

@ -0,0 +1,28 @@
import { Controller } from '@hotwired/stimulus';
import M from '@materializecss/materialize';
export default class extends Controller {
static values = {
edge: { type: String, default: 'left' },
};
connect() {
this.instance = M.FloatingActionButton.init(this.element);
}
autoDisplay() {
const scrolled = (window.innerHeight + window.scrollY) >= document.body.offsetHeight;
if (scrolled) {
this.toggleScroll = true;
this.instance.open();
} else if (this.toggleScroll === true) {
this.toggleScroll = false;
this.instance.close();
}
}
disconnect() {
this.instance.destroy();
}
}

12
assets/index.js
View file

@ -255,25 +255,13 @@ const articleScroll = () => {
const s = $(window).scrollTop();
const d = $(document).height();
const c = $(window).height();
const articleElBottom = articleEl.offset().top + articleEl.height();
const scrollPercent = (s / (d - c)) * 100;
$('.progress .determinate').css('width', `${scrollPercent}%`);
const fixedActionBtn = $('.js-fixed-action-btn');
const toggleScrollDataName = 'toggle-auto';
if ((s + c) > articleElBottom) {
fixedActionBtn.data(toggleScrollDataName, true);
fixedActionBtn.floatingActionButton('open');
} else if (fixedActionBtn.data(toggleScrollDataName) === true) {
fixedActionBtn.data(toggleScrollDataName, false);
fixedActionBtn.floatingActionButton('close');
}
});
}
};
$(document).ready(() => {
$('.fixed-action-btn').floatingActionButton();
stickyNav();
articleScroll();
initPreviewText();

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

@ -326,7 +326,7 @@
{{ entry.content|raw }}
</article>
<div class="fixed-action-btn js-fixed-action-btn horizontal click-to-toggle hide-on-large-only">
<div class="fixed-action-btn horizontal click-to-toggle hide-on-large-only" data-controller="materialize--fab" data-action="scroll@window->materialize--fab#autoDisplay">
<a class="btn-floating btn-large" data-toggle="actions">
<i class="material-icons">menu</i>
</a>