Provide pop-up lisitng keyboard shortcuts

Pressing the question-mark key (?) produces a pop-up listing the
keyboard shortcuts. Pressing q whilst this window has focus closes it.

I've provided crude translations for the additional ? and q shortcuts,
obtained from Google Translate, but they should be checked by native
speakers.

assets/css/app.css

@@ -214,6 +214,10 @@ textarea.form-error {
     margin-bottom: 15px;
 }
 
+.invisible {
+    display:none;	
+}
+
 /* alerts */
 .alert {
     padding: 8px 35px 8px 14px;

assets/js/app.js

@@ -452,6 +452,12 @@
             case 108: // l
                 open_next_page();
                 break;
+            case 63: // ?
+                var jsFile = document.URL.substr(0, document.URL.lastIndexOf('/') + 1) + "assets/js/popupHelp.js";
+                var htmlHelp = document.getElementById("shortcuts").innerHTML;
+                var encodedHelp = "data:text/html;charset=utf-8,<script src=\"" + jsFile + "\"></script>" +  htmlHelp;
+                var popup = open(encodedHelp, "Shortcuts", "width=300,height=300,location=no,scrollbars=no,status=no,toolbar=no");
+              break;
         }
     };
 

assets/js/popupHelp.js

@@ -0,0 +1,10 @@
+document.title = "Keyboard Shortcuts";
+
+document.onkeypress = function(e) {
+	switch (e.keyCode || e.which) {
+		case 81: // Q
+        case 113: // q
+           window.close();
+        break;
+    }
+};

locales/cs_CZ/translations.php

@@ -105,5 +105,7 @@ return array(
     'Do you really want to remove these items from your history?' => 'Opravdu chcete odstranit tyto články z historie?',
     'Do you really want to remove this subscription: "%s"?' => 'Opravdu chcete odstranit tento odběr: "%s"?',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
-    'Nic ke čtení, chete <a href="?action=refresh-all" data-action="refresh-all">aktualizovat vaše odběry?</a>'
+    'Nic ke čtení, chete <a href="?action=refresh-all" data-action="refresh-all">aktualizovat vaše odběry?</a>',
+    'Show shortcuts' => 'Ukázat zkratky',
+    'Close shortcut list' => 'Zavřít seznam zkratek'
 );

locales/de_DE/translations.php

@@ -101,5 +101,7 @@ return array(
     'Do you really want to remove these items from your history?' => 'Willst du sicher alle Einträge aus dem Verlauf löschen?',
     'Do you really want to remove this subscription: "%s"?' => 'Willst du dieses Abonnement wirklich löschen: "%s" ?',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
-    'Nichts zu lesen, willst du <a href="?action=refresh-all" data-action="refresh-all">alle Abonemments aktualisieren?</a>'
+    'Nichts zu lesen, willst du <a href="?action=refresh-all" data-action="refresh-all">alle Abonemments aktualisieren?</a>',
+    'Show shortcuts' => 'Verknüpfungen anzeigen',
+    'Close shortcut list' => 'Schließen Liste für Schnellzugriffe'
 );

locales/fr_FR/translations.php

@@ -106,5 +106,7 @@ return array(
     'Do you really want to remove these items from your history?' => 'Voulez-vous vraiment supprimer les éléments de votre historique ?',
     'Do you really want to remove this subscription: "%s"?' => 'Voulez-vous vraiment supprimer cet abonnement : "%s" ?',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
-    'Il n\'y a rien à lire, voulez-vous <a href="?action=refresh-all" data-action="refresh-all">mettre à jour vos abonnements ?</a>'
+    'Il n\'y a rien à lire, voulez-vous <a href="?action=refresh-all" data-action="refresh-all">mettre à jour vos abonnements ?</a>',
+    'Show shortcuts' => 'Afficher les raccourcis',
+    'Close shortcut list' => 'Fermer la liste des raccourcis'
 );

locales/it_IT/translations.php

@@ -101,5 +101,7 @@ return array(
     'Do you really want to remove these items from your history?' => 'Vuoi veramente cancellare questi articoli dalla cronologia?',
     'Do you really want to remove this subscription: "%s"?' => 'Vuoi veramente cancellare la sottoscrizione a: "%s" ?',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
-    'Niente da leggere, vuoi <a href="?action=refresh-all" data-action="refresh-all">aggiornare tutte le sottoscrizioni?</a>'
+    'Niente da leggere, vuoi <a href="?action=refresh-all" data-action="refresh-all">aggiornare tutte le sottoscrizioni?</a>',
+    'Show shortcuts' => 'Mostra tasti di scelta rapida',
+    'Close shortcut list' => 'Ridurre la lista di scelta rapida'
 );

locales/zh_CN/translations.php

@@ -101,5 +101,7 @@ return array(
     'Do you really want to remove these items from your history?'   => '你确认要移除这些历史记录吗？',
     'Do you really want to remove this subscription: "%s"?'         => '你确定要移除这个订阅源: "%s" ？',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
-    '空空如也，你想要<a href="?action=refresh-all" data-action="refresh-all">更新订阅源</a>嘛？'
+    '空空如也，你想要<a href="?action=refresh-all" data-action="refresh-all">更新订阅源</a>嘛？',
+    'Show shortcuts' => '显示捷径',
+    'Close shortcut list' => '关闭快捷键列表'
 );

templates/app_header.php

@@ -42,3 +42,19 @@
         <section class="page">
             <?= Helper\flash('<div class="alert alert-success">%s</div>') ?>
             <?= Helper\flash_error('<div class="alert alert-error">%s</div>') ?>
+
+		    <div class="invisible" id="shortcuts">
+		        <h3><?= t('Keyboard shortcuts') ?></h3>
+		        <ul>
+		            <li><?= t('Previous item') ?> = <strong>p</strong> <?= t('or') ?> <strong>j</strong></li>
+		            <li><?= t('Next item') ?> = <strong>n</strong> <?= t('or') ?> <strong>k</strong></li>
+		            <li><?= t('Mark as read or unread') ?> = <strong>m</strong></li>
+		            <li><?= t('Open original link') ?> = <strong>v</strong></li>
+		            <li><?= t('Open item') ?> = <strong>o</strong></li>
+		            <li><?= t('Bookmark item') ?> = <strong>f</strong></li>
+		            <li><?= t('Previous page') ?> = <strong>h</strong></li>
+		            <li><?= t('Next page') ?> = <strong>l</strong></li><br />
+		            <li><?= t('Show shortcuts') ?> = <strong>?</strong></li>
+		            <li><?= t('Close shortcut list') ?> = <strong>q</strong></li>
+		        </ul>
+		    </div>

templates/config.php

@@ -45,7 +45,7 @@
             <li><a href="?action=download-db"><?= t('Download the entire database') ?></a> <?= t('(Gzip compressed Sqlite file)') ?></li>
         </ul>
     </div>
-    <div class="alert alert-normal">
+    <div class="alert alert-normal" id="shortcuts">
         <h3><?= t('Keyboard shortcuts') ?></h3>
         <ul>
             <li><?= t('Previous item') ?> = <strong>p</strong> <?= t('or') ?> <strong>j</strong></li>
@@ -55,7 +55,9 @@
             <li><?= t('Open item') ?> = <strong>o</strong></li>
             <li><?= t('Bookmark item') ?> = <strong>f</strong></li>
             <li><?= t('Previous page') ?> = <strong>h</strong></li>
-            <li><?= t('Next page') ?> = <strong>l</strong></li>
+            <li><?= t('Next page') ?> = <strong>l</strong></li><br />
+            <li><?= t('Show shortcuts') ?> = <strong>?</strong></li>
+            <li><?= t('Close shortcut list') ?> = <strong>q</strong></li>
         </ul>
     </div>
     <div class="alert alert-normal">