Rewrite dropdown menu

3 files changed, 49 insertions, 7 deletions

diff --git a/assets/js/src/App.js b/assets/js/src/App.js
index 2c3d10a7..0fc96a6a 100644
--- a/assets/js/src/App.js
+++ b/assets/js/src/App.js
@@ -1,10 +1,11 @@
 function App() {
-    this.popover = new Popover(this);
     this.markdown = new Markdown();
     this.sidebar = new Sidebar();
     this.search = new Search();
-    this.tooltip = new Tooltip(this);
     this.swimlane = new Swimlane();
+    this.dropdown = new Dropdown();
+    this.tooltip = new Tooltip(this);
+    this.popover = new Popover(this);
     this.keyboardShortcuts();
     this.boardSelector();
     this.listen();
@@ -33,15 +34,12 @@ App.prototype.listen = function() {
     this.markdown.listen();
     this.sidebar.listen();
     this.tooltip.listen();
+    this.dropdown.listen();
     this.search.listen();
     this.search.focus();
     this.taskAutoComplete();
     this.datePicker();
     this.focus();
-
-    // Dropdown
-    $(".dropit-submenu").hide();
-    $('.dropdown').not(".dropit").dropit({ triggerParentEl : "span" });
 };
 
 App.prototype.focus = function() {
@@ -67,6 +65,8 @@ App.prototype.poll = function() {
 };
 
 App.prototype.keyboardShortcuts = function() {
+    var self = this;
+
     // Submit form
     Mousetrap.bindGlobal("mod+enter", function() {
         $("form").submit();
@@ -77,6 +77,12 @@ App.prototype.keyboardShortcuts = function() {
         e.preventDefault();
         $('#board-selector').trigger('chosen:open');
     });
+
+    // Close popover and dropdown
+    Mousetrap.bindGlobal("esc", function() {
+        self.popover.close();
+        self.dropdown.close();
+    });
 };
 
 App.prototype.checkSession = function() {
diff --git a/assets/js/src/Dropdown.js b/assets/js/src/Dropdown.js
new file mode 100644
index 00000000..2390fd9f
--- /dev/null
+++ b/assets/js/src/Dropdown.js
@@ -0,0 +1,36 @@
+function Dropdown() {
+}
+
+Dropdown.prototype.listen = function() {
+    var self = this;
+
+    $(document).on('click', function() {
+        self.close();
+    });
+
+    $(document).on('click', '.dropdown-menu', function(e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        var submenu = $(this).next('ul');
+        var submenuHeight = 240;
+
+        if (! submenu.is(':visible')) {
+            self.close();
+
+            if ($(this).offset().top + submenuHeight > $(window).height()) {
+                submenu.addClass('dropdown-submenu-open dropdown-submenu-top');
+            }
+            else {
+                submenu.addClass('dropdown-submenu-open');
+            }
+        }
+        else {
+            self.close();
+        }
+    });
+};
+
+Dropdown.prototype.close = function() {
+    $('.dropdown-submenu-open').removeClass('dropdown-submenu-open');
+};
diff --git a/assets/js/src/Popover.js b/assets/js/src/Popover.js
index 217ae55e..2fd951b4 100644
--- a/assets/js/src/Popover.js
+++ b/assets/js/src/Popover.js
@@ -2,7 +2,6 @@ function Popover(app) {
     this.app = app;
     this.router = new Router();
     this.router.addRoute('screenshot-zone', Screenshot);
-    Mousetrap.bindGlobal("esc", this.close);
 }
 
 Popover.prototype.isOpen = function() {
@@ -11,6 +10,7 @@ Popover.prototype.isOpen = function() {
 
 Popover.prototype.open = function(link) {
     var self = this;
+    self.app.dropdown.close();
 
     $.get(link, function(content) {
         $("body").append('<div id="popover-container"><div id="popover-content">' + content + '</div></div>');