1class CustomFilters extends HTMLElement{constructor(){super()} 2connectedCallback(){if(this.init){return} 3this.filterButton=this.querySelector('.filters-buttons .filter');this.closeFiltersButtons=this.querySelectorAll('.close-filters');this.listButton=this.querySelector('.filters-buttons .list');this.gridButton=this.querySelector('.filters-buttons .grid');this.clearButtons=this.querySelectorAll('.clear-filters');this.filtersPanel=this.querySelector('.filters-panel');this.filtersPanelInner=this.filtersPanel.querySelector('.inner');this.filtersTarget=this.filtersPanel.getAttribute('data-target');this.activeFiltersPanel=this.querySelector('.filters-active');this.activeFiltersPanelInner=this.activeFiltersPanel.querySelector('.inner');this.resizeTimeout=0;if(this.listButton){this.onListButtonClick=this.showList.bind(this);this.listButton.addEventListener('click',this.onListButtonClick)} 4if(this.gridButton){this.ongridButtonClick=this.showGrid.bind(this);this.gridButton.addEventListener('click',this.ongridButtonClick)} 5if(this.filtersPanel){document.body.append(this.filtersPanel);if(window.innerWidth<=740){let buttons=document.querySelector('.filters-buttons');document.body.append(buttons)}} 6this.onCloseFiltersButtonClick=this.toggleFilterPanel.bind(this);this.onFilterButtonClick=this.toggleFilterPanel.bind(this);this.onClearButtonClick=this.clearFilters.bind(this);this.closeFiltersButtons.forEach(button=>{button.addEventListener('click',this.onCloseFiltersButtonClick)});this.filterButton.addEventListener('click',this.onFilterButtonClick);this.clearButtons.forEach(button=>{button.addEventListener('click',this.onClearButtonClick)});this.onFilter=this.filter.bind(this);let buttons=this.filtersPanel.querySelectorAll('.tag-button');buttons.forEach((button)=>{button.addEventListener('click',this.onFilter)});this.onWindowResize=this.resize.bind(this);window.addEventListener('resize',this.onWindowResize);let filtersPosition1=document.querySelector('.menu-wrapper').offsetHeight+'px';let filtersPositionMarker2=document.createElement('div');filtersPositionMarker2.classList.add('filter-position-marker-2');this.before(filtersPositionMarker2);let scope=this;this.headerTransition=[gsap.timeline({scrollTrigger:{trigger:filtersPositionMarker2,start:'top '+filtersPosition1,end:'top '+filtersPosition1,onLeave:function(){scope.moving=!0;document.body.classList.add('pre-sticky-filters')},onEnterBack:function(){scope.moving=!0;document.body.classList.remove('pre-sticky-filters')}}}),gsap.timeline({scrollTrigger:{trigger:filtersPositionMarker2,start:'top top',end:'top top',onLeave:function(){scope.moving=!0;if(document.body.classList.contains('sticky-filters')){return} 7let target=document.querySelector('.'+scope.filtersTarget);target.style.paddingTop=scope.offsetHeight+'px';let subHeader=document.querySelector('.sub-header');subHeader.appendChild(scope);document.body.classList.add('sticky-filters')},onEnterBack:function(){scope.moving=!0;let marker2=document.querySelector('.filter-position-marker-2');marker2.after(scope);document.body.classList.remove('sticky-filters');let target=document.querySelector('.'+scope.filtersTarget);target.style.paddingTop='0px'}}})];this.resize();this.initURL();this.init=!0} 8disconnectedCallback(){if(this.moving){this.moving=!1;return} 9this.closeFiltersButtons.forEach(button=>{button.removeEventListener('click',this.onCloseFiltersButtonClick)});this.filterButton.removeEventListener('click',this.onFilterButtonClick);this.clearButtons.forEach(button=>{button.removeEventListener('click',this.onClearButtonClick)});if(this.listButton){this.listButton.removeEventListener('click',this.onListButtonClick)} 10if(this.gridButton){this.gridButton.removeEventListener('click',this.ongridButtonClick)} 11let buttons=this.filtersPanel.querySelectorAll('.tag-button');buttons.forEach((button)=>{button.removeEventListener('click',this.onFilter)});window.removeEventListener('resize',this.onWindowResize);let activeButtonsList=this.querySelector('.filters-active .list');let activeButtons=activeButtonsList.querySelectorAll('.tag-button');let scope=this;activeButtons.forEach((button)=>{button.removeEventListener('click',scope.onRemoveActiveFilter)});this.headerTransition.clear(!0);this.headerTransition=null} 12initURL(){let hash=window.location.hash;if(hash){hash=hash.substring(1);let urlFilters=hash.split('&');let filters={};
12urlFilters.forEach(filterGroupURL=>{let filterGroup=filterGroupURL.split('=');filters[filterGroup[0]]=filterGroup[1].split(',')});for(const[key,values]of Object.entries(filters)){values.forEach(value=>{let button=document.querySelector('.filter-group[data-filter-group="'+key+'"] button[data-filter="'+value+'"]');if(button){button.click()}})} 13document.querySelector('.filters-active').classList.add('expanded')}else{if(typeof preselectedAreas!=='undefined'&&Array.isArray(preselectedAreas)){preselectedAreas.forEach(area=>{let button=document.querySelector('.filter-group[data-filter-group="master-area"] button[data-filter="'+area+'"]');if(button){button.click()}})}}} 14toggleFilterPanel(){let activeFilters=this.activeFiltersPanel.querySelectorAll('.list button');let isOpened=this.filtersPanel.classList.contains('expanded');this.filterButton.classList.remove('opened');this.filtersPanel.classList.remove('expanded');if(activeFilters.length){this.openSavedFiltersPanel()} 15elisava.initGTM();if(!isOpened){this.filterButton.classList.add('opened');this.filtersPanel.classList.add('expanded');this.closeSavedFiltersPanel()} 16this.resize()} 17showList(){document.body.classList.add('filters-show-list');document.body.classList.remove('filters-show-grid');let target=document.querySelector('.'+this.filtersTarget);let targetElements=target.querySelectorAll('.filtrable');target.classList.add('font-size-3');targetElements.forEach((element)=>{element.classList.add('text-cta');element.classList.add('link')})} 18showGrid(){document.body.classList.add('filters-show-grid');document.body.classList.remove('filters-show-list');let target=document.querySelector('.'+this.filtersTarget);let targetElements=target.querySelectorAll('.filtrable');target.classList.remove('font-size-3');targetElements.forEach((element)=>{element.classList.remove('text-cta');element.classList.remove('link')})} 19clearFilters(){let activeFilters=this.filtersPanel.querySelectorAll('.filter-group .tag-button.active');activeFilters.forEach((filter)=>{filter.classList.remove('active')});let activeButtonsList=this.activeFiltersPanel.querySelector('.list');let activeButtons=activeButtonsList.querySelectorAll('.tag-button');let scope=this;activeButtons.forEach((button)=>{button.removeEventListener('click',scope.onRemoveActiveFilter)});activeButtonsList.innerHTML='';this.updateFilters();this.closeSavedFiltersPanel()} 20filter(e){e.target.classList.toggle('active');this.updateFilters();if(e.target.classList.contains('active')){this.saveActiveFilter(e.target)}else{this.removeActiveFilter(e.target)}} 21saveActiveFilter(button){let activeFiltersList=this.activeFiltersPanel.querySelector('.list');let activeButton=button.cloneNode(!0);let filterGroup=button.closest('.filter-group').getAttribute('data-filter-group');activeButton.setAttribute('data-filter-group',filterGroup);this.onRemoveActiveFilter=this.removeSavedActiveFilter.bind(this);activeButton.addEventListener('click',this.onRemoveActiveFilter);activeFiltersList.appendChild(activeButton);elisava.initGTM();window.dataLayer=window.dataLayer||[];window.dataLayer.push({event:'activate_filter',filter_type:filterGroup,filter_name:button.getAttribute('data-filter')})} 22removeActiveFilter(button){let activeFiltersList=this.activeFiltersPanel.querySelector('.list');let filterGroup=button.closest('.filter-group').getAttribute('data-filter-group');let filter=button.getAttribute('data-filter');let activeButton=activeFiltersList.querySelector('button[data-filter="'+filter+'"][data-filter-group="'+filterGroup+'"]');if(activeButton){activeButton.remove()}} 23removeSavedActiveFilter(e){let filterGroup=e.target.getAttribute('data-filter-group');let filter=e.target.getAttribute('data-filter');let activeButton=this.filtersPanel.querySelector('div[data-filter-group="'+filterGroup+'"] .button[data-filter="'+filter+'"]');if(activeButton){activeButton.classList.remove('active');this.removeActiveFilter(activeButton)} 24this.updateFilters();let numberOFSaveFilters=this.querySelectorAll('.filters-active .list .button');if(numberOFSaveFilters.length==0){this.closeSavedFiltersPanel()}} 25updateFilters(){let filters=this.getActiveFilters();this.applyActiveFilters(filters);this.updateFilterCount(filters);this.updateURL();ScrollTrigger.refresh();sessionStorage.setItem('filters',filters);if(elisava.layout.smoother){if(document.body.classList.contains('pre-sticky-filters')){elisava.layout.smoother.scrollTo('.'+this.filtersTarget)}} 26let filtrableTotal=document.querySelectorAll('a.filtrable').length;let totalHiding=document.querySelectorAll('a.filtrable.hide').length;if(totalHiding>=filtrableTotal){document.querySelector('.no-results-message').classList.add('show')}else{document.querySelector('.no-results-message').classList.remove('show')} 27const languageFiltered=document.querySelectorAll('.filter-group[data-filter-group="master-language"] .active');const cityFiltered=document.querySelectorAll('.filter-group[data-filter-group="master-city"] .active');const grid=document.querySelector('.study-grid');grid.classList.remove('language-location-filtered');if(languageFiltered.length>0||cityFiltered.length>0){grid.classList.add('language-location-filtered')}} 28getActiveFilters(){let filters={};let filterGroups=this.filtersPanel.querySelectorAll('.filter-group');filterGroups.forEach((filterGroup)=>{let group=filterGroup.getAttribute('data-filter-group');filters[group]=[];let filterButtons=filterGroup.querySelectorAll('.tag-button');let filterButtonsActive=filterGroup.querySelectorAll('.tag-button.active');if(filterButtonsActive.length){filterButtonsActive.forEach((btn)=>{let filter=btn.getAttribute('data-filter');filters[group].push(filter)})}else{filterButtons.forEach((btn)=>{let filter=btn.getAttribute('data-filter');filters[group].push(filter)})}});return filters} 29applyActiveFilters(filters){let target=document.querySelector('.'+this.filtersTarget);let filtrables=target.querySelectorAll('.filtrable');let scope=this;
29filtrables.forEach((element)=>{element.classList.add('hide');if(scope.checkTargetElement(element,filters)){element.classList.remove('hide')}})} 30updateFilterCount(filters){let count=document.querySelectorAll('.filters-panel .tag-button.active').length;document.querySelector('.filters-buttons .count').innerHTML=count;if(count>0){document.body.classList.add('has-active-filters')}else{document.body.classList.remove('has-active-filters')}} 31updateURL(){let hash='';let filterPanel=document.querySelector('.filters-panel');let filterGroups=filterPanel.querySelectorAll('.filter-group');filterGroups.forEach(group=>{let groupName=group.getAttribute('data-filter-group');let activeButtons=group.querySelectorAll('button.active');if(activeButtons.length){if(hash!=''){hash+='&'} 32hash+=groupName+'=';let index=1;activeButtons.forEach(button=>{if(index>1){hash+=','} 33hash+=button.getAttribute('data-filter');index++})}});window.location.hash=hash} 34checkTargetElement(element,filters){let result=!0;for(const[key,value]of Object.entries(filters)){let group=element.getAttribute('data-'+key);if(group!=''){let found=0;value.forEach((singleValue)=>{if(group){if(group.indexOf(singleValue)!=-1){found++}}});if(found==0){result=!1}}} 35return result} 36openSavedFiltersPanel(){this.activeFiltersPanel.classList.add('expanded')} 37closeSavedFiltersPanel(){this.activeFiltersPanel.classList.remove('expanded')} 38resize(){clearTimeout(this.resizeTimeout);let scope=this;this.resizeTimeout=setTimeout(function(){ScrollTrigger.refresh()},400)}} 39customElements.define('custom-filters',CustomFilters)
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.