Skip to content

Instantly share code, notes, and snippets.

@128keaton

128keaton/navigation.js

Last active Sep 21, 2018
Embed
What would you like to do?
Client-side javascript that fetches menus from a Wordpress instance for another website.
// -------------------------------------------------------------
// Add page items
// (uses Wordpress plugins JSONMenu)
// -------------------------------------------------------------
$.ajax({
url: 'http://wp.dev.reviveit.io/?rest_route=/menus/v1/list',
dataType: 'application/json',
cache: 'true',
complete: function (data) {
console.log('Ajax request success');
let json = JSON.parse(JSON.stringify(data));
json = JSON.parse(json.responseText);
parseRequest(json);
}
});
function parseRequest(json) {
$.each(json, function (menuTitle, menus) {
for (var menuItem of menus) {
buildMenuItem(menuTitle, menuItem);
}
reuniteOrphans(menuTitle);
});
}
function buildMenuItem(menuTitle, menuItem) {
if (menuItem.menu_item_parent !== '0') {
orphanedChildren[menuItem.ID] = {
parent: menuItem.menu_item_parent,
url: menuItem.url,
title: menuItem.title
};
} else {
// Create an 'a' element
let linkItem = $(document.createElement('a'));
let wrapperListItem = $(document.createElement('li'));
let title = menuTitle.replace(' ', '-').toLowerCase();
wrapperListItem.addClass('menu-item-' + menuItem.ID);
if (menuItem.title == 'Shop') {
wrapperListItem.addClass('active');
}
linkItem.attr('href', menuItem.url);
linkItem.attr('title', menuItem.title);
linkItem.text(menuItem.title);
wrapperListItem.append(linkItem);
$('#' + title + '-navigation').append(wrapperListItem);
}
}
// OH ANNIE WE MISSED YOU SO MUCH
function reuniteOrphans(menuTitle) {
let dropdownWrapper = null;
let hasDropdownWrapper = false;
// Title of the WordPress menu
let title = menuTitle.replace(' ', '-').toLowerCase();
for (let orphanID in orphanedChildren) {
let orphan = orphanedChildren[orphanID];
let parentItem = $('#' + title + '-navigation').find('.menu-item-' + orphan.parent);
// Checks to see that the menu item exists before we play with it.
if (typeof $(parentItem).attr('class') !== 'undefined') {
let dropdownLink = parentItem.find('a');
// Checks to see if the link hasn't already been played with.
if (!dropdownLink.hasClass('dropdown-toggle')) {
dropdownLink.addClass('dropdown-toggle');
dropdownLink.append('<i class="fa fa-angle-down"></i>');
}
// Checks if we already have the wrapper UL;
if ($(parentItem).find('ul.tr-dropdown-menu').length !== 0) {
dropdownWrapper = $(parentItem).find('ul.tr-dropdown-menu');
hasDropdownWrapper = true;
} else {
dropdownWrapper = $(document.createElement('ul'));
dropdownWrapper.addClass('tr-dropdown-menu fadeInUp');
dropdownWrapper.data('role', 'menu');
}
// Determines if the menu item is already added
if ($(dropdownWrapper).find('li.menu-item-' + orphanID).length === 0) {
let linkItem = $(document.createElement('a'));
let wrapperListItem = $(document.createElement('li'));
linkItem.attr('href', orphan.url);
linkItem.attr('title', orphan.title);
linkItem.text(orphan.title);
wrapperListItem.addClass('menu-item menu-item-type-post_type menu-item-object-page menu-item-' + orphanID);
wrapperListItem.append(linkItem);
dropdownWrapper.append(wrapperListItem);
if (hasDropdownWrapper === false) {
$(parentItem).append(dropdownWrapper);
}
}
}
}
}
@128keaton

This comment has been minimized.

Copy link
Owner Author

@128keaton 128keaton commented Sep 21, 2018

100% terrible!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.