https://store.awmi.net/include/ASOCustom.js

1// CUSTOM JAVASCRIPT FOR ADVANCED STUDIO ONLINE 
2// Add the following to the includes wizard
3/*
4
5<script src="/include/ASOCustom.js"></script>
6
7*/
8
9
10//<!-- CURRENT YEAR IN COPYRIGHT -->
11try {
12	document.getElementById("year").innerHTML = new Date().getFullYear();
13  
14  } catch (error) {
15	  console.error(error);
16	  // expected output: ReferenceError: nonExistentFunction is not defined
17	  // Note - error messages will vary depending on browser
18	}
19  //<!-- HTML is placed in an HTML block in the page footer: -->
20  //<!-- &copy; <span id="year"></span> -->
21
22
23// *****************
24// CURRENT PAGE INDICATOR
25// Find and identify current page in menu by adding the currentPage class
26// Remember to customize the style for the class
27// Add currentPageIndicators custom class to the primary navigation top level
28// *****************
29
30try {
31	$( document ).ready(function() {
32	  var menuItemLinks = document.querySelectorAll('nav[data-component="primaryNavigation"].currentPageIndicators li[data-component="navigationItem"] a');
33
34	  for (let i = 0; i < menuItemLinks.length; i++) {
35		if (window.location.href.indexOf(menuItemLinks[i]) > -1) {
36		  $(menuItemLinks[i]).closest('li').addClass('currentPage');
37		} else {
38			$(menuItemLinks[i]).closest('li').removeClass('currentPage');
39		}
40	  }
41	  
42	});
43	} catch (error) {
44	  console.error(error);
45	  // in case we have an error, we don't want to stop the whole site
46	}
47// END CURRENT PAGE INDICATOR
48  
49  // *****************
50  // CURRENT PAGE INDICATOR - SECONDARY NAVIGATION SIDEBAR
51  // *****************
52  //
53  // Add custom class currentPageIndicatorSidebar to the secondary navigation component to enable automatic addition of the selectedItem class
54  // on navigation elements (li)
55  // 
56  // Style the .selectedItem class in the custom.css stylesheet accordingly
57  //
58  
59  try {
60	  $( document ).ready(function() {
61		  var menuItemLinks = document.querySelectorAll('[data-component="secondaryNavigation"].currentPageIndicatorSidebar li[data-component="navigationItem"] a');
62		  for (let i = 0; i < menuItemLinks.length; i++) {
63			  $(menuItemLinks[i]).closest('li').removeClass('selectedItem');
64		  }
65		  for (let i = 0; i < menuItemLinks.length; i++) {
66			  if (window.location.href == menuItemLinks[i]) {
67			  $(menuItemLinks[i]).closest('li').addClass('selectedItem');
68		   }
69		  }
70		  
71		});
72	  } catch (error) {
73		  console.error(error);
74		  // in case we have an error, we don't want to stop the whole site
75		}
76  
77  // END CURRENT PAGE INDICATOR - SECONDARY NAVIGATION SIDEBAR
78  
79
80// Using a data-driven value inside an HTML block  
81/*
82  Add the class .dataSource to a label that has been assigned a data-driven value. The label can then be hidden on 
83  all screen widths.
84
85  Add the class .dataDestination to a div inside the HTML block where you want the value to appear.
86
87  EXAMPLE: 
88
89       <div class="dataDestination"></div>
90
91*/
92
93// try {
94
95
96//   $(document).ready(function(){
97// 	var input = document.querySelector('.dataSource');
98// 	var div = document.querySelector('.dataDestination');
99// 	if (div) {
100// 	div.innerHTML = div.innerHTML + input.innerHTML;
101// 	}
102// 	});
103
104// } catch (error) {
105//   console.error(error);
106// }
107
108// END Data-driven value in HTML block 
109
110
111
112// STICKY HEADER 
113// This code allows a sticky header to appear after header is scrolled off-screen. 
114 
115/* Add the makeStickyOnScroll class to the portion of the header you want to stick to the top of the page. 
116   Adjust the offset to fit your header size.
117*/
118try {
119  
120		// Get the item to stick
121		var stickyItem = document.getElementsByClassName("makeStickyOnScroll");
122		
123		if (stickyItem.length > 0) {
124			// When the user scrolls the page, execute stickyFunction
125			window.onscroll = function() {stickyFunction()};
126			
127			// Get the offset position of the first matching item
128			if (stickyItem.length > 0){
129				var sticky = stickyItem[0].offsetTop + 150; // wait until 150px further than the top of the page to bring in the sticky header
130				var stickyOut = stickyItem[0].offsetTop + 300; // wait until 150px further than the top of the page to bring in the sticky header
131			}
132			// Add the "stickToTopOnScroll" class to the header when you reach its scroll position. Remove "stickToTopOnScroll" when you leave the scroll position
133			function stickyFunction() {
134				if (stickyItem.length > 0){
135					if (window.pageYOffset > sticky) {
136						stickyItem[0].classList.remove("fadeOut");
137						stickyItem[0].classList.add("stickToTopOnScroll");
138						stickyItem[0].classList.add("stickyanimated");
139						stickyItem[0].classList.add("slideInDown"); 
140					} else if(window.pageYOffset < sticky) {
141						stickyItem[0].classList.add("fadeOut");
142						stickyItem[0].classList.remove("stickToTopOnScroll");
143						stickyItem[0].classList.remove("stickyanimated");
144						stickyItem[0].classList.remove("slideInDown");
145
146					}
147				}
148			}
149		}
150
151
152    
153} catch (error) {
154  console.error(error);
155  // expected output: ReferenceError: nonExistentFunction is not defined
156  // Note - error messages will vary depending on browser
157}
158// END STICKY HEADER 
159
160
161// FADE IN ON SCROLL 
162
163/* Items will fade in as they scroll into view. 
164     NOTE: When applied to a category item, the entire row of items are animated at the same time
165*/
166
167/* Add the soFadeInOnScroll class to the desired element in the layout 
168      Place the script in the includes wizard or in an HTML block on the page 
169*/
170try {
171	window.onLoad = assignAnimationClasses();
172		function assignAnimationClasses() {
173		  var windowHeight;
174		  var animatedElements
175

176		  function init() {
177		    animatedElements = document.getElementsByClassName("soFadeInOnScroll");
178		    windowHeight = window.innerHeight;
179			
180			
181		  }
182
183		  function checkPosition() {
184
185				for (var i = 0; i < animatedElements.length; i++) {
186			      var animatedElement = animatedElements[i];
187			      var positionFromTop = animatedElements[i].getBoundingClientRect().top;
188
189
190			      if (positionFromTop - windowHeight <= 0) {
191			        animatedElement.classList.add('animated');
192			        animatedElement.classList.add('delay-quartersecond');
193			        animatedElement.classList.add('fadeIn');
194			      } else if(positionFromTop - windowHeight > 0) {
195			        animatedElement.classList.remove('animated');
196			        animatedElement.classList.remove('delay-quartersecond');
197			        animatedElement.classList.remove('fadeIn');
198			      }
199				}
200		  	}
201
202		  window.addEventListener('scroll', checkPosition);
203		  window.addEventListener('resize', init);
204
205		  init();
206		  checkPosition();
207		}
208} catch (error) {
209	console.error(error);
210	// Don't stop everything!
211	}
212// END FADE IN ON SCROLL
213
214
215
216// FADE IN FROM LEFT 
217
218/* Items will fade in while moving onto the page from the left as they scroll into view. 
219     NOTE: When applied to a category item, the entire row of items are animated at the same time
220*/
221
222/* Add the soFadeInLeftOnScroll class to the desired element in the layout 
223      Place the script in the includes wizard or in an HTML block on the page 
224*/
225try {
226	window.onLoad = assignAnimationClasses2();
227		function assignAnimationClasses2() {
228		  var windowHeight;
229		  var animatedElements
230
231		  function init() {
232		    animatedElements = document.getElementsByClassName("soFadeInLeftOnScroll");
233		    windowHeight = window.innerHeight;
234			
235			
236		  }
237
238		  function checkPosition() {
239
240				for (var i = 0; i < animatedElements.length; i++) {
241			      var animatedElement = animatedElements[i];
242			      var positionFromTop = animatedElements[i].getBoundingClientRect().top;
243
244
245			      if (positionFromTop - windowHeight <= 0) {
246			        animatedElement.classList.add('animated');
247			        animatedElement.classList.add('fadeInLeft');
248			      } else if(positionFromTop - windowHeight > 0) {
249			        animatedElement.classList.remove('animated');
250			        animatedElement.classList.remove('fadeInLeft');
251			      }
252				}
253		  	}
254
255		  window.addEventListener('scroll', checkPosition);
256		  window.addEventListener('resize', init);
257
258		  init();
259		  checkPosition();
260		}
261} catch (error) {
262	console.error(error);
263	// Don't stop everything!
264	}
265// END FADE IN FROM LEFT
266
267
268// BUTTON RETURN TO PREVIOUS PAGE (BACK BUTTON)
269/* 
270//Set the button to Go To URL and enter: 
271
272// javascript:GoBackWithRefresh()
273
274//as the url. There will be a popup warning, just accept it and move on. 
275*/
276
277// This can also be used with an HTML block on the page in the desired location **set classes for the button style**
278//<a class="btn allButtons customCSS activeButtons" href="#" onclick="GoBackWithRefresh();return false;">BACK</a>
279
280
281	function GoBackWithRefresh(event) {
282	    if ('referrer' in document) {
283	        window.location = document.referrer;
284	        /* OR */
285	        //location.replace(document.referrer);
286	    } else {
287	        window.history.back();
288	    }
289	}
290
291// END BACK BUTTON 
292
293// *****************
294// ADD TO CART BUTTON TEXT CHANGE 
295// Add the addToCartBtn class to the Add and Stay Buttons on the category and search results page 
296// *****************
297
298  $('button.addToCartBtn').click(function() {
299      $(this).text(' ✔ Added To Cart');
300      $(this).addClass('addedToCart')
301      return false;
302  });
303
304// END ADD TO CART BUTTON TEXT CHANGE
305
306// *****************
307// ADD TO CART ALERT BOX
308// Add the addToCartBtnAlert class to the Add and Stay Buttons on the category and search results page
309// *****************
310
311$('button.addToCartBtnAlert').click(function(event) {
312	alert("Added to your cart! Click OK to continue shopping.");
313});
314
315// END ADD TO CART ALERT 
316
317
318// *********************************************
319// FIND GIVING ARRAY BUTTONS - ADD TEXT FOR EACH
320// *********************************************
321
322// try {
323  
324// 	window.onload = showGivingArrayText();

325// 	function showGivingArrayText() {
326// 		var initialGivingArrayButton;
327
328// 		function findIt() { //Find the Gift Array Buttons
329// 			initialGivingArrayButton = document.getElementsByClassName("buttonAddText");
330// 			reversedGivingArray = Array.from(initialGivingArrayButton).reverse(); // convert to array and reverse so we build our results in order
331
332// 			buildIt();
333// 			}
334
335// 		function buildIt() { 
336		
337// 			for (var i = 0; i < reversedGivingArray.length; ++i){	
338// 				var givingAmount = reversedGivingArray[i].querySelector("input").getAttribute("value");
339// 				var newParentDiv = document.createElement("div"); 
340// 				var textParentDiv = document.createElement("div");
341// 				var numberSponsored = Math.floor(givingAmount / 34);
342// 				var buttonParent = reversedGivingArray[i].parentElement;
343
344// 				if (!reversedGivingArray[i].classList.contains("giftAmountOther")) {
345
346// 					textParentDiv.innerText = "Sponsor " + numberSponsored + " children a month";
347// 					textParentDiv.classList.add("buttonDescripText");
348
349// 					newParentDiv.classList.add("newButtonParent");
350// 					newParentDiv.appendChild(reversedGivingArray[i]);
351// 					newParentDiv.append(textParentDiv);
352
353// 					buttonParent.prepend(newParentDiv);
354// 				}
355// 				else if (reversedGivingArray[i].classList.contains("giftAmountOther")) {
356					
357// 					textParentDiv.innerText = "Multiples of $34 per child per month";
358// 					textParentDiv.classList.add("buttonDescripText");
359
360// 					newParentDiv.classList.add("newButtonParent");
361// 					newParentDiv.appendChild(reversedGivingArray[i]);
362// 					newParentDiv.append(textParentDiv);
363
364// 					buttonParent.prepend(newParentDiv);
365// 				}
366// 			}
367					
368// 		}
369// 		findIt();
370// 	}
371
372// } catch (error) {
373// console.error(error);
374// }