zendesk
diff --git a/‎manifest.json
Lines changed: 2 additions & 2 deletions b/‎manifest.json
Lines changed: 2 additions & 2 deletions
diff --git a/‎script.js
Lines changed: 185 additions & 9 deletions b/‎script.js
Lines changed: 185 additions & 9 deletions
@@ -1,8 +1,8 @@
 {
   "name": "Copenhagen",
   "author": "Zendesk",
-  "version": "1.14.4",
-  "api_version": 1,
+  "version": "2.0.0",
+  "api_version": 2,
   "default_locale": "en-us",
   "settings": [{
     "label": "colors_group_label",
 
@@ -1,4 +1,12 @@
 document.addEventListener('DOMContentLoaded', function() {
+  // Key map
+  var ENTER = 13;
+  var ESCAPE = 27;
+  var SPACE = 32;
+  var UP = 38;
+  var DOWN = 40;
+  var TAB = 9;
+
   function closest (element, selector) {
     if (Element.prototype.closest) {
       return element.closest(selector);
@@ -72,7 +80,7 @@ document.addEventListener('DOMContentLoaded', function() {
     requestCommentSubmitButton = document.querySelector('.request-container .comment-container input[type=submit]');
 
   if (requestMarkAsSolvedButton) {
-    requestMarkAsSolvedButton.addEventListener('click', function () {
+    requestMarkAsSolvedButton.addEventListener('click', function() {
       requestMarkAsSolvedCheckbox.setAttribute('checked', true);
       requestCommentSubmitButton.disabled = true;
       this.setAttribute('data-disabled', true);
@@ -117,7 +125,7 @@ document.addEventListener('DOMContentLoaded', function() {
   // Submit requests filter form on search in the request list page
   var quickSearch = document.querySelector('#quick-search');
   quickSearch && quickSearch.addEventListener('keyup', function(e) {
-    if (e.keyCode === 13) { // Enter key
+    if (e.keyCode === ENTER) {
       e.stopPropagation();
       saveFocus();
       closest(this, 'form').submit();
@@ -146,7 +154,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
 
   userMenu.addEventListener('keyup', function(e) {
-    if (e.keyCode === 27) { // Escape key
+    if (e.keyCode === ESCAPE) {
       e.stopPropagation();
       closeNavigation(burgerMenu, this);
     }
@@ -167,7 +175,7 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     el.addEventListener('keyup', function(e) {
-      if (e.keyCode === 27) { // Escape key
+      if (e.keyCode === ESCAPE) {
         closeNavigation(toggle, this);
       }
     });
@@ -183,8 +191,8 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   // If a section has more than 6 subsections, we collapse the list, and show a trigger to display them all
-  const seeAllTrigger = document.querySelector("#see-all-sections-trigger");
-  const subsectionsList = document.querySelector(".section-list");
+  var seeAllTrigger = document.querySelector("#see-all-sections-trigger");
+  var subsectionsList = document.querySelector(".section-list");
 
   if (subsectionsList && subsectionsList.children.length > 6) {
     seeAllTrigger.setAttribute("aria-hidden", false);
@@ -196,7 +204,7 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   // If multibrand search has more than 5 help centers or categories collapse the list
-  const multibrandFilterLists = document.querySelectorAll(".multibrand-filter-list");
+  var multibrandFilterLists = document.querySelectorAll(".multibrand-filter-list");
   Array.prototype.forEach.call(multibrandFilterLists, function(filter) {
     if (filter.children.length > 6) {
       // Display the show more button
@@ -213,12 +221,180 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   // If there are any error notifications below an input field, focus that field
-  const notificationElm = document.querySelector(".notification-error");
+  var notificationElm = document.querySelector(".notification-error");
   if (
     notificationElm &&
     notificationElm.previousElementSibling &&
     typeof notificationElm.previousElementSibling.focus === "function"
   ) {
     notificationElm.previousElementSibling.focus();
   }
-});
+
+  // Dropdowns
+  
+  function Dropdown(toggle, menu) {
+    this.toggle = toggle;
+    this.menu = menu;
+
+    this.menuPlacement = {
+      top: menu.classList.contains("dropdown-menu-top"),
+      end: menu.classList.contains("dropdown-menu-end")
+    };
+
+    this.toggle.addEventListener("click", this.clickHandler.bind(this));
+    this.toggle.addEventListener("keydown", this.toggleKeyHandler.bind(this));
+    this.menu.addEventListener("keydown", this.menuKeyHandler.bind(this));
+  };
+
+  Dropdown.prototype = {
+
+    get isExpanded() {
+      return this.menu.getAttribute("aria-expanded") === "true";
+    },
+
+    get menuItems() {
+      return Array.prototype.slice.call(this.menu.querySelectorAll("[role='menuitem']"));
+    },
+
+    dismiss: function() {
+      if (!this.isExpanded) return;
+
+      this.menu.setAttribute("aria-expanded", false);
+      this.menu.classList.remove("dropdown-menu-end", "dropdown-menu-top");
+    },
+
+    open: function() {
+      if (this.isExpanded) return;
+
+      this.menu.setAttribute("aria-expanded", true);
+      this.handleOverflow();
+    },
+
+    handleOverflow: function() {
+      var rect = this.menu.getBoundingClientRect();
+
+      var overflow = {
+        right: rect.left < 0 || rect.left + rect.width > window.innerWidth,
+        bottom: rect.top < 0 || rect.top + rect.height > window.innerHeight
+      };
+
+      if (overflow.right || this.menuPlacement.end) {
+        this.menu.classList.add("dropdown-menu-end");
+      }
+
+      if (overflow.bottom || this.menuPlacement.top) {
+        this.menu.classList.add("dropdown-menu-top");
+      }
+
+      if (this.menu.getBoundingClientRect().top < 0) {
+        this.menu.classList.remove("dropdown-menu-top")
+      }
+    },
+
+    focusNextMenuItem: function(currentItem) {
+      if (!this.menuItems.length) return;
+
+      var currentIndex = this.menuItems.indexOf(currentItem);
+      var nextIndex = currentIndex === this.menuItems.length - 1 || currentIndex < 0 ? 0 : currentIndex + 1;
+
+      this.menuItems[nextIndex].focus();
+    },
+
+    focusPreviousMenuItem: function(currentItem) {
+      if (!this.menuItems.length) return;
+
+      var currentIndex = this.menuItems.indexOf(currentItem);
+      var previousIndex = currentIndex <= 0 ? this.menuItems.length - 1 : currentIndex - 1;
+
+      this.menuItems[previousIndex].focus();
+    },
+
+    clickHandler: function() {
+      if (this.isExpanded) {
+        this.dismiss();
+      } else {
+        this.open();
+      }
+    },
+
+    toggleKeyHandler: function(e) {
+      switch (e.keyCode) {
+        case ENTER:
+        case SPACE:
+        case DOWN:
+          e.preventDefault();
+          this.open();
+          this.focusNextMenuItem();
+          break;
+        case UP:
+          e.preventDefault();
+          this.open();
+          this.focusPreviousMenuItem();
+          break;
+        case ESCAPE:
+          this.dismiss();
+          this.toggle.focus();
+          break;
+      }
+    },
+
+    menuKeyHandler: function(e) {
+      var firstItem = this.menuItems[0];
+      var lastItem = this.menuItems[this.menuItems.length - 1];
+      var currentElement = e.target;
+
+      switch (e.keyCode) {
+        case ESCAPE:
+          this.dismiss();
+          this.toggle.focus();
+          break;
+        case DOWN:
+          e.preventDefault();
+          this.focusNextMenuItem(currentElement);
+          break;
+        case UP:
+          e.preventDefault();
+          this.focusPreviousMenuItem(currentElement);
+          break;
+        case TAB:
+          if (e.shiftKey) {
+            if (currentElement === firstItem) {
+              this.dismiss();
+            } else {
+              e.preventDefault();
+              this.focusPreviousMenuItem(currentElement);
+            }
+          } else if (currentElement === lastItem) {
+            this.dismiss();
+          } else {
+            e.preventDefault();
+            this.focusNextMenuItem(currentElement);
+          }
+          break;
+        case ENTER:
+        case SPACE:
+          e.preventDefault();
+          currentElement.click();
+          break;
+      }
+    }
+  }
+
+  var dropdowns = [];
+  var dropdownToggles = Array.prototype.slice.call(document.querySelectorAll(".dropdown-toggle"));
+
+  dropdownToggles.forEach(function(toggle) {
+    var menu = toggle.nextElementSibling;
+    if (menu && menu.classList.contains("dropdown-menu")) {
+      dropdowns.push(new Dropdown(toggle, menu));
+    }
+  });
+
+  document.addEventListener("click", function(evt) {
+    dropdowns.forEach(function(dropdown) {
+      if (!dropdown.toggle.contains(evt.target)) {
+        dropdown.dismiss();
+      }
+    });
+  });
+});