1
0
Fork 0

Show keyboard shortcuts in modal dialog

This commit is contained in:
Frédéric Guillot 2017-12-28 16:27:54 -08:00
parent cc0acabfe0
commit 8cd58a746a
9 changed files with 245 additions and 15 deletions

View file

@ -1,5 +1,5 @@
// Code generated by go generate; DO NOT EDIT.
// 2017-12-26 20:56:49.146246015 -0800 PST m=+0.048892271
// 2017-12-28 16:23:44.392632301 -0800 PST m=+0.031688555
package locale
@ -187,12 +187,33 @@ var translations = map[string]string{
"Last checked:": "Dernière vérification :",
"ETag header:": "En-tête ETag :",
"LastModified header:": "En-tête LastModified :",
"None": "Aucun/Aucune"
"None": "Aucun/Aucune",
"Keyboard Shortcuts": "Raccourcis clavier",
"Sections Navigation": "Naviguation entre les sections",
"Go to unread": "Aller aux éléments non lus",
"Go to bookmarks": "Aller aux favoris",
"Go to history": "Voir l'historique",
"Go to feeds": "Voir les abonnements",
"Go to categories": "Voir les catégories",
"Go to settings": "Voir les réglages",
"Show keyboard shortcuts": "Voir les raccourcis clavier",
"Items Navigation": "Naviguation entre les éléments",
"Go to previous item": "Élément précédent",
"Go to next item": "Élément suivant",
"Go to previous page": "Page précédente",
"Go to next page": "Page suivante",
"Open selected item": "Ouvrir élément sélectionné",
"Open original link": "Ouvrir lien original",
"Toggle read/unread": "Basculer entre lu/non lu",
"Mark current page as read": "Marquer la page actuelle comme lu",
"Download original content": "Télécharger le contenu original",
"Toggle bookmark": "Ajouter/Enlever favoris",
"Close modal dialog": "Fermer la boite de dialogue"
}
`,
}
var translationsChecksums = map[string]string{
"en_US": "6fe95384260941e8a5a3c695a655a932e0a8a6a572c1e45cb2b1ae8baa01b897",
"fr_FR": "59edb9fa27828c14c3ca462d09da30d876c92c0decd7d597c1a266956f2b72e6",
"fr_FR": "a90e274772846853cfe95148ac54bec9a658e09397b58de8047bdaed1099ded2",
}

View file

@ -171,5 +171,26 @@
"Last checked:": "Dernière vérification :",
"ETag header:": "En-tête ETag :",
"LastModified header:": "En-tête LastModified :",
"None": "Aucun/Aucune"
"None": "Aucun/Aucune",
"Keyboard Shortcuts": "Raccourcis clavier",
"Sections Navigation": "Naviguation entre les sections",
"Go to unread": "Aller aux éléments non lus",
"Go to bookmarks": "Aller aux favoris",
"Go to history": "Voir l'historique",
"Go to feeds": "Voir les abonnements",
"Go to categories": "Voir les catégories",
"Go to settings": "Voir les réglages",
"Show keyboard shortcuts": "Voir les raccourcis clavier",
"Items Navigation": "Naviguation entre les éléments",
"Go to previous item": "Élément précédent",
"Go to next item": "Élément suivant",
"Go to previous page": "Page précédente",
"Go to next page": "Page suivante",
"Open selected item": "Ouvrir élément sélectionné",
"Open original link": "Ouvrir lien original",
"Toggle read/unread": "Basculer entre lu/non lu",
"Mark current page as read": "Marquer la page actuelle comme lu",
"Download original content": "Télécharger le contenu original",
"Toggle bookmark": "Ajouter/Enlever favoris",
"Close modal dialog": "Fermer la boite de dialogue"
}

File diff suppressed because one or more lines are too long

View file

@ -108,6 +108,18 @@ input[type="text"]:focus {
color: #9b9b9b;
}
/* Modals */
#modal-left {
background: #333;
color: #efefef;
box-shadow: 0 0 10px rgba(82, 168, 236, 0.6);
}
/* Keyboard Shortcuts */
.keyboard-shortcuts li {
color: #9b9b9b;
}
/* Counter */
.unread-counter {
color: #bbb;

View file

@ -354,6 +354,52 @@ a.button {
margin-left: 30px;
}
/* Modals */
#modal-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 350px;
overflow: auto;
background: #f0f0f0;
box-shadow: 2px 0 5px 0 #ccc;
padding: 5px;
padding-top: 30px;
}
#modal-left h3 {
font-weight: 400;
}
.btn-close-modal {
position: absolute;
top: 0;
right: 0;
font-size: 1.7em;
color: #ccc;
padding:0 .2em;
margin: 10px;
text-decoration: none;
}
.btn-close-modal:hover {
color: #999;
}
/* Keyboard Shortcuts */
.keyboard-shortcuts li {
margin-left: 25px;
list-style-type: square;
color: #333;
font-size: 0.95em;
line-height: 1.45em;
}
.keyboard-shortcuts p {
line-height: 1.9em;
}
/* Login form */
.login-form {
margin: 50px auto 0;

View file

@ -1,5 +1,5 @@
// Code generated by go generate; DO NOT EDIT.
// 2017-12-27 19:43:16.081100938 -0800 PST m=+0.024187957
// 2017-12-28 16:23:44.379810113 -0800 PST m=+0.018866367
package static
@ -53,7 +53,12 @@ class ConfirmHandler{remove(url){let request=new RequestBuilder(url);request.wit
handle(event){let questionElement=document.createElement("span");let linkElement=event.target;let containerElement=linkElement.parentNode;linkElement.style.display="none";let yesElement=document.createElement("a");yesElement.href="#";yesElement.appendChild(document.createTextNode(linkElement.dataset.labelYes));yesElement.onclick=(event)=>{event.preventDefault();let loadingElement=document.createElement("span");loadingElement.className="loading";loadingElement.appendChild(document.createTextNode(linkElement.dataset.labelLoading));questionElement.remove();containerElement.appendChild(loadingElement);this.remove(linkElement.dataset.url);};let noElement=document.createElement("a");noElement.href="#";noElement.appendChild(document.createTextNode(linkElement.dataset.labelNo));noElement.onclick=(event)=>{event.preventDefault();linkElement.style.display="inline";questionElement.remove();};questionElement.className="confirm";questionElement.appendChild(document.createTextNode(linkElement.dataset.labelQuestion+" "));questionElement.appendChild(yesElement);questionElement.appendChild(document.createTextNode(", "));questionElement.appendChild(noElement);containerElement.appendChild(questionElement);}}
class MenuHandler{clickMenuListItem(event){let element=event.target;if(element.tagName==="A"){window.location.href=element.getAttribute("href");}else{window.location.href=element.querySelector("a").getAttribute("href");}}
toggleMainMenu(){let menu=document.querySelector(".header nav ul");if(DomHelper.isVisible(menu)){menu.style.display="none";}else{menu.style.display="block";}}}
class NavHandler{markPageAsRead(){let items=DomHelper.getVisibleElements(".items .item");let entryIDs=[];items.forEach((element)=>{element.classList.add("item-status-read");entryIDs.push(parseInt(element.dataset.id,10));});if(entryIDs.length>0){EntryHandler.updateEntriesStatus(entryIDs,"read",()=>{this.goToPage("next",true);});}}
class ModalHandler{static exists(){return document.getElementById("modal-container")!==null;}
static open(fragment){if(ModalHandler.exists()){return;}
let container=document.createElement("div");container.id="modal-container";container.appendChild(document.importNode(fragment,true));document.body.appendChild(container);let closeButton=document.querySelector("a.btn-close-modal");if(closeButton!==null){closeButton.onclick=(event)=>{event.preventDefault();ModalHandler.close();};}}
static close(){let container=document.getElementById("modal-container");if(container!==null){container.parentNode.removeChild(container);}}}
class NavHandler{showKeyboardShortcuts(){let template=document.getElementById("keyboard-shortcuts");if(template!==null){ModalHandler.open(template.content);}}
markPageAsRead(){let items=DomHelper.getVisibleElements(".items .item");let entryIDs=[];items.forEach((element)=>{element.classList.add("item-status-read");entryIDs.push(parseInt(element.dataset.id,10));});if(entryIDs.length>0){EntryHandler.updateEntriesStatus(entryIDs,"read",()=>{this.goToPage("next",true);});}}
saveEntry(){if(this.isListView()){let currentItem=document.querySelector(".current-item");if(currentItem!==null){let saveLink=currentItem.querySelector("a[data-save-entry]");if(saveLink){EntryHandler.saveEntry(saveLink);}}}else{let saveLink=document.querySelector("a[data-save-entry]");if(saveLink){EntryHandler.saveEntry(saveLink);}}}
fetchOriginalContent(){if(!this.isListView()){let link=document.querySelector("a[data-fetch-content-entry]");if(link){EntryHandler.fetchOriginalContent(link);}}}
toggleEntryStatus(){let currentItem=document.querySelector(".current-item");if(currentItem!==null){this.goToNextListItem();EntryHandler.toggleEntryStatus(currentItem);}}
@ -75,9 +80,9 @@ if(currentItem===null){items[0].classList.add("current-item");return;}
for(let i=0;i<items.length;i++){if(items[i].classList.contains("current-item")){items[i].classList.remove("current-item");if(i+1<items.length){items[i+1].classList.add("current-item");DomHelper.scrollPageTo(items[i+1]);}
break;}}}
isListView(){return document.querySelector(".items")!==null;}}
document.addEventListener("DOMContentLoaded",function(){FormHandler.handleSubmitButtons();let touchHandler=new TouchHandler();touchHandler.listen();let navHandler=new NavHandler();let keyboardHandler=new KeyboardHandler();keyboardHandler.on("g u",()=>navHandler.goToPage("unread"));keyboardHandler.on("g b",()=>navHandler.goToPage("starred"));keyboardHandler.on("g h",()=>navHandler.goToPage("history"));keyboardHandler.on("g f",()=>navHandler.goToPage("feeds"));keyboardHandler.on("g c",()=>navHandler.goToPage("categories"));keyboardHandler.on("g s",()=>navHandler.goToPage("settings"));keyboardHandler.on("ArrowLeft",()=>navHandler.goToPrevious());keyboardHandler.on("ArrowRight",()=>navHandler.goToNext());keyboardHandler.on("j",()=>navHandler.goToPrevious());keyboardHandler.on("p",()=>navHandler.goToPrevious());keyboardHandler.on("k",()=>navHandler.goToNext());keyboardHandler.on("n",()=>navHandler.goToNext());keyboardHandler.on("h",()=>navHandler.goToPage("previous"));keyboardHandler.on("l",()=>navHandler.goToPage("next"));keyboardHandler.on("o",()=>navHandler.openSelectedItem());keyboardHandler.on("v",()=>navHandler.openOriginalLink());keyboardHandler.on("m",()=>navHandler.toggleEntryStatus());keyboardHandler.on("A",()=>navHandler.markPageAsRead());keyboardHandler.on("s",()=>navHandler.saveEntry());keyboardHandler.on("d",()=>navHandler.fetchOriginalContent());keyboardHandler.on("f",()=>navHandler.toggleBookmark());keyboardHandler.listen();let mouseHandler=new MouseHandler();mouseHandler.onClick("a[data-save-entry]",(event)=>{event.preventDefault();EntryHandler.saveEntry(event.target);});mouseHandler.onClick("a[data-toggle-bookmark]",(event)=>{event.preventDefault();EntryHandler.toggleBookmark(event.target);});mouseHandler.onClick("a[data-fetch-content-entry]",(event)=>{event.preventDefault();EntryHandler.fetchOriginalContent(event.target);});mouseHandler.onClick("a[data-on-click=markPageAsRead]",()=>navHandler.markPageAsRead());mouseHandler.onClick("a[data-confirm]",(event)=>{(new ConfirmHandler()).handle(event);});if(document.documentElement.clientWidth<600){let menuHandler=new MenuHandler();mouseHandler.onClick(".logo",()=>menuHandler.toggleMainMenu());mouseHandler.onClick(".header nav li",(event)=>menuHandler.clickMenuListItem(event));}});})();`,
document.addEventListener("DOMContentLoaded",function(){FormHandler.handleSubmitButtons();let touchHandler=new TouchHandler();touchHandler.listen();let navHandler=new NavHandler();let keyboardHandler=new KeyboardHandler();keyboardHandler.on("g u",()=>navHandler.goToPage("unread"));keyboardHandler.on("g b",()=>navHandler.goToPage("starred"));keyboardHandler.on("g h",()=>navHandler.goToPage("history"));keyboardHandler.on("g f",()=>navHandler.goToPage("feeds"));keyboardHandler.on("g c",()=>navHandler.goToPage("categories"));keyboardHandler.on("g s",()=>navHandler.goToPage("settings"));keyboardHandler.on("ArrowLeft",()=>navHandler.goToPrevious());keyboardHandler.on("ArrowRight",()=>navHandler.goToNext());keyboardHandler.on("j",()=>navHandler.goToPrevious());keyboardHandler.on("p",()=>navHandler.goToPrevious());keyboardHandler.on("k",()=>navHandler.goToNext());keyboardHandler.on("n",()=>navHandler.goToNext());keyboardHandler.on("h",()=>navHandler.goToPage("previous"));keyboardHandler.on("l",()=>navHandler.goToPage("next"));keyboardHandler.on("o",()=>navHandler.openSelectedItem());keyboardHandler.on("v",()=>navHandler.openOriginalLink());keyboardHandler.on("m",()=>navHandler.toggleEntryStatus());keyboardHandler.on("A",()=>navHandler.markPageAsRead());keyboardHandler.on("s",()=>navHandler.saveEntry());keyboardHandler.on("d",()=>navHandler.fetchOriginalContent());keyboardHandler.on("f",()=>navHandler.toggleBookmark());keyboardHandler.on("?",()=>navHandler.showKeyboardShortcuts());keyboardHandler.on("Escape",()=>ModalHandler.close());keyboardHandler.listen();let mouseHandler=new MouseHandler();mouseHandler.onClick("a[data-save-entry]",(event)=>{event.preventDefault();EntryHandler.saveEntry(event.target);});mouseHandler.onClick("a[data-toggle-bookmark]",(event)=>{event.preventDefault();EntryHandler.toggleBookmark(event.target);});mouseHandler.onClick("a[data-fetch-content-entry]",(event)=>{event.preventDefault();EntryHandler.fetchOriginalContent(event.target);});mouseHandler.onClick("a[data-on-click=markPageAsRead]",()=>navHandler.markPageAsRead());mouseHandler.onClick("a[data-confirm]",(event)=>{(new ConfirmHandler()).handle(event);});if(document.documentElement.clientWidth<600){let menuHandler=new MenuHandler();mouseHandler.onClick(".logo",()=>menuHandler.toggleMainMenu());mouseHandler.onClick(".header nav li",(event)=>menuHandler.clickMenuListItem(event));}});})();`,
}
var JavascriptChecksums = map[string]string{
"app": "3cb20aac0a3738f1ddc0b5a21ef5537f2ec0526a50047c8c678ed7a0f9016b88",
"app": "ce54b41f6bc03c7939ff07420714462f32787aa2c71ae2da953843dc5c232dce",
}

View file

@ -432,7 +432,46 @@ class MenuHandler {
}
}
class ModalHandler {
static exists() {
return document.getElementById("modal-container") !== null;
}
static open(fragment) {
if (ModalHandler.exists()) {
return;
}
let container = document.createElement("div");
container.id = "modal-container";
container.appendChild(document.importNode(fragment, true));
document.body.appendChild(container);
let closeButton = document.querySelector("a.btn-close-modal");
if (closeButton !== null) {
closeButton.onclick = (event) => {
event.preventDefault();
ModalHandler.close();
};
}
}
static close() {
let container = document.getElementById("modal-container");
if (container !== null) {
container.parentNode.removeChild(container);
}
}
}
class NavHandler {
showKeyboardShortcuts() {
let template = document.getElementById("keyboard-shortcuts");
if (template !== null) {
ModalHandler.open(template.content);
}
}
markPageAsRead() {
let items = DomHelper.getVisibleElements(".items .item");
let entryIDs = [];
@ -645,6 +684,8 @@ document.addEventListener("DOMContentLoaded", function() {
keyboardHandler.on("s", () => navHandler.saveEntry());
keyboardHandler.on("d", () => navHandler.fetchOriginalContent());
keyboardHandler.on("f", () => navHandler.toggleBookmark());
keyboardHandler.on("?", () => navHandler.showKeyboardShortcuts());
keyboardHandler.on("Escape", () => ModalHandler.close());
keyboardHandler.listen();
let mouseHandler = new MouseHandler();

View file

@ -1,5 +1,5 @@
// Code generated by go generate; DO NOT EDIT.
// 2017-12-24 14:32:38.881953886 -0800 PST m=+0.038978781
// 2017-12-28 16:23:44.391520701 -0800 PST m=+0.030576955
package template
@ -101,6 +101,48 @@ var templateCommonMap = map[string]string{
<main>
{{template "content" .}}
</main>
<template id="keyboard-shortcuts">
<div id="modal-left">
<a href="#" class="btn-close-modal">x</a>
<h3>{{ t "Keyboard Shortcuts" }}</h3>
<div class="keyboard-shortcuts">
<p>{{ t "Sections Navigation" }}</p>
<ul>
<li>{{ t "Go to unread" }} = <strong>g + u</strong></li>
<li>{{ t "Go to bookmarks" }} = <strong>g + b</strong></li>
<li>{{ t "Go to history" }} = <strong>g + h</strong></li>
<li>{{ t "Go to feeds" }} = <strong>g + f</strong></li>
<li>{{ t "Go to categories" }} = <strong>g + c</strong></li>
<li>{{ t "Go to settings" }} = <strong>g + s</strong></li>
<li>{{ t "Show keyboard shortcuts" }} = <strong>?</strong></li>
</ul>
<p>{{ t "Items Navigation" }}</p>
<ul>
<li>{{ t "Go to previous item" }} = <strong>p or j or </strong></li>
<li>{{ t "Go to next item" }} = <strong>n or k or </strong></li>
</ul>
<p>{{ t "Pages Navigation" }}</p>
<ul>
<li>{{ t "Go to previous page" }} = <strong>h</strong></li>
<li>{{ t "Go to next page" }} = <strong>l</strong></li>
</ul>
<p>{{ t "Actions" }}</p>
<ul>
<li>{{ t "Open selected item" }} = <strong>o</strong></li>
<li>{{ t "Open original link" }} = <strong>v</strong></li>
<li>{{ t "Toggle read/unread" }} = <strong>m</strong></li>
<li>{{ t "Mark current page as read" }} = <strong>A</strong></li>
<li>{{ t "Download original content" }} = <strong>d</strong></li>
<li>{{ t "Toggle bookmark" }} = <strong>f</strong></li>
<li>{{ t "Close modal dialog" }} = <strong>Esc</strong></li>
</ul>
</div>
</div>
</template>
</body>
</html>
{{ end }}`,
@ -128,6 +170,6 @@ var templateCommonMap = map[string]string{
var templateCommonMapChecksums = map[string]string{
"entry_pagination": "f1465fa70f585ae8043b200ec9de5bf437ffbb0c19fb7aefc015c3555614ee27",
"layout": "778c5cd419c3bd0e35141b1c17bc6775c58b36c650b7566c27ccfd51a6f1417d",
"layout": "b5bfaddd2e8b5ba25fc0b5a9af70dd269605c6637788f9d1e5d8475d89716465",
"pagination": "6ff462c2b2a53bc5448b651da017f40a39f1d4f16cef4b2f09784f0797286924",
}

View file

@ -76,6 +76,48 @@
<main>
{{template "content" .}}
</main>
<template id="keyboard-shortcuts">
<div id="modal-left">
<a href="#" class="btn-close-modal">x</a>
<h3>{{ t "Keyboard Shortcuts" }}</h3>
<div class="keyboard-shortcuts">
<p>{{ t "Sections Navigation" }}</p>
<ul>
<li>{{ t "Go to unread" }} = <strong>g + u</strong></li>
<li>{{ t "Go to bookmarks" }} = <strong>g + b</strong></li>
<li>{{ t "Go to history" }} = <strong>g + h</strong></li>
<li>{{ t "Go to feeds" }} = <strong>g + f</strong></li>
<li>{{ t "Go to categories" }} = <strong>g + c</strong></li>
<li>{{ t "Go to settings" }} = <strong>g + s</strong></li>
<li>{{ t "Show keyboard shortcuts" }} = <strong>?</strong></li>
</ul>
<p>{{ t "Items Navigation" }}</p>
<ul>
<li>{{ t "Go to previous item" }} = <strong>p or j or ◄</strong></li>
<li>{{ t "Go to next item" }} = <strong>n or k or ►</strong></li>
</ul>
<p>{{ t "Pages Navigation" }}</p>
<ul>
<li>{{ t "Go to previous page" }} = <strong>h</strong></li>
<li>{{ t "Go to next page" }} = <strong>l</strong></li>
</ul>
<p>{{ t "Actions" }}</p>
<ul>
<li>{{ t "Open selected item" }} = <strong>o</strong></li>
<li>{{ t "Open original link" }} = <strong>v</strong></li>
<li>{{ t "Toggle read/unread" }} = <strong>m</strong></li>
<li>{{ t "Mark current page as read" }} = <strong>A</strong></li>
<li>{{ t "Download original content" }} = <strong>d</strong></li>
<li>{{ t "Toggle bookmark" }} = <strong>f</strong></li>
<li>{{ t "Close modal dialog" }} = <strong>Esc</strong></li>
</ul>
</div>
</div>
</template>
</body>
</html>
{{ end }}