Improve hotkey framework by making own file & register function.

frontends/etiquette_flask/static/js/common.js

@@ -121,15 +121,3 @@ function html_to_element(html)
     template.innerHTML = html;
     return template.content.firstChild;
 }
-
-function should_prevent_hotkey(event)
-{
-    if (event.target.tagName == "INPUT" && event.target.type == "checkbox")
-    {
-        return false;
-    }
-    else
-    {
-        return INPUT_TYPES.has(event.target.tagName);
-    }
-}

frontends/etiquette_flask/static/js/hotkeys.js

@@ -0,0 +1,69 @@
+HOTKEYS = {};
+
+function hotkey_identifier(key, ctrlKey, shiftKey, altKey)
+{
+    // Return the string that will represent this hotkey in the dictionary.
+    return key.toLowerCase() + "." + (ctrlKey & 1) + "." + (shiftKey & 1) + "." + (altKey & 1);
+}
+
+function hotkey_human(key, ctrlKey, shiftKey, altKey)
+{
+    // Return the string that will be displayed to the user to represent this hotkey.
+    mods = [];
+    if (ctrlKey) { mods.push("Ctrl"); }
+    if (shiftKey) { mods.push("Shift"); }
+    if (altKey) { mods.push("Alt"); }
+    mods = mods.join("+");
+    if (mods) { mods = mods + "+"; }
+    return mods + key.toUpperCase();
+}
+
+function register_hotkey(key, ctrlKey, shiftKey, altKey, action, description)
+{
+    identifier = hotkey_identifier(key, ctrlKey, shiftKey, altKey);
+    human = hotkey_human(key, ctrlKey, shiftKey, altKey);
+    HOTKEYS[identifier] = {"action": action, "human": human, "description": description}
+}
+
+function should_prevent_hotkey(event)
+{
+    if (event.target.tagName == "INPUT" && event.target.type == "checkbox")
+    {
+        return false;
+    }
+    else
+    {
+        return INPUT_TYPES.has(event.target.tagName);
+    }
+}
+
+function show_all_keybinds()
+{
+    // Display an Alert with a list of all the keybinds.
+    var lines = [];
+    for (var identifier in HOTKEYS)
+    {
+        var line = HOTKEYS[identifier]["human"] + " :  " + HOTKEYS[identifier]["description"];
+        lines.push(line);
+    }
+    lines = lines.join("\n");
+    alert(lines);
+}
+
+
+window.addEventListener(
+    "keydown",
+    function(event)
+    {
+        if (should_prevent_hotkey(event)) { return; }
+        identifier = hotkey_identifier(event.key, event.ctrlKey, event.shiftKey, event.altKey);
+        console.log(identifier);
+        if (identifier in HOTKEYS)
+        {
+            HOTKEYS[identifier]["action"]();
+            event.preventDefault();
+        }
+    }
+);
+
+register_hotkey("/", 0, 0, 0, show_all_keybinds, "Show keybinds.");

frontends/etiquette_flask/static/js/photoclipboard.js

@@ -260,65 +260,6 @@ function open_full_clipboard_tab()
     window.open(url, "full_clipboard");
 }
 
-function set_keybinds()
-{
-    // HOTKEY: Photoclipboard select all
-    window.addEventListener(
-        "keydown",
-        function(event)
-        {
-            if (should_prevent_hotkey(event)) { return; }
-            if (event.key == "a" && event.ctrlKey && !event.shiftKey && !event.altKey)
-            {
-                select_all_photos();
-                event.preventDefault();
-            }
-        }
-    );
-
-    // HOTKEY: Photoclipboard deselect all
-    window.addEventListener(
-        "keydown",
-        function(event)
-        {
-            if (should_prevent_hotkey(event)) { return; }
-            if (event.key == "d" && event.ctrlKey && !event.shiftKey && !event.altKey)
-            {
-                unselect_all_photos();
-                event.preventDefault();
-            }
-        }
-    );
-
-    // HOTKEY: Photoclipboard toggle
-    window.addEventListener(
-        "keydown",
-        function(event)
-        {
-            if (should_prevent_hotkey(event)) { return; }
-            if (event.key == "c" && !event.ctrlKey && !event.shiftKey && !event.altKey)
-            {
-                clipboard_tray_collapse_toggle();
-                event.preventDefault();
-            }
-        }
-    );
-
-    // HOTKEY: Photoclipboard open full clipboard tab
-    window.addEventListener(
-        "keydown",
-        function(event)
-        {
-            if (should_prevent_hotkey(event)) { return; }
-            if (event.key == "x" && event.altKey && !event.ctrlKey && !event.shiftKey)
-            {
-                open_full_clipboard_tab();
-                event.preventDefault();
-            }
-        }
-    );
-}
-
 function update_clipboard_count()
 {
     var elements = document.getElementsByClassName("clipboard_count");
@@ -327,7 +268,7 @@ function update_clipboard_count()
         elements[index].innerText = photo_clipboard.size;
     }
 }
-function on_storage()
+function on_storage_event()
 {
     /*
     Receive storage events from other tabs and update our state to match.
@@ -335,16 +276,21 @@ function on_storage()
     load_photo_clipboard();
     update_pagestate();
 }
+
 function update_pagestate()
 {
     update_clipboard_count();
     update_clipboard_tray();
     apply_check_all();
 }
+
 function on_pageload()
 {
-    window.addEventListener("storage", on_storage, false);
-    set_keybinds();
+    window.addEventListener("storage", on_storage_event, false);
+    register_hotkey("a", 1, 0, 0, select_all_photos, "Select all photos.");
+    register_hotkey("d", 1, 0, 0, unselect_all_photos, "Deselect all photos.");
+    register_hotkey("c", 0, 0, 0, clipboard_tray_collapse_toggle, "Toggle clipboard tray.");
+    register_hotkey("c", 0, 1, 0, open_full_clipboard_tab, "Open full clipboard page.");
     load_photo_clipboard();
     update_pagestate();
 }

frontends/etiquette_flask/templates/album.html

@@ -13,6 +13,7 @@
     <script src="/static/js/common.js"></script>
     <script src="/static/js/albums.js"></script>
     <script src="/static/js/editor.js"></script>
+    <script src="/static/js/hotkeys.js"></script>
     <script src="/static/js/photoclipboard.js"></script>
 
 <style>

frontends/etiquette_flask/templates/clipboard.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="/static/css/photo_card.css">
     <link rel="stylesheet" href="/static/css/clipboard_tray.css">
     <script src="/static/js/common.js"></script>
+    <script src="/static/js/hotkeys.js"></script>
     <script src="/static/js/photoclipboard.js"></script>
 
 <style>

frontends/etiquette_flask/templates/search.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="/static/css/photo_card.css">
     <link rel="stylesheet" href="/static/css/clipboard_tray.css">
     <script src="/static/js/common.js"></script>
+    <script src="/static/js/hotkeys.js"></script>
     <script src="/static/js/photoclipboard.js"></script>
 
 <style>