Skip to content
Permalink
Browse files

Fix #74

  • Loading branch information...
josephting committed Nov 15, 2018
1 parent a0da496 commit a6d871e4eeeb86c9382e514ef48b85698938ef46
Showing with 186 additions and 1 deletion.
  1. +1 −0 layouts/partials/footer.html
  2. +1 −1 layouts/partials/sidemenu.html
  3. +12 −0 static/css/blackburn.css
  4. +172 −0 static/js/menus.js
@@ -1,6 +1,7 @@
</div>
</div>
<script src="{{ .Site.BaseURL }}js/ui.js"></script>
<script src="{{ .Site.BaseURL }}js/menus.js"></script>

{{ partial "google_analytics.html" . }}
{{ partial "piwik_analytics.html" . }}
@@ -16,7 +16,7 @@
<ul class="pure-menu-children">
{{ range .Children }}
<li class="pure-menu-item">
<a href="{{ .URL }}">{{ .Name }}</a>
<a class="pure-menu-link" href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
@@ -47,6 +47,14 @@ article > footer {
overflow: hidden;
}

#menu {
overflow-y: visible;
}

#menu a {
padding: 0.6em;
}

#menu .brand {
font-family: Raleway;
font-weight: bold;
@@ -62,6 +70,10 @@ article > footer {
font-size: 0.9em;
}

#menu .pure-menu ul.pure-menu-children {
border-top: none;
}

i {
display: inline-block;
margin-right: 0.2em;
@@ -0,0 +1,172 @@
(function (window, document) {
'use strict';

// Enable drop-down menus in Pure
// Inspired by YUI3 gallery-simple-menu by Julien LeComte
// [https://github.com/yui/yui3-gallery/blob/master/src/gallery-simple-menu/js/simple-menu.js]

function PureDropdown(dropdownParent) {

var PREFIX = 'pure-',
ACTIVE_CLASS_NAME = PREFIX + 'menu-active',
ARIA_ROLE = 'role',
ARIA_HIDDEN = 'aria-hidden',
MENU_OPEN = 0,
MENU_CLOSED = 1,
MENU_PARENT_CLASS_NAME = 'pure-menu-has-children',
MENU_ACTIVE_SELECTOR = '.pure-menu-active',
MENU_LINK_SELECTOR = '.pure-menu-link',
MENU_SELECTOR = '.pure-menu-children',
DISMISS_EVENT = (window.hasOwnProperty &&
window.hasOwnProperty('ontouchstart')) ?
'touchstart' : 'mousedown',

ARROW_KEYS_ENABLED = true,

ddm = this; // drop down menu

this._state = MENU_CLOSED;

this.show = function () {
if (this._state !== MENU_OPEN) {
this._dropdownParent.classList.add(ACTIVE_CLASS_NAME);
this._menu.setAttribute(ARIA_HIDDEN, false);
this._state = MENU_OPEN;
}
};

this.hide = function () {
if (this._state !== MENU_CLOSED) {
this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME);
this._menu.setAttribute(ARIA_HIDDEN, true);
this._link.focus();
this._state = MENU_CLOSED;
}
};

this.toggle = function () {
this[this._state === MENU_CLOSED ? 'show' : 'hide']();
};

this.halt = function (e) {
e.stopPropagation();
e.preventDefault();
};

this._dropdownParent = dropdownParent;
this._link = this._dropdownParent.querySelector(MENU_LINK_SELECTOR);
this._menu = this._dropdownParent.querySelector(MENU_SELECTOR);
this._firstMenuLink = this._menu.querySelector(MENU_LINK_SELECTOR);

// Set ARIA attributes
this._link.setAttribute('aria-haspopup', 'true');
this._menu.setAttribute(ARIA_ROLE, 'menu');
this._menu.setAttribute('aria-labelledby', this._link.getAttribute('id'));
this._menu.setAttribute('aria-hidden', 'true');
[].forEach.call(
this._menu.querySelectorAll('li'),
function(el){
el.setAttribute(ARIA_ROLE, 'presentation');
}
);
[].forEach.call(
this._menu.querySelectorAll('a'),
function(el){
el.setAttribute(ARIA_ROLE, 'menuitem');
}
);

// Toggle on click
this._link.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
ddm.toggle();
});

// Keyboard navigation
document.addEventListener('keydown', function (e) {
var currentLink,
previousSibling,
nextSibling,
previousLink,
nextLink;

// if the menu isn't active, ignore
if (ddm._state !== MENU_OPEN) {
return;
}

// if the menu is the parent of an open, active submenu, ignore
if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) {
return;
}

currentLink = ddm._menu.querySelector(':focus');

// Dismiss an open menu on ESC
if (e.keyCode === 27) {
/* Esc */
ddm.halt(e);
ddm.hide();
}
// Go to the next link on down arrow
else if (ARROW_KEYS_ENABLED && e.keyCode === 40) {
/* Down arrow */
ddm.halt(e);
// get the nextSibling (an LI) of the current link's LI
nextSibling = (currentLink) ? currentLink.parentNode.nextSibling : null;
// if the nextSibling is a text node (not an element), go to the next one
while (nextSibling && nextSibling.nodeType !== 1) {
nextSibling = nextSibling.nextSibling;
}
nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null;
// if there is no currently focused link, focus the first one
if (!currentLink) {
ddm._menu.querySelector('.pure-menu-link').focus();
}
else if (nextLink) {
nextLink.focus();
}
}
// Go to the previous link on up arrow
else if (ARROW_KEYS_ENABLED && e.keyCode === 38) {
/* Up arrow */
ddm.halt(e);
// get the currently focused link
previousSibling = (currentLink) ? currentLink.parentNode.previousSibling : null;
while (previousSibling && previousSibling.nodeType !== 1) {
previousSibling = previousSibling.previousSibling;
}
previousLink = (previousSibling) ? previousSibling.querySelector('.pure-menu-link') : null;
// if there is no currently focused link, focus the last link
if (!currentLink) {
ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus();
}
// else if there is a previous item, go to the previous item
else if (previousLink) {
previousLink.focus();
}
}
});

// Dismiss an open menu on outside event
document.addEventListener(DISMISS_EVENT, function (e) {
var target = e.target;
if (target !== ddm._link && !ddm._menu.contains(target)) {
ddm.hide();
ddm._link.blur();
}
});

}

function initDropdowns() {
var dropdownParents = document.querySelectorAll('.pure-menu-has-children');
for (var i = 0; i < dropdownParents.length; i++) {
var ddm = new PureDropdown(dropdownParents[i]);
}
}

initDropdowns();

}(this, this.document));

0 comments on commit a6d871e

Please sign in to comment.
You can’t perform that action at this time.