Skip to content
Permalink
Browse files

Refactor JS naming and CS

  • Loading branch information...
Teemu Suoranta
Teemu Suoranta committed Aug 7, 2019
1 parent 14cae1d commit a298ceaf476dd16d0f8ec3c8d09279001eb5afa5
@@ -35,7 +35,7 @@ module.exports = {
"../node_modules/fitvids/dist/fitvids.js",

// project specific js
"scripts/components/navigation.js",
"scripts/components/component-menu-primary.js",
"scripts/components/markup-enhancements.js",
"scripts/main.js"

@@ -5,25 +5,25 @@
* Features:
* - only adds classes, no show() or hide()
* - timer for hover exit: better usability
* - works with tabs: a11y
* - works with keyboard: a11y
* - desktop menu with touch: doubletap
* - mobile menu with touch
* - works at least with 3 levels (probably more)
*
*/
aucor_navigation = function( menu, options ) {
component_primary_menu = function(args) {

var extend = function ( defaults, options ) {
var extend = function (defaults, args) {
var extended = {};
var prop;
for (prop in defaults) {
if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
extended[prop] = defaults[prop];
}
}
for (prop in options) {
if (Object.prototype.hasOwnProperty.call(options, prop)) {
extended[prop] = options[prop];
for (prop in args) {
if (Object.prototype.hasOwnProperty.call(args, prop)) {
extended[prop] = args[prop];
}
}
return extended;
@@ -32,16 +32,23 @@ aucor_navigation = function( menu, options ) {
// Default settings
var defaults = {
desktop_min_width: 501,
menu_toggle: "#menu-toggle",
menu_container: '.primary-navigation',
menu_toggle: '#menu-toggle',
};

var settings = extend( defaults, options ),
var settings = extend(args),
desktop_min_width = settings.desktop_min_width, // match this to $menu-visible SASS variable
menu_toggle = document.querySelector(settings.menu_toggle),
menu_container = document.querySelector(settings.menu_container),
menu_toggle = document.querySelector(settings.menu_toggle),
screen_w,
hover_timer,
focus_timer;

if (!menu_container || !menu_toggle) {
console.log('Invalid menu_container or menu_toggle');
return;
}

/**
* Is desktop menu
*
@@ -66,7 +73,7 @@ aucor_navigation = function( menu, options ) {
*/
var open_sub_menu = function(e) {

if(is_desktop_menu()) {
if (is_desktop_menu()) {

// clear timer
clearTimeout(hover_timer);
@@ -77,30 +84,30 @@ aucor_navigation = function( menu, options ) {

// get submenus on tree parents
var current_parent = this.parentElement;
while(!current_parent.isEqualNode(menu)) {
if(current_parent.classList.contains('sub-menu')) {
while (!current_parent.isEqualNode(menu)) {
if (current_parent.classList.contains('sub-menu')) {
this_tree_submenus.push(current_parent);
}
current_parent = current_parent.parentElement;
}

// get submenus on tree descendants
var current_descendants = this.querySelectorAll('.sub-menu');
for(var d = 0; d < current_descendants.length; d++) {
for (var d = 0; d < current_descendants.length; d++) {
this_tree_submenus.push(current_descendants[d]);
}

// fetch all open submenus
var all_open_sub_menus = menu.querySelectorAll('.open');
for(var j = 0; j < all_open_sub_menus.length; j++) {
var all_open_sub_menus = menu_container.querySelectorAll('.open');
for (var j = 0; j < all_open_sub_menus.length; j++) {
// close the submenu only if not in current tree
if(this_tree_submenus.indexOf(all_open_sub_menus[j]) === -1) {
if (this_tree_submenus.indexOf(all_open_sub_menus[j]) === -1) {
all_open_sub_menus[j].classList.remove('open');
}
}

// open child sub-menu
if(this.querySelector('.sub-menu')) {
if (this.querySelector('.sub-menu')) {
this.querySelector('.sub-menu').classList.add('open');
}

@@ -116,14 +123,14 @@ aucor_navigation = function( menu, options ) {
var close_sub_menu = function(e) {
var t = this;
// create timeout that let's the cursor get outside of menu for a moment
if(is_desktop_menu()) {
if (is_desktop_menu()) {
hover_timer = setTimeout( function() {
var parent = t.parentElement;
while(!parent.isEqualNode(menu)) {
while (!parent.isEqualNode(menu)) {
parent.classList.remove('open');
parent = parent.parentElement;
}
if(t.querySelector('.open')) {
if (t.querySelector('.open')) {
t.querySelector('.open').classList.remove('open');
}
}, 750 );
@@ -134,8 +141,8 @@ aucor_navigation = function( menu, options ) {

var li = null;
var parent = e.target.parentElement;
while(!parent.isEqualNode(menu)) {
if(parent.classList.contains('menu-item')) {
while (!parent.isEqualNode(menu)) {
if (parent.classList.contains('menu-item')) {
li = parent;
break;
}
@@ -146,16 +153,16 @@ aucor_navigation = function( menu, options ) {
li.querySelector('.sub-menu').classList.toggle('open');

// toggle .active class to this <li>
if(!is_desktop_menu()) {
if (!is_desktop_menu()) {
li.classList.toggle('active');
}

// don't trigger parent(s)
e.stopPropagation();
};

var items_with_children = menu.querySelectorAll('.menu-item-has-children');
for(var i = 0; i < items_with_children.length; i++) {
var items_with_children = menu_container.querySelectorAll('.menu-item-has-children');
for (var i = 0; i < items_with_children.length; i++) {
var item = items_with_children[i];
item.addEventListener('mouseover', open_sub_menu);
item.addEventListener('mouseleave', close_sub_menu);
@@ -169,22 +176,21 @@ aucor_navigation = function( menu, options ) {

}


}

/* Keyboard (tab)
----------------------------------------------- */
var on_link_focus = function(e) {
// open sub-menu below
var submenu_below = e.target.parentElement.querySelector('.sub-menu');
if(submenu_below) {
if (submenu_below) {
submenu_below.classList.add('open');
}

// open all sub-menus above
var parent = e.target.parentElement;
while(!parent.isEqualNode(menu)) {
if(parent.classList.contains('sub-menu')) {
while (!parent.isEqualNode(menu)) {
if (parent.classList.contains('sub-menu')) {
parent.classList.add('open');
}
parent = parent.parentElement;
@@ -194,22 +200,22 @@ aucor_navigation = function( menu, options ) {
var on_link_blur = function(e) {
// close sub-menu below
var submenu_below = e.target.parentElement.querySelector('.sub-menu');
if(submenu_below) {
if (submenu_below) {
submenu_below.classList.remove('open');
}

// close all sub-menus above
var parent = e.target.parentElement;
while(!parent.isEqualNode(menu)) {
if(parent.classList.contains('sub-menu')) {
while (!parent.isEqualNode(menu)) {
if (parent.classList.contains('sub-menu')) {
parent.classList.remove('open');
}
parent = parent.parentElement;
}
};

var links = menu.querySelectorAll('a');
for(var k = 0; k < links.length; k++) {
var links = menu_container.querySelectorAll('a');
for (var k = 0; k < links.length; k++) {
var link = links[k];

link.addEventListener('focus', on_link_focus);
@@ -220,14 +226,14 @@ aucor_navigation = function( menu, options ) {
----------------------------------------------- */

menu_toggle.addEventListener('click', function() {
if(menu_toggle.classList.contains('menu-toggle--active')) {
if (menu_toggle.classList.contains('menu-toggle--active')) {

// remove .active class from hamburger icon
menu_toggle.classList.remove('menu-toggle--active');
menu_toggle.setAttribute('aria-expanded', 'false');

// remove .active class to menu container
menu.classList.remove('active');
menu_container.classList.remove('active');

// focus out of the menu
menu_toggle.dispatchEvent(new Event('focus'));
@@ -239,7 +245,7 @@ aucor_navigation = function( menu, options ) {
menu_toggle.setAttribute('aria-expanded', 'true');

// .active class to menu container
menu.classList.add('active');
menu_container.classList.add('active');
}
});

@@ -278,7 +284,7 @@ aucor_navigation = function( menu, options ) {
if (elem.nodeType !== Node.ELEMENT_NODE) {
continue;
}
if(elem.isEqualNode(menu)) {
if (elem.isEqualNode(menu)) {
isInsideMenu = true;
}
}
@@ -295,7 +301,6 @@ aucor_navigation = function( menu, options ) {
findAndRemoveClass(menu, 'open');
findAndRemoveClass(menu, 'tapped');
findAndRemoveClass(menu, 'active');

}

// remove this event listener
@@ -305,14 +310,14 @@ aucor_navigation = function( menu, options ) {

touchStartFn = function(e) {
// only fire on desktop menu
if(!is_desktop_menu()) {
if (!is_desktop_menu()) {
return false;
}

var current_list_item = this.parentElement;
var current_parent;

if ( !current_list_item.classList.contains('tapped') ) {
if (!current_list_item.classList.contains('tapped')) {

// first tap: don't go to <a> yet
e.preventDefault();
@@ -326,10 +331,10 @@ aucor_navigation = function( menu, options ) {
}
current_parent = current_parent.parentElement;
}
var all_tapped = menu.querySelectorAll('.tapped');
for(var j = 0; j < all_tapped.length; j++) {
var all_tapped = menu_container.querySelectorAll('.tapped');
for (var j = 0; j < all_tapped.length; j++) {
// Close the submenu only if not in current tree
if(this_parents_li.indexOf(all_tapped[j]) === -1) {
if (this_parents_li.indexOf(all_tapped[j]) === -1) {
all_tapped[j].classList.remove('tapped');
}
}
@@ -340,29 +345,29 @@ aucor_navigation = function( menu, options ) {
// close all .sub-menus that don't belong to this DOM tree
var this_parents_submenu = [];
current_parent = current_list_item;
while(!current_parent.isEqualNode(menu)) {
if(current_parent.classList.contains('open')) {
while (!current_parent.isEqualNode(menu)) {
if (current_parent.classList.contains('open')) {
this_parents_submenu.push(current_parent);
}
current_parent = current_parent.parentElement;
}
var all_open_submenus = menu.querySelectorAll('.open');
for(var t = 0; t < all_open_submenus.length; t++) {
var all_open_submenus = menu_container.querySelectorAll('.open');
for (var t = 0; t < all_open_submenus.length; t++) {
// Close the submenu only if not in current tree
if(this_parents_submenu.indexOf(all_open_submenus[t]) === -1) {
if (this_parents_submenu.indexOf(all_open_submenus[t]) === -1) {
all_open_submenus[t].classList.remove('open');
}
}

// open .sub-menu below
if(current_list_item.querySelector('.sub-menu')) {
if (current_list_item.querySelector('.sub-menu')) {
current_list_item.querySelector('.sub-menu').classList.add('open');
}

// open all .sub-menus above
current_parent = this.parentElement;
while(!current_parent.isEqualNode(menu)) {
if(current_parent.classList.contains('sub-menu')) {
while (!current_parent.isEqualNode(menu)) {
if (current_parent.classList.contains('sub-menu')) {
current_parent.classList.add('open');
}
current_parent = current_parent.parentElement;
@@ -386,8 +391,8 @@ aucor_navigation = function( menu, options ) {
};

// add eventlisteners for each <a> with a sub-menu
var parent_links = menu.querySelectorAll('.menu-item-has-children > a');
for(var p = 0; p < parent_links.length; p++) {
var parent_links = menu_container.querySelectorAll('.menu-item-has-children > a');
for (var p = 0; p < parent_links.length; p++) {
parent_links[p].addEventListener('touchstart', touchStartFn, false);
}

@@ -3,11 +3,12 @@
========================================================================== */

/**
* Navigation
* Primary menu
*/
aucor_navigation(document.querySelector('.primary-navigation'), {
desktop_min_width: 890, // min width in pixels
menu_toggle: '#menu-toggle' // selector for toggle
var primary_menu = component_primary_menu({
desktop_min_width: 890,
menu_container: '.primary-navigation',
menu_toggle: '#menu-toggle'
});

/**
@@ -20,14 +21,9 @@ fitvids();
*/
if (typeof objectFitPolyfill === "function") {
document.addEventListener('lazybeforeunveil', function(e){

// current <img> element
var el = e.target;

objectFitPolyfill();
el.addEventListener('load', function() {
e.target.addEventListener('load', function() {
objectFitPolyfill();
});

});
}

0 comments on commit a298cea

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