diff --git a/assets/controllers/entries_navigation_controller.js b/assets/controllers/entries_navigation_controller.js new file mode 100644 index 000000000..52bbb1138 --- /dev/null +++ b/assets/controllers/entries_navigation_controller.js @@ -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; + } + } +} diff --git a/assets/controllers/shortcuts_controller.js b/assets/controllers/shortcuts_controller.js index eecefeb68..921395fca 100644 --- a/assets/controllers/shortcuts_controller.js +++ b/assets/controllers/shortcuts_controller.js @@ -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(); + }); } } diff --git a/assets/index.js b/assets/index.js index 04b76a01f..dbbd06fdc 100755 --- a/assets/index.js +++ b/assets/index.js @@ -15,8 +15,5 @@ import '@fontsource/eb-garamond'; import '@fontsource/montserrat'; import '@fontsource/oswald'; -/* Import shortcuts */ -import './js/shortcuts/main'; - /* Theme style */ import './scss/index.scss'; diff --git a/assets/js/shortcuts/main.js b/assets/js/shortcuts/main.js deleted file mode 100644 index 2cf96dba9..000000000 --- a/assets/js/shortcuts/main.js +++ /dev/null @@ -1,77 +0,0 @@ -import Mousetrap from 'mousetrap'; -import $ from 'jquery'; - -function toggleFocus(cardToToogleFocus) { - if (cardToToogleFocus) { - $(cardToToogleFocus).toggleClass('z-depth-4'); - } -} - -$(document).ready(() => { - const cards = $('#content').find('.card'); - const cardNumber = cards.length; - let cardIndex = 0; - /* If we come from next page */ - if (window.location.hash === '#prev') { - cardIndex = cardNumber - 1; - } - let card = cards[cardIndex]; - const pagination = $('.pagination'); - - /* Show nothing on quickstart */ - if ($('#content > div.quickstart').length > 0) { - return; - } - - /* Show nothing on login/register page */ - if ($('#username').length > 0 || $('#fos_user_registration_form_username').length > 0) { - return; - } - - /* Show nothing on login/register page */ - if ($('#username').length > 0 || $('#fos_user_registration_form_username').length > 0) { - return; - } - - /* Focus current card */ - toggleFocus(card); - - /* Select right card. If there's a next page, go to next page */ - Mousetrap.bind('right', () => { - if (cardIndex >= 0 && cardIndex < cardNumber - 1) { - toggleFocus(card); - cardIndex += 1; - card = cards[cardIndex]; - toggleFocus(card); - return; - } - if (pagination.length > 0 && pagination.find('li.next:not(.disabled)').length > 0 && cardIndex === cardNumber - 1) { - window.location.href = window.location.origin + $(pagination).find('li.next a').attr('href'); - } - }); - - /* Select previous card. If there's a previous page, go to next page */ - Mousetrap.bind('left', () => { - if (cardIndex > 0 && cardIndex < cardNumber) { - toggleFocus(card); - cardIndex -= 1; - card = cards[cardIndex]; - toggleFocus(card); - return; - } - if (pagination.length > 0 && $(pagination).find('li.prev:not(.disabled)').length > 0 && cardIndex === 0) { - window.location.href = `${window.location.origin + $(pagination).find('li.prev a').attr('href')}#prev`; - } - }); - - Mousetrap.bind('enter', () => { - if (typeof card !== 'object') { - return; - } - - const url = $(card).find('.card-title a').attr('href'); - if (typeof url === 'string' && url.length > 0) { - window.location.href = window.location.origin + url; - } - }); -}); diff --git a/package.json b/package.json index ff7916697..e2d0f9058 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "build:dev": "encore dev", "watch": "encore dev --watch", "build:prod": "encore production --progress", - "lint:js": "eslint assets/*.js assets/js/**/*.js assets/controllers/*.js", + "lint:js": "eslint assets/*.js assets/controllers/*.js", "lint:scss": "stylelint assets/scss/*.scss assets/scss/**/*.scss" } } diff --git a/templates/Entry/entries.html.twig b/templates/Entry/entries.html.twig index 783e4abb1..ac3c580a7 100644 --- a/templates/Entry/entries.html.twig +++ b/templates/Entry/entries.html.twig @@ -53,8 +53,8 @@ {% if current_route == 'homepage' %} {% set current_route = 'unread' %} {% endif %} -
-
+ +
{{ 'entry.list.number_on_the_page'|trans({'%count%': entries.count}) }} {% if entries.count > 0 %} @@ -92,7 +92,7 @@
    {% for entry in entries %} -
  1. +
  2. {% if list_mode == 1 %} {% include "Entry/_card_list.html.twig" with {'entry': entry, 'currentRoute': current_route, 'routes': entries_with_archived_class_routes} only %} {% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %} diff --git a/templates/base.html.twig b/templates/base.html.twig index 382e3b3f3..43d75fc9f 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -4,7 +4,7 @@ - + {% block head %}