Switch information overlay to key-based toggle.

This switches the overlay to a key based system where it uses the toggle keys to open the correct modals.
skapil · Feb 10, 2017 · 1a28564 · 1a28564
1 parent 2ef8e42
commit 1a28564
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
@@ -330,7 +330,7 @@ $(function () {
 
     $(".informational-overlays").click(function (e) {
         if ($(e.target).is(".informational-overlays, [data-dismiss]")) {
-            $(this).removeClass("show");
+            ui.hide_info_overlay();
         }
     });
 

diff --git a/static/js/ui.js b/static/js/ui.js
@@ -285,13 +285,14 @@ $(document).ready(function () {
         name: "info-overlay-toggle",
         selected: 0,
         values: [
-            { label: "Keyboard Shortcuts" },
-            { label: "Message Formatting" },
-            { label: "Search Help" },
+            { label: "Keyboard shortcuts", key: "keyboard-shortcuts" },
+            { label: "Message formatting", key: "markdown-help" },
+            { label: "Search operators", key: "search-operators" },
         ],
-        callback: function () {
-
-        }
+        callback: function (name, key) {
+            $(".overlay-modal").hide();
+            $("#" + key).show();
+        },
     }).get();
 
     $(".informational-overlays .overlay-tabs")
@@ -300,24 +301,20 @@ $(document).ready(function () {
 
 exports.show_info_overlay = function (target) {
     var el = {
-        tabs: $(".informational-overlays .tab"),
-        modals: $(".informational-overlays .overlay-modal"),
         overlay: $(".informational-overlays"),
     };
 
     if (!el.overlay.hasClass("show")) {
         $(el.overlay).addClass("show");
     }
 
-    el.tabs.removeClass("active");
-    el.modals.hide();
-
-    $(".informational-overlays .tab[data-overlay-trigger='" + target + "']").addClass("active");
-    $("#" + target).show();
+    if (target) {
+        components.toggle.lookup("info-overlay-toggle").goto(target);
+    }
 };
 
 exports.hide_info_overlay = function () {
-    $(".informational-overlays").click();
+    $(".informational-overlays").removeClass("show");
 };
 
 exports.lightbox_photo = function (image, user) {