support Vim key bindings in preview mode

1. h, j, k, l to navigate;
2. gg, G to go to the start and end of the document;
3. Ctrl+D, Ctrl+U to go down and up half page;

Signed-off-by: Le Tan <[email protected]>

src/resources/pre_template.html

@@ -16,6 +16,7 @@
   'use strict';
   var placeholder = document.getElementById('placeholder');
   var content;
+  var keyState = 0;
 
   var scrollToAnchor = function(anchor) {
       document.getElementById(anchor).scrollIntoView();
@@ -63,4 +64,81 @@
         content.setHeader(curHeader);
     }
   }
+
+    document.onkeydown = function(e) {
+        e = e || window.event;
+        var key;
+        var shift;
+        var ctrl;
+        if (e.which) {
+            key = e.which;
+        } else {
+            key = e.keyCode;
+        }
+        shift = !!e.shiftKey;
+        ctrl = !!e.ctrlKey;
+        switch (key) {
+            case 74: // J
+                window.scrollBy(0, 100);
+                keyState = 0;
+                break;
+
+            case 75: // K
+                window.scrollBy(0, -100);
+                keyState = 0;
+                break;
+
+            case 72: // H
+                window.scrollBy(-100, 0);
+                keyState = 0;
+                break;
+
+            case 76: // L
+                window.scrollBy(100, 0);
+                keyState = 0;
+                break;
+
+            case 71: // G
+                if (shift) {
+                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
+                    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+                    window.scrollTo(scrollLeft, scrollHeight);
+                    keyState = 0;
+                    break;
+                } else {
+                    if (keyState == 0) {
+                        keyState = 1;
+                    } else if (keyState == 1) {
+                        keyState = 0;
+                        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
+                        window.scrollTo(scrollLeft, 0);
+                    }
+                    break;
+                }
+                return;
+
+            case 85: // U
+                keyState = 0;
+                if (ctrl) {
+                    var clientHeight = document.documentElement.clientHeight;
+                    window.scrollBy(0, -clientHeight);
+                    break;
+                }
+                return;
+
+            case 68: // D
+                keyState = 0;
+                if (ctrl) {
+                    var clientHeight = document.documentElement.clientHeight;
+                    window.scrollBy(0, clientHeight);
+                    break;
+                }
+                return;
+
+            default:
+                keyState = 0;
+                return;
+        }
+        e.preventDefault();
+    }
   </script>

src/resources/template.html

@@ -21,6 +21,7 @@
   var toc = []; // Table of contents as a list
   var content; // Channel variable with content
   var nameCounter = 0;
+  var keyState = 0;
 
   renderer.heading = function (text, level) {
       // Use number to avoid issues with Chinese
@@ -180,6 +181,83 @@
         content.setHeader(curHeader);
     }
   }
+
+    document.onkeydown = function(e) {
+        e = e || window.event;
+        var key;
+        var shift;
+        var ctrl;
+        if (e.which) {
+            key = e.which;
+        } else {
+            key = e.keyCode;
+        }
+        shift = !!e.shiftKey;
+        ctrl = !!e.ctrlKey;
+        switch (key) {
+            case 74: // J
+                window.scrollBy(0, 100);
+                keyState = 0;
+                break;
+
+            case 75: // K
+                window.scrollBy(0, -100);
+                keyState = 0;
+                break;
+
+            case 72: // H
+                window.scrollBy(-100, 0);
+                keyState = 0;
+                break;
+
+            case 76: // L
+                window.scrollBy(100, 0);
+                keyState = 0;
+                break;
+
+            case 71: // G
+                if (shift) {
+                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
+                    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+                    window.scrollTo(scrollLeft, scrollHeight);
+                    keyState = 0;
+                    break;
+                } else {
+                    if (keyState == 0) {
+                        keyState = 1;
+                    } else if (keyState == 1) {
+                        keyState = 0;
+                        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
+                        window.scrollTo(scrollLeft, 0);
+                    }
+                    break;
+                }
+                return;
+
+            case 85: // U
+                keyState = 0;
+                if (ctrl) {
+                    var clientHeight = document.documentElement.clientHeight;
+                    window.scrollBy(0, -clientHeight);
+                    break;
+                }
+                return;
+
+            case 68: // D
+                keyState = 0;
+                if (ctrl) {
+                    var clientHeight = document.documentElement.clientHeight;
+                    window.scrollBy(0, clientHeight);
+                    break;
+                }
+                return;
+
+            default:
+                keyState = 0;
+                return;
+        }
+        e.preventDefault();
+    }
   </script>
 </body>
 </html>

src/vdocument.cpp

@@ -1,4 +1,5 @@
 #include "vdocument.h"
+#include <QDebug>
 
 VDocument::VDocument(QObject *parent) : QObject(parent)
 {
@@ -61,3 +62,10 @@ void VDocument::setHtml(const QString &html)
     m_html = html;
     emit htmlChanged(m_html);
 }
+
+void VDocument::setLog(const QString &p_log)
+{
+    qDebug() << "JS:" << p_log;
+    m_log = p_log;
+    emit logChanged(m_log);
+}

src/vdocument.h

@@ -10,6 +10,7 @@ class VDocument : public QObject
     Q_PROPERTY(QString text MEMBER m_text NOTIFY textChanged)
     Q_PROPERTY(QString toc MEMBER m_toc NOTIFY tocChanged)
     Q_PROPERTY(QString html MEMBER m_html NOTIFY htmlChanged)
+    Q_PROPERTY(QString log MEMBER m_log NOTIFY logChanged)
 
 public:
     explicit VDocument(QObject *parent = 0);
@@ -24,6 +25,7 @@ public slots:
     // Will be called in the HTML side
     void setToc(const QString &toc);
     void setHeader(const QString &anchor);
+    void setLog(const QString &p_log);
 
 signals:
     void textChanged(const QString &text);
@@ -31,12 +33,15 @@ signals:
     void requestScrollToAnchor(const QString &anchor);
     void headerChanged(const QString &anchor);
     void htmlChanged(const QString &html);
+    void logChanged(const QString &p_log);
 
 private:
     QString m_text;
     QString m_toc;
     QString m_header;
     QString m_html;
+    // Used for debugging
+    QString m_log;
 };
 
 #endif // VDOCUMENT_H