From 5637a26e9af98a05c76823c85611315cd1a986e0 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Thu, 3 Nov 2016 10:02:16 +0100 Subject: Bring navigation (with right, left and enter) on material entries page. Supports going to next and previous page ! Also better indentation for js files (changed editorconfig for them). Signed-off-by: Thomas Citharel --- .../static/themes/_global/js/shortcuts/main.js | 3 + app/Resources/static/themes/_global/js/tools.js | 5 +- app/Resources/static/themes/baggy/js/init.js | 12 +++- .../static/themes/baggy/js/shortcuts/entry.js | 11 ++-- app/Resources/static/themes/material/js/init.js | 13 +++- .../static/themes/material/js/shortcuts/entry.js | 11 ++-- .../static/themes/material/js/shortcuts/main.js | 74 +++++++++++++++++++--- 7 files changed, 105 insertions(+), 24 deletions(-) (limited to 'app/Resources') diff --git a/app/Resources/static/themes/_global/js/shortcuts/main.js b/app/Resources/static/themes/_global/js/shortcuts/main.js index 0bb962d0..1f2c1c52 100644 --- a/app/Resources/static/themes/_global/js/shortcuts/main.js +++ b/app/Resources/static/themes/_global/js/shortcuts/main.js @@ -1,3 +1,6 @@ +import Mousetrap from 'mousetrap'; + + /** Shortcuts **/ /* Go to */ diff --git a/app/Resources/static/themes/_global/js/tools.js b/app/Resources/static/themes/_global/js/tools.js index 77879dcd..568b2dce 100644 --- a/app/Resources/static/themes/_global/js/tools.js +++ b/app/Resources/static/themes/_global/js/tools.js @@ -1,7 +1,6 @@ import $ from 'jquery'; -import Mousetrap from 'mousetrap'; -import './shortcuts/main.js'; -import './shortcuts/entry.js'; +import './shortcuts/main'; +import './shortcuts/entry'; /* Allows inline call qr-code call */ import jrQrcode from 'jr-qrcode'; // eslint-disable-line diff --git a/app/Resources/static/themes/baggy/js/init.js b/app/Resources/static/themes/baggy/js/init.js index 5a8911ad..05360a28 100755 --- a/app/Resources/static/themes/baggy/js/init.js +++ b/app/Resources/static/themes/baggy/js/init.js @@ -1,7 +1,5 @@ +/* jQuery */ import $ from 'jquery'; -import { initFilters, initExport } from '../../_global/js/tools'; -import './shortcuts/main.js'; -import './shortcuts/entry.js'; /* eslint-disable no-unused-vars */ /* jquery has default scope */ @@ -9,8 +7,16 @@ import cookie from 'jquery.cookie'; import ui from 'jquery-ui-browserify'; /* eslint-enable no-unused-vars */ +/* Annotations */ import annotator from 'annotator'; +/* Shortcuts */ +import './shortcuts/main'; +import './shortcuts/entry'; +import '../../_global/js/shortcuts/main'; +import '../../_global/js/shortcuts/entry'; + +/* Tools */ import { savePercent, retrievePercent } from '../../_global/js/tools'; import toggleSaveLinkForm from './uiTools'; diff --git a/app/Resources/static/themes/baggy/js/shortcuts/entry.js b/app/Resources/static/themes/baggy/js/shortcuts/entry.js index d618f28e..77d267a3 100644 --- a/app/Resources/static/themes/baggy/js/shortcuts/entry.js +++ b/app/Resources/static/themes/baggy/js/shortcuts/entry.js @@ -1,19 +1,22 @@ +import Mousetrap from 'mousetrap'; +import $ from 'jquery'; + /* Article view */ Mousetrap.bind('o', () => { - $('div#article_toolbar ul.links li:nth-child(2) a')[0].click(); + $('div#article_toolbar ul.links li:nth-child(2) a')[0].click(); }); /* mark as favorite */ Mousetrap.bind('s', () => { - $('div#article_toolbar ul.links li:nth-child(5) a')[0].click(); + $('div#article_toolbar ul.links li:nth-child(5) a')[0].click(); }); /* mark as read */ Mousetrap.bind('a', () => { - $('div#article_toolbar ul.links li:nth-child(4) a')[0].click(); + $('div#article_toolbar ul.links li:nth-child(4) a')[0].click(); }); /* delete */ Mousetrap.bind('del', () => { - $('div#article_toolbar ul.links li:nth-child(7) a')[0].click(); + $('div#article_toolbar ul.links li:nth-child(7) a')[0].click(); }); diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/js/init.js index 3ff8de0a..9746224b 100755 --- a/app/Resources/static/themes/material/js/init.js +++ b/app/Resources/static/themes/material/js/init.js @@ -1,8 +1,17 @@ +/* jQuery */ import $ from 'jquery'; + +/* Annotations */ import annotator from 'annotator'; + +/* Tools */ import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools'; -import './shortcuts/main.js'; -import './shortcuts/entry.js'; + +/* Import shortcuts */ +import './shortcuts/main'; +import './shortcuts/entry'; +import '../../_global/js/shortcuts/main'; +import '../../_global/js/shortcuts/entry'; require('materialize'); // eslint-disable-line diff --git a/app/Resources/static/themes/material/js/shortcuts/entry.js b/app/Resources/static/themes/material/js/shortcuts/entry.js index 900a8214..674253b5 100644 --- a/app/Resources/static/themes/material/js/shortcuts/entry.js +++ b/app/Resources/static/themes/material/js/shortcuts/entry.js @@ -1,19 +1,22 @@ +import Mousetrap from 'mousetrap'; +import $ from 'jquery'; + /* open original article */ Mousetrap.bind('o', () => { - $('ul.side-nav li:nth-child(2) a i')[0].click(); + $('ul.side-nav li:nth-child(2) a i')[0].click(); }); /* mark as favorite */ Mousetrap.bind('s', () => { - $('ul.side-nav li:nth-child(5) a i')[0].click(); + $('ul.side-nav li:nth-child(5) a i')[0].click(); }); /* mark as read */ Mousetrap.bind('a', () => { - $('ul.side-nav li:nth-child(4) a i')[0].click(); + $('ul.side-nav li:nth-child(4) a i')[0].click(); }); /* delete */ Mousetrap.bind('del', () => { - $('ul.side-nav li:nth-child(6) a i')[0].click(); + $('ul.side-nav li:nth-child(6) a i')[0].click(); }); diff --git a/app/Resources/static/themes/material/js/shortcuts/main.js b/app/Resources/static/themes/material/js/shortcuts/main.js index ccd3c92d..62b7ec64 100644 --- a/app/Resources/static/themes/material/js/shortcuts/main.js +++ b/app/Resources/static/themes/material/js/shortcuts/main.js @@ -1,13 +1,71 @@ -/* Actions */ -Mousetrap.bind('g n', () => { +import Mousetrap from 'mousetrap'; +import $ from 'jquery'; + +function toggleFocus(cardToToogleFocus) { + if (cardToToogleFocus) { + $(cardToToogleFocus).toggleClass('z-depth-4'); + } +} +let card; +let cardIndex; +let cardNumber; +let pagination; + +$(document).ready(() => { + cardIndex = 0; + cardNumber = $('#content ul.data > li').length; + card = $('#content ul.data > li')[cardIndex]; + pagination = $('.pagination'); + + /* If we come from next page */ + if (window.location.hash === '#prev') { + cardIndex = cardNumber - 1; + card = $('ul.data > li')[cardIndex]; + } + + /* Focus current card */ + toggleFocus(card); + + /* Actions */ + Mousetrap.bind('g n', () => { $('#nav-btn-add').trigger('click'); -}); + }); -Mousetrap.bind('esc', () => { + Mousetrap.bind('esc', () => { $('.close').trigger('click'); -}); + }); + + /* 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 = $('ul.data > li')[cardIndex]; + toggleFocus(card); + return; + } + if (pagination != null && pagination.find('li.next') && cardIndex === cardNumber - 1) { + window.location.href = window.location.origin + $(pagination).find('li.next a').attr('href'); + return; + } + }); + + /* 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 = $('ul.data > li')[cardIndex]; + toggleFocus(card); + return; + } + if (pagination !== null && $(pagination).find('li.prev') && cardIndex === 0) { + window.location.href = `${window.location.origin + $(pagination).find('li.prev a').attr('href')}#prev`; + return; + } + }); -// Display the first element of the current view -Mousetrap.bind('right', () => { - $('ul.data li:first-child span.dot-ellipsis a')[0].click(); + Mousetrap.bind('enter', () => { + window.location.href = window.location.origin + $(card).find('span.card-title a').attr('href'); + }); }); -- cgit v1.2.3