From 05eac3191827c8cf6b636c8d590b9319eaab85d9 Mon Sep 17 00:00:00 2001
From: Harry Tom <harrytom2606@gmail.com>
Date: Sat, 15 Jan 2022 22:52:23 +0530
Subject: [PATCH] Added Shortcuts, Shortcut menu!

---
 README.md                          | 10 ++++
 css/style.css                      | 34 ++++++++++++
 index.html                         | 25 +++++++++
 js/app.js                          |  3 +-
 js/app.ui.js                       | 13 ++++-
 js/keyboard.js                     | 88 ++++++++++++++++++++++++++++++
 src/libs/hotkeysjs/hotekeys.min.js |  2 +
 wiki.html                          | 18 +++++-
 8 files changed, 188 insertions(+), 5 deletions(-)
 create mode 100644 js/keyboard.js
 create mode 100644 src/libs/hotkeysjs/hotekeys.min.js

diff --git a/README.md b/README.md
index 20acca5..c7ece7b 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,9 @@ Wikifox (beta) is a clean and simplified version of the real Wikipedia! This wor
 
 [<img src="https://forum.reroll.in/uploads/default/original/1X/14cb1b4f9a5907dd89f6fe52595575df885dad93.png" width="150px">](https://discord.gg/wdDXnFz3bm)
 
+# What's New
+- Added Keyboard shortcuts. Press `k` or got to `options` to see what are the new shortcuts!
+
 # 💫 Features
 - 👍 Super-awesome and Clean UI
 - 🔍 Search any articles Easily
@@ -20,10 +23,17 @@ Wikifox (beta) is a clean and simplified version of the real Wikipedia! This wor
 - 📢Real aloud
 - 🦘 Quick Jump to headings
 - 🎲 Random Articles
+- Keyboard Shortcuts
 - 📱 Mobile Friendly
 - ℹ️ Infobox (beta)
 - 💫 And much more!
 
+# 🔔 Upcoming Features
+
+- More keyboard shortcuts
+- Comments
+- Reactions
+
 # ✂️ Few Screenshots
 
 |  <img src="src/assets/images/1.png"> | <img src="src/assets/images/2.png">  |
diff --git a/css/style.css b/css/style.css
index ad2fe6e..30593b6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -923,4 +923,38 @@ a{
 
 .product-hunt-image{
     box-shadow: var(--box-shadow-prime);
+}
+.short-cuts-wrap{
+    padding-top: 20px;
+}
+
+
+.key-code{
+    background-color: var(--secondary-background);
+    color: var(--secondary-color);
+    padding: 3px;
+    font-size: 15px;
+    height: 30px;
+    min-width: 30px;
+    display: flex;
+    font-weight: 900;
+    border-radius: 5px;
+}
+
+.key-title{
+    color: var(--secondary-color);
+    margin-left: 10px;
+    font-size: 13px;
+}
+
+.keyboard-shortcut-item{
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.keyboard-shortcut-item:hover .key-code{
+    color: var(--highlight);
+    transform: scale(1.1);
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 4766d79..0f9ab5b 100644
--- a/index.html
+++ b/index.html
@@ -135,6 +135,29 @@ <h6>Language</h6>
                     <option>Loading List..</option>
                 </select>
             </div>
+
+            <div class="option-item">
+                <h6>Keyboard Shortcuts</h6>
+                <span>Increase your productivity with Keyboard shortcuts!</span>
+                <div class="keyboard-btn">
+                    <div class="ui-button">
+                        <h1>View shortcuts</h1>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="overlay center action-hide keyboard-overlay">
+        <div class="overlay-inner quick-jump-wrap action-x">
+            <header>
+                <h1>Keyboard Shortcuts</h1>
+            </header>
+            <div class="short-cuts-wrap">
+                <div class="short-cut-overflow-wrap">
+                    <table class="short-cuts-table"></table>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -151,6 +174,8 @@ <h6>Language</h6>
 <script src="js/app.ui.js"></script>
 
 <script src="js/index.js"></script>
+<script src="src/libs/hotkeysjs/hotekeys.min.js"></script>
+<script src="js/keyboard.js"></script>
 <script>
     // Searchbar Outside Click Fix
     $(document).click(function(event) { 
diff --git a/js/app.js b/js/app.js
index c3303d1..d8751cf 100644
--- a/js/app.js
+++ b/js/app.js
@@ -26,8 +26,7 @@ var wikiPage = {
 
         wiki.getSummary(xtitle).then((data) => {
 
-            
-            console.log(data);
+
             var data = data.data;
 
             AppComponents.introWrap.html(`
diff --git a/js/app.ui.js b/js/app.ui.js
index 6f9e757..6d3b483 100644
--- a/js/app.ui.js
+++ b/js/app.ui.js
@@ -23,6 +23,7 @@ const appUI = {
         indexSearchBar: $(".index-search-bar")
     },
 
+
     OverlayHide: function () {
         $('.action-hide').fadeOut();
         try {
@@ -150,6 +151,8 @@ const appUI = {
         this.setBookMarkState(title);
     },
 
+
+
     setBookMarkState: function (title) {
         var bookMark = localStorage.getItem("bookmarks") || JSON.stringify([]);
         var ParsedbookMark = JSON.parse(bookMark);
@@ -193,6 +196,10 @@ const appUI = {
         }
     },
 
+    OpenDownloadPopup: function () {
+        appUI.Elements.downloadOverlay.fadeIn().css('display', 'flex');
+    }
+
 }
 
 appUI.Elements.searchInput.on("input", (thisx) => {
@@ -213,6 +220,9 @@ $(document).keydown(function (e) {
     else if (e.which === 27) {
         appUI.OverlayHide();
     }
+    else if (e.which === 75) {
+        $(".keyboard-overlay").fadeIn().css("display","flex");
+    }
 });
 
 appUI.Elements.downloadGo.on("click", function () {
@@ -301,4 +311,5 @@ appUI.Elements.infoboxClose.on("click", function () {
 
 appUI.Elements.menuOpen.on("click", appUI.menuToggle)
 
-Theme.setTheme()
\ No newline at end of file
+Theme.setTheme()
+
diff --git a/js/keyboard.js b/js/keyboard.js
new file mode 100644
index 0000000..143eee6
--- /dev/null
+++ b/js/keyboard.js
@@ -0,0 +1,88 @@
+const keyPairs = {
+    keys :{
+        "b": {
+            selector: '[class="option-icon bookmark-btn"]',
+            description: "Bookmark article",
+            key: "b"
+        },
+        "d":{
+            selector:  ".download-button",
+            description: "Download the article",
+            key: "d"
+        },
+        "e": {
+            selector: ".edit-link",
+            description: "Edit page on Wikipedia",
+            key: "e"
+        },
+        "h": {
+            selector: ".goHomeBtn",
+            description: "Open home in new tab",
+            key: "h"
+        },
+        "p": {
+            selector: ".download-button",
+            description: "Download the article",
+            key: "p"
+        },
+        "s": {
+            selector: ".share-go-btn",
+            description: "Share articles",
+            key: "s"
+        },
+        "q": {
+            selector: ".quick-jump-btn",
+            description: "Quick Jump",
+            key: "q"
+        },
+        "w": {
+            selector: ".wiki-link",
+            description: "Open in Wikipedia",
+            key: "w"
+        },
+        "k": {
+            selector: ".keyboard-btn",
+            description: "Keyboard Shortcuts",
+            key: "k"
+        },
+        "esc": {
+            selector: "",
+            description: "Close pop-ups",
+            key: "esc"
+        },
+    },
+    links: ["e", "w", "h"]
+}
+
+
+$(document).ready(function() {
+
+    hotkeys('b,s,p,w,q,e,d,h', function (event, handler){
+
+        if(keyPairs.links.includes(handler.key)){
+            window.open($(keyPairs.keys[handler.key].selector).attr("href"))
+            return; 
+        }
+
+        $(keyPairs.keys[handler.key].selector).trigger("click");
+    });
+
+    var shortCutItems = Object.values(keyPairs.keys).map(item => `
+        <tr class="keyboard-shortcut-item">
+            <td>
+                <code class="key-code center">
+                    ${item.key}
+                </code>
+            </td>
+            <td>
+                <h6 class="key-title">${item.description}</h6>
+            </td>
+        </tr>
+    `)
+
+    $(".short-cuts-table").html(shortCutItems.join(""))
+});
+
+$(".keyboard-btn").click(function(){
+    $(".keyboard-overlay").fadeIn().css("display","flex");
+})
diff --git a/src/libs/hotkeysjs/hotekeys.min.js b/src/libs/hotkeysjs/hotekeys.min.js
new file mode 100644
index 0000000..4453fe2
--- /dev/null
+++ b/src/libs/hotkeysjs/hotekeys.min.js
@@ -0,0 +1,2 @@
+/*! hotkeys-js v3.8.7 | MIT (c) 2021 kenny wong <wowohoo@qq.com> | http://jaywcjlove.github.io/hotkeys */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).hotkeys=t()}(this,function(){"use strict";var e="undefined"!=typeof navigator&&0<navigator.userAgent.toLowerCase().indexOf("firefox");function u(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on".concat(t),function(){n(window.event)})}function p(e,t){for(var n=t.slice(0,t.length-1),o=0;o<n.length;o++)n[o]=e[n[o].toLowerCase()];return n}function d(e){for(var t=(e=(e="string"!=typeof e?"":e).replace(/\s/g,"")).split(","),n=t.lastIndexOf("");0<=n;)t[n-1]+=",",t.splice(n,1),n=t.lastIndexOf("");return t}for(var t={backspace:8,tab:9,clear:12,enter:13,return:13,esc:27,escape:27,space:32,left:37,up:38,right:39,down:40,del:46,delete:46,ins:45,insert:45,home:36,end:35,pageup:33,pagedown:34,capslock:20,num_0:96,num_1:97,num_2:98,num_3:99,num_4:100,num_5:101,num_6:102,num_7:103,num_8:104,num_9:105,num_multiply:106,num_add:107,num_enter:108,num_subtract:109,num_decimal:110,num_divide:111,"\u21ea":20,",":188,".":190,"/":191,"`":192,"-":e?173:189,"=":e?61:187,";":e?59:186,"'":222,"[":219,"]":221,"\\":220},y={"\u21e7":16,shift:16,"\u2325":18,alt:18,option:18,"\u2303":17,ctrl:17,control:17,"\u2318":91,cmd:91,command:91},h={16:"shiftKey",18:"altKey",17:"ctrlKey",91:"metaKey",shiftKey:16,ctrlKey:17,altKey:18,metaKey:91},m={16:!1,18:!1,17:!1,91:!1},g={},n=1;n<20;n++)t["f".concat(n)]=111+n;var v=[],o="all",w=[],k=function(e){return t[e.toLowerCase()]||y[e.toLowerCase()]||e.toUpperCase().charCodeAt(0)};function r(e){o=e||"all"}function O(){return o||"all"}function f(e){var i=e.scope,r=e.method,t=e.splitKey,f=void 0===t?"+":t;d(e.key).forEach(function(e){var t,n=e.split(f),o=n.length,e=n[o-1],e="*"===e?"*":k(e);g[e]&&(i=i||O(),t=1<o?p(y,n):[],g[e]=g[e].map(function(e){return r&&e.method!==r||e.scope!==i||!function(e,t){for(var n=e.length<t.length?t:e,o=e.length<t.length?e:t,i=!0,r=0;r<n.length;r++)~o.indexOf(n[r])||(i=!1);return i}(e.mods,t)?e:{}}))})}function K(e,t,n){var o;if(t.scope===n||"all"===t.scope){for(var i in o=0<t.mods.length,m)Object.prototype.hasOwnProperty.call(m,i)&&(!m[i]&&~t.mods.indexOf(+i)||m[i]&&!~t.mods.indexOf(+i))&&(o=!1);(0!==t.mods.length||m[16]||m[18]||m[17]||m[91])&&!o&&"*"!==t.shortcut||!1===t.method(e,t)&&(e.preventDefault?e.preventDefault():e.returnValue=!1,e.stopPropagation&&e.stopPropagation(),e.cancelBubble&&(e.cancelBubble=!0))}}function b(n){var e=g["*"],t=n.keyCode||n.which||n.charCode;if(x.filter.call(this,n)){if(~v.indexOf(t=93===t||224===t?91:t)||229===t||v.push(t),["ctrlKey","altKey","shiftKey","metaKey"].forEach(function(e){var t=h[e];n[e]&&!~v.indexOf(t)?v.push(t):!n[e]&&~v.indexOf(t)?v.splice(v.indexOf(t),1):"metaKey"===e&&n[e]&&3===v.length&&(n.ctrlKey||n.shiftKey||n.altKey||(v=v.slice(v.indexOf(t))))}),t in m){for(var o in m[t]=!0,y)y[o]===t&&(x[o]=!0);if(!e)return}for(var i in m)Object.prototype.hasOwnProperty.call(m,i)&&(m[i]=n[h[i]]);n.getModifierState&&(!n.altKey||n.ctrlKey)&&n.getModifierState("AltGraph")&&(~v.indexOf(17)||v.push(17),~v.indexOf(18)||v.push(18),m[17]=!0,m[18]=!0);var r=O();if(e)for(var f=0;f<e.length;f++)e[f].scope===r&&("keydown"===n.type&&e[f].keydown||"keyup"===n.type&&e[f].keyup)&&K(n,e[f],r);if(t in g)for(var a=0;a<g[t].length;a++)if(("keydown"===n.type&&g[t][a].keydown||"keyup"===n.type&&g[t][a].keyup)&&g[t][a].key){for(var c=g[t][a],l=c.key.split(c.splitKey),s=[],u=0;u<l.length;u++)s.push(k(l[u]));s.sort().join("")===v.sort().join("")&&K(n,c,r)}}}function x(e,t,n){v=[];var o=d(e),i=[],r="all",f=document,a=0,c=!1,l=!0,s="+";for(void 0===n&&"function"==typeof t&&(n=t),"[object Object]"===Object.prototype.toString.call(t)&&(t.scope&&(r=t.scope),t.element&&(f=t.element),t.keyup&&(c=t.keyup),void 0!==t.keydown&&(l=t.keydown),"string"==typeof t.splitKey&&(s=t.splitKey)),"string"==typeof t&&(r=t);a<o.length;a++)i=[],1<(e=o[a].split(s)).length&&(i=p(y,e)),(e="*"===(e=e[e.length-1])?"*":k(e))in g||(g[e]=[]),g[e].push({keyup:c,keydown:l,scope:r,mods:i,shortcut:o[a],method:n,key:o[a],splitKey:s});void 0!==f&&(t=f,!~w.indexOf(t))&&window&&(w.push(f),u(f,"keydown",function(e){b(e)}),u(window,"focus",function(){v=[]}),u(f,"keyup",function(e){b(e),function(e){var t=e.keyCode||e.which||e.charCode,n=v.indexOf(t);if(n<0||v.splice(n,1),e.key&&"meta"==e.key.toLowerCase()&&v.splice(0,v.length),(t=93===t||224===t?91:t)in m)for(var o in m[t]=!1,y)y[o]===t&&(x[o]=!1)}(e)}))}var i,a,c={setScope:r,getScope:O,deleteScope:function(e,t){var n,o,i;for(i in e=e||O(),g)if(Object.prototype.hasOwnProperty.call(g,i))for(n=g[i],o=0;o<n.length;)n[o].scope===e?n.splice(o,1):o++;O()===e&&r(t||"all")},getPressedKeyCodes:function(){return v.slice(0)},isPressed:function(e){return"string"==typeof e&&(e=k(e)),!!~v.indexOf(e)},filter:function(e){var t=e.target||e.srcElement,e=t.tagName;return!t.isContentEditable&&("INPUT"!==e&&"TEXTAREA"!==e&&"SELECT"!==e||t.readOnly)?!0:!1},unbind:function(e){if(e){if(Array.isArray(e))e.forEach(function(e){e.key&&f(e)});else if("object"==typeof e)e.key&&f(e);else if("string"==typeof e){for(var t=arguments.length,n=Array(1<t?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var i=n[0],r=n[1];"function"==typeof i&&(r=i,i=""),f({key:e,scope:i,method:r,splitKey:"+"})}}else Object.keys(g).forEach(function(e){return delete g[e]})}};for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(x[i]=c[i]);return"undefined"!=typeof window&&(a=window.hotkeys,x.noConflict=function(e){return e&&window.hotkeys===x&&(window.hotkeys=a),x},window.hotkeys=x),x});
\ No newline at end of file
diff --git a/wiki.html b/wiki.html
index 03f9fbd..311fe2f 100644
--- a/wiki.html
+++ b/wiki.html
@@ -48,7 +48,7 @@
             <div class="header-inner v-center">
                 <div class="header-input v-center">
                     <div class="header-logo center">
-                        <a href="/">
+                        <a class="goHomeBtn" href="/">
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206 215" class="svg-logo"
                                 fill-rule="evenodd" clip-rule="evenodd" shape-rendering="geometricPrecision"
                                 text-rendering="geometricPrecision" image-rendering="optimizeQuality">
@@ -139,7 +139,19 @@ <h1>Download</h1>
                 </div>
             </div>
         </div>
-
+        <div class="keyboard-btn" style="display: none;"></div>
+        <div class="overlay center action-hide keyboard-overlay">
+            <div class="overlay-inner quick-jump-wrap action-x">
+                <header>
+                    <h1>Keyboard Shortcuts</h1>
+                </header>
+                <div class="short-cuts-wrap">
+                    <div class="short-cut-overflow-wrap">
+                        <table class="short-cuts-table"></table>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="overlay center overlay-share action-hide">
             <div class="overlay-inner center action-x">
                 <div class="center search-preview">
@@ -251,6 +263,7 @@ <h1>Download Article</h1>
 <script src="src/libs/wikifox/wikifox.js"></script>
 <script src="js/share.js"></script>
 <script src="js/themes.js"></script>
+<script src="src/libs/hotkeysjs/hotekeys.min.js"></script>
 
 <!--ShareTHis-->
 
@@ -264,5 +277,6 @@ <h1>Download Article</h1>
 <!-- Scripts -->
 <script src="js/app.js"></script>
 <script src="js/app.ui.js"></script>
+<script src="js/keyboard.js"></script>
 
 </html>
\ No newline at end of file