· 6 years ago · Aug 02, 2019, 02:34 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 });
539
540 $(window).on('resize orientationchange', function () {
541 if (!($('.slick-slide').length > 1)) {
542 $('.carousel-arrows').hide();
543 } else {
544 $('.carousel-arrows').show();
545 }
546 });
547
548
549 if (('.video').length) {
550
551
552 $(".transcript-title").click(function () {
553 event.preventDefault();
554 $(this).next().toggleClass('transcript-show');
555 });
556
557 }
558
559 window.addEventListener('load', function () {
560 if (('.gallery').length) {
561 baguetteBox.run('.gallery');
562 }
563 if (('.carousel').length) {
564 baguetteBox.run('.carousel');
565 }
566 });
567
568 },
569
570
571 captionThis: function () {
572
573 $('figcaption').click(function () {
574 $(this).children('span').toggle();
575 });
576 //
577 // if(('.gallery').length){
578 // $(".gallery-item figcaption").click(function() {
579 // $(this).parent().toggleClass('show-caption');
580 // });
581 // }
582 },
583
584
585
586 googleMaps: function () {
587 window.onload = function () {
588
589 var gmarkers = [];
590 var infoWindows = [];
591 var elements = document.getElementsByClassName("googlemap");
592
593 for (var x = 0; x < elements.length; x++) {
594 var mapdata = elements[x];
595 var assetid = mapdata.getAttribute('data-assetid');
596
597 if (mapdata) {
598 var infowindow = new google.maps.InfoWindow();
599 var jsondata = mapdata.getAttribute('data-json');
600 var zoomdata = parseFloat(mapdata.getAttribute('data-zoom'));
601 var markerdata = mapdata.getAttribute('data-marker');
602 var longitudedata = parseFloat(mapdata.getAttribute('data-longitude'));
603 var latitudedata = parseFloat(mapdata.getAttribute('data-latitude'));
604 var json = jsondata;
605 var jsonValue = json.length > 0 ? JSON.parse('' + jsondata + '') : [];
606 var locations = [];
607
608 for (var i = 0; i < jsonValue.length; i++) {
609 var title = '' + jsonValue[i].title;
610 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>';
611 locations.push([title, parseFloat(jsonValue[i].latitude), parseFloat(jsonValue[i].longitude), 1, content]);
612 }
613
614 var locations = [locations];
615 var locations = locations[0];
616
617 }
618
619 var initMap = function initMap() {
620
621 if (mapdata) {
622 var map = new google.maps.Map(mapdata, {
623 zoom: zoomdata,
624 center: {
625 lat: latitudedata,
626 lng: longitudedata
627 }
628 });
629
630 var infowindow = new google.maps.InfoWindow();
631 setMarkers(map, assetid, gmarkers, infoWindows, locations);
632 }
633
634 }
635
636 initMap();
637
638 function setMarkers(map, assetid, gmarkers, infoWindows, locations) {
639
640 var image = {
641 url: '' + markerdata + '',
642 scaledSize: new google.maps.Size(28, 38),
643 origin: new google.maps.Point(0, 0),
644 anchor: new google.maps.Point(0, 32)
645 };
646
647 var shape = {
648 coords: [1, 1, 1, 20, 18, 20, 18, 1],
649 type: 'poly'
650 };
651
652 for (var i = 0; i < locations.length; i++) {
653 var location = locations[i];
654 var marker = new google.maps.Marker({
655 position: {
656 lat: location[1],
657 lng: location[2]
658 },
659 map: map,
660 icon: image,
661 shape: shape,
662 title: location[0],
663 zIndex: location[3],
664 assetid: assetid
665 });
666
667 gmarkers.push(marker);
668
669 google.maps.event.addListener(marker, 'map_changed', function () {
670 if (map) {
671 infowindow.open(map, marker);
672 } else {
673 infowindow.close();
674 }
675 });
676
677 infoWindows.push(infowindow);
678
679 google.maps.event.addListener(marker, 'click', (function (marker, i) {
680 return function () {
681 infowindow.setContent(locations[i][4]);
682 infowindow.open(map, marker);
683 }
684 })(marker, i));
685 }
686 }
687
688 var link = ".map-markers" + assetid + " .checkbox";
689 $(link).click(function () {
690 var cat = $(this).attr("value");
691 var asset = $(this).attr("data-assetid");
692 if ($(this).is(":checked")) {
693 show(cat, asset, mapdata);
694 } else {
695 hide(cat, asset);
696 }
697 });
698
699 }
700
701 function show(category, asset, mapdata) {
702 var infowindow = new google.maps.InfoWindow(mapdata);
703 for (var i = 0; i < gmarkers.length; i++) {
704 if (gmarkers[i]['assetid'] == asset) {
705 if (gmarkers[i]['title'] == category) {
706 gmarkers[i].setVisible(true);
707 }
708 }
709 }
710 }
711
712 function hide(category, asset, mapdata) {
713 var infowindow = new google.maps.InfoWindow(mapdata);
714 for (var i = 0; i < gmarkers.length; i++) {
715 if (gmarkers[i]['assetid'] == asset) {
716 if (gmarkers[i]['title'] == category) {
717 gmarkers[i].setVisible(false);
718 closeAllInfoWindows(mapdata, gmarkers[i]);
719 }
720 }
721 }
722 }
723
724 function closeAllInfoWindows(map, marker) {
725 infowindow.close(map);
726 for (var i = 0; i < infoWindows.length; i++) {
727 infoWindows[i].close();
728 }
729 }
730
731 }
732
733 var mapdata = document.getElementById('map');
734 if (mapdata) {
735 var script = document.createElement('script');
736 script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyAoDVs2Q1Z32p3rKZzk3vYnn8Q0401ocw0&callback=initMap";
737 script.setAttribute("defer", "true");
738 document.body.appendChild(script);
739 }
740
741 },
742
743 bloodhound: function () {
744
745 var matrixEnv;
746 // conceirge
747 if (typeof matrixEnv !== 'undefined') {
748 var funnelbackCollection = matrixEnv === 'dev' ? '' : '-prod';
749 }
750
751 var engine = new Bloodhound({
752 queryTokenizer: Bloodhound.tokenizers.whitespace,
753 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
754 remote: {
755
756 // url: 'https://showcase.funnelback.com/s/suggest.json?profile=_default&collection=showcase-concierge&partial_query=%QUERY',
757 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',
758 wildcard: '%QUERY',
759 filter: function filter(engine) {
760 // Map the remote source JSON array to a JavaScript object array
761 var results = $.map(engine, function (item) {
762 return {
763 value: item
764 };
765 });
766
767 results = results.filter(function (item, index, self) {
768 return index === self.findIndex(function (t) {
769 return t.value === item.value;
770 });
771 });
772
773 return results;
774 }
775
776 }
777 });
778
779 var courses = new Bloodhound({
780 queryTokenizer: Bloodhound.tokenizers.whitespace,
781 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
782 remote: {
783 // url: 'https://showcase.funnelback.com/s/suggest.json?profile=ac_books&collection=showcase-recommender&fmt=json++&show=3&partial_query=%QUERY',
784 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',
785 wildcard: '%QUERY',
786 filter: function filter(engine) {
787 // Map the remote source JSON array to a JavaScript object array
788 return $.map(engine, function (item) {
789 if (item.disp.metaData) {
790 return {
791 value: item.key,
792 thumb: item.disp.metaData.thumbnail,
793 url: item.disp.displayUrl,
794 college: item.disp.metaData.college,
795 level: item.disp.metaData.level,
796 title: item.disp.metaData.title
797 };
798 }
799 });
800 }
801 }
802 });
803
804 var events = new Bloodhound({
805 queryTokenizer: Bloodhound.tokenizers.whitespace,
806 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
807 remote: {
808 // url: 'https://showcase.funnelback.com/s/suggest.json?profile=ac_dvds&collection=showcase-csv&fmt=json++&show=3&partial_query=%QUERY',
809 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',
810 wildcard: '%QUERY',
811 filter: function filter(engine) {
812 // Map the remote source JSON array to a JavaScript object array
813 return $.map(engine, function (item) {
814 if (item.disp.metaData) {
815 return {
816 value: item.key,
817 url: item.disp.displayUrl,
818 title: item.disp.metaData.title
819 };
820 }
821 });
822 }
823 }
824 });
825
826 // kicks off the loading/processing of `local` and `prefetch`
827 engine.initialize();
828 courses.initialize();
829 events.initialize();
830
831 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>';
832
833 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>';
834
835 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>';
836
837 //$('#bloodhound .typeahead').typeahead({
838 $('#search-consierge-queryinput').typeahead({
839 highlight: true,
840 minLength: 3,
841 hint: !1
842 }, {
843 name: 'states',
844 displayKey: 'value',
845 // `ttAdapter` wraps the suggestion engine in an adapter that
846 // is compatible with the typeahead jQuery plugin
847 source: engine.ttAdapter(),
848 templates: {
849 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'),
850 header: '<span class="title cell"><h3>Suggestions</h3></span>',
851 suggestion: Handlebars.compile(txtTemplate)
852 }
853 }, {
854 name: 'courses',
855 displayKey: 'value',
856 // `ttAdapter` wraps the suggestion engine in an adapter that
857 // is compatible with the typeahead jQuery plugin
858 source: courses.ttAdapter(),
859 templates: {
860 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'),
861 header: '<span class="title cell"><h3>Courses</h3></span>',
862 suggestion: Handlebars.compile(imgTemplate)
863 }
864 }, {
865 name: 'events',
866 displayKey: 'value',
867 // `ttAdapter` wraps the suggestion engine in an adapter that
868 // is compatible with the typeahead jQuery plugin
869 source: events.ttAdapter(),
870 templates: {
871 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'),
872 header: '<span class="title cell"><h3>Events</h3></span>',
873 suggestion: Handlebars.compile(eventsTemplate)
874 }
875 });
876
877 },
878 paginationClick: function () {
879
880 document.addEventListener("click", function (event) {
881 if (event.target.matches("#pag-comp ul li a")) {
882
883 $("html, body").animate({
884 scrollTop: $(".results").offset().top - 150
885 }, 500);
886
887 }
888
889 }, false);
890
891 },
892 courseNavClick: function () {
893 $(".course-nav ul a[href^='#']").on("click", function (e) {
894 // prevent default anchor click behavior
895 e.preventDefault();
896
897 // animate
898 $("html, body").animate({
899 scrollTop: $(this.hash).offset().top - 120
900 },
901 300,
902 function () { }
903 );
904 });
905
906 $("li a[href^='#']").on("click", function (e) {
907 // prevent default anchor click behavior
908 e.preventDefault();
909 var menuHeight = $('.menu-container').innerHeight();
910 menuHeight *= 1.5;
911
912 $("html, body").animate({
913 scrollTop: $(this.hash).offset().top - menuHeight
914 }, 300);
915 });
916 },
917
918 videoPosterComponent: function () {
919 $(document).on('click', '.js-videoPoster', function (ev) {
920 ev.preventDefault();
921 var $poster = $(this);
922 var $wrapper = $poster.closest('.js-videoWrapper');
923 videoPlay($wrapper);
924 });
925
926 // play the targeted video (and hide the poster frame)
927 function videoPlay($wrapper) {
928 var $iframe = $wrapper.find('.js-videoIframe');
929 var src = $iframe.data('src');
930 // hide poster
931 $wrapper.addClass('videoWrapperActive');
932 // add iframe src in, starting the video
933 $iframe.attr('src', src);
934 }
935
936 // stop the targeted/all videos (and re-instate the poster frames)
937 function videoStop($wrapper) {
938 // if we're stopping all videos on page
939 if (!$wrapper) {
940 var $wrapper = $('.js-videoWrapper');
941 var $iframe = $('.js-videoIframe');
942 // if we're stopping a particular video
943 } else {
944 var $iframe = $wrapper.find('.js-videoIframe');
945 }
946 // reveal poster
947 $wrapper.removeClass('videoWrapperActive');
948 // remove youtube link, stopping the video from playing in the background
949 $iframe.attr('src', '');
950 }
951 },
952
953 akariCourseNav: function () {
954
955 var sections = $('section'),
956 nav = $('nav > div.sticky'),
957 nav_height = nav.outerHeight();
958
959 //nav = $('nav'),
960
961
962 $(window).on('scroll', function () {
963
964 var cur_pos = $(this).scrollTop();
965
966 sections.each(function () {
967 var top = $(this).offset().top - nav_height,
968 bottom = top + $(this).outerHeight();
969
970 if (cur_pos >= top && cur_pos <= bottom) {
971
972 $(nav).find('a.li').removeClass('active');
973 sections.removeClass('active');
974
975 $(this).addClass('active');
976 nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('active');
977 }
978 });
979 });
980
981 nav.find('a.li').on('click', function () {
982 var $el = $(this),
983 id = $el.attr('href');
984
985 $('html, body').animate({
986 scrollTop: $(id).offset().top - nav_height
987 }, 700);
988
989 return false;
990 });
991
992 //////////////////////////////////////////
993 //////////////////////////////////////////
994 // load c-course-subject-nav slick slider
995 //////////////////////////////////////////
996 //////////////////////////////////////////
997
998 $('.js--course--carousel').slick({
999 slidesToShow: 4,
1000 dots: false,
1001 infinite: false,
1002 centerMode: false,
1003 arrows: false,
1004 responsive: [
1005
1006 {
1007 breakpoint: 992,
1008 settings: {
1009 slidesToShow: 3,
1010 slidesToScroll: 1,
1011 dots: false,
1012 arrows: false,
1013
1014 }
1015 },
1016 {
1017 breakpoint: 768,
1018 settings: {
1019 slidesToShow: 2,
1020 slidesToScroll: 1,
1021 arrows: true,
1022 }
1023 }, {
1024 breakpoint: 576,
1025 settings: {
1026 slidesToShow: 1,
1027 slidesToScroll: 1,
1028 arrows: true,
1029 }
1030 }
1031 ]
1032 });
1033
1034
1035
1036 //////////////////////////////////////////
1037 // end load c-course-subject-nav slider
1038 //////////////////////////////////////////
1039
1040
1041
1042
1043 // (function($)
1044
1045 function mediaSize() {
1046 /* Set the matchMedia */
1047 if (window.matchMedia('(min-width: 1280px)').matches) {
1048 /* Changes when we reach the min-width */
1049 // $('div.course-container').toggleClass("flex-wrap flex-nwrap");
1050
1051 $('div.course-container').removeClass('flex-nwrap').addClass('flex-wrap')
1052 } else {
1053 // $('div.course-container').toggleClass("flex-nwrap flex-wrap");
1054 $('div.course-container').removeClass('flex-wrap').addClass('flex-nwrap')
1055
1056 }
1057 };
1058 // mediaSize();
1059 /* Attach the function to the resize event listener */
1060 window.addEventListener('resize', mediaSize, false);
1061
1062 // })(jQuery);
1063 mediaSize();
1064 },
1065 /* closed function */
1066
1067
1068
1069 megaMenuDropDown: function () {
1070 //////////////////////////////////////////////
1071 // START ======== main nav drop down events
1072 ////////////////////////////////////////////
1073
1074 var menuTabs = document.querySelectorAll('[data-menu-tab]');
1075 var menuButtons = document.querySelectorAll('.js--menu__button');
1076
1077 menuButtons.forEach(function (e) {
1078 e.addEventListener('click', menuClassToggle);
1079 });
1080
1081 var toggle_index = {
1082 'one': 0,
1083 'two': 1,
1084 'three': 2
1085 }
1086
1087 var menuActiveClass = 'menu--active';
1088
1089 // This function opens the div you click on, closes the rest so they aren't overlayed on top - Tan
1090 function menuClassToggle(e) {
1091 var thisNumber = e.target.dataset.menuToggle;
1092
1093 menuTabs.forEach(function (tab, i) {
1094 // console.log(tab, i);
1095 if (i === toggle_index[thisNumber]) {
1096 tab.classList.toggle(menuActiveClass);
1097 } else {
1098 tab.classList.remove(menuActiveClass);
1099 }
1100 })
1101 }
1102
1103 // This function will close the menu when you click escape - Tan
1104 function checkKeyboardPress(e) {
1105 e = e || window.event;
1106 if (e.which == 27 || e.keyCode == 27) {
1107 menuTabs.forEach(function (tab) {
1108 tab.classList.remove(menuActiveClass);
1109 })
1110 }
1111 }
1112
1113 document.onkeydown = checkKeyboardPress;
1114
1115
1116 //////////////////////////////////////////////
1117 // END ======== main nav drop down events
1118 ////////////////////////////////////////////
1119
1120
1121 },
1122
1123 feesAndFundingTable: function () {
1124
1125 //test
1126
1127 },
1128
1129 megaMenuJSON: function () {
1130
1131 var generatedHTML = document.querySelector("#menuGenerated");
1132
1133 // The Window load event waits for the entire page to be sucessfully loaded first
1134 // before it does the axios request to download the JSON
1135 // this prevents the request from bottlenecking the page load time
1136 window.addEventListener("load", function () {
1137 // const requestURL = "https://api.myjson.com/bins/1g4c5p";
1138 const requestURL = "https://api.myjson.com/bins/19eqs5";
1139 axios
1140 .get(requestURL)
1141 .then(function (response) {
1142 const responseData = response.data;
1143 // console.log(responseData);
1144
1145 // these 2 functions only run once the JSON has downloaded
1146 if(generatedHTML){
1147 printMarkupData(responseData, menuFinished);
1148 }
1149
1150 })
1151 .catch(function (error) {
1152 console.log(error);
1153 });
1154
1155 });
1156
1157
1158 // This functions prints (loops) the data that's been passed from the HTTP request
1159 // It only runs once the page has fully loaded and JSON has been downloaded
1160 function printMarkupData(data, callback) {
1161 var html = "";
1162
1163 // **************************************************************** //
1164 // This has a nested for-loop which loops 3x times to get all the Data from the JSON/API
1165 // **************************************************************** //
1166
1167 for (var i = 0; i < data.length; i++) {
1168 html += `<a class="ual-mainNav__offcanvas__accordion-menu__item__leveltwo-header" href="#">${data[i].pageTitle}</a>`
1169 for (var j = 0; j < data[i].menuLevel1.length; j++) {
1170 if (j == 0) { html += menuOpening; }
1171
1172 html += `<a class="ual-mainNav__offcanvas__accordion-menu__item__levelthree-header" href="#">${data[i].menuLevel1[j].pageTitle}</a>`;
1173 for (var z = 0; z < data[i].menuLevel1[j].menuLevel2.length; z++) {
1174 if (z == 0) { html += accordionOpening; }
1175
1176 html +=
1177 `<li class="ual-mainNav__offcanvas__accordion-menu__item">
1178 <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>
1179 </li>`
1180
1181 if (z === data[i].menuLevel1[j].menuLevel2.length - 1) { html += accordionClosing; }
1182 }
1183
1184 if (j === data[i].menuLevel1.length - 1) { html += menuClosing; }
1185
1186 }
1187 }
1188
1189 document.querySelector("#menuGenerated").innerHTML = html;
1190
1191 callback();
1192 }
1193
1194 function menuFinished() {
1195 console.log("menu finished loading");
1196 // this swaps the anchor link with the real dropdown once the page is ready, JSON is downloaded and HTML is built
1197 makeMenuVisible();
1198
1199 // this doesnt work, its meant to re-init the accordions...
1200 // Foundation.reInit($('[data-accordion]'));
1201
1202 // other suggestions on google suggest to destroy and recreate accordions.
1203 // var foo = new Foundation.Accordion($('[data-accordion]'));
1204 // foo.destroy();
1205 // foo = new Foundation.Accordion($('[data-accordion]'));
1206 }
1207
1208 var menuOpening =
1209 `<div class="ual-mainNav__offcanvas__accordion-menu__item__toggledcontent" data-tab-content="">
1210 <ul class="ual-mainNav__offcanvas__accordion-menu" data-accordion data-allow-all-closed="true" data-multi-expand="true">
1211 <li class="ual-mainNav__offcanvas__accordion-menu__item" data-accordion-item="">`;
1212
1213 var menuClosing = `</li></ul></div>`;
1214
1215 var accordionOpening = `<div class="ual-mainNav__offcanvas__accordion-menu__item__toggledcontent" data-tab-content>
1216 <ul class="ual-mainNav__offcanvas__accordion-menu">`;
1217
1218 var accordionClosing = `</ul></div>`;
1219
1220 // This function displays fake anchor links which load before the menu is ready
1221 // Once the page has sucessfully loaded and JSON is downloaded, it hides the fake anchor links with the real dropdown menu
1222 function makeMenuVisible() {
1223 const hideUntilReady = document.querySelectorAll('.js--hide-until-ready');
1224 const showBeforeLoad = document.querySelectorAll('.js--show-before-load');
1225
1226 hideUntilReady.forEach(el => el.classList.add('show-menu'));
1227 showBeforeLoad.forEach(el => el.classList.add('hide-menu'));
1228 }
1229
1230 },
1231
1232 checkIfLightBoxExists: function () {
1233
1234 let lightBoxContainer = document.querySelector('.card-item__lightbox');
1235
1236 if(lightBoxContainer == null){
1237 console.log('lightbox is not running');
1238 } else {
1239 console.log('lightbox is running');
1240 var bodyElement = document.querySelector('body');
1241 bodyElement.classList.add('card-item__lightbox--activate');
1242 baguetteBox.run('.card-item__lightbox--activate');
1243 }
1244 },
1245
1246
1247 };
1248
1249 appfunc.init();
1250
1251})