Skip to content

Commit

Permalink
Merge pull request #187 from zendesk/api_v2
Browse files Browse the repository at this point in the history 
Copenhagen Theme v2
  • Loading branch information
Sebastian Vilhelm Nielsen authored Feb 24, 2020
2 parents 12d2e5b + 319b75a commit d398a51
Show file tree
Hide file tree
Showing 51 changed files with 1,936 additions and 978 deletions.
4 changes: 2 additions & 2 deletions manifest.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
194 changes: 185 additions & 9 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
}
Expand All @@ -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);
}
});
Expand All @@ -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);
Expand All @@ -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
Expand All @@ -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();
}
});
});
});
Loading

0 comments on commit d398a51

Please sign in to comment.