mirror of
https://github.com/wallabag/wallabag.git
synced 2025-09-05 18:41:02 +00:00
Extract Entries Navigation controller
This commit is contained in:
parent
b266d6ca2f
commit
e28e1bddb4
7 changed files with 89 additions and 85 deletions
58
assets/controllers/entries_navigation_controller.js
Normal file
58
assets/controllers/entries_navigation_controller.js
Normal file
|
@ -0,0 +1,58 @@
|
|||
import { Controller } from '@hotwired/stimulus';
|
||||
|
||||
export default class extends Controller {
|
||||
static targets = ['card', 'paginationWrapper'];
|
||||
|
||||
connect() {
|
||||
this.pagination = this.paginationWrapperTarget.querySelector('.pagination');
|
||||
|
||||
this.cardIndex = 0;
|
||||
this.lastCardIndex = this.cardTargets.length - 1;
|
||||
|
||||
/* If we come from next page */
|
||||
if (window.location.hash === '#prev') {
|
||||
this.cardIndex = this.lastCardIndex;
|
||||
}
|
||||
|
||||
this.currentCard = this.cardTargets[this.cardIndex];
|
||||
|
||||
this.currentCard.classList.add('z-depth-4');
|
||||
}
|
||||
|
||||
selectRightCard() {
|
||||
if (this.cardIndex >= 0 && this.cardIndex < this.lastCardIndex) {
|
||||
this.currentCard.classList.remove('z-depth-4');
|
||||
this.cardIndex += 1;
|
||||
this.currentCard = this.cardTargets[this.cardIndex];
|
||||
this.currentCard.classList.add('z-depth-4');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.pagination && this.pagination.querySelector('a[rel="next"]')) {
|
||||
window.location.href = this.pagination.querySelector('a[rel="next"]').href;
|
||||
}
|
||||
}
|
||||
|
||||
selectLeftCard() {
|
||||
if (this.cardIndex > 0 && this.cardIndex <= this.lastCardIndex) {
|
||||
this.currentCard.classList.remove('z-depth-4');
|
||||
this.cardIndex -= 1;
|
||||
this.currentCard = this.cardTargets[this.cardIndex];
|
||||
this.currentCard.classList.add('z-depth-4');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.pagination && this.pagination.querySelector('a[rel="prev"]')) {
|
||||
window.location.href = `${this.pagination.querySelector('a[rel="prev"]').href}#prev`;
|
||||
}
|
||||
}
|
||||
|
||||
selectCurrentCard() {
|
||||
const url = this.currentCard.querySelector('a.card-title').href;
|
||||
if (url) {
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -4,6 +4,8 @@ import Mousetrap from 'mousetrap';
|
|||
export default class extends Controller {
|
||||
static targets = ['openOriginal', 'markAsFavorite', 'markAsRead', 'deleteEntry', 'showAddUrl', 'showSearch', 'showActions'];
|
||||
|
||||
static outlets = ['entries-navigation'];
|
||||
|
||||
connect() {
|
||||
/* Go to */
|
||||
Mousetrap.bind('g u', () => {
|
||||
|
@ -111,5 +113,29 @@ export default class extends Controller {
|
|||
|
||||
return originalStopCallback(e, element);
|
||||
};
|
||||
|
||||
Mousetrap.bind('right', () => {
|
||||
if (!this.hasEntriesNavigationOutlet) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.entriesNavigationOutlet.selectRightCard();
|
||||
});
|
||||
|
||||
Mousetrap.bind('left', () => {
|
||||
if (!this.hasEntriesNavigationOutlet) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.entriesNavigationOutlet.selectLeftCard();
|
||||
});
|
||||
|
||||
Mousetrap.bind('enter', () => {
|
||||
if (!this.hasEntriesNavigationOutlet) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.entriesNavigationOutlet.selectCurrentCard();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue