Show keyboard shortcuts in modal dialog

locale/translations.go

@@ -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",
 }

locale/translations/fr_FR.json

@@ -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"
 }

server/static/css/black.css

@@ -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;

server/static/css/common.css

@@ -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;

server/static/js/app.js

@@ -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();

server/template/common.go

@@ -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",
 }

server/template/html/common/layout.html

@@ -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 }}