https://blackfaldsabbey.ca/repository/designs/templates/GO_blackfalds-ab-micro-abbeycentre_2025_resp/mobile.js

1$(document).ready(function () {
2  addNavSystems();
3  addEvents();
4
5  if ($('div.insideMainContent').text().length <= 10
6      && $('div.insideLeftContent').text().length <= 10
7      && $('div.insideRightContent').text().length <= 10) {
8      $('div.mainContent').css('padding', 0);
9      $('div.leftContent').css('padding', 0);
10      $('div.rightContent').css('padding', 0);
11      $('div.insideMainContent').css('padding', 0);
12      $('div.insideLeftContent').css('padding', 0);
13      $('div.insideRightContent').css('padding', 0);
14  }
15
16// -------------------------------  TEXT RESIZER ------------------------------- 
17/*
18The client specifically requested a text resizer and print button. Below is the code for the text resizer,
19including helper functions getNumber() and resizer() at the bottom of the file.
20*/
21
22// CHANGE SCALE TO ADJUST HOW MUCH THE TEXT RESIZES
23const scale = 2;
24
25var smallResizer = $(".inner #smallResize");
26var smallFlag = true;
27var medResizer = $(".inner #medResize");
28var medFlag = false;
29var lrgResizer = $(".inner #lrgResize");
30var lrgFlag = false;
31var elmntsToResize = [
32  $(".inner .widthContainer p"),
33  $(".inner .widthContainer span"),
34  $(".inner .widthContainer div.body"),
35  $(".innerToolbar a:not(.resize)"),
36  $(".inner .widthContainer .mainContent a"),
37  $(".inner .widthContainer .rightContent a"),
38  $(".inner .widthContainer .leftContent a"),
39  $(".inner .widthContainer h1"),
40  $(".inner .widthContainer h2"),
41  $(".inner .widthContainer h3"),
42  $(".inner .widthContainer h4"),
43  $(".inner .widthContainer h5"),
44  $(".inner .widthContainer h6"),
45];
46var modifier = 0;
47
48smallResizer.on("click", function () {
49  // Check if flag is true or false
50  if (smallFlag) {
51    return;
52  }
53
54  // Determine value of the modifier
55  if (medFlag) {
56    modifier = -scale;
57    medFlag = false;
58  } else if (lrgFlag) {
59    modifier = -2 * scale;
60    lrgFlag = false;
61  }
62
63  // Loop through elements, changing their font sizes
64  resizer(elmntsToResize, modifier);
65  smallFlag = true;
66});
67
68medResizer.on("click", function () {
69  // Check if flag is true or false
70  if (medFlag) {
71    return;
72  }
73
74  // Determine value of the modifier
75  if (smallFlag) {
76    modifier = scale;
77    smallFlag = false;
78  } else if (lrgFlag) {
79    modifier = -scale;
80    lrgFlag = false;
81  }
82
83  // Loop through elements, changing their font sizes
84  resizer(elmntsToResize, modifier);
85  medFlag = true;
86});
87
88lrgResizer.on("click", function () {
89  // Check if flag is true or false
90  if (lrgFlag) {
91    return;
92  }
93
94  // Determine value of the modifier
95  if (smallFlag) {
96    modifier = 2 * scale;
97    smallFlag = false;
98  } else if (medFlag) {
99    modifier = scale;
100    medFlag = false;
101  }
102
103  // Loop through elements, changing their font sizes
104  resizer(elmntsToResize, modifier);
105  lrgFlag = true;
106});
107});
108
109function addNavSystems() {
110  var $nav = $('.navDrop > nav.primary.mobilemenu');
111  $nav.find("li.hasChildren").each(function () {
112      if ($(this).hasClass('current')) {
113          $(this).prepend($('<span class="plus open" tabindex="0"><span class="hidden">hide submenu</span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>'));
114          $(this).children("ul").slideDown();
115      } else
116          $(this).prepend($('<span class="plus" tabindex="0"><span class="hidden">show submenu</span><i class="fa fa-plus-square-o" aria-hidden="true"></i></span>'));
117  });
118}
119
120function addEvents() {
121  $('.searchIcon').click(function () {
122      if ($('div.searchDrop').is(':hidden')) {
123          $('.searchDrop').slideDown();
124          $('.searchField').focus();
125      } else {
126          $('.searchDrop').slideUp();
127      }
128  });
129  $('.navIcon').click(function () {
130      if ($('div.navDrop').is(':hidden')) {
131          $('.navDrop').slideDown();
132          $('div.allContainer').css('height', '100%');
133          $('.topbar').addClass('scroll');
134          $('body').addClass('noscroll');
135          $('.notifications').slideUp(1000, function() { });
136          $('.alertcontainer').addClass('prop');
137      } else {

138          $('.navDrop').slideUp();
139          $('.topbar').removeClass('scroll');
140          $('body').removeClass('noscroll');
141          $('div.allContainer').css('height', 'auto');
142          if (getCookie('notifications') != 'off') {
143              $('.notifications').slideDown(1000, function() { });
144          }
145          $('.alertcontainer').removeClass('prop');
146      }
147  })
148
149  $('nav.mobilemenu span.plus').click(function () {
150      if ($(this).hasClass('open')) {
151          $(this).removeClass('open');
152          $(this).html('<i class="fa fa-plus-square-o" aria-hidden="true"></i>');
153          $(this).parent().children("ul").slideUp();
154      } else {
155          $(this).addClass('open');
156          $(this).html('<i class="fa fa-minus-square-o" aria-hidden="true"></i>');
157          $(this).parent().children("ul").slideDown();
158      }
159  });
160
161  $('nav.mobilemenu span.plus').keydown(function (e) {
162      if (e.keyCode == 13) { $(this).click(); }
163  });
164
165  $(window).resize(function () {
166      if ($(window).width() > 899) {
167          if ($('div.searchDrop').not(':hidden')) {
168              $('.searchDrop').slideUp();
169          }
170          if ($('div.navDrop').not(':hidden')) {
171              $('.navDrop').slideUp();
172          }
173      }
174  });
175}
176
177// TEXT RESIZER HELPER FUNCTIONS
178function getNumber(inString) {
179  // Using regular expression to extract the last number
180  var numberPattern = /\d+/;
181  var extractedNumber = inString.match(numberPattern);
182
183  // If there's a match, extractedNumber will contain an array with the matched number
184  if (extractedNumber) {
185    // Extracted number will be a string, so you can convert it to a number using parseInt or parseFloat
186    var finalNumber = parseInt(extractedNumber[0], 10); // 10 is the radix for base-10 (decimal) parsing
187    return finalNumber;
188  }
189}
190
191function resizer(elements, modifier) {
192  var oldSize, newSize;
193  elements.forEach((element) => {
194    if (element.length > 0) {
195      oldSize = element.css("fontSize");
196      oldSize = getNumber(oldSize);
197      newSize = oldSize + modifier;
198      element.css("fontSize", newSize);
199    }
200  });
201
202  // -------------------------------  Adds a label for links that open in new tabs ------------------------------- 
203  $(document).ready(function () {
204    $('a[target="_blank"]').each(function () {
205        var $link = $(this);
206        var ariaLabel = $link.attr('aria-label');
207
208        if (ariaLabel) {
209            if (!ariaLabel.includes('Opens in a new tab')) {
210                $link.attr('aria-label', ariaLabel + ' - Opens in a new tab');
211            }
212        } else {
213            $link.attr('aria-label', 'Opens in a new tab');
214        }
215    });
216});
217}
218
219
220// ----------------------  Breadcrumb Resize - Uncomment if breadcrumb goes across 2 columns ----------------------- 
221function adjustInsideMainContent() {
222  const vw = $(window).width();
223
224  // Offsets you can tweak
225  const leftOffset = 60;    // extra padding when there IS a left column
226  const noLeftOffset = 100; // extra padding when there is NO left column
227
228  // Measure base header height
229  const baseHeader = $(".inner-header");
230  const baseHeaderHeight = baseHeader.length ? baseHeader.outerHeight() : 0;
231
232  // Always clear previous padding
233  $(".inner .mainContent").css("padding-top", "");
234  $(".inner .rightContent").css("padding-top", "");
235
236  if (vw > 900) {
237    // With left column
238    $(".inner .mainContent.hasLeft").css("padding-top", baseHeaderHeight + leftOffset + "px");
239    if (vw > 1185) {
240      $(".inner .rightContent.hasLeft").css("padding-top", baseHeaderHeight + leftOffset + "px");
241    }
242
243    // Without left column
244    $(".inner .mainContent:not(.hasLeft)").css("padding-top", baseHeaderHeight + noLeftOffset + "px");
245    if (vw > 1185) {
246      $(".inner .rightContent:not(.hasLeft)").css("padding-top", baseHeaderHeight + noLeftOffset + "px");
247    }
248  }
249
250  // console.log({ baseHeaderHeight, vw });
251}
252
253$(document).ready(adjustInsideMainContent);
254$(window).on("resize", adjustInsideMainContent);
255
256
257
258
259// -------------------------------  Checks for slider and quick links. If there are QL, move controls up ------------------------------- 
260$(document).ready(function() {
261  const $inner = $(".inner");
262
263  // Only check for quicklinks inside .nogroup.Top
264  const hasQuickLinks = $inner.find(".nogroup.Top .quicklinkscontainer").length > 0;

265  const $sliderControls = $inner.find(".slidercontainer > .controls");
266
267  if (hasQuickLinks && $sliderControls.length > 0) {
268    $sliderControls.addClass("ql-active");
269  }
270});
271
272// --------------- Checks for quick links. If there are QL, pads the main container on inner pages down to make room ----------------
273// $(document).ready(function() {
274//   const $inner = $(".inner");
275//   const hasTopQuickLinks = $inner.find(".nogroup.Top .quicklinkscontainer").length > 0;
276//   const $main = $inner.find("main");
277
278//   if (hasTopQuickLinks && $main.length > 0) {
279//     $main.addClass("ql-active");
280//   }
281// });
282
283
284// -------------------------------  Injects the search into the random banner and sliders ------------------------------- 
285// document.addEventListener("DOMContentLoaded", function () {
286//   const htmlToInject = `
287//   <div class="searchBar">
288//     <form role="search" class="search bar" method="get" name="formSearch" action="index.asp">
289//       <div class="fieldAndButton">
290//         <label class="hidden" for="searchField">Search</label>
291//         <input id="searchField" class="searchField" name="keyword" value="" aria-label="search" placeholder="What can we help you find?">
292//         <a href="#" id="searchbutton" onclick="$('.search.bar').submit();" role="button" aria-label="search" class="searchMag">
293//           <i class="fa fa-search" aria-label="search" aria-hidden="true"></i>
294//         </a>
295//         <input type="submit" class="hidden" value="Search" tabindex="-1">
296//       </div>
297//       <input type="hidden" name="SEC" value="45892350-90D6-4AC9-882E-5C29A444F068">
298//     </form>
299//   </div>
300//   `;
301
302//   const hasRandom = document.querySelector(".inner #random.innerimage");
303//   const hasSlider = document.querySelector(".inner .Top .slidercontainer");
304
305//   const targetSelectors = [];
306
307//   // Only add the random selector if there's no slider
308//   if (hasRandom && !hasSlider) {
309//     targetSelectors.push(".inner #random.innerimage");
310//   }
311
312//   // Always include home or inner sliders
313//   if (document.querySelector(".home .Top .slidercontainer")) {
314//     targetSelectors.push(".home .Top .slidercontainer");
315//   }
316//   if (hasSlider) {
317//     targetSelectors.push(".inner .Top .slidercontainer");
318//   }
319
320//   // Inject into allowed targets
321//   targetSelectors.forEach(selector => {
322//     const container = document.querySelector(selector);
323//     if (container) {
324//       let ul = container.querySelector("ul");
325//       if (!ul) {
326//         ul = document.createElement("ul");
327//         container.appendChild(ul);
328//       }
329//       ul.insertAdjacentHTML("beforeend", htmlToInject);
330//     }
331//   });
332// });
333
334// -------------------------------  Adds label for external links ------------------------------- 
335$(document).ready(function () {
336  $('a[target="_blank"]').each(function () {
337      var $link = $(this);
338      var ariaLabel = $link.attr('aria-label');
339
340      if (ariaLabel) {
341          if (!ariaLabel.includes('Opens in a new tab')) {
342              $link.attr('aria-label', ariaLabel + ' - Opens in a new tab');
343          }
344      } else {
345          $link.attr('aria-label', 'Opens in a new tab');
346      }
347  });
348});
349
350
351//   Removes the height of the nav bar from the sliders bg color
352(function () {
353  const NAV = '.topbar2 .banner nav.horizontal.block';
354
355  function getNavHeight() {
356    const el = document.querySelector(NAV);
357    if (!el) return 0;
358    // Use offsetHeight for a stable, painted height
359    return el.offsetHeight || el.getBoundingClientRect().height || 0;
360  }
361
362  function setVar(h) {
363    // Set on :root so all slides (present or future) inherit it
364    document.documentElement.style.setProperty('--nav-h', h + 'px');
365  }
366
367  function update() {
368    const h = getNavHeight();
369    if (h > 0) setVar(h);
370  }
371
372  // Robust init: run now, at DOM ready, after full load, and on resize
373  update();
374
375  if (document.readyState === 'loading') {
376    document.addEventListener('DOMContentLoaded', update, { once: true });

377  } else {
378    update();
379  }
380
381  window.addEventListener('load', update, { once: true });
382  window.addEventListener('resize', update);
383  window.addEventListener('scroll', update, { passive: true });
384
385  // If the nav’s height changes dynamically (sticky/compact), observe it
386  const navEl = document.querySelector(NAV);
387  if (navEl && 'ResizeObserver' in window) {
388    new ResizeObserver(update).observe(navEl);
389  }
390
391  // Small retry loop in case the nav renders late on refresh
392  let tries = 0;
393  const maxTries = 20; // ~2s total
394  const timer = setInterval(() => {
395    update();
396    if (++tries >= maxTries || getNavHeight() > 0) clearInterval(timer);
397  }, 100);
398})();
399
400
401// -------------------------------  Hero Title Injector (portable, JS-only) ------------------------------- 
402(function(){
403  // ===== Config =====
404  var MODE="category";                 // "category" | "page"
405  var ARIA=true;                       // auto aria-hide when MODE === "page"
406  var MOVE_BREADCRUMB=false;           // set true to move breadcrumb under injected title
407
408  var HERO=[".inner .Top .slidercontainer",
409            ".inner .allContainer #random.innerimage"];
410
411  // Desktop + mobile menus
412  var NAV=[".topbar2 .banner nav.primary.menu.block.horizontal.slabmaxthreecol",
413           ".topbar2 nav.primary.block.mobilemenu"];
414
415  // Breadcrumb selector (used only if MOVE_BREADCRUMB = true)
416  var SELECTOR_BREADCRUMB=".inner .inner-header";
417  var BC_MOVED_ATT="data-hero-breadcrumb-moved";
418
419  // ===== Utilities =====
420  function q(s,r){return (r||document).querySelector(s)}
421  function v(el){if(!el)return false;var s=getComputedStyle(el);return s.display!=="none"&&s.visibility!=="hidden"&&(el.offsetWidth||el.offsetHeight||el.getClientRects().length)}
422  function n(t){return (t||"").replace(/\s+/g," ").trim()}
423  function vis(list){for(var i=0;i<list.length;i++){var el=q(list[i]);if(el&&v(el))return el}for(var j=0;j<list.length;j++){var el2=q(list[j]);if(el2)return el2}return null}
424  function hero(){for(var i=0;i<HERO.length;i++){var el=q(HERO[i]);if(el&&v(el))return el}for(var j=0;j<HERO.length;j++){var el2=q(HERO[j]);if(el2)return el2}return null}
425  function liText(li){if(!li)return "";var a=li.querySelector(":scope > a, a");return n((a?a.textContent:li.textContent)||"")}
426
427  // ===== Search-page detection (URL-based) =====
428  function isSearchPage(){
429    try{
430      var p=new URLSearchParams(location.search);
431      if(p.has("keyword")) return true;             // robust check
432    }catch(e){}
433    return /\bkeyword=/.test(location.search);       // simple fallback
434  }
435
436  // ===== Menu label resolvers =====
437  function navRoot(){return vis(NAV)}
438
439  // MODE === "page": prefer current.actual; else any .current
440  function pageLabelFromMenu(){
441    var nav=navRoot(); if(!nav) return "";
442    var p=nav.querySelector("li.current.actual"); if(p) return liText(p);
443    var any=nav.querySelector("li.current"); return liText(any);
444  }
445
446  // MODE === "category": prefer top-level .current that has a child .current.actual
447  function categoryLabelFromMenu(){
448    var nav=navRoot(); if(!nav) return "";
449    var tops=nav.querySelectorAll(":scope > ul > li");
450    for(var i=0;i<tops.length;i++){
451      var li=tops[i];
452      if(li.classList.contains("current") && li.querySelector("ul li.current.actual")) return liText(li);
453    }
454    for(var j=0;j<tops.length;j++){
455      var li2=tops[j];
456      if(li2.classList.contains("current")) return liText(li2);
457    }
458    var any=nav.querySelector("li.current");
459    var top=any && any.closest(":scope > ul > li");
460    return liText(top||any);
461  }
462
463  function computeLabel(){
464    // URL override for search page
465    if(isSearchPage()) return "Search";
466    return MODE==="page" ? pageLabelFromMenu() : categoryLabelFromMenu();
467  }
468
469  // ===== Inject =====
470  function inject(){
471    var h=hero(); if(!h||h.hasAttribute("data-hero-title")) return;
472    var text=n(computeLabel()); if(!text) return;
473
474    var wrap=document.createElement("div");
475    wrap.className="hero-title-wrap";

476    var h2=document.createElement("h2");
477    h2.className="hero-title";
478    h2.textContent=text;
479    if(ARIA && MODE==="page") h2.setAttribute("aria-hidden","true");
480    wrap.appendChild(h2);
481
482    if(MOVE_BREADCRUMB){
483      var bc=q(SELECTOR_BREADCRUMB);
484      if(bc && !bc.hasAttribute(BC_MOVED_ATT)){
485        bc.setAttribute(BC_MOVED_ATT,"true");
486        wrap.appendChild(bc);
487      }
488    }
489
490    h.appendChild(wrap);
491    h.setAttribute("data-hero-title","true");
492  }
493
494  if(document.readyState==="loading") document.addEventListener("DOMContentLoaded",inject);
495  else inject();
496})();