https://www.coloradoicsb.com/themes/common/javascripts/smb/navigation-more-button.js?v.284928

1$(document).ready(function () {
2	// declare global variables and prepare the data to work with
3	window.menuHolder = $('.navigation').not('.mm-menu');
4	window.menuHolderMaxWidth = 100;
5	window.menu = $('.more_nav').not('.mm-listview');
6	window.currentMenu = menu;
7	window.currentMenuWidth = window.menuHolder.outerWidth();
8	window.menuChildrenCount = currentMenu.children().length;
9	window.origMenuContent = '';
10	window.moreButton = $('<li class="navigation__item has-child more"> <a href="#">More</a> <ul class="navigation__list--sub"></ul> </li>');
11
12	// the array will store the menu's content and corresponding width variations, later it will be used by addMoreButton() func
13	window.allMenus = [];
14});
15
16// prepare menu variations and store them in window.allMenus
17function menuPrepare() {
18	// store original menu for future use before menu preparations are started
19	if(!origMenuContent.length) origMenuContent = menu.html(); // if menuPrepare called again, the origMenuContent shouldn't be changed anyway
20
21	// set max width on menu holder for correct calculation, menuHolderMaxWidth is used as a final calculation point
22	menuHolder.css('width', menuHolderMaxWidth);
23
24	// add the full menu before any child is removed
25	allMenus.push([currentMenu.html(), Math.round(calcTotalMenuItemsWidth())]);
26
27	// iterate through all menu items, calculate total menu widths with all items, and store the data in window.allMenus
28	for(var i=0; i <= menuChildrenCount; i++) {
29		// check and remove moreButton which is added before menuItemsWidth
30		if(!!moreButton.length) { 
31			moreButton.remove();
32		}
33		// remove the menu's last child before menuItemsWidth
34		var tempItem = currentMenu.children('li:last').remove();
35		// re-add more button to re-calculate common menu width again, minus removed tempItem
36		currentMenu.append(moreButton);
37		// calculate total width of all menu items
38		var menuItemsWidth = calcTotalMenuItemsWidth();
39		// add removed items into more button content
40		moreButton.children('ul').prepend($(tempItem));
41		// store the menu's content and corresponding width variations in allMenus array
42		allMenus.push([currentMenu.html(), Math.round(menuItemsWidth)]); // Math.round is needed to help browsers (like Chrome) correctly deal with decimal numbers
43	}
44
45	// remove max width for menu holder, so the menu is back to its initial current size
46	menuHolder.css('width', '');
47}
48
49// calculate total width of all menu items and return the width
50function calcTotalMenuItemsWidth() {
51	var width = 0;
52	currentMenu.children().each(function() {
53		width += $(this)[0].getBoundingClientRect().width; // getBoundingClientRect() is needed to help browsers (like Chrome) get correct width, then later work with it
54	});
55	return width;
56}
57
58// add more navigation on page
59function addMoreButton() {
60	for(var i=0; i <= menuChildrenCount; i++) {
61		// add the more menu variation that fits the rule
62		if(currentMenuWidth <= allMenus[0][1] && currentMenuWidth >= allMenus[i][1]) { // pick the more menu variation that fits the rule
63			currentMenu.empty(); // remove previous menu
64			currentMenu.append(allMenus[i][0]); // add the more menu variation that fits the rule
65			return;
66		}
67		// revert to original nav if items fit into main nav
68		if(currentMenuWidth > allMenus[0][1]) {
69			currentMenu.empty();
70			currentMenu.append(origMenuContent);
71			return;
72		}
73	}
74}