https://mypridenet.springfield.edu/static/js/routing.js

1/*-----------------------------------------------------*\
2    @GLOBAL variables
3\*-----------------------------------------------------*/
4    // [global] isTransitionPageNav : defaults to false, set to true when transitionPageNav() is called, set back to false in [accessibility.js] setPageName()
5    // Set to true on page transition; setPageName() will update document.title when isTransitionPageNav is true (then set isTransitionPageNav=false)
6    // Page title will not be altered for modals (primary-modal/secondary-modal) or Thickbox/iFrame windows (only on page load or page transition)
7	var isTransitionPageNav = false;
8
9/* Function called to navigate within the Account Section.
10	* @param strURL     	  : The URL to go to
11*/
12	function transitionAccountNav(strURL) {
13		var actionObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
14		transitionPageNav(strURL, "account", true, actionObject);
15	}
16
17/* Function called to navigate within the Admin Section.
18	* @param strURL     	  : The URL to go to
19*/
20	function transitionAdminNav(strURL) {
21		var actionObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
22		transitionPageNav(strURL, "admin", true, actionObject);
23	}
24
25/* Function called to navigate within the Data Section.
26	* @param strURL     	  : The URL to go to
27*/
28	function transitionDataNav(strURL) {
29		var actionObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
30		transitionPageNav(strURL, "data", true, actionObject);
31	}
32
33/* Function called to navigate within the App Section.
34	* @param strURL     	  : The URL to go to
35*/
36	function transitionAppNav(strURL) {
37		var actionObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
38		transitionPageNav(strURL, "app", true, actionObject);
39	}
40
41/* Function called to navigate within the Fair Section.
42	* @param strURL     	  : The URL to go to
43*/
44	function transitionFairNav(strURL) {
45		var actionObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
46		transitionPageNav(strURL, "fair", true, actionObject);
47	}
48
49/* Function called to navigate within the Groups Section.
50	* @param strURL     	  : The URL to go to
51*/
52	function transitionGroupsNav(strURL) {
53		var actionObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
54		transitionPageNav(strURL, "groups", true, actionObject);
55	}
56
57/* Function called to navigate within the Groups Section.
58	* @param strURL     	  : The URL to go to
59*/
60	function transitionEventsNav(strURL) {
61		var actionObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
62		transitionPageNav(strURL, "events", true, actionObject);
63	}
64
65/* Function called to navigate within the Home Section.
66	* @param strURL     	  : The URL to go to
67*/
68	function transitionHomeNav(strURL) {
69		var actionObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
70		transitionPageNav(strURL, "home", true, actionObject);
71	}
72
73/* Function called to navigate within the Manage Section.
74	* @param strURL     	  : The URL to go to
75*/
76	function transitionManageNav(strURL) {
77		var actionObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
78	  	transitionPageNav(strURL, "manage", true, actionObject);
79	}
80
81/* Internal function called to navigate handle AJAX calls to reload LeftMenu & Content.
82	* @param strURL     	  		: The URL to go to
83	* @param strType     	  		: The menu type
84	* @param boolPushState    		: Possible additional parameter to specify whether to push a history state or not.
85	* @param btnElement       		: Within actionObject - The button element (for collapsing current menu feature)
86*/
87	function transitionPageNav(strURL, strType, boolPushState, actionObject) {
88        isTransitionPageNav = true;
89
90		//Redirect when coming from Page where Left Menu does NOT exist.
91		if ($("#sidebar").length == 0) { 
92			window.location.href = strURL;
93			return;
94		}
95
96		//Action Object Properties
97		var btnElement 			  = actionObject !== null ? actionObject.btnElement : null;
98		var appId			  	  = actionObject !== null ? actionObject.appId : null;
99		var alerts			  	  = actionObject !== null ? actionObject.alerts : null;
100
101		if (!isEmpty(btnElement)) {
102			if (btnElement.hasAttribute('aria-expanded')) {
103				if ($(btnElement).attr('aria-expanded') === 'true') {
104					// if this sidebar menu is expanded - we'll collapse it (and all others are assumed to be collapsed) - set aria-expanded to fal

104se for all expandable sidebar menus
105					$('#sidebar a[aria-expanded="true"]').attr('aria-expanded', 'false');
106				} else if ($(btnElement).attr('aria-expanded') === 'false') {
107					// if this sidebar menu is collapsed - we're expanding it - set aria-expanded to false for all then set to true just for the immediately expanded sub-menu
108					$('#sidebar a[aria-expanded="true"]').attr('aria-expanded', 'false');
109					$(btnElement).attr('aria-expanded', 'true');
110				}
111			}
112		}
113
114		let boolReloadSidebar = false;
115
116		//First Condition is Regular Navigation - Second Condition is from PopState (Back & Forth buttons).
117		if ((history.state !== null && history.state.type != strType) || (typeof currentHistoryType !== "undefined" && currentHistoryType !== null && currentHistoryType.type != strType)) {
118			transitionLeftMenu(strType, appId);
119			transitionTopMenu(strType);
120
121			// Need to call again to fix bug that sometimes happens.
122			initLeftMenuCollapse();
123
124			// Set boolean to trigger correct event.
125			boolReloadSidebar = true
126		}
127		transitionContent(strURL, boolReloadSidebar, alerts);
128		
129		//Collapse Menu
130		if (btnElement && hasActiveChild(btnElement)) {
131			$(window).trigger("hashchange", true);
132			return;
133		}
134
135		//URL Change		
136		if (boolPushState) { history.pushState({type: strType, appId: appId}, "", strURL); }
137		$(window).trigger("hashchange");
138		
139		return false;
140	}
141
142/* Function called to navigate within the Account Section.
143	* @param strURL     	  : The URL to go to
144*/
145	function transitionLeftMenu(strType, appId) {
146		appId = appId || "";
147		// Add Skeleton
148		const strSkeletonMenu = "<ul class='metisMenu nav' id='side-menu'>" + 
149									"<li style='margin-top: 15px; padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
150									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
151									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
152									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
153									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
154									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
155									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
156									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
157									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px;

157 width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
158									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
159									"<li style='padding: 5px 15px;'><div class='skeleton' style='border-radius: 49.9%;min-height: 20px; width: 20px;margin-left: 10px;display: inline-block;'></div><div class='skeleton' style='min-height: 20px;display: inline-block;width: 145px;margin-left: 25px;'></div></li>" + 
160							  	"</ul>"
161		$("#sidebar-menu").html(strSkeletonMenu);
162
163		// Left Menu AJAX
164		$.ajax({
165			method: "GET",
166			url: "/sidebar",
167			data: { m: strType, id: appId },
168			success: function (html) {
169				$("#sidebar").replaceWith(html);
170
171				//Re-Run Scroll + Collapse Init from /static/js/menu.js
172				initMetisMenu();
173				initSlimscrollMenu();
174				initLeftMenuCollapse();
175				initEnlarge();
176
177				const transitionSidebarEvent = new CustomEvent('transitionSidebar');
178				document.dispatchEvent(transitionSidebarEvent);	
179			}, 
180			error: function (rep) {
181				if (rep.status == 403 || rep.status == 404 || rep.status == 500) {
182					//console.log(rep.status);
183				}
184			}
185		});
186	}
187
188
189/* Function called to activate the correct Top Menu Container.
190	* @param strType     	  : The menu type
191*/
192	function transitionTopMenu(strType) {
193		$("li[id^='header__btn-cont--']").removeClass("active");
194		if (strType != "manage") {
195			$("#header__group-icon").attr("data-original-title", "Groups");
196			$("#header__group-text").html("Groups");
197		}
198
199		$("#header__btn-cont--" + strType).addClass("active");
200	}
201
202var routingXHR;
203/* Function called to load content for any Navigation Type.
204	* @param strURL     	  : The URL to go to
205	* @param boolReloadSidebar : Boolean indicating if the sidebar was reloaded.
206	** Uses the routingXHR global variable **
207*/
208	function transitionContent(strURL, boolReloadSidebar, alerts) {
209
210        const topMainContentElementHTML = "<div style='position: relative;'><span id='span-top-of-main-content--0' class='content__top-element' tabindex='0' aria-label='Top of Main Content.' style='display: none;'>Top of Main Content</span></div>";
211        if (routingXHR && routingXHR.readyState != 4) {
212			routingXHR.abort();
213		}
214		$("#page-cont").html('<div style="margin-top:300px;"></div>' + writeLoading("Loading page..."));
215        
216        const url = new URL((strURL.indexOf("http") !== 0 ? window.location.origin : '') + strURL);
217        url.searchParams.append('ax', '1');
218        if(alerts){
219        	if(alerts.error){
220				url.searchParams.append('cg-error', alerts.error);
221			}
222		}
223        strURL = url.href;
224
225		routingXHR = $.ajax({
226			url: strURL,
227			success: function (html) {
228				$("#page-cont").html(topMainContentElementHTML + html);
229				if(document.getElementById('generic')) {
230					document.getElementById('generic').style.display = 'none';
231				}
232
233				// Trigger window.load event manually
234				dispatchEvent(new Event('load'));
235
236				if (!boolReloadSidebar) {
237					const transitionContentEvent = new CustomEvent('transitionContent');
238					document.dispatchEvent(transitionContentEvent);	
239				}
240			}, 
241			error: function (rep) {
242				if (rep.status == 403) {
243					//location.reload()
244					$("#page-cont").html(rep.responseText);
245				}
246				else if (rep.status == 404 || rep.status == 500) {
247					//location.reload()
248				}
249			}
250		});
251	}
252
253
254var currentHistoryType;
255
256/* Initiated here and updated in the override pushSate */
257history.previousUrl = new URL(location.href);
258
259/* 
260	** Override the pushState native methode to provide a previousUrl variable.
261*/
262var oldPushState = history.pushState;
263history.pushState = function pushState(a, b, c) {
264	oldPushState.apply(history, [a, b, c]);
265	history.previousUrl = new URL(location.href);
266	currentHistoryType = a;
267}
268
269/* Listener to manage previous and forward buttons */
270window.onpopstate = function(e) {
271	if (history.previousUrl != null && history.previousUrl.pathname == new URL(location.href).pathname 
272	&& history.previousUrl.searchParams.get("show") == new URL(location.href).searchParams.get("show")
273	&& history.previousUrl.searchParams.get("mode") == new URL(location.href).searchParams.get("mode")
274	&& history.previousUrl.searchParams.get("view") == new URL(location.href).searchParams.get("view")) {
275		if (typeof setFiltersFromURLParameters == 'function') { 
276		  	setFiltersFromURLParameters(); 
277			getDataFromWebService();
278			history.previousUrl = new URL(location.href);
279			return;
280		}
281	}
282
283	var eStateType = (e.state === null) ? null : e.state.type;
284	var actionsObject = {}
285	if (e.state !== null && e.state.appId){
286		actionsObject.appId = e.state.appId;
287	}
288	transitionPageNav(document.location.pathname + document.location.search, eStateType, false, actionsObject);
289	currentHistoryType = { type: eStateType, appId: actionsObject.appId }
290
291	

292	history.previousUrl = new URL(location.href);
293};