var ekrComponents = ekrComponents || {}; var windowWidth = $(window).width(); jQuery(document).ready(function() { jQuery('[data-component="responsive-header"]').each(function() { var header = new ekrComponents.responsiveHeader(this); }); jQuery('[data-component="accessible-menu"]').each(function() { var accessibleMenu = new ekrComponents.accessibleMenu(this); }); jQuery('[data-component="search"]').each(function() { var search = new ekrComponents.search(this); }); jQuery('[data-component="skewed-accordion"]').each(function() { var skewedAccordion = new ekrComponents.skewedAccordion(this); }); jQuery('[data-component="filter"]').each(function() { var filter = new components.Filter(this); }); jQuery('[data-component="quote-carousel"]').each(function() { jQuery(this).slick({ dots: true, appendArrows: jQuery(this).closest('.ekr-quote-carousel').find('.ekr-quote-carousel-nav'), appendDots: jQuery(this).closest('.ekr-quote-carousel').find('.ekr-quote-carousel-nav'), }); }); jQuery('[data-component="events-carousel"]').each(function() { jQuery(this).slick({ dots: true, arrows: false, slidesToShow: 3, slidesToScroll: 3, responsive: [ { breakpoint: 1000, settings: { slidesToShow: 2, slidesToScroll: 2, } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); }); jQuery('[data-component="banner-carousel"]').each(function() { jQuery(this).find('[data-bc="images"]').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: false, fade: true, asNavFor: '[data-bc="text"]' }); jQuery(this).find('[data-bc="text"]').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: true, asNavFor: '[data-bc="images"]' }); }); setTimeout(function() { jQuery('.ekr-banner-links .ekr-sticky.ekr-banner-link-container:last-child').each(function() { var fixedButton = new ekrComponents.fixedButton(this); }); }, 1000); jQuery('[data-component="modal"]').each(function() { var modal = new ekrComponents.modal(this); }); jQuery('[data-component="accordion-list"]').each(function() { var accordionList = new ekrComponents.accordionList(this); }); jQuery('.wp-block-columns.is-style-equal-height').each(function() { var equalHeight = new ekrComponents.equalHeight(this); }); jQuery('.wp-block-columns.is-style-align-elements').each(function() { var alignElements = new ekrComponents.alignElements(this); }); var isMobile = false; //initiate as false // device detection if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { isMobile = true; } // if (isMobile) { // // skewed accordion // jQuery('.ekr-skewed-accordion-container').each(function() { // jQuery(this).children('.ekr-skewed-accordion-item').addClass('open'); // jQuery(this).slick({ // dots: true, // appendArrows: jQuery(this).closest('.ekr-skewed-accordion').find('.sa-nav'), // appendDots: jQuery(this).closest('.ekr-skewed-accordion').find('.sa-nav'), // }); // }); // // social media // jQuery('.ekr-social-posts-col-1').each(function() { // let combHTML = jQuery(this).html(); // if (jQuery(this).next().hasClass('ekr-social-posts-col-2')) { // combHTML += jQuery(this).next('.ekr-social-posts-col-2').html(); // jQuery(this).next('.ekr-social-posts-col-2').remove(); // } // jQuery(this).html(combHTML); // jQuery(this).slick({ // infinite: false // }); // }); // // staggered grid // jQuery('.ekr-staggered-grid-inner').each(function() { // jQuery(this).slick({ // infinite: false, // centerMode: true, // }); // }); // // custom list styles // jQuery('.ekr-text-custom-list-styles').each(function() { // jQuery(this).find('ul, ol').slick({ // infinite: false, // arrows: true, // }); // }); // // columns // $('.wp-block-column:empty').remove(); // $('.wp-block-columns + .ekr-spacer-white').remove(); // remove spacers that separate column rows // jQuery('.wp-block-columns:not(.mobile-stack)').each(function() { // let _this = jQuery(this); // let combHTML = $(_this).html(); // let rows = []; // for (let item = 0; item < $(_this).nextUntil(':not(.wp-block-columns)').length; item++) { // rows.push($(_this).nextUntil(':not(.wp-block-columns)')[item]); // } // rows.unshift($(_this)[0]); // let firstComponent = ''; // $(rows).each(function(index) { // // append to first columns block for a better slider // // make sure that the first column item matches the same block used in this one // if (firstComponent == '' && index == 0) { // if ($(this).children('.wp-block-column').children().attr('data-component') !== undefined ) { // firstComponent = $(this).children('.wp-block-column').children().attr('data-component'); // } // } // let nextComponent = $(this).next().children('.wp-block-column').children().attr('data-component'); // if (firstComponent == nextComponent) { // combHTML += $(this).next('.wp-block-columns').html(); // $(this).next('.wp-block-columns').html(''); // } else { // // reset first component to avoid pulling other columns // firstComponent = ''; // } // }); // $(_this).html(combHTML); // if ($(_this).find('.wp-block-column')) { // $(_this).slick({ // infinite: false, // arrows: true, // }); // } // }); // $('.slick-track:empty').parents().parents('.wp-block-columns').remove(); // } }); ekrComponents.responsiveHeader = function(el) { this.el = jQuery(el); this.responsiveCurrent = false; this.responsiveBreakpoint = 1200; this.init(); }; ekrComponents.responsiveHeader.prototype = { init: function() { this.desktop = new ekrComponents.responsiveHeader.desktop( this.el.find('[data-rh="desktop"]') ); this.mobile = new ekrComponents.responsiveHeader.mobile( this.el.find('[data-rh="mobile"]') ); jQuery(window).on('resize.rh', this.resize.bind(this)); this.resize(); }, destroy: function() { jQuery(window).off('.rh'); }, resize: function() { var ww = jQuery(window).width(); if(ww <= this.responsiveBreakpoint) { // Mobile if(this.currentResponsive !== 'mobile') { this.mobile.init(); this.desktop.destroy(); this.currentResponsive = 'mobile'; } } else { // Desktop if(this.currentResponsive !== 'desktop') { this.desktop.init(); this.mobile.destroy(); this.currentResponsive = 'desktop'; } } } }; ekrComponents.responsiveHeader.desktop = function(el) { this.el = jQuery(el); this.isScrolled = false; this.scrollBreakpoint = 100 }; ekrComponents.responsiveHeader.desktop.prototype = { init: function() { this.el.show(); this.el.attr('aria-hidden', 'false'); jQuery(document).on('scroll.rhDesktop', this.scrollcheck.bind(this)); }, destroy: function() { this.el.hide(); this.el.attr('aria-hidden', 'true'); jQuery(window).off('.rhDesktop'); jQuery(document).off('.rhDesktop'); }, scrollcheck: function() { if(jQuery(document).scrollTop() > this.scrollBreakpoint) { if(!this.isScrolled) this.setScrolledState(); } else { if(this.isScrolled) this.removeScrolledState(); } }, setScrolledState: function() { this.el.addClass('isScrolled'); this.isScrolled = true; }, removeScrolledState: function() { this.el.removeClass('isScrolled'); this.isScrolled = false; } }; ekrComponents.responsiveHeader.mobile = function(el) { this.el = jQuery(el); this.menu = this.el.find('[data-rh-mobile="menu"]'); this.trigger = this.el.find('[data-rh-mobile="trigger"]'); this.submenu = this.el.find('.dsu-mm-next, .dsu-mm-prev'); }; ekrComponents.responsiveHeader.mobile.prototype = { init: function() { this.el.show(); this.el.attr('aria-hidden', 'false'); this.close(); this.trigger.on('click.rhMobile', this.toggle.bind(this)); let dir = true; $(this.submenu).each(function() { $(this).on('click', function() { // console.log("this"); // console.log($(this)); let owns = $(this).attr('aria-owns'); // console.log("owns"); // console.log(owns); let active = $(this).parents('.dsu-mm-panel'); // console.log("active"); // console.log(active); let target = $('#'+owns); // console.log("target"); // console.log(target); $(active).removeClass('dsu-mm-opened').addClass('dsu-mm-hidden'); $(target).removeClass('dsu-mm-hidden').addClass('dsu-mm-opened'); if (dir) { $('.dsu-mm-panels').removeClass('dsu-longer').addClass('dsu-shorty'); } else { $('.dsu-mm-panels').removeClass('dsu-shorty').addClass('dsu-longer'); } // if (dir) { // $('.dsu-mm-panels').animate({height:'200px'}, 350); // } else { // $('.dsu-mm-panels').animate({height:'500px'}, 350); // } dir = !dir; }); }) }, toggle: function() { if(this.isOpen) { this.close(); } else { this.open(); } }, destroy: function() { this.el.hide(); this.el.attr('aria-hidden', 'true'); this.trigger.off('.rhMobile'); this.submenu.off('.nextMenu'); }, open: function() { this.el.addClass('menuOpen'); this.trigger.attr('aria-expanded', 'true'); this.isOpen = true; }, close: function() { this.el.removeClass('menuOpen'); this.trigger.attr('aria-expanded', 'false'); this.isOpen = false; } }; ekrComponents.accessibleMenu = function(el) { this.el = el; this.currentOpenMenu = null; this.init(); }; ekrComponents.accessibleMenu.prototype = { init: function() { this.submenus = this.el.querySelectorAll('[aria-haspopup="true"]'); for(var i = 0; i < this.submenus.length; i++) { var menuItem = new ekrComponents.accessibleSubmenu(this.submenus[i], this); } this.links = this.el.querySelectorAll('a'); for(var i = 0; i < this.links.length; i++) { this.links[i].addEventListener('focus', this.focusCheck.bind(this)); } }, focusCheck: function(e) { var target = e.target; if(this.currentOpenMenu !== null) { if(!this.currentOpenMenu.el.contains(target)) { this.currentOpenMenu.close(); } } } }; ekrComponents.accessibleSubmenu = function(el, parent) { this.el = el this.parent = parent; this.button = this.el.querySelector('[data-menu="toggle"]'); this.isOpen = false; this.init(); }; ekrComponents.accessibleSubmenu.prototype = { init: function() { this.el.addEventListener('mouseenter', this.open.bind(this)); this.el.addEventListener('mouseleave', this.close.bind(this)); this.button.addEventListener('click', this.toggle.bind(this)); }, open: function() { this.el.className += ' open'; this.el.setAttribute('aria-expanded', 'true'); this.button.setAttribute( 'aria-label', this.button.getAttribute('aria-label').replace('Show', 'Hide') ); this.parent.currentOpenMenu = this; this.isOpen = true; }, close: function() { this.el.className = this.el.className.replace(' open', ''); this.el.setAttribute('aria-expanded', 'false'); this.button.setAttribute( 'aria-label', this.button.getAttribute('aria-label').replace('Hide', 'Show') ); this.parent.currentOpenMenu = null; this.isOpen = false; }, toggle: function(e) { e.preventDefault(); if(this.isOpen) { this.close(); } else { this.open(); } } }; ekrComponents.search = function(el) { this.el = el; this.button = this.el.querySelector('[data-s="button"]'); this.input = this.el.querySelector('[data-s="input"]'); this.form = this.el.querySelector('[data-s="form"]'); this.init(); }; ekrComponents.search.prototype = { init: function() { this.isOpen = false; this.button.addEventListener('click', this.toggle.bind(this)); this.input.addEventListener('keypress', this.keycheck.bind(this)); }, toggle: function(e) { e.preventDefault(); if(this.isOpen) { this.el.classList.remove('open'); this.isOpen = false; } else { this.el.classList.add('open'); this.isOpen = true; this.input.focus(); } }, keycheck: function(e) { if(e.keyCode == 13) { this.form.submit(); } } }; ekrComponents.skewedAccordion = function(el) { this.el = el; this.items = []; this.init(); }; ekrComponents.skewedAccordion.prototype = { init: function() { this.items = this.el.querySelectorAll('[data-sa="item"]'); for(var i = 0; i < this.items.length; i++) { this.items[i].addEventListener('mouseenter', this.mouseenter.bind(this)); $(this.items[i]).on('swipe', function(event) { console.log(event.target); }) } this.items[0].classList.add('open'); }, mouseenter: function(e) { for(var i = 0; i < this.items.length; i++) { this.items[i].classList.remove('open'); } e.target.classList.add('open'); } }; ekrComponents.fixedButton = function(el) { this.el = jQuery(el); this.isScrolled = false; this.scrollBreakpoint = 100; this.init(); }; ekrComponents.fixedButton.prototype = { init: function() { this.scrollBreakpoint = this.el.offset().top - 8; jQuery(document).on('scroll.fixedButton', this.scrollcheck.bind(this)); jQuery(window).on('resize.fixedButton', this.resize.bind(this)); this.resize(); }, resize: function() { setTimeout(function() { if(this.el.parent().hasClass('ekr-fixed-button-container')) { this.el.unwrap(); } var width = this.el.outerWidth() + 1; this.el.wrap('<div class="ekr-fixed-button-container"></div>'); this.el.parent().css({ width: width }); }.bind(this), 0); }, scrollcheck: function() { if(jQuery(document).scrollTop() > this.scrollBreakpoint) { if(!this.isScrolled) this.setScrolledState(); } else { if(this.isScrolled) this.removeScrolledState(); } }, setScrolledState: function() { this.el.addClass('ekr-fixed-button'); this.isScrolled = true; }, removeScrolledState: function() { this.el.removeClass('ekr-fixed-button'); this.isScrolled = false; } }; ekrComponents.equalHeight = function(el) { this.el = jQuery(el); this.items = this.el.find('[data-eh="item"]'); this.breakpoint = 500; this.currentResponsive; this.init(); }; ekrComponents.equalHeight.prototype = { init: function() { jQuery(window).on('resize', this.resize.bind(this)); setTimeout(function() { this.resize(); }.bind(this)); }, resize: function() { if(window.innerWidth > this.breakpoint) { if(this.currentResponsive != 'desktop') { this.currentResponsive = 'desktop'; } // Get the max height and make them all the same height var maxHeight = 0; this.el.find('[data-eh="item"]').css('height', ''); setTimeout(function() { this.items.each(function(i, el) { if(jQuery(el).outerHeight() > maxHeight) { maxHeight = jQuery(el).outerHeight(); } }); this.items.each(function() { jQuery(this).css('height', maxHeight); }); }.bind(this), 100); } else { if(this.currentResponsive != 'mobile') { setTimeout(function() { this.items.each(function() { jQuery(this).css('height', ''); }); }.bind(this), 150); this.currentResponsive = 'mobile'; } } } }; ekrComponents.accordionList = function(el) { this.el = jQuery(el); this.items = this.el.find('[data-al="item"]'); this.init(); }; ekrComponents.accordionList.prototype = { init: function() { var self = this; this.items.each(function() { var item = new ekrComponents.accordionListItem(this); }); this.el.on('keydown', this.keyCheck.bind(this)); }, keyCheck: function(e) { // Change focus with arrows if(e.which == 38 || e.which == 40) { // up || down e.preventDefault(); var currentFocusIndex = this.el.find('[data-al-item="heading"]:focus') .closest('[data-al="item"]') .index(); if(e.which == 38) { // up currentFocusIndex--; if(currentFocusIndex < 0) { currentFocusIndex = this.items.length - 1; } } if(e.which == 40) { // down currentFocusIndex++; if(currentFocusIndex == this.items.length) { currentFocusIndex = 0; } } this.el .find('[data-al="item"]') .eq(currentFocusIndex) .find('[data-al-item="heading"]') .focus(); } } }; ekrComponents.accordionListItem = function(el) { this.el = jQuery(el); this.trigger = this.el.find('[data-al-item="heading"]'); this.content = this.el.find('[data-al-item="content"]'); this.isOpen = true; this.openedOnFocus = false; this.reset = this.reset.bind(this); this.init(); }; ekrComponents.accordionListItem.prototype = { init: function() { jQuery(window).on('resize', this.resize.bind(this)); this.trigger.on('click', this.toggle.bind(this)); this.resize(); }, toggle: function() { if(this.isOpen) { this.close(); } else { this.open(); } }, resize: function() { this.content.removeClass('transition'); setTimeout(function() { this.content.css({ 'height': '' }); this.originalHeight = this.content.outerHeight(); this.close(); setTimeout(function() { this.content.css('display', 'none'); this.content.addClass('transition'); }.bind(this)); }.bind(this)); }, open: function() { this.el.addClass('open'); this.trigger.attr('aria-expanded', 'true'); this.content.css({ 'display': 'block' }); setTimeout(function() { this.content.css({ 'height': this.originalHeight }); }.bind(this)); this.content.attr('aria-hidden', 'false'); this.isOpen = true; }, close: function() { this.el.removeClass('open'); this.trigger.attr('aria-expanded', 'false'); this.content.css({ 'height': 0 }); this.content.attr('aria-hidden', 'true'); this.content[0].addEventListener('transitionend', this.reset); this.isOpen = false; }, reset: function() { if(!this.isOpen) { this.content.css({ 'display': 'none' }); } this.content[0].removeEventListener('transitionend', this.reset); } }; ekrComponents.alignElements = function(el) { this.el = jQuery(el); this.headings = this.el.find('[data-ae="heading"]'); this.text = this.el.find('[data-ae="text"]'); this.breakpoint = 500; this.currentResponsive; this.init(); }; ekrComponents.alignElements.prototype = { init: function() { jQuery(window).on('resize', this.resize.bind(this)); setTimeout(function() { this.resize(); }.bind(this)); }, resize: function() { if(window.innerWidth > this.breakpoint) { if(this.currentResponsive != 'desktop') { this.currentResponsive = 'desktop'; } // Get the max height and make them all the same height var maxHeight = 0; this.el.find('[data-ae="heading"]').css('height', ''); this.el.find('[data-ae="text"]').css('height', ''); setTimeout(function() { this.headings.each(function() { if(jQuery(this).outerHeight() > maxHeight) { maxHeight = jQuery(this).outerHeight(); } }); this.headings.each(function() { jQuery(this).css('height', maxHeight); }); maxHeight = 0; this.text.each(function() { if(jQuery(this).outerHeight() > maxHeight) { maxHeight = jQuery(this).outerHeight(); } }); this.text.each(function() { jQuery(this).css('height', maxHeight); }); }.bind(this), 100); } else { if(this.currentResponsive != 'mobile') { setTimeout(function() { this.headings.each(function() { jQuery(this).css('height', ''); }); this.text.each(function() { jQuery(this).css('height', ''); }); }.bind(this), 150); this.currentResponsive = 'mobile'; } } } }; ekrComponents.modal = function(el) { this.el = el; this.image = {}; if(this.el.hasAttribute('data-modal-url')) { this.url = this.el.getAttribute('data-modal-url'); } if(this.url.toLowerCase().indexOf('youtube') !== -1) { this.type = 'youtube'; this.url = this.url.replace('watch?v=', 'v/'); this.url = this.url.replace('/v/', '/embed/'); } else if(this.url.toLowerCase().indexOf('youtu.be') !== -1) { this.type = 'youtube'; this.url = this.url.replace('youtu.be/', 'youtube.com/embed/'); } else if(this.url.toLowerCase().indexOf('vimeo') !== -1) { this.type = 'vimeo'; if(this.url.toLowerCase().indexOf('player.video.com') !== 1) { this.url = this.url.replace('vimeo.com', 'player.vimeo.com/video'); } } if(this.url.toLowerCase().indexOf('.mp4') !== -1) { this.type = 'video'; } if( this.url.toLowerCase().indexOf('.jpg') !== -1 || this.url.toLowerCase().indexOf('.png') !== -1 ) { this.type = 'image'; } if(this.type == 'youtube' || this.type == 'vimeo') { if(this.url.indexOf('?') == '-1') { this.url += '?rel=0&autoplay=1'; } else { this.url += '&rel=0&autoplay=1'; } } this.container = false; this.clickCheck = this.clickCheck.bind(this); this.keyCheck = this.keyCheck.bind(this); this.init(); }; ekrComponents.modal.prototype = { init: function() { if(this.type == 'image') { this.image = new Image(); this.image.src = this.url; this.image.onload = this.imageLoaded(); } this.el.addEventListener('click', this.play.bind(this)); window.addEventListener('resize', this.resize.bind(this)); }, play: function() { if(!this.container) { this.container = document.createElement('div'); this.container.id = 'ekr-modal-container'; this.container.setAttribute('data-modal', 'container'); if(this.type == 'youtube' || this.type == 'vimeo') { this.content = document.createElement('iframe'); this.content.setAttribute('src', this.url); this.content.setAttribute('frameborder', 0); this.content.setAttribute('allowfullscreen', true); } if(this.type == 'video') { this.content = document.createElement('video'); var source = document.createElement('source'); source.src = this.url; source.type = 'video/mp4'; this.content.setAttribute('controls', 'controls'); this.content.appendChild(source); } if(this.type == 'image') { this.content = document.createElement('img'); this.content.src = this.url; this.content.setAttribute('data-modal', 'image'); // this.content.style.backgroundImage = 'url(' + this.url + ')'; } this.closeButton = document.createElement('button'); this.closeButton.setAttribute('data-modal', 'close'); this.closeButton.innerHTML = '×'; this.closeButton.addEventListener('click', this.close.bind(this)); this.contentContainer = document.createElement('div'); this.contentContainer.setAttribute('data-modal', 'content'); this.contentContainer.appendChild(this.content); this.contentContainer.appendChild(this.closeButton); this.inner = document.createElement('div'); this.inner.setAttribute('data-modal', 'inner'); this.inner.setAttribute('role', 'dialog'); this.inner.id = this.el.id + 'modal'; this.inner.setAttribute('aria-modal', 'true'); this.inner.appendChild(this.contentContainer); if(this.type == 'video' || this.type == 'youtube' || this.type == 'vimeo') { this.inner.setAttribute('aria-label', 'Play Video'); } if(this.type == 'image') { this.inner.setAttribute('aria-label', 'View Image'); } this.container.appendChild(this.inner); document.querySelector('body').appendChild(this.container); if(this.type == 'video') { this.content.play(); } document.addEventListener('click', this.clickCheck); document.addEventListener('keydown', this.keyCheck); this.closeButton.focus(); this.currentFocused = this.closeButton; this.size(); } }, /* Once it's open, check all clicks. Click on the container that aren't part of the modal should close the modal. */ clickCheck: function(e, el) { if(typeof el == 'undefined') { if(!this.clickCheck(e, e.target)) { this.close(); } } else { if(el == document) { return true; } if(el == this.container) { return false; } if(el == this.inner || el == this.content) { return true; } // Else check the parent. return this.clickCheck(e, el.parentNode); } }, keyCheck: function(e) { if(e.keyCode == 9) { // Tab // Trap focus into this dialog if(this.currentFocused == this.closeButton) { this.content.focus(); this.currentFocused = this.content; } else { this.closeButton.focus(); this.currentFocused = this.closeButton; } e.preventDefault(); } if(e.keyCode == 27) { // Esc this.close(); } }, close: function() { if(this.container) { this.el.focus(); document.removeEventListener('click', this.clickCheck); document.removeEventListener('keydown', this.keyCheck); document.querySelector('body').removeChild(this.container); this.container = false; } }, size: function() { // Resize content if(this.container && (this.type == 'youtube' || this.type == 'vimeo')) { jQuery(this.content).css('height', jQuery(this.content).width() * .56); } // Vertical Center setTimeout(function() { var parentHeight = this.inner.clientHeight; var elStyle = getComputedStyle(this.contentContainer); var elHeight = parseFloat(elStyle.height); if(parentHeight > elHeight) { var newTop = (parentHeight - elHeight) / 2; this.contentContainer.style.marginTop = newTop + 'px'; } }.bind(this), 0); }, resize: function() { if(this.container) { this.size(); } }, imageLoaded: function() { this.resize(); } }; jQuery(document).ready(function() { }); var components = components || {}; components.Filter = function(el) { var self = this; self.el = jQuery(el); self.container = self.el.find('[data-filter="container"]'); self.items = []; self.el.find('[data-filter="item"]').each(function() { var item = {}; item.html = jQuery(this).clone(); item.terms = jQuery(this).data('filter-terms'); self.items.push(item); }); self.init(); }; components.Filter.prototype = { init: function() { var self = this; jQuery('[data-filter-control="searchbox"]').on('keyup.filter', function() { self.filter(); }); jQuery('[data-filter-control="checkbox"]').on('change.filter', function() { self.filter(); }); jQuery('[data-filter-control="reset"]').on('click', function() { self.reset(); }); self.filter(); }, filter: function() { var self = this; var filteredItems = []; var searchTerms = self.getTermsSearch(); var checkedTerms = self.getTermsCheckbox(); // Show all items if there are no terms if(searchTerms.length === 0 && checkedTerms.length === 0) { filteredItems = self.items; } else { // Check search terms if(searchTerms.length > 0) { for(var i = 0; i < searchTerms.length; i++) { if(searchTerms[i] !== '') { for(var j = 0; j < self.items.length; j++) { if(self.items[j].terms.indexOf(searchTerms[i]) !== -1) { filteredItems.push(self.items[j]); } } } } } // Check checked terms if(checkedTerms.length > 0) { for(var i = 0; i < self.items.length; i++) { var itemAdded = false; for(var j = 0; j < checkedTerms.length; j++) { var terms = self.items[i].terms.split(','); for(var k = 0; k < terms.length; k++) { if(terms[k] === checkedTerms[j]) { filteredItems.push(self.items[i]); itemAdded = true; } } if(itemAdded) { break; } } } } } self.container.empty(); for(var i = 0; i < filteredItems.length; i++) { var html = filteredItems[i].html.clone(); self.container.append(html); } }, reset: function() { jQuery('[data-filter-control="searchbox"]').val(''); jQuery('[data-filter-control="checkbox"]').prop('checked', false); this.filter(); }, getTermsSearch: function() { var self = this; var searchTerms = []; jQuery('[data-filter-control="searchbox"]').each(function() { if(jQuery(this).val() !== '') { searchTerms.push(jQuery(this).val().toLowerCase()); } }); return searchTerms; }, getTermsCheckbox: function() { var self = this; var checkedTerms = []; jQuery('[data-filter-control="checkbox"]').each(function() { if(jQuery(this).prop('checked') == true) { checkedTerms.push(jQuery(this).val()); } }); return checkedTerms; } };