generator-portals-clientside/generators/menu/templates/component/index.js

Generates a SharePoint clientside project skeleton. Brought to you by Skyline's Portals & Collaboration Team.

/*
* TO USE:
*   <%= namespace %>.components.<%= name %>.create("#DeltaTopNavigation"); 
* OR with optional Menu List location url (if you have a global menu that shows on all site collections)
*   <%= namespace %>.components.<%= name %>.create("#DeltaTopNavigation", "https://andrewpetersen.sharepoint.com"); 
*/

/*  Uncomment this line for Top Navigation */
//require("./topnav.css")

// Data Access, Caching and List Item processing
var data = require("./menuData");

var template = require("./menuTemplate");
const  MENU_TYPE = "<%= menuType %>";

var create = function(selector, url) {
	var component = { url }

	component.render = function(menu) {
		component.container = document.querySelector(selector);
		var html = template.render(menu, MENU_TYPE);

		if (component.container) {
			//Insert next to the passed in selector
			component.container.insertAdjacentHTML("afterend", html);
			// Append to the passed in selector
			// component.container.insertAdjacentHTML("beforeend", html);
			
		} else {
			// If the element wasn't found (maybe create() was called too early?), wait and try again
			setTimeout(() => {
				component.render(menu);
			}, 100);
		}
	};

	data.getMenu(MENU_TYPE, url).then(component.render)
	return component;
};

module.exports = { create: create };