· 6 years ago · Aug 02, 2019, 02:44 PM
1import $ from 'jquery';
2import whatInput from 'what-input';
3import baguetteBox from 'baguettebox.js';
4import slickCarousel from 'slick-carousel';
5import select2 from 'select2';
6import datatables from 'datatables.net-zf';
7import '../../../node_modules/corejs-typeahead/dist/typeahead.jquery';
8import Bloodhound from "bloodhound-js";
9import Handlebars from '../../../node_modules/handlebars/dist/handlebars.min.js';
10import lazysizes from 'lazysizes';
11import polyfill from 'babel-polyfill';
12import Blazy from "../../../node_modules/blazy/blazy.min.js";
13import axios from "../../../node_modules/axios/dist/axios.min.js";
14
15
16window.$ = window.JQuery = $;
17window.Bloodhound = Bloodhound;
18
19//import Foundation from 'foundation-sites';
20// If you want to pick and choose which modules to include, comment out the above and uncomment
21// the line below
22import './lib/foundation-explicit-pieces';
23
24
25//import '../../../node_modules/bloodhound-js/dist/bloodhound.min';
26//import './components/components';
27//import './components/c-google-maps';
28
29$(document).foundation();
30
31function isExternalLink(url) {
32 if (url.host != "") {
33 return (url.host !== window.location.host);
34 }
35 return false;
36}
37// blazy
38var blazy = new Blazy({
39 container: '.carousel',
40});
41
42$(document).ready(function () {
43
44
45
46
47
48 var appfunc = {
49
50 init: function () {
51
52 this.miscFunctions();
53 this.tableFunc();
54 this.mainMenuBehaviours();
55 this.menuHighlight();
56 this.autoSelectDayTab();
57 this.searchConFunc();
58 this.cookieFuncs();
59 this.carousel();
60 this.slick();
61 this.captionThis();
62 this.googleMaps();
63 this.bloodhound();
64 this.paginationClick();
65 // this.courseNavClick();
66 this.videoPosterComponent();
67 this.akariCourseNav();
68 this.megaMenuDropDown();
69 this.megaMenuJSON();
70 this.feesAndFundingTable();
71 this.checkIfLightBoxExists();
72
73
74 // this.bannerResize();
75
76 },
77
78 // add all necessary functions here
79 miscFunctions: function () {
80
81 //// SVGs
82 $("span[data-svg]").each(function (i, obj) {
83 var svgName = $(this).attr("data-svg");
84 var svgClass = "";
85 if ($(this).attr("class")) {
86 svgClass = $(this).attr("class");
87 }
88 if (!$(this).children().length) {
89 $(this).append('<svg class="icon ' + svgName + ' ' + svgClass + '"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#' + svgName + '"></use></svg>');
90 }
91 });
92
93 //// Accordion Filter Titles
94 if ($('.accordion-filter .filter-title').length) {
95 $(".accordion-filter .filter-title").click(function () {
96 $(this).toggleClass("active");
97 $(this).next().toggleClass("hide");
98 });
99 }
100
101 //// Open all external links in a new window
102
103 $('a').each(function () {
104 if (isExternalLink(this)) {
105 $(this).attr('target', '_blank');
106 }
107 });
108
109 $("a").filter(function () {
110 if ($(this).attr('href')) {
111 return $(this).attr("href").match(/\.(pdf|doc|docx|ppt|pptx|xls|slxs|epub|odp|ods|txt|rtf)$/i);
112 }
113 }).attr('target', '_blank');
114
115
116 if ($("#subjectLevelNav").length) {
117 $("#subject-level-links").change(function () {
118 document.location.href = $(this).val();
119 });
120 }
121
122 $('input#search-queryinput').click(function () {
123 $('.tt-menu').toggle();
124 });
125
126
127 $.fn.ToggleInputValue = function () {
128 return $(this).each(function () {
129 var Input = $(this);
130 var default_value = Input.val();
131
132 Input.focus(function () {
133 if (Input.val() == default_value) Input.val("");
134 }).blur(function () {
135 if (Input.val().length == 0) Input.val(default_value);
136 });
137 });
138 }
139
140 $('#search-consierge-queryinput').ToggleInputValue();
141
142
143 // Select:
144
145 let moneyPageURL = window.location.pathname.split('/');
146 if (moneyPageURL[2] != 'c-money.html') {
147 /*$('select').select2({
148 minimumResultsForSearch: 4,
149 placeholder: 'Please select'
150 });*/
151 $("select").not(".adm-select").select2({
152 minimumResultsForSearch: 4,
153 placeholder: 'Please select'
154 });
155 }
156 // console.log(moneyPageURL[2]);
157
158 $('select option[value="!null"]').val('');
159
160 //// Resize font size on excessively long titles
161 var mainTitle = $('h1.giant');
162
163 if (mainTitle.text().length > 45) {
164 $(mainTitle).css({
165 "font-size": "2.75rem"
166 });
167 }
168
169 },
170 //////// *************************** //////////
171
172 tableFunc: function () {
173 $('table').each(function () {
174 var table = $(this);
175
176 // init DataTable
177 table
178 .on('init.dt', function (e) {
179 //console.log(e)
180 var t = $(e.target).parent();
181 var width = Math.round(t.width());
182 var scrollWidth = t[0].scrollWidth;
183 var maxScroll = scrollWidth - width;
184
185 if (maxScroll == 0) {
186 t.parent().parent().addClass('scroll-max')
187 }
188 })
189 .DataTable({
190 "scrollX": true,
191 "paging": false,
192 "ordering": false,
193 "info": false,
194 "searching": false
195 });
196
197
198 // Toggle class if max scroll reached
199 document.addEventListener('scroll', function (event) {
200 if (event.target.classList.contains('dataTables_scrollBody')) {
201 // do some stuff
202 var table = $(event.target);
203 var width = Math.round(table.width());
204 var scrollWidth = table[0].scrollWidth;
205 var scrollLeft = table[0].scrollLeft;
206
207 var maxScroll = scrollWidth - width;
208
209 //console.log(scrollLeft + ' : ' + maxScroll)
210
211 if (scrollLeft >= maxScroll) {
212 // Max scroll reached
213 table.parent().parent().addClass('scroll-max')
214 } else {
215 table.parent().parent().removeClass('scroll-max')
216 }
217 }
218 }, true);
219
220 });
221 },
222
223 mainMenuBehaviours: function () {
224 // Hide arrows if no submenu exists
225 var level_0_items = $('ul.level-0 li a');
226
227 level_0_items.each(function () {
228 if ($(this).next().next('ul').children().length < 1) {
229 $(this).siblings('button.submenu-toggle').css({
230 "display": "none"
231 });
232 }
233 });
234
235 // ==== main menu trigger
236 $('a.main-menu-btn').click(function () {
237 $(this).toggleClass('menu-ic close-ic');
238 });
239
240 if ($('.is-overlay-absolute').hasClass('is-visible') === true) {
241 $('.is-overlay-absolute').click(function () {
242 $('a.main-menu-btn').toggleClass('close-ic menu-ic');
243 })
244 }
245
246 $('li.search-concierge-btn > a').click(function () {
247 $('.search-concierge').toggle();
248 $('#search-consierge-queryinput').focus();
249 $(this).toggleClass('search-ic close-search');
250
251 if ($('li.search-concierge-btn > a ').hasClass('close-search')) {
252 $('.overlay').toggle();
253 }
254 });
255
256 $('button.submenu-toggle').click(function () {
257 if ($(this).attr("aria-expanded") === 'true') {
258 $(this).attr({
259 'style': 'transform: rotate(-90deg)'
260 });
261 } else {
262 $(this).attr({
263 'style': 'transform: rotate(90deg)'
264 });
265 }
266 });
267
268 },
269
270 menuHighlight: function () {
271 var activeLevel_0 = $('ul.level-0 li.active.is-accordion-submenu-parent > a');
272 var actvAttr = activeLevel_0.attr("href");
273 var url = window.location.href;
274 var menubtn = document.querySelector('a.main-menu-btn');
275
276 $(menubtn).click(function () {
277 if (url.includes(actvAttr)) {
278 activeLevel_0.css({
279 "color": "#e5006e"
280 });
281 };
282 $('ul.level-0 li.active.is-accordion-submenu-parent > a').next(this).trigger('click')
283 });
284
285 $('ul.level-0 li.active.is-accordion-submenu-parent > a')
286 .next(this)
287 .click(function () {
288 $('ul.level-1.is-active li a ').each(function () {
289 if (url.includes($(this).attr('href'))) {
290 $(this).parent('li').css({
291 "background-color": "#5EC4B6"
292 });
293 }
294 });
295 });
296 },
297
298 autoSelectDayTab: function () {
299 if ($('[data-tab-type=Days]').length) {
300 var d = new Date();
301 var day = d.getDay() - 1;
302 if (day > -1 && day < 5) {
303 $('[data-tab-type=Days] ul.tabs li')[day].click()
304 }
305 }
306
307 $('select#subject-level-links').select2({
308 placeholder: 'All levels'
309 });
310 },
311
312 searchConFunc: function () {
313 $('li.search-concierge-btn a').click(function () {
314 if ($('#offCanvas').hasClass('is-open') === true) {
315 $('a.main-menu-btn').trigger('click');
316 }
317 });
318
319 $('a.main-menu-btn').click(function () {
320 if ($('div.search-concierge').is(':visible')) {
321 $('li.search-concierge-btn a').trigger('click');
322 }
323 });
324
325 // overlay show/hide on search concierge show/hide:
326
327 $('li.search-concierge-btn > a').click(function () {
328
329 if ($('.search-concierge').is(':visible') === true) {
330 $('main').css({
331 'background': 'black'
332 });
333 $('section.header-module-landing .header-module-content, section.header-module-landing .header-module-image-text, section.ct, section.promo, section.accordion, .colleges, .grid-x').css({
334 'z-index': '-1'
335 });
336 $('nav > ul.breadcrumbs').toggle();
337 } else {
338 $('main').css({
339 'background': 'none'
340 });
341 $('section.header-module-landing .header-module-content, section.header-module-landing .header-module-image-text, section.ct, section.promo, section.accordion, .colleges, nav > ul.breadcrumbs, .grid-x').css({
342 'z-index': '0'
343 });
344 $('nav > ul.breadcrumbs').toggle();
345
346 }
347 });
348 },
349
350 cookieFuncs: function () {
351 // Document.click to watch cookie notice
352 $(document).on('click', 'a.close-cookie-banner', function (e) {
353 e.preventDefault;
354 iConsent();
355 });
356
357 var consentCookie = getCookie('complianceCookie');
358 if (consentCookie !== 'true') {
359 showComplianceNotice();
360 }
361
362 function showComplianceNotice() {
363 var bodytag = document.getElementsByTagName('body')[0];
364 var div = document.createElement('div');
365 div.setAttribute('id', 'cookie-law');
366 div.setAttribute('class', 'bahama-blue-bg');
367 div.setAttribute('style', 'font-family:Helvetica Neue;');
368 div.innerHTML = '<div class="grid-container grid-x align-middle grid-padding-y grid-padding-x"><div class="cell cookie-large-font" style="font-weight:bold;"> Privacy and Cookie policy </div><div class="cell small-24 small-font">Our website uses cookies. By continuing we assume your permission to deploy cookies, as detailed in our <a href="/privacy-cookies-policy/" rel="nofollow" title="Privacy & Cookies Policy" style="color:white;">privacy and cookies policy</a>.</div><div class="cell small-24 small-font"><a class="close-cookie-banner" href="#"><span class="button banner" id="banner-accept" >Accept</span></a><a href="/cookies"><span class="cookie-redirect">Learn more about our cookies</span></a></div></div>';
369
370 bodytag.insertBefore(div, bodytag.firstChild); // Adds the Cookie Law Banner just after the opening <body> tag
371 }
372
373 function iConsent() {
374 // Create the cookie
375 setCookie('complianceCookie', 'true', 14); // Create the cookie: name, value, duration
376
377 // Remove the notice
378 $('#cookie-law').slideUp(function () {
379 $('#cookie-law').remove();
380 });
381 }
382
383 // Set a cookie
384 function setCookie(name, value, days) {
385 var expires = "";
386 if (days) {
387 var date = new Date();
388 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
389 expires = "; expires=" + date.toUTCString();
390 }
391 document.cookie = name + "=" + (value || "") + expires + "; path=/";
392 }
393
394 // Get cookie value
395 function getCookie(name) {
396 var nameEQ = name + "=";
397 var ca = document.cookie.split(';');
398 for (var i = 0; i < ca.length; i++) {
399 var c = ca[i];
400 while (c.charAt(0) == ' ') c = c.substring(1, c.length);
401 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
402 }
403 return null;
404 }
405
406 // Delete cookie
407 function eraseCookie(name) {
408 document.cookie = name + '=; Max-Age=-99999999;';
409 }
410 },
411
412 carousel: function () {
413 if (('.carousel').length) {
414 $(document).ready(function () {
415 $('.carousel').each(function () {
416
417 var col = $(this).data("col");
418 var arrows = $(this).data("arrows");
419 var dots = $(this).data("dots");
420 var variableWidth = $(this).data("variable");
421 var slickInduvidual = $(this);
422 if (col) {
423 col = col;
424 } else {
425 col = 3;
426 }
427 if (arrows == true) {
428 arrows = true;
429 slickInduvidual.next().find('.carousel-next').show();
430 slickInduvidual.next().find('.carousel-prev').show();
431 } else {
432 arrows = false;
433 slickInduvidual.next().find('.carousel-next').hide();
434 slickInduvidual.next().find('.carousel-prev').hide();
435 }
436
437 if (dots == true) {
438 dots = true;
439 } else {
440 dots = false;
441 }
442
443 if (variableWidth == true) {
444 variableWidth = true;
445 } else {
446 variableWidth = false;
447 }
448
449
450 slickInduvidual.slick({
451 infinite: true,
452 slidesToShow: col,
453 slidesToScroll: col,
454 dots: dots,
455 arrows: arrows,
456 variableWidth: variableWidth,
457 lazyLoad: 'ondemand',
458 responsive: [{
459 breakpoint: 960,
460 settings: {
461 slidesToShow: 3,
462 slidesToScroll: 3
463 }
464 },
465 {
466 breakpoint: 768,
467 settings: {
468 slidesToShow: 2,
469 slidesToScroll: 2
470 }
471 },
472 {
473 breakpoint: 640,
474 settings: {
475 slidesToShow: 1,
476 slidesToScroll: 1
477 }
478 }
479 ],
480 nextArrow: slickInduvidual.next().find('.carousel-next'),
481 prevArrow: slickInduvidual.next().find('.carousel-prev')
482 });
483
484 var childElements = $(this).find('li').length;
485 if (col > (childElements - 1)) {
486 slickInduvidual.next().find('.carousel-next').hide();
487 slickInduvidual.next().find('.carousel-prev').hide();
488 }
489
490
491
492 // Revalidate slick on change
493 $('.carousel').on('afterChange', function (event, slick, direction) {
494 blazy.revalidate();
495 });
496
497 $('.carousel--featured').on('afterChange', function (event, slick, direction) {
498 blazy.revalidate();
499 });
500
501 });
502 });
503 }
504 },
505
506 slick: function () {
507 function createSlick() {
508 $(".news-items").not('.slick-initialized').slick({
509 dots: false,
510 slide: '.news-item',
511 focusOnSelect: true,
512 slidesToShow: 1,
513 slidesToScroll: 1,
514 rows: 0,
515 lazyLoad: 'ondemand',
516 nextArrow: $(".news-items").next().find('.carousel-next'),
517 prevArrow: $(".news-items").next().find('.carousel-prev'),
518 responsive: [{
519 breakpoint: 768,
520 settings: 'unslick'
521 }],
522 mobileFirst: true
523 });
524 }
525
526 $('.news-items').on('afterChange', function (event, slick, direction) {
527 blazy.revalidate();
528 });
529
530 createSlick();
531
532 $(window).on('resize', createSlick);
533
534 $(document).ready(function () {
535 if (!($('.slick-slide').length > 1)) {
536 $('.carousel-arrows').hide();
537 }
538 $('.h__menu__listitem__link').attr('tabindex',0);
539 });
540
541 $(window).on('resize orientationchange', function () {
542 if (!($('.slick-slide').length > 1)) {
543 $('.carousel-arrows').hide();
544 } else {
545 $('.carousel-arrows').show();
546 }
547 });
548
549
550 if (('.video').length) {
551
552
553 $(".transcript-title").click(function () {
554 event.preventDefault();
555 $(this).next().toggleClass('transcript-show');
556 });
557
558 }
559
560 window.addEventListener('load', function () {
561 if (('.gallery').length) {
562 baguetteBox.run('.gallery');
563 }
564 if (('.carousel').length) {
565 baguetteBox.run('.carousel');
566 }
567 });
568
569 },
570
571
572 captionThis: function () {
573
574 $('figcaption').click(function () {
575 $(this).children('span').toggle();
576 });
577 //
578 // if(('.gallery').length){
579 // $(".gallery-item figcaption").click(function() {
580 // $(this).parent().toggleClass('show-caption');
581 // });
582 // }
583 },
584
585
586
587 googleMaps: function () {
588 window.onload = function () {
589
590 var gmarkers = [];
591 var infoWindows = [];
592 var elements = document.getElementsByClassName("googlemap");
593
594 for (var x = 0; x < elements.length; x++) {
595 var mapdata = elements[x];
596 var assetid = mapdata.getAttribute('data-assetid');
597
598 if (mapdata) {
599 var infowindow = new google.maps.InfoWindow();
600 var jsondata = mapdata.getAttribute('data-json');
601 var zoomdata = parseFloat(mapdata.getAttribute('data-zoom'));
602 var markerdata = mapdata.getAttribute('data-marker');
603 var longitudedata = parseFloat(mapdata.getAttribute('data-longitude'));
604 var latitudedata = parseFloat(mapdata.getAttribute('data-latitude'));
605 var json = jsondata;
606 var jsonValue = json.length > 0 ? JSON.parse('' + jsondata + '') : [];
607 var locations = [];
608
609 for (var i = 0; i < jsonValue.length; i++) {
610 var title = '' + jsonValue[i].title;
611 var content = '<h3>' + jsonValue[i].title + '</h3><p class="small">» <a class="small" href="https://www.google.com/maps?daddr=' + parseFloat(jsonValue[i].latitude) + ',' + parseFloat(jsonValue[i].longitude) + '&ll" name="fs_map_link" target="_blank">Get directions</a></p><p>' + jsonValue[i].content + '</p>';
612 locations.push([title, parseFloat(jsonValue[i].latitude), parseFloat(jsonValue[i].longitude), 1, content]);
613 }
614
615 var locations = [locations];
616 var locations = locations[0];
617
618 }
619
620 var initMap = function initMap() {
621
622 if (mapdata) {
623 var map = new google.maps.Map(mapdata, {
624 zoom: zoomdata,
625 center: {
626 lat: latitudedata,
627 lng: longitudedata
628 }
629 });
630
631 var infowindow = new google.maps.InfoWindow();
632 setMarkers(map, assetid, gmarkers, infoWindows, locations);
633 }
634
635 }
636
637 initMap();
638
639 function setMarkers(map, assetid, gmarkers, infoWindows, locations) {
640
641 var image = {
642 url: '' + markerdata + '',
643 scaledSize: new google.maps.Size(28, 38),
644 origin: new google.maps.Point(0, 0),
645 anchor: new google.maps.Point(0, 32)
646 };
647
648 var shape = {
649 coords: [1, 1, 1, 20, 18, 20, 18, 1],
650 type: 'poly'
651 };
652
653 for (var i = 0; i < locations.length; i++) {
654 var location = locations[i];
655 var marker = new google.maps.Marker({
656 position: {
657 lat: location[1],
658 lng: location[2]
659 },
660 map: map,
661 icon: image,
662 shape: shape,
663 title: location[0],
664 zIndex: location[3],
665 assetid: assetid
666 });
667
668 gmarkers.push(marker);
669
670 google.maps.event.addListener(marker, 'map_changed', function () {
671 if (map) {
672 infowindow.open(map, marker);
673 } else {
674 infowindow.close();
675 }
676 });
677
678 infoWindows.push(infowindow);
679
680 google.maps.event.addListener(marker, 'click', (function (marker, i) {
681 return function () {
682 infowindow.setContent(locations[i][4]);
683 infowindow.open(map, marker);
684 }
685 })(marker, i));
686 }
687 }
688
689 var link = ".map-markers" + assetid + " .checkbox";
690 $(link).click(function () {
691 var cat = $(this).attr("value");
692 var asset = $(this).attr("data-assetid");
693 if ($(this).is(":checked")) {
694 show(cat, asset, mapdata);
695 } else {
696 hide(cat, asset);
697 }
698 });
699
700 }
701
702 function show(category, asset, mapdata) {
703 var infowindow = new google.maps.InfoWindow(mapdata);
704 for (var i = 0; i < gmarkers.length; i++) {
705 if (gmarkers[i]['assetid'] == asset) {
706 if (gmarkers[i]['title'] == category) {
707 gmarkers[i].setVisible(true);
708 }
709 }
710 }
711 }
712
713 function hide(category, asset, mapdata) {
714 var infowindow = new google.maps.InfoWindow(mapdata);
715 for (var i = 0; i < gmarkers.length; i++) {
716 if (gmarkers[i]['assetid'] == asset) {
717 if (gmarkers[i]['title'] == category) {
718 gmarkers[i].setVisible(false);
719 closeAllInfoWindows(mapdata, gmarkers[i]);
720 }
721 }
722 }
723 }
724
725 function closeAllInfoWindows(map, marker) {
726 infowindow.close(map);
727 for (var i = 0; i < infoWindows.length; i++) {
728 infoWindows[i].close();
729 }
730 }
731
732 }
733
734 var mapdata = document.getElementById('map');
735 if (mapdata) {
736 var script = document.createElement('script');
737 script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyAoDVs2Q1Z32p3rKZzk3vYnn8Q0401ocw0&callback=initMap";
738 script.setAttribute("defer", "true");
739 document.body.appendChild(script);
740 }
741
742 },
743
744 bloodhound: function () {
745
746 var matrixEnv;
747 // conceirge
748 if (typeof matrixEnv !== 'undefined') {
749 var funnelbackCollection = matrixEnv === 'dev' ? '' : '-prod';
750 }
751
752 var engine = new Bloodhound({
753 queryTokenizer: Bloodhound.tokenizers.whitespace,
754 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
755 remote: {
756
757 // url: 'https://showcase.funnelback.com/s/suggest.json?profile=_default&collection=showcase-concierge&partial_query=%QUERY',
758 url: 'https://search.arts.ac.uk/s/suggest.json?collection=ual-web-prod&fmt=json&alpha=0.5&profile=_default&show=10&sort=0&partial_query=%QUERY',
759 wildcard: '%QUERY',
760 filter: function filter(engine) {
761 // Map the remote source JSON array to a JavaScript object array
762 var results = $.map(engine, function (item) {
763 return {
764 value: item
765 };
766 });
767
768 results = results.filter(function (item, index, self) {
769 return index === self.findIndex(function (t) {
770 return t.value === item.value;
771 });
772 });
773
774 return results;
775 }
776
777 }
778 });
779
780 var courses = new Bloodhound({
781 queryTokenizer: Bloodhound.tokenizers.whitespace,
782 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
783 remote: {
784 // url: 'https://showcase.funnelback.com/s/suggest.json?profile=ac_books&collection=showcase-recommender&fmt=json++&show=3&partial_query=%QUERY',
785 url: 'https://search.arts.ac.uk/s/suggest.json?collection=ual-courses-xml-prod&fmt=json%2B%2B&alpha=0.5&profile=courses-autocomplete&show=10&sort=0&partial_query=%QUERY',
786 wildcard: '%QUERY',
787 filter: function filter(engine) {
788 // Map the remote source JSON array to a JavaScript object array
789 return $.map(engine, function (item) {
790 if (item.disp.metaData) {
791 return {
792 value: item.key,
793 thumb: item.disp.metaData.thumbnail,
794 url: item.disp.displayUrl,
795 college: item.disp.metaData.college,
796 level: item.disp.metaData.level,
797 title: item.disp.metaData.title
798 };
799 }
800 });
801 }
802 }
803 });
804
805 var events = new Bloodhound({
806 queryTokenizer: Bloodhound.tokenizers.whitespace,
807 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
808 remote: {
809 // url: 'https://showcase.funnelback.com/s/suggest.json?profile=ac_dvds&collection=showcase-csv&fmt=json++&show=3&partial_query=%QUERY',
810 url: 'https://search.arts.ac.uk/s/suggest.json?collection=ual-eventnews-prod&fmt=json%2B%2B&alpha=0.5&profile=eventnews-autocomplete&show=10&sort=0&partial_query=%QUERY',
811 wildcard: '%QUERY',
812 filter: function filter(engine) {
813 // Map the remote source JSON array to a JavaScript object array
814 return $.map(engine, function (item) {
815 if (item.disp.metaData) {
816 return {
817 value: item.key,
818 url: item.disp.displayUrl,
819 title: item.disp.metaData.title
820 };
821 }
822 });
823 }
824 }
825 });
826
827 // kicks off the loading/processing of `local` and `prefetch`
828 engine.initialize();
829 courses.initialize();
830 events.initialize();
831
832 var txtTemplate = '<div class="cell small-24 medium-12 large-8 grid-x black-bg suggested-details"><h5><a href="./?a=1674&in=website&query={{value}}">{{value}}</a></h5></div>';
833
834 var eventsTemplate = '<div class="cell small-24 medium-12 large-8 grid-x black-bg suggested-details"><h5><a href="{{url}}">{{title}}</a></h5></div>';
835
836 var imgTemplate = '<div class="cell small-24 medium-12 large-8 grid-x"><div class="cell auto shrink"><a href="{{url}}"><img src="https://ual-media-res.cloudinary.com/image/fetch/c_fill,f_auto,g_auto,h_80,w_80/{{thumb}}" alt="" /></a></div><div class="cell auto suggested-details"><h5><a href="{{url}}">{{title}}</a></h5><div class="details"><dl><dt>College:</dt><dd>{{ college }}</dd><dt>Level:</dt><dd>{{level}}</dd></dl></div></div></div>';
837
838 //$('#bloodhound .typeahead').typeahead({
839 $('#search-consierge-queryinput').typeahead({
840 highlight: true,
841 minLength: 3,
842 hint: !1
843 }, {
844 name: 'states',
845 displayKey: 'value',
846 // `ttAdapter` wraps the suggestion engine in an adapter that
847 // is compatible with the typeahead jQuery plugin
848 source: engine.ttAdapter(),
849 templates: {
850 empty: ['<span class="title cell"><h3>Suggestions</h3></span>', '<div class="cell small-24 medium-12 large-8 grid-x"><div class="empty-message tt-suggestion">', 'No results found', '</div></div>'].join('\n'),
851 header: '<span class="title cell"><h3>Suggestions</h3></span>',
852 suggestion: Handlebars.compile(txtTemplate)
853 }
854 }, {
855 name: 'courses',
856 displayKey: 'value',
857 // `ttAdapter` wraps the suggestion engine in an adapter that
858 // is compatible with the typeahead jQuery plugin
859 source: courses.ttAdapter(),
860 templates: {
861 empty: ['<span class="title cell"><h3>Courses</h3></span>', '<div class="cell small-24 medium-12 large-8 grid-x"><div class="empty-message tt-suggestion">', 'No results found', '</div></div>'].join('\n'),
862 header: '<span class="title cell"><h3>Courses</h3></span>',
863 suggestion: Handlebars.compile(imgTemplate)
864 }
865 }, {
866 name: 'events',
867 displayKey: 'value',
868 // `ttAdapter` wraps the suggestion engine in an adapter that
869 // is compatible with the typeahead jQuery plugin
870 source: events.ttAdapter(),
871 templates: {
872 empty: ['<span class="title cell"><h3>Events</h3></span>', '<div class="cell small-24 medium-12 large-8 grid-x"><div class="empty-message tt-suggestion">', 'No results found', '</div></div>'].join('\n'),
873 header: '<span class="title cell"><h3>Events</h3></span>',
874 suggestion: Handlebars.compile(eventsTemplate)
875 }
876 });
877
878 },
879 paginationClick: function () {
880
881 document.addEventListener("click", function (event) {
882 if (event.target.matches("#pag-comp ul li a")) {
883
884 $("html, body").animate({
885 scrollTop: $(".results").offset().top - 150
886 }, 500);
887
888 }
889
890 }, false);
891
892 },
893 courseNavClick: function () {
894 $(".course-nav ul a[href^='#']").on("click", function (e) {
895 // prevent default anchor click behavior
896 e.preventDefault();
897
898 // animate
899 $("html, body").animate({
900 scrollTop: $(this.hash).offset().top - 120
901 },
902 300,
903 function () { }
904 );
905 });
906
907 $("li a[href^='#']").on("click", function (e) {
908 // prevent default anchor click behavior
909 e.preventDefault();
910 var menuHeight = $('.menu-container').innerHeight();
911 menuHeight *= 1.5;
912
913 $("html, body").animate({
914 scrollTop: $(this.hash).offset().top - menuHeight
915 }, 300);
916 });
917 },
918
919 videoPosterComponent: function () {
920 $(document).on('click', '.js-videoPoster', function (ev) {
921 ev.preventDefault();
922 var $poster = $(this);
923 var $wrapper = $poster.closest('.js-videoWrapper');
924 videoPlay($wrapper);
925 });
926
927 // play the targeted video (and hide the poster frame)
928 function videoPlay($wrapper) {
929 var $iframe = $wrapper.find('.js-videoIframe');
930 var src = $iframe.data('src');
931 // hide poster
932 $wrapper.addClass('videoWrapperActive');
933 // add iframe src in, starting the video
934 $iframe.attr('src', src);
935 }
936
937 // stop the targeted/all videos (and re-instate the poster frames)
938 function videoStop($wrapper) {
939 // if we're stopping all videos on page
940 if (!$wrapper) {
941 var $wrapper = $('.js-videoWrapper');
942 var $iframe = $('.js-videoIframe');
943 // if we're stopping a particular video
944 } else {
945 var $iframe = $wrapper.find('.js-videoIframe');
946 }
947 // reveal poster
948 $wrapper.removeClass('videoWrapperActive');
949 // remove youtube link, stopping the video from playing in the background
950 $iframe.attr('src', '');
951 }
952 },
953
954 akariCourseNav: function () {
955
956 var sections = $('section'),
957 nav = $('nav > div.sticky'),
958 nav_height = nav.outerHeight();
959
960 //nav = $('nav'),
961
962
963 $(window).on('scroll', function () {
964
965 var cur_pos = $(this).scrollTop();
966
967 sections.each(function () {
968 var top = $(this).offset().top - nav_height,
969 bottom = top + $(this).outerHeight();
970
971 if (cur_pos >= top && cur_pos <= bottom) {
972
973 $(nav).find('a.li').removeClass('active');
974 sections.removeClass('active');
975
976 $(this).addClass('active');
977 nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('active');
978 }
979 });
980 });
981
982 nav.find('a.li').on('click', function () {
983 var $el = $(this),
984 id = $el.attr('href');
985
986 $('html, body').animate({
987 scrollTop: $(id).offset().top - nav_height
988 }, 700);
989
990 return false;
991 });
992
993 //////////////////////////////////////////
994 //////////////////////////////////////////
995 // load c-course-subject-nav slick slider
996 //////////////////////////////////////////
997 //////////////////////////////////////////
998
999 $('.js--course--carousel').slick({
1000 slidesToShow: 4,
1001 dots: false,
1002 infinite: false,
1003 centerMode: false,
1004 arrows: false,
1005 responsive: [
1006
1007 {
1008 breakpoint: 992,
1009 settings: {
1010 slidesToShow: 3,
1011 slidesToScroll: 1,
1012 dots: false,
1013 arrows: false,
1014
1015 }
1016 },
1017 {
1018 breakpoint: 768,
1019 settings: {
1020 slidesToShow: 2,
1021 slidesToScroll: 1,
1022 arrows: true,
1023 }
1024 }, {
1025 breakpoint: 576,
1026 settings: {
1027 slidesToShow: 1,
1028 slidesToScroll: 1,
1029 arrows: true,
1030 }
1031 }
1032 ]
1033 });
1034
1035
1036
1037 //////////////////////////////////////////
1038 // end load c-course-subject-nav slider
1039 //////////////////////////////////////////
1040
1041
1042
1043
1044 // (function($)
1045
1046 function mediaSize() {
1047 /* Set the matchMedia */
1048 if (window.matchMedia('(min-width: 1280px)').matches) {
1049 /* Changes when we reach the min-width */
1050 // $('div.course-container').toggleClass("flex-wrap flex-nwrap");
1051
1052 $('div.course-container').removeClass('flex-nwrap').addClass('flex-wrap')
1053 } else {
1054 // $('div.course-container').toggleClass("flex-nwrap flex-wrap");
1055 $('div.course-container').removeClass('flex-wrap').addClass('flex-nwrap')
1056
1057 }
1058 };
1059 // mediaSize();
1060 /* Attach the function to the resize event listener */
1061 window.addEventListener('resize', mediaSize, false);
1062
1063 // })(jQuery);
1064 mediaSize();
1065 },
1066 /* closed function */
1067
1068
1069
1070 megaMenuDropDown: function () {
1071 //////////////////////////////////////////////
1072 // START ======== main nav drop down events
1073 ////////////////////////////////////////////
1074
1075 var menuTabs = document.querySelectorAll('[data-menu-tab]');
1076 var menuButtons = document.querySelectorAll('.js--menu__button');
1077
1078 menuButtons.forEach(function (e) {
1079 e.addEventListener('click', menuClassToggle);
1080 });
1081
1082 var toggle_index = {
1083 'one': 0,
1084 'two': 1,
1085 'three': 2
1086 }
1087
1088 var menuActiveClass = 'menu--active';
1089
1090 // This function opens the div you click on, closes the rest so they aren't overlayed on top - Tan
1091 function menuClassToggle(e) {
1092 var thisNumber = e.target.dataset.menuToggle;
1093
1094 menuTabs.forEach(function (tab, i) {
1095 // console.log(tab, i);
1096 if (i === toggle_index[thisNumber]) {
1097 tab.classList.toggle(menuActiveClass);
1098 } else {
1099 tab.classList.remove(menuActiveClass);
1100 }
1101 })
1102 }
1103
1104 // This function will close the menu when you click escape - Tan
1105 function checkKeyboardPress(e) {
1106 e = e || window.event;
1107 if (e.which == 27 || e.keyCode == 27) {
1108 menuTabs.forEach(function (tab) {
1109 tab.classList.remove(menuActiveClass);
1110 })
1111 }
1112 }
1113
1114 document.onkeydown = checkKeyboardPress;
1115
1116
1117 //////////////////////////////////////////////
1118 // END ======== main nav drop down events
1119 ////////////////////////////////////////////
1120
1121
1122 },
1123
1124 feesAndFundingTable: function () {
1125
1126 //test
1127
1128 },
1129
1130 megaMenuJSON: function () {
1131
1132 var generatedHTML = document.querySelector("#menuGenerated");
1133
1134 // The Window load event waits for the entire page to be sucessfully loaded first
1135 // before it does the axios request to download the JSON
1136 // this prevents the request from bottlenecking the page load time
1137 window.addEventListener("load", function () {
1138 // const requestURL = "https://api.myjson.com/bins/1g4c5p";
1139 const requestURL = "https://api.myjson.com/bins/19eqs5";
1140 axios
1141 .get(requestURL)
1142 .then(function (response) {
1143 const responseData = response.data;
1144 // console.log(responseData);
1145
1146 // these 2 functions only run once the JSON has downloaded
1147 if(generatedHTML){
1148 printMarkupData(responseData, menuFinished);
1149 }
1150
1151 })
1152 .catch(function (error) {
1153 console.log(error);
1154 });
1155
1156 });
1157
1158
1159 // This functions prints (loops) the data that's been passed from the HTTP request
1160 // It only runs once the page has fully loaded and JSON has been downloaded
1161 function printMarkupData(data, callback) {
1162 var html = "";
1163
1164 // **************************************************************** //
1165 // This has a nested for-loop which loops 3x times to get all the Data from the JSON/API
1166 // **************************************************************** //
1167
1168 for (var i = 0; i < data.length; i++) {
1169 html += `<a class="ual-mainNav__offcanvas__accordion-menu__item__leveltwo-header" href="#">${data[i].pageTitle}</a>`
1170 for (var j = 0; j < data[i].menuLevel1.length; j++) {
1171 if (j == 0) { html += menuOpening; }
1172
1173 html += `<a class="ual-mainNav__offcanvas__accordion-menu__item__levelthree-header" href="#">${data[i].menuLevel1[j].pageTitle}</a>`;
1174 for (var z = 0; z < data[i].menuLevel1[j].menuLevel2.length; z++) {
1175 if (z == 0) { html += accordionOpening; }
1176
1177 html +=
1178 `<li class="ual-mainNav__offcanvas__accordion-menu__item">
1179 <a class="ual-mainNav__offcanvas__accordion-menu__item__link" href="${data[i].menuLevel1[j].menuLevel2[z].url}">${data[i].menuLevel1[j].menuLevel2[z].pageTitle}</a>
1180 </li>`
1181
1182 if (z === data[i].menuLevel1[j].menuLevel2.length - 1) { html += accordionClosing; }
1183 }
1184
1185 if (j === data[i].menuLevel1.length - 1) { html += menuClosing; }
1186
1187 }
1188 }
1189
1190 document.querySelector("#menuGenerated").innerHTML = html;
1191
1192 callback();
1193 }
1194
1195 function menuFinished() {
1196 console.log("menu finished loading");
1197 // this swaps the anchor link with the real dropdown once the page is ready, JSON is downloaded and HTML is built
1198 makeMenuVisible();
1199
1200 // this doesnt work, its meant to re-init the accordions...
1201 // Foundation.reInit($('[data-accordion]'));
1202
1203 // other suggestions on google suggest to destroy and recreate accordions.
1204 // var foo = new Foundation.Accordion($('[data-accordion]'));
1205 // foo.destroy();
1206 // foo = new Foundation.Accordion($('[data-accordion]'));
1207 }
1208
1209 var menuOpening =
1210 `<div class="ual-mainNav__offcanvas__accordion-menu__item__toggledcontent" data-tab-content="">
1211 <ul class="ual-mainNav__offcanvas__accordion-menu" data-accordion data-allow-all-closed="true" data-multi-expand="true">
1212 <li class="ual-mainNav__offcanvas__accordion-menu__item" data-accordion-item="">`;
1213
1214 var menuClosing = `</li></ul></div>`;
1215
1216 var accordionOpening = `<div class="ual-mainNav__offcanvas__accordion-menu__item__toggledcontent" data-tab-content>
1217 <ul class="ual-mainNav__offcanvas__accordion-menu">`;
1218
1219 var accordionClosing = `</ul></div>`;
1220
1221 // This function displays fake anchor links which load before the menu is ready
1222 // Once the page has sucessfully loaded and JSON is downloaded, it hides the fake anchor links with the real dropdown menu
1223 function makeMenuVisible() {
1224 const hideUntilReady = document.querySelectorAll('.js--hide-until-ready');
1225 const showBeforeLoad = document.querySelectorAll('.js--show-before-load');
1226
1227 hideUntilReady.forEach(el => el.classList.add('show-menu'));
1228 showBeforeLoad.forEach(el => el.classList.add('hide-menu'));
1229 }
1230
1231 },
1232
1233 checkIfLightBoxExists: function () {
1234
1235 let lightBoxContainer = document.querySelector('.card-item__lightbox');
1236
1237 if(lightBoxContainer == null){
1238 console.log('lightbox is not running');
1239 } else {
1240 console.log('lightbox is running');
1241 var bodyElement = document.querySelector('body');
1242 bodyElement.classList.add('card-item__lightbox--activate');
1243 baguetteBox.run('.card-item__lightbox--activate');
1244 }
1245 },
1246
1247
1248 };
1249
1250 appfunc.init();
1251
1252})