Added Shortcuts, Shortcut menu!

Wikifox · Jan 15, 2022 · 05eac31 · 05eac31
1 parent 0c8479b
commit 05eac31
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 5 deletions.
diff --git 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
@@ -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);
 }
diff --git 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
@@ -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
@@ -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()
+Theme.setTheme()
+
diff --git a/js/keyboard.js 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
diff --git 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>