[HELP] Multiple galleries with tabs on the same page #153

FrogMustang · 2021-02-16T01:37:24Z

Filterizr version
Which version of Filterizr do you have installed in your project?

I'm using v2.2.4

Describe the issue in details
I'm using bootstrap tabs with 2 galleries that are independent. Both galleries use the same script (the vanilla version) and they have custom filters. Everything works well when they are in the same tab, but a weird error occurs when I try to put them in separate ones.

The error

The HTML code

<section id="portfolios">
    <div>
        <ul role="tablist" class="nav nav-tabs nav-justified">
            <li role="presentation" class="nav-item"><a role="tab" data-toggle="tab" class="nav-link active portfolio-tab" href="#tab-1" on-click="reload_gallery_js()">Photography</a></li>
            <li role="presentation" class="nav-item"><a role="tab" data-toggle="tab" class="nav-link portfolio-tab" href="#tab-2" on-click="reload_gallery_js()">Graphic Design</a></li>
            <li role="presentation" class="nav-item"><a role="tab" data-toggle="tab" class="nav-link portfolio-tab" href="#tab-3" on-click="reload_gallery_js()">Beats</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade show active fade" id="tab-1">
                <section class="py-5 photography-gallery">
                    <div class="container">
                        <h1 class="text-center">Photography</h1>
                        <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
                        <div class="filtr-controls"><span id="filtr-all-ph" class="active ph-control" data-filter="all">all </span><span id="filtr-portraits" class="ph-control" data-filter="1">Portraits</span><span id="filtr-landscapes" class="ph-control" data-filter="2">Landscapes</span><span id="filtr-nightPhotography" class="ph-control" data-filter="3">Night Shots</span><span id="filtr--black-white" class="ph-control" data-filter="4">Black &amp; White</span><span id="filtr-others" class="ph-control" data-filter="5">Other</span></div>
                        <div class="row ph-images">
                            <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="land, night, other"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" data-caption="&lt;strong&gt;Image description&lt;/strong&gt;&lt;br&gt;&lt;em&gt;Lorem ipsum&lt;/em&gt;" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" />
                                    <div></div>
                                    <div class="photo-info">
                                        <div class="details">
                                            <h5>Heading</h5>
                                            <p>Paragraph</p>
                                            <div class="black-box"></div>
                                        </div>
                                    </div>
                                </a></div>
                            <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="portret, land, BW"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg" />
                                    <div class="photo-info">
                                        <div class="details">
                                            <h5>Heading</h5>
                                            <p>Paragraph</p>
                                            <div class="black-box"></div>
                                        </div>
                                    </div>
                                </a></div>
                            <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="BW"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg" />
                                    <div class="photo-info">
                                        <div class="details">
                                            <h5>Heading</h5>
                                            <p>Paragraph</p>
                                            <div class="black-box"></div>
                                        </div>
                                    </div>
                                </a></div>
                            <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="BW"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg" />
                                    <div class="photo-info">
                                        <div class="details">
                                            <h5>Heading</h5>
                                            <p>Paragraph</p>
                                            <div class="black-box"></div>
                                        </div>
                                    </div>
                                </a></div>
                        </div>
                    </div>
                </section>
            </div>
            <div role="tabpanel" class="tab-pane fade fade" id="tab-2">
                <section class="py-5 graphic-design-gallery">
                    <div class="container">
                        <h1 class="text-center">Graphic Design</h1>
                        <p class="text-center">You can view instructions <a href="http://imagia-mu.com/DEV/BS/filterable-gallery/" target="_blank">here</a></p>
                        <div class="filtr-controls"><span id="filtr-all-gd" class="active gd-control" data-filter="all">all </span><span id="filtr-logos" class="gd-control" data-filter="1">Logos</span><span id="filtr-album-covers" class="gd-control" data-filter="2">Album covers</span><span id="filtr-posters" class="gd-control" data-filter="3">posters</span><span id="filtr-for-fun" class="gd-control" data-filter="4">just For Fun</span></div>
                        <div class="row gd-images">
                            <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="logo"><a href="https://source.unsplash.com/RLLR0oRz16Y/900x1200.jpg"><img class="img-fluid" data-caption="&lt;strong&gt;Image description&lt;/strong&gt;&lt;br&gt;&lt;em&gt;Lorem ipsum&lt;/em&gt;" src="https://source.unsplash.com/RLLR0oRz16Y/600x600.jpg" />
                                    <div class="photo-info">
                                        <div class="details">
                                            <h5>Heading</h5>
                                            <p>Paragraph</p>
                                            <div class="black-box"></div>
                                        </div>
                                    </div>
                                </a></div>
                            <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="poster, cover"><a href="https://source.unsplash.com/vUNQaTtZeOo/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/vUNQaTtZeOo/600x600.jpg" />
                                    <div class="photo-info">
                                        <div class="details">
                                            <h5>Heading</h5>
                                            <p>Paragraph</p>
                                            <div class="black-box"></div>
                                        </div>
                                    </div>
                                </a></div>
                            <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="logo, cover"><a href="https://source.unsplash.com/ZbMJ5VLrpQ4/900x1200.jpg"><img class="img-fluid" src="https://source.unsplash.com/ZbMJ5VLrpQ4/600x600.jpg" />
                                    <div class="photo-info">
                                        <div class="details">
                                            <h5>Heading</h5>
                                            <p>Paragraph</p>
                                            <div class="black-box"></div>
                                        </div>
                                    </div>
                                </a></div>
                            <div class="col-sm-6 col-md-4 col-lg-3 filtr-item" data-category="cover, fun"><a href="https://source.unsplash.com/HWwF4OnXAdM/1200x900.jpg"><img class="img-fluid" src="https://source.unsplash.com/HWwF4OnXAdM/600x600.jpg" />
                                    <div class="photo-info">
                                        <div class="details">
                                            <h5>Heading</h5>
                                            <p>Paragraph</p>
                                            <div class="black-box"></div>
                                        </div>
                                    </div>
                                </a></div>
                        </div>
                    </div>
                </section>
            </div>
            <div role="tabpanel" class="tab-pane fade fade" id="tab-3">
                <section id="gd-portfolio" class="py-5">
                    <div class="container">
                        <div class="filter-controls text-center lead text-uppercase mb-4"><span class="active d-inline-block mx-3 position-relative" data-filtr="all">all </span><span class="d-inline-block mx-3 position-relative" data-filtr="album">Album Covers</span><span class="d-inline-block mx-3 position-relative" data-filtr="logo">Logos</span><span class="d-inline-block mx-3 position-relative" data-filtr="poster">Posters</span><span class="d-inline-block mx-3 position-relative" data-filtr="fun">For Fun</span></div>
                        <div class="row filter-container">
                            <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 filter-item" data-category="1,2"><img src="isometric perspective mockup.png" /></div>
                            <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 filter-item" data-category="2,3"><img src="time zone.png" /></div>
                            <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 filter-item" data-category="3,1"><img src="viro media players ui.png" /></div>
                            <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 filter-item" data-category="1,2,3"><img src="blog magazine flat ui kit.png" /></div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</section>

The JS code

// fiterizr http://yiotis.net/filterizr/
var Filterizr=function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=5)}([function(t,e,n){"use strict";var r={IDLE:"IDLE",FILTERING:"FILTERING",SORTING:"SORTING",SHUFFLING:"SHUFFLING"},i={SAME_SIZE:"sameSize",SAME_HEIGHT:"sameHeight",SAME_WIDTH:"sameWidth",PACKED:"packed",HORIZONTAL:"horizontal",VERTICAL:"vertical"},o=/(^linear$)|(^ease-in-out$)|(^ease-in$)|(^ease-out$)|(^ease$)|(^step-start$)|(^step-end$)|(^steps\(\d\s*,\s*(end|start)\))$|(^cubic-bezier\((\d*\.*\d+)\s*,\s*(\d*\.*\d+)\s*,\s*(\d*\.*\d+)\s*,\s*(\d*\.*\d+)\))$/,s=function(t,e,n,r,i){if(void 0!==e){var o=new Error('Filterizr: expected type of option "'+t+'" to be "'+n+'", but its type is: "'+typeof e+'"'),s=!1,a=!1,u=n.includes("array");if((typeof e).match(n)?s=!0:!s&&u&&(a=Array.isArray(e)),!s&&!u)throw o;if(!s&&u&&!a)throw o;var c=function(t){return t?" For further help read here: "+t:""};if(Array.isArray(r)){var l=!1;if(r.forEach(function(t){t===e&&(l=!0)}),!l)throw new Error('Filterizr: allowed values for option "'+t+'" are: '+r.map(function(t){return'"'+t+'"'}).join(", ")+'. Value received: "'+e+'".'+c(i))}else if("string"==typeof e&&r instanceof RegExp){if(!e.match(r))throw new Error('Filterizr: invalid value "'+e+'" for option "'+t+'" received.'+c(i))}}},a=function(t,e,n){var r;return function(){var i=this,o=arguments;clearTimeout(r),r=window.setTimeout(function(){r=null,n||t.apply(i,o)},e),n&&!r&&t.apply(i,o)}},u=function(t,e){return t.length===e.length&&t.reduce(function(t,n,r){var i=n.getSortAttribute("index"),o=e[r].getSortAttribute("index");return t&&i===o},!0)};var c=function(t){return"string"==typeof t?document.querySelector(t):t};function l(t){return t&&"object"==typeof t&&!Array.isArray(t)}function f(t){for(var e,n,r=[],i=1;i<arguments.length;i++)r[i-1]=arguments[i];if(!r.length)return t;var o=r.shift();if(l(t)&&l(o))for(var s in o)l(o[s])?(t[s]||Object.assign(t,((e={})[s]={},e)),f(t[s],o[s])):Object.assign(t,((n={})[s]=o[s],n));return f.apply(void 0,[t].concat(r))}var h=function(){};function p(t,e){Object.entries(e).forEach(function(e){var n=e[0],r=e[1];t.style[n]=r})}var d=function(t){for(var e=t.slice(0),n=[];0!==e.length;){var r=Math.floor(e.length*Math.random());n.push(e[r]),e.splice(r,1)}return n},y=function(){function t(t){this.receiver=t,this.eventDictionary={}}return t.prototype.on=function(t,e){var n=this.receiver,r=n instanceof NodeList;!!this.eventDictionary[t]&&delete this.eventDictionary[t],r&&n.length?(this.eventDictionary[t]=e,Array.from(n).forEach(function(n){n.addEventListener(t,e)})):!r&&n&&(this.eventDictionary[t]=e,n.addEventListener(t,e))},t.prototype.off=function(t){var e=this.receiver,n=this.eventDictionary[t],r=e instanceof NodeList;r&&e.length?Array.from(e).forEach(function(e){e.removeEventListener(t,n)}):!r&&e&&e.removeEventListener(t,n),delete this.eventDictionary[t]},t.prototype.destroy=function(){var t=this,e=this.receiver,n=e instanceof NodeList;n&&e.length?Array.from(e).forEach(function(e){return t.removeAllEvents(e)}):!n&&e&&this.removeAllEvents(e)},t.prototype.removeAllEvents=function(t){var e=this;Object.keys(this.eventDictionary).forEach(function(n){t.removeEventListener(n,e.eventDictionary[n]),delete e.eventDictionary[n]})},t}(),v={animationDuration:.5,callbacks:{onInit:h,onFilteringStart:h,onFilteringEnd:h,onShufflingStart:h,onShufflingEnd:h,onSortingStart:h,onSortingEnd:h},controlsSelector:"",delay:0,delayMode:"progressive",easing:"ease-out",filter:"all",filterOutCss:{opacity:0,transform:"scale(0.5)"},filterInCss:{opacity:1,transform:"scale(1)"},gridItemsSelector:".filtr-item",gutterPixels:0,layout:i.SAME_SIZE,multifilterLogicalOperator:"or",searchTerm:"",setupControls:!0,spinner:{enabled:!1,fillColor:"#2184D0",styles:{height:"75px",margin:"0 auto",width:"75px","z-index":2}}},g=function(){function t(t){this.filter=t}return t.prototype.get=function(){return this.filter},t.prototype.set=function(t){this.filter=t},t.prototype.toggle=function(t){this.filter=this.toggleFilter(this.filter,t)},t.prototype.toggleFilter=function(t,e){if("all"===t)return e;if(Array.isArray(t)){if(t.includes(e)){var n=t.filter(function(t){return t!==e});return 1===n.length?n[0]:n}return t.concat([e])}return t===e?"all":[t,e]},t}(),m=function(){return(m=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},b=function(){function t(t){var e=f({},v,this.validate(t));this.options=this.convertToFilterizrOptions(e)}return Object.defineProperty(t.prototype,"isSpinnerEnabled",{get:function(){return this.options.spinner.enabled},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"areControlsEnabled",{get:function(){return this.options.setupControls},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"controlsSelector",{get:function(){return this.options.controlsSelector},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"filter",{get:function(){return this.options.filter.get()},set:function(t){this.options.filter.set(t)},enumerable:!0,configurable:!0}),t.prototype.toggleFilter=function(t){this.options.filter.toggle(t)},Object.defineProperty(t.prototype,"searchTerm",{get:function(){return this.options.searchTerm},set:function(t){this.options.searchTerm=t},enumerable:!0,configurable:!0}),t.prototype.get=function(){return this.options},t.prototype.getRaw=function(){return this.convertToOptions(this.options)},t.prototype.set=function(t){var e=f({},this.convertToOptions(this.options),this.validate(t));this.options=this.convertToFilterizrOptions(e)},t.prototype.convertToFilterizrOptions=function(t){return m({},t,{filter:new g(t.filter)})},t.prototype.convertToOptions=function(t){return m({},t,{filter:t.filter.get()})},t.prototype.validate=function(t){return s("animationDuration",t.animationDuration,"number"),s("callbacks",t.callbacks,"object"),s("controlsSelector",t.controlsSelector,"string"),s("delay",t.delay,"number"),s("easing",t.easing,"string",o,"https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp"),s("delayMode",t.delayMode,"string",["progressive","alternate"]),s("filter",t.filter,"string|number|array"),s("filterOutCss",t.filterOutCss,"object"),s("filterInCss",t.filterOutCss,"object"),s("gridItemsSelector",t.gridItemsSelector,"string"),s("gutterPixels",t.gutterPixels,"number"),s("layout",t.layout,"string",Object.values(i)),s("multifilterLogicalOperator",t.multifilterLogicalOperator,"string",["and","or"]),s("searchTerm",t.searchTerm,"string"),s("setupControls",t.setupControls,"boolean"),t},t}(),w=function(){function t(t,e){void 0===e&&(e=""),this.filterizr=t,this.selector=e,this.filterControls=new y(document.querySelectorAll(e+"[data-filter]")),this.multiFilterControls=new y(document.querySelectorAll(e+"[data-multifilter]")),this.shuffleControls=new y(document.querySelectorAll(e+"[data-shuffle]")),this.searchControls=new y(document.querySelectorAll(e+"[data-search]")),this.sortAscControls=new y(document.querySelectorAll(e+"[data-sortAsc]")),this.sortDescControls=new y(document.querySelectorAll(e+"[data-sortDesc]")),this.initialize()}return t.prototype.destroy=function(){this.filterControls.destroy(),this.multiFilterControls.destroy(),this.shuffleControls.destroy(),this.searchControls.destroy(),this.sortAscControls.destroy(),this.sortDescControls.destroy()},t.prototype.initialize=function(){var t=this.filterizr,e=this.selector;this.filterControls.on("click",function(e){var n=e.currentTarget.getAttribute("data-filter");t.filter(n)}),this.multiFilterControls.on("click",function(e){var n=e.target.getAttribute("data-multifilter");t.toggleFilter(n)}),this.shuffleControls.on("click",t.shuffle.bind(t)),this.searchControls.on("keyup",a(function(e){var n=e.target.value;t.search(n)},250,!1)),this.sortAscControls.on("click",function(){var n=document.querySelector(e+"[data-sortOrder]").value;t.sort(n,"asc")}),this.sortDescControls.on("click",function(){var n=document.querySelector(e+"[data-sortOrder]").value;t.sort(n,"desc")})},t}(),E=function(){function t(t,e){this.node=t,this.options=e,this.eventReceiver=new y(this.node)}return Object.defineProperty(t.prototype,"dimensions",{get:function(){return{width:this.node.clientWidth,height:this.node.clientHeight}},enumerable:!0,configurable:!0}),t.prototype.destroy=function(){this.styles.destroy()},t.prototype.trigger=function(t){var e=new Event(t);this.node.dispatchEvent(e)},t}();function I(t,e){var n=e.get(),r=n.delay;return"progressive"===n.delayMode?r*t:t%2==0?r:0}var S,O=function(t,e,n,r){return new(n||(n=Promise))(function(i,o){function s(t){try{u(r.next(t))}catch(t){o(t)}}function a(t){try{u(r.throw(t))}catch(t){o(t)}}function u(t){t.done?i(t.value):new n(function(e){e(t.value)}).then(s,a)}u((r=r.apply(t,e||[])).next())})},x=function(t,e){var n,r,i,o,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,r=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(i=(i=s.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){s=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){s.label=o[1];break}if(6===o[0]&&s.label<i[1]){s.label=i[1],i=o;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(o);break}i[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,a])}}},_=function(){function t(){}return t.animate=function(e,n){return O(this,void 0,void 0,function(){return x(this,function(r){switch(r.label){case 0:return[4,t.process({node:e,targetStyles:n,eventReceiver:new y(e)})];case 1:return r.sent(),[2]}})})},t.process=function(t){return O(this,void 0,void 0,function(){return x(this,function(e){return[2,new Promise(function(e){t.eventReceiver.on("transitionend",function(){t.eventReceiver.destroy(),e()}),setTimeout(function(){p(t.node,t.targetStyles)},10)})]})})},t}().animate,k=function(t,e,n,r){return new(n||(n=Promise))(function(i,o){function s(t){try{u(r.next(t))}catch(t){o(t)}}function a(t){try{u(r.throw(t))}catch(t){o(t)}}function u(t){t.done?i(t.value):new n(function(e){e(t.value)}).then(s,a)}u((r=r.apply(t,e||[])).next())})},C=function(t,e){var n,r,i,o,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,r=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(i=(i=s.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){s=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){s.label=o[1];break}if(6===o[0]&&s.label<i[1]){s.label=i[1],i=o;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(o);break}i[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,a])}}},A=function(){function t(t,e){this.node=t,this.options=e}return t.prototype.destroy=function(){this.node.removeAttribute("style")},t.prototype.animate=function(t){return k(this,void 0,void 0,function(){return C(this,function(e){return _(this.node,t),[2]})})},t.prototype.set=function(t){p(this.node,t)},t.prototype.remove=function(t){this.node.style.removeProperty(t)},t}(),T=(S=function(t,e){return(S=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}S(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),j=function(t,e,n,r){return new(n||(n=Promise))(function(i,o){function s(t){try{u(r.next(t))}catch(t){o(t)}}function a(t){try{u(r.throw(t))}catch(t){o(t)}}function u(t){t.done?i(t.value):new n(function(e){e(t.value)}).then(s,a)}u((r=r.apply(t,e||[])).next())})},P=function(t,e){var n,r,i,o,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,r=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(i=(i=s.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){s=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){s.label=o[1];break}if(6===o[0]&&s.label<i[1]){s.label=i[1],i=o;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(o);break}i[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,a])}}},F=n(1),L=function(t){function e(e,n,r){var i=t.call(this,e,r)||this;return i._index=n,i}return T(e,t),e.prototype.initialize=function(){var t;this.set((t=this.options,Object.assign({},t.get().filterOutCss,{"-webkit-backface-visibility":"hidden",perspective:"1000px","-webkit-perspective":"1000px","-webkit-transform-style":"preserve-3d",position:"absolute"})))},e.prototype.setFilteredStyles=function(t,e){this.set(function(t,e){return Object.assign({},e,{transform:(e.transform||"")+" translate3d("+t.left+"px, "+t.top+"px, 0)"})}(t,e))},e.prototype.updateTransitionStyle=function(){var t,e,n;this.set((t=this._index,e=this.options,{transition:"all "+(n=e.get()).animationDuration+"s "+n.easing+" "+I(t,e)+"ms, width 1ms"}))},e.prototype.updateWidth=function(){var t=this.options.get().gutterPixels,e=this.node.parentElement.clientWidth,n=this.node.clientWidth,r=n-t*(1/Math.floor(e/n)+1)+"px";this.set({width:r})},e.prototype.enableTransitions=function(){return j(this,void 0,void 0,function(){var t=this;return P(this,function(e){return[2,new Promise(function(e){!!t.node.querySelectorAll("img").length?F(t.node,function(){setTimeout(function(){t.updateTransitionStyle(),e()},10)}):setTimeout(function(){t.updateTransitionStyle(),e()},10)})]})})},e.prototype.disableTransitions=function(){this.remove("transition")},e.prototype.setZIndex=function(t){this.set({"z-index":t})},e.prototype.removeZIndex=function(){this.remove("z-index")},e.prototype.removeWidth=function(){this.remove("width")},e.prototype.setHidden=function(){this.set({display:"none"})},e.prototype.setVisible=function(){this.remove("display")},e}(A),z=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),D=function(){return(D=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},N=function(t){function e(e,n,r){var i=t.call(this,e,r)||this;return i.filteredOut=!1,i.lastPosition={left:0,top:0},i.sortData=D({},function(t){for(var e={category:"",sort:""},n=0,r=t.attributes,i=r.length;n<i;n++){var o=r[n],s=o.nodeName,a=o.nodeValue;s.includes("data")&&(e[s.slice(5,s.length)]=a)}return delete e.category,delete e.sort,e}(e),{index:n,sortData:e.getAttribute("data-sort")}),i.styledNode=new L(e,n,r),i.styles.initialize(),i.bindEvents(),i}return z(e,t),Object.defineProperty(e.prototype,"styles",{get:function(){return this.styledNode},enumerable:!0,configurable:!0}),e.prototype.destroy=function(){t.prototype.destroy.call(this),this.unbindEvents()},e.prototype.filterIn=function(t){var e=this.options.get().filterInCss;this.styles.setFilteredStyles(t,e),this.lastPosition=t,this.filteredOut=!1},e.prototype.filterOut=function(){var t=this.options.get().filterOutCss;this.styles.setFilteredStyles(this.lastPosition,t),this.filteredOut=!0},e.prototype.contentsMatchSearch=function(t){return this.node.textContent.toLowerCase().includes(t)},e.prototype.getCategories=function(){return this.node.getAttribute("data-category").split(/\s*,\s*/g)},e.prototype.getSortAttribute=function(t){return this.sortData[t]},e.prototype.bindEvents=function(){var t=this;this.eventReceiver.on("transitionend",function(){t.filteredOut?(t.node.classList.add("filteredOut"),t.styles.setZIndex(-1e3),t.styles.setHidden()):(t.node.classList.remove("filteredOut"),t.styles.removeZIndex())})},e.prototype.unbindEvents=function(){this.eventReceiver.off("transitionend")},e}(E),M=function(){},R=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),H=function(t,e,n,r){return new(n||(n=Promise))(function(i,o){function s(t){try{u(r.next(t))}catch(t){o(t)}}function a(t){try{u(r.throw(t))}catch(t){o(t)}}function u(t){t.done?i(t.value):new n(function(e){e(t.value)}).then(s,a)}u((r=r.apply(t,e||[])).next())})},W=function(t,e){var n,r,i,o,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,r=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(i=(i=s.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){s=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){s.label=o[1];break}if(6===o[0]&&s.label<i[1]){s.label=i[1],i=o;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(o);break}i[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,a])}}},q=function(t){function e(e){var n=t.call(this)||this;return n._filterItems=e.map(function(t){return t.styles}),n}return R(e,t),e.prototype.resetDisplay=function(){this._filterItems.forEach(function(t){return t.setVisible()})},e.prototype.removeWidth=function(){this._filterItems.forEach(function(t){return t.removeWidth()})},e.prototype.updateWidth=function(){this._filterItems.forEach(function(t){return t.updateWidth()})},e.prototype.updateTransitionStyle=function(){this._filterItems.forEach(function(t){return t.updateTransitionStyle()})},e.prototype.disableTransitions=function(){this._filterItems.forEach(function(t){return t.disableTransitions()})},e.prototype.enableTransitions=function(){return H(this,void 0,void 0,function(){var t=this;return W(this,function(e){return this._filterItems.forEach(function(e){return H(t,void 0,void 0,function(){return W(this,function(t){switch(t.label){case 0:return[4,e.enableTransitions()];case 1:return[2,t.sent()]}})})}),[2]})})},e.prototype.updateWidthWithTransitionsDisabled=function(){this.disableTransitions(),this.removeWidth(),this.updateWidth(),this.enableTransitions()},e}(M),G=function(){function t(t,e){this.filterItems=t,this.styledFilterItems=new q(t),this.options=e}return Object.defineProperty(t.prototype,"styles",{get:function(){return this.styledFilterItems},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"length",{get:function(){return this.filterItems.length},enumerable:!0,configurable:!0}),t.prototype.getItem=function(t){return this.filterItems[t]},t.prototype.destroy=function(){this.filterItems.forEach(function(t){return t.destroy()})},t.prototype.push=function(t){return this.filterItems.push(t)},t.prototype.remove=function(t){this.filterItems=this.filterItems.filter(function(e){return e.node!==t})},t.prototype.getFiltered=function(t){var e=this,n=this.options.searchTerm,r=this.search(this.filterItems,n);return"all"===t?r:r.filter(function(n){return e.shouldBeFiltered(n.getCategories(),t)})},t.prototype.getFilteredOut=function(t){var e=this,n=this.options.searchTerm;return this.filterItems.filter(function(r){var i=r.getCategories(),o=e.shouldBeFiltered(i,t),s=r.contentsMatchSearch(n);return!o||!s})},t.prototype.sort=function(t,e){void 0===t&&(t="index"),void 0===e&&(e="asc");var n,r,i=(n=this.filterItems,r=function(e){return e.getSortAttribute(t)},n.slice(0).sort(function(t){return function(e,n){var r=t(e),i=t(n);return r<i?-1:r>i?1:0}}(r))),o="asc"===e?i:i.reverse();this.filterItems=o},t.prototype.shuffle=function(){var t=this,e=this.getFiltered(this.options.filter);if(e.length>1){var n=this.getFiltered(this.options.filter).map(function(e){return t.filterItems.indexOf(e)}).slice(),r=void 0;do{r=d(e)}while(u(e,r));(r=d(e)).forEach(function(e,r){var i,o=n[r];t.filterItems=Object.assign([],t.filterItems,((i={})[o]=e,i))})}},t.prototype.search=function(t,e){return e?t.filter(function(t){return t.contentsMatchSearch(e)}):t},t.prototype.shouldBeFiltered=function(t,e){var n,r,i=this.options.getRaw().multifilterLogicalOperator;return Array.isArray(e)?"or"===i?!!(n=t,r=e,Array.prototype.filter.call(n,function(t){return r.includes(t)})).length:function(t,e){return t.reduce(function(t,n){return t&&e.includes(n)},!0)}(e,t):t.includes(e)},t}(),B=function(){return(B=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},Z=function(t){return{padding:t.get().gutterPixels+"px"}},$=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),Q=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return $(e,t),e.prototype.initialize=function(){var t;this.set((t=this.options,B({},Z(t),{position:"relative",width:"100%",display:"flex",flexWrap:"wrap"})))},e.prototype.updatePaddings=function(){this.set(Z(this.options))},e.prototype.setHeight=function(t){this.set({height:t+"px"})},e}(A),V=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),J=function(t){function e(e,n){var i=this;if(!e)throw new Error("Filterizr: could not initialize container, check the selector or node you passed to the constructor exists.");return(i=t.call(this,e,n)||this).styledNode=new Q(e,n),i._filterizrState=r.IDLE,i.styles.initialize(),i.filterItems=i.makeFilterItems(i.options),i.bindEvents(),i}return V(e,t),Object.defineProperty(e.prototype,"styles",{get:function(){return this.styledNode},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"filterizrState",{set:function(t){this._filterizrState=t},enumerable:!0,configurable:!0}),e.prototype.destroy=function(){t.prototype.destroy.call(this),this.unbindEvents(),this.filterItems.destroy()},e.prototype.makeFilterItems=function(t){var e=Array.from(this.node.querySelectorAll(t.get().gridItemsSelector)).map(function(e,n){return new N(e,n,t)}),n=new G(e,t);if(!n.length)throw new Error("Filterizr: cannot initialize empty container. Make sure the gridItemsSelector option corresponds to the selector of your grid's items");return n.styles.updateWidth(),n},e.prototype.insertItem=function(t){var e=t.cloneNode(!0);e.removeAttribute("style"),this.node.appendChild(e);var n=new N(e,this.filterItems.length,this.options);n.styles.enableTransitions(),n.styles.updateWidth(),this.filterItems.push(n)},e.prototype.removeItem=function(t){this.filterItems.remove(t),this.node.removeChild(t)},e.prototype.setHeight=function(t){this.dimensions.height=t,this.styles.setHeight(t)},e.prototype.bindEvents=function(){var t=this,e=this.options.get(),n=e.animationDuration,i=e.callbacks,o=e.delay,s=e.delayMode,u=e.gridItemsSelector,c="progressive"===s?o*this.filterItems.length:o;this.eventReceiver.on("transitionend",a(function(e){if(Array.from(e.target.classList).reduce(function(t,e){return t||u.includes(e)},!1)){switch(t._filterizrState){case r.FILTERING:t.trigger("filteringEnd");break;case r.SORTING:t.trigger("sortingEnd");break;case r.SHUFFLING:t.trigger("shufflingEnd")}t.filterizrState=r.IDLE}},100*n+c,!1)),this.eventReceiver.on("init",i.onInit),this.eventReceiver.on("filteringStart",i.onFilteringStart),this.eventReceiver.on("filteringEnd",i.onFilteringEnd),this.eventReceiver.on("shufflingStart",i.onShufflingStart),this.eventReceiver.on("shufflingEnd",i.onShufflingEnd),this.eventReceiver.on("sortingStart",i.onSortingStart),this.eventReceiver.on("sortingEnd",i.onSortingEnd)},e.prototype.unbindEvents=function(){this.eventReceiver.off("transitionend"),this.eventReceiver.off("init"),this.eventReceiver.off("filteringStart"),this.eventReceiver.off("filteringEnd"),this.eventReceiver.off("shufflingStart"),this.eventReceiver.off("shufflingEnd"),this.eventReceiver.off("sortingStart"),this.eventReceiver.off("sortingEnd")},e}(E);var U=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),K=function(){return(K=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},X=function(t,e,n,r){return new(n||(n=Promise))(function(i,o){function s(t){try{u(r.next(t))}catch(t){o(t)}}function a(t){try{u(r.throw(t))}catch(t){o(t)}}function u(t){t.done?i(t.value):new n(function(e){e(t.value)}).then(s,a)}u((r=r.apply(t,e||[])).next())})},Y=function(t,e){var n,r,i,o,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,r=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(i=(i=s.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){s=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){s.label=o[1];break}if(6===o[0]&&s.label<i[1]){s.label=i[1],i=o;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(o);break}i[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,a])}}},tt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return U(e,t),e.prototype.initialize=function(){var t=this.options.get().spinner.styles;this.set(K({},t,{opacity:1,transition:"all ease-out 500ms"}))},e.prototype.fadeOut=function(){return X(this,void 0,void 0,function(){return Y(this,function(t){switch(t.label){case 0:return[4,this.animate({opacity:0})];case 1:return t.sent(),[2]}})})},e}(A),et=function(t,e,n,r){return new(n||(n=Promise))(function(i,o){function s(t){try{u(r.next(t))}catch(t){o(t)}}function a(t){try{u(r.throw(t))}catch(t){o(t)}}function u(t){t.done?i(t.value):new n(function(e){e(t.value)}).then(s,a)}u((r=r.apply(t,e||[])).next())})},nt=function(t,e){var n,r,i,o,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,r=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(i=(i=s.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){s=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){s.label=o[1];break}if(6===o[0]&&s.label<i[1]){s.label=i[1],i=o;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(o);break}i[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,a])}}},rt=function(){function t(t,e){var n,r,i;this.filterContainer=t,this.node=(n=e.get().spinner,r='<?xml version="1.0" encoding="UTF-8"?><svg stroke="'+n.fillColor+'" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-width="2"><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" calcMode="spline" dur="1.8s" keySplines="0.165, 0.84, 0.44, 1" keyTimes="0; 1" repeatCount="indefinite" values="1; 20"/><animate attributeName="stroke-opacity" begin="0s" calcMode="spline" dur="1.8s" keySplines="0.3, 0.61, 0.355, 1" keyTimes="0; 1" repeatCount="indefinite" values="1; 0"/></circle><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" calcMode="spline" dur="1.8s" keySplines="0.165, 0.84, 0.44, 1" keyTimes="0; 1" repeatCount="indefinite" values="1; 20"/><animate attributeName="stroke-opacity" begin="-0.9s" calcMode="spline" dur="1.8s" keySplines="0.3, 0.61, 0.355, 1" keyTimes="0; 1" repeatCount="indefinite" values="1; 0"/></circle></g></svg>',(i=document.createElement("img")).classList.add("Filterizr__spinner"),i.src="data:image/svg+xml;base64,"+window.btoa(r),i.alt="Spinner",i),this.styledNode=new tt(this.node,e),this.initialize()}return Object.defineProperty(t.prototype,"styles",{get:function(){return this.styledNode},enumerable:!0,configurable:!0}),t.prototype.destroy=function(){return et(this,void 0,void 0,function(){return nt(this,function(t){switch(t.label){case 0:return[4,this.styles.fadeOut()];case 1:return t.sent(),this.filterContainer.node.removeChild(this.node),[2]}})})},t.prototype.initialize=function(){this.styles.initialize(),this.filterContainer.node.appendChild(this.node)},t}(),it=n(2),ot=n.n(it);function st(t,e){return t.reduce(function(t,n){return t+n.width+e},0)}function at(t,e){return t.length?t.reduce(function(t,n){return t+n.height+e},0):0}var ut=function(){return(ut=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},ct=function(){function t(t){this.init(t)}return t.prototype.init=function(t){this.root={x:0,y:0,w:t}},t.prototype.fit=function(t){var e,n,r,i=t.length,o=i>0?t[0].h:0;for(this.root.h=o,e=0;e<i;e++)r=t[e],(n=this.findNode(this.root,r.w,r.h))?r.fit=this.splitNode(n,r.w,r.h):r.fit=this.growDown(r.w,r.h)},t.prototype.findNode=function(t,e,n){return t.used?this.findNode(t.right,e,n)||this.findNode(t.down,e,n):e<=t.w&&n<=t.h?t:null},t.prototype.splitNode=function(t,e,n){return t.used=!0,t.down={x:t.x,y:t.y+n,w:t.w,h:t.h-n},t.right={x:t.x+e,y:t.y,w:t.w-e,h:n},t},t.prototype.growDown=function(t,e){var n;return this.root={used:!0,x:0,y:0,w:this.root.w,h:this.root.h+e,down:{x:0,y:this.root.h,w:this.root.w,h:e},right:this.root},(n=this.findNode(this.root,t,e))?this.splitNode(n,t,e):null},t}(),lt=ot()(function(t,e,n){var r=n.gutterPixels,o=n.layout;if(!e.length)return{containerHeight:0,itemsPositions:[]};switch(o){case i.HORIZONTAL:return function(t,e){return{containerHeight:Math.max.apply(Math,t.map(function(t){return t.height}))+2*e,itemsPositions:t.map(function(n,r){return{left:st(t.slice(0,r),e),top:0}})}}(e,r);case i.VERTICAL:return function(t,e){return{containerHeight:at(t,e)+e,itemsPositions:t.map(function(n,r){return{left:0,top:at(t.slice(0,r),e)}})}}(e,r);case i.SAME_HEIGHT:return function(t,e,n){var r=e.map(function(t,r){var i=t.width;return e.slice(0,r).reduce(function(t,e){return t+e.width+2*n},0)+i+n}),i=r.reduce(function(e,n,r){var i,o=Object.keys(e).length;return ut({},e,n>t*o&&((i={})[o]=r,i))},{0:0}),o=e.map(function(o,s){var a=o.height,u=Math.floor(r[s]/t);return{left:e.slice(i[u],s).reduce(function(t,e){return t+e.width+n},0),top:(a+n)*u}});return{containerHeight:Object.keys(i).length*(e[0].height+n)+n,itemsPositions:o}}(t,e,r);case i.SAME_WIDTH:return function(t,e,n){var r=Math.floor(t/(e[0].width+n)),i=e.map(function(t,i){var o=t.width,s=Math.floor(i/r);return{left:(i-r*s)*(o+n),top:e.slice(0,i).filter(function(t,e){return(i-e)%r==0}).reduce(function(t,e){return t+e.height+n},0)}}),o=e.reduce(function(t,e,i){var o=e.height,s=Math.floor(i/r);return t[i-r*s]+=o+n,t},Array.apply(null,Array(r)).map(Number.prototype.valueOf,0));return{containerHeight:Math.max.apply(Math,o)+n,itemsPositions:i}}(t,e,r);case i.PACKED:return function(t,e,n){var r=new ct(t),i=e.map(function(t){var e=t.width,r=t.height;return{w:e+n,h:r+n}});r.fit(i);var o=i.map(function(t){var e=t.fit;return{left:e.x,top:e.y}});return{containerHeight:r.root.h+n,itemsPositions:o}}(t,e,r);case i.SAME_SIZE:default:return function(t,e,n){var r=Math.floor(t/(e[0].width+n)),i=e.map(function(t,e){var i=t.width,o=t.height,s=Math.floor(e/r);return{left:(e-r*s)*(i+n),top:s*(o+n)}});return{containerHeight:Math.ceil(e.length/r)*(e[0].height+n)+n,itemsPositions:i}}(t,e,r)}});function ft(t){if(!t)throw new Error("Filterizr as a jQuery plugin, requires jQuery to work. If you would prefer to use the vanilla JS version, please use the correct bundle file.");t.fn.filterizr=function(){var e="."+t.trim(this.get(0).className).replace(/\s+/g,"."),n=arguments;if(!this._fltr&&0===n.length||1===n.length&&"object"==typeof n[0]){var r=n.length>0?n[0]:v;this._fltr=new yt(e,r)}else if(n.length>=1&&"string"==typeof n[0]){var i=n[0],o=Array.prototype.slice.call(n,1),s=this._fltr;switch(i){case"filter":return s.filter.apply(s,o),this;case"insertItem":return s.insertItem.apply(s,o),this;case"removeItem":return s.removeItem.apply(s,o),this;case"toggleFilter":return s.toggleFilter.apply(s,o),this;case"sort":return s.sort.apply(s,o),this;case"shuffle":return s.shuffle.apply(s,o),this;case"search":return s.search.apply(s,o),this;case"setOptions":return s.setOptions.apply(s,o),this;case"destroy":return s.destroy.apply(s,o),delete this._fltr,this;default:throw new Error("Filterizr: "+i+" is not part of the Filterizr API. Please refer to the docs for more information.")}}return this}}var ht=function(t,e,n,r){return new(n||(n=Promise))(function(i,o){function s(t){try{u(r.next(t))}catch(t){o(t)}}function a(t){try{u(r.throw(t))}catch(t){o(t)}}function u(t){t.done?i(t.value):new n(function(e){e(t.value)}).then(s,a)}u((r=r.apply(t,e||[])).next())})},pt=function(t,e){var n,r,i,o,s={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function a(o){return function(a){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return s.label++,{value:o[1],done:!1};case 5:s.label++,r=o[1],o=[0];continue;case 7:o=s.ops.pop(),s.trys.pop();continue;default:if(!(i=(i=s.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){s=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){s.label=o[1];break}if(6===o[0]&&s.label<i[1]){s.label=i[1],i=o;break}if(i&&s.label<i[2]){s.label=i[2],s.ops.push(o);break}i[2]&&s.ops.pop(),s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,a])}}},dt=n(1),yt=function(){function t(t,e){void 0===t&&(t=".filtr-container"),void 0===e&&(e={}),this.options=new b(e);var n=this.options,r=n.areControlsEnabled,i=n.controlsSelector,o=n.isSpinnerEnabled;this.windowEventReceiver=new y(window),this.filterContainer=new J(c(t),this.options),this.imagesHaveLoaded=!this.filterContainer.node.querySelectorAll("img").length,r&&(this.filterControls=new w(this,i)),o&&(this.spinner=new rt(this.filterContainer,this.options)),this.initialize()}return Object.defineProperty(t.prototype,"filterItems",{get:function(){return this.filterContainer.filterItems},enumerable:!0,configurable:!0}),t.prototype.filter=function(t){var e=this.filterContainer;e.trigger("filteringStart"),e.filterizrState=r.FILTERING,t=Array.isArray(t)?t.map(function(t){return t.toString()}):t.toString(),this.options.filter=t,this.render()},t.prototype.destroy=function(){var t=this.windowEventReceiver,e=this.filterControls;this.filterContainer.destroy(),t.destroy(),this.options.areControlsEnabled&&e&&e.destroy()},t.prototype.insertItem=function(t){return ht(this,void 0,void 0,function(){return pt(this,function(e){switch(e.label){case 0:return this.filterContainer.insertItem(t),[4,this.waitForImagesToLoad()];case 1:return e.sent(),this.render(),[2]}})})},t.prototype.removeItem=function(t){this.filterContainer.removeItem(t),this.render()},t.prototype.sort=function(t,e){void 0===t&&(t="index"),void 0===e&&(e="asc");var n=this.filterContainer,i=this.filterItems;n.trigger("sortingStart"),n.filterizrState=r.SORTING,i.sort(t,e),this.render()},t.prototype.search=function(t){void 0===t&&(t=this.options.get().searchTerm),this.options.searchTerm=t.toLowerCase(),this.render()},t.prototype.shuffle=function(){var t=this.filterContainer,e=this.filterItems;t.trigger("shufflingStart"),t.filterizrState=r.SHUFFLING,e.shuffle(),this.render()},t.prototype.setOptions=function(t){var e=this.filterContainer,n=this.filterItems,r="animationDuration"in t||"delay"in t||"delayMode"in t;(t.callbacks||r)&&e.unbindEvents(),this.options.set(t),(t.easing||r)&&n.styles.updateTransitionStyle(),(t.callbacks||r)&&e.bindEvents(),"searchTerm"in t&&this.search(t.searchTerm),("filter"in t||"multifilterLomultifilterLogicalOperator"in t)&&this.filter(this.options.filter),"gutterPixels"in t&&(this.filterContainer.styles.updatePaddings(),this.filterItems.styles.updateWidthWithTransitionsDisabled(),this.render())},t.prototype.toggleFilter=function(t){this.options.toggleFilter(t),this.filter(this.options.filter)},t.prototype.render=function(){var t=this.filterContainer,e=this.filterItems,n=this.options,r=e.getFiltered(n.filter);e.styles.resetDisplay(),e.getFilteredOut(n.filter).forEach(function(t){t.filterOut()});var i=lt(t.dimensions.width,r.map(function(t){return t.dimensions}),this.options.get()),o=i.containerHeight,s=i.itemsPositions;t.setHeight(o),r.forEach(function(t,e){t.filterIn(s[e])})},t.prototype.initialize=function(){return ht(this,void 0,void 0,function(){var t,e,n,r;return pt(this,function(i){switch(i.label){case 0:return e=(t=this).filterContainer,n=t.filterItems,r=t.spinner,this.bindEvents(),[4,this.waitForImagesToLoad()];case 1:return i.sent(),this.options.isSpinnerEnabled?[4,r.destroy()]:[3,3];case 2:i.sent(),i.label=3;case 3:return this.render(),[4,n.styles.enableTransitions()];case 4:return i.sent(),e.trigger("init"),[2]}})})},t.prototype.bindEvents=function(){var t=this,e=this.filterItems;this.windowEventReceiver.on("resize",a(function(){e.styles.updateWidthWithTransitionsDisabled(),t.render()},50,!1))},t.prototype.waitForImagesToLoad=function(){return ht(this,void 0,void 0,function(){var t,e,n,r=this;return pt(this,function(i){return e=(t=this).imagesHaveLoaded,n=t.filterContainer,e?[2,Promise.resolve()]:[2,new Promise(function(t){dt(n.node,function(){r.imagesHaveLoaded=!0,t()})})]})})},t.FilterContainer=J,t.FilterItem=N,t.defaultOptions=v,t.installAsJQueryPlugin=ft,t}();n.d(e,"a",function(){return yt})},function(t,e,n){var r,i;!function(o,s){"use strict";r=[n(3)],void 0===(i=function(t){return function(t,e){var n=t.jQuery,r=t.console;function i(t,e){for(var n in e)t[n]=e[n];return t}var o=Array.prototype.slice;function s(t,e,a){if(!(this instanceof s))return new s(t,e,a);var u=t;"string"==typeof t&&(u=document.querySelectorAll(t)),u?(this.elements=function(t){if(Array.isArray(t))return t;if("object"==typeof t&&"number"==typeof t.length)return o.call(t);return[t]}(u),this.options=i({},this.options),"function"==typeof e?a=e:i(this.options,e),a&&this.on("always",a),this.getImages(),n&&(this.jqDeferred=new n.Deferred),setTimeout(this.check.bind(this))):r.error("Bad element for imagesLoaded "+(u||t))}s.prototype=Object.create(e.prototype),s.prototype.options={},s.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},s.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&a[e]){for(var n=t.querySelectorAll("img"),r=0;r<n.length;r++){var i=n[r];this.addImage(i)}if("string"==typeof this.options.background){var o=t.querySelectorAll(this.options.background);for(r=0;r<o.length;r++){var s=o[r];this.addElementBackgroundImages(s)}}}};var a={1:!0,9:!0,11:!0};function u(t){this.img=t}function c(t,e){this.url=t,this.element=e,this.img=new Image}return s.prototype.addElementBackgroundImages=function(t){var e=getComputedStyle(t);if(e)for(var n=/url\((['"])?(.*?)\1\)/gi,r=n.exec(e.backgroundImage);null!==r;){var i=r&&r[2];i&&this.addBackground(i,t),r=n.exec(e.backgroundImage)}},s.prototype.addImage=function(t){var e=new u(t);this.images.push(e)},s.prototype.addBackground=function(t,e){var n=new c(t,e);this.images.push(n)},s.prototype.check=function(){var t=this;function e(e,n,r){setTimeout(function(){t.progress(e,n,r)})}this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?this.images.forEach(function(t){t.once("progress",e),t.check()}):this.complete()},s.prototype.progress=function(t,e,n){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&r&&r.log("progress: "+n,t,e)},s.prototype.complete=function(){var t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){var e=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[e](this)}},u.prototype=Object.create(e.prototype),u.prototype.check=function(){this.getIsImageComplete()?this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.proxyImage.src=this.img.src)},u.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},u.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.img,e])},u.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},u.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},u.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},u.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},c.prototype=Object.create(u.prototype),c.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},c.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},c.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},s.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&((n=e).fn.imagesLoaded=function(t,e){return new s(this,t,e).jqDeferred.promise(n(this))})},s.makeJQueryPlugin(),s}(o,t)}.apply(e,r))||(t.exports=i)}("undefined"!=typeof window?window:this)},function(t,e){function n(t,e,n,r){var i,o=null==(i=r)||"number"==typeof i||"boolean"==typeof i?r:n(r),s=e.get(o);return void 0===s&&(s=t.call(this,r),e.set(o,s)),s}function r(t,e,n){var r=Array.prototype.slice.call(arguments,3),i=n(r),o=e.get(i);return void 0===o&&(o=t.apply(this,r),e.set(i,o)),o}function i(t,e,n,r,i){return n.bind(e,t,r,i)}function o(t,e){return i(t,this,1===t.length?n:r,e.cache.create(),e.serializer)}function s(){return JSON.stringify(arguments)}function a(){this.cache=Object.create(null)}a.prototype.has=function(t){return t in this.cache},a.prototype.get=function(t){return this.cache[t]},a.prototype.set=function(t,e){this.cache[t]=e};var u={create:function(){return new a}};t.exports=function(t,e){var n=e&&e.cache?e.cache:u,r=e&&e.serializer?e.serializer:s;return(e&&e.strategy?e.strategy:o)(t,{cache:n,serializer:r})},t.exports.strategies={variadic:function(t,e){return i(t,this,r,e.cache.create(),e.serializer)},monadic:function(t,e){return i(t,this,n,e.cache.create(),e.serializer)}}},function(t,e,n){var r,i;"undefined"!=typeof window&&window,void 0===(i="function"==typeof(r=function(){"use strict";function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var n=this._events=this._events||{},r=n[t]=n[t]||[];return-1==r.indexOf(e)&&r.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var n=this._onceEvents=this._onceEvents||{};return(n[t]=n[t]||{})[e]=!0,this}},e.off=function(t,e){var n=this._events&&this._events[t];if(n&&n.length){var r=n.indexOf(e);return-1!=r&&n.splice(r,1),this}},e.emitEvent=function(t,e){var n=this._events&&this._events[t];if(n&&n.length){n=n.slice(0),e=e||[];for(var r=this._onceEvents&&this._onceEvents[t],i=0;i<n.length;i++){var o=n[i];r&&r[o]&&(this.off(t,o),delete r[o]),o.apply(this,e)}return this}},e.allOff=function(){delete this._events,delete this._onceEvents},t})?r.call(e,n,e,t):r)||(t.exports=i)},,function(t,e,n){"use strict";n.r(e);var r=n(0);n.d(e,"default",function(){return r.a})}]).default;


// simplelightbox 1.12.0 https://github.com/andreknieriem/simplelightbox
!function(t,e,i,n){"use strict";t.fn.simpleLightbox=function(n){var a,n=t.extend({sourceAttr:"href",overlay:!0,spinner:!0,nav:!0,navText:["&lsaquo;","&rsaquo;"],captions:!0,captionDelay:0,captionSelector:"img",captionType:"attr",captionsData:"title",captionPosition:"bottom",captionClass:"",close:!0,closeText:"×",swipeClose:!0,showCounter:!0,fileExt:"png|jpg|jpeg|gif",animationSlide:!0,animationSpeed:250,preloading:!0,enableKeyboard:!0,loop:!0,rel:!1,docClose:!0,swipeTolerance:50,className:"simple-lightbox",widthRatio:.8,heightRatio:.9,disableRightClick:!1,disableScroll:!0,alertError:!0,alertErrorMessage:"Image not found, next image will be loaded",additionalHtml:!1,history:!0},n),o=(e.navigator.pointerEnabled||e.navigator.msPointerEnabled,0),s=0,l=t(),r=function(){var t=i.body||i.documentElement;return t=t.style,""===t.WebkitTransition?"-webkit-":""===t.MozTransition?"-moz-":""===t.OTransition?"-o-":""===t.transition&&""},c=!1,p=[],d=n.rel&&!1!==n.rel?function(e,i){return t(i.selector).filter(function(){return t(this).attr("rel")===e})}(n.rel,this):this,h=0,g=!1!==(r=r()),u="pushState"in history,f=!1,m=e.location,v=function(){return m.hash.substring(1)},b=v(),x=function(){v();var t="pid="+(D+1),e=m.href.split("#")[0]+"#"+t;u?history[f?"replaceState":"pushState"]("",i.title,e):f?m.replace(e):m.hash=t,f=!0},y=function(){u?history.pushState("",i.title,m.pathname+m.search):m.hash="",clearTimeout(a)},w=function(){f?a=setTimeout(x,800):x()},E="simplelb",C=t("<div>").addClass("sl-overlay"),T=t("<button>").addClass("sl-close").html(n.closeText),S=t("<div>").addClass("sl-spinner").html("<div></div>"),k=t("<div>").addClass("sl-navigation").html('<button class="sl-prev">'+n.navText[0]+'</button><button class="sl-next">'+n.navText[1]+"</button>"),I=t("<div>").addClass("sl-counter").html('<span class="sl-current"></span>/<span class="sl-total"></span>'),q=!1,D=0,M=t("<div>").addClass("sl-caption "+n.captionClass+" pos-"+n.captionPosition),A=t("<div>").addClass("sl-image"),R=t("<div>").addClass("sl-wrapper").addClass(n.className),O=function(e){if(!n.fileExt)return!0;var i=/\.([0-9a-z]+)(?=[?#])|(\.)(?:[\w]+)$/gim,a=t(e).attr(n.sourceAttr).match(i);return a&&"a"==t(e).prop("tagName").toLowerCase()&&new RegExp(".("+n.fileExt+")$","i").test(a)},P=function(e){e.trigger(t.Event("show.simplelightbox")),n.disableScroll&&(h=K("hide")),R.appendTo("body"),A.appendTo(R),n.overlay&&C.appendTo(t("body")),q=!0,D=d.index(e),l=t("<img/>").hide().attr("src",e.attr(n.sourceAttr)),-1==p.indexOf(e.attr(n.sourceAttr))&&p.push(e.attr(n.sourceAttr)),A.html("").attr("style",""),l.appendTo(A),X(),C.fadeIn("fast"),t(".sl-close").fadeIn("fast"),S.show(),k.fadeIn("fast"),t(".sl-wrapper .sl-counter .sl-current").text(D+1),I.fadeIn("fast"),z(),n.preloading&&Y(),setTimeout(function(){e.trigger(t.Event("shown.simplelightbox"))},n.animationSpeed)},z=function(i){if(l.length){var a=new Image,o=t(e).width()*n.widthRatio,s=t(e).height()*n.heightRatio;a.src=l.attr("src"),t(a).bind("error",function(e){d.eq(D).trigger(t.Event("error.simplelightbox")),q=!1,c=!0,S.hide(),n.alertError&&alert(n.alertErrorMessage),j(1==i||-1==i?i:1)}),a.onload=function(){void 0!==i&&d.eq(D).trigger(t.Event("changed.simplelightbox")).trigger(t.Event((1===i?"nextDone":"prevDone")+".simplelightbox")),n.history&&w(),-1==p.indexOf(l.attr("src"))&&p.push(l.attr("src"));var r=a.width,u=a.height;if(r>o||u>s){var f=r/u>o/s?r/o:u/s;r/=f,u/=f}t(".sl-image").css({top:(t(e).height()-u)/2+"px",left:(t(e).width()-r-h)/2+"px"}),S.hide(),l.css({width:r+"px",height:u+"px"}).fadeIn("fast"),c=!0;var m,v="self"==n.captionSelector?d.eq(D):d.eq(D).find(n.captionSelector);if(m="data"==n.captionType?v.data(n.captionsData):"text"==n.captionType?v.html():v.prop(n.captionsData),n.loop||(0===D&&t(".sl-prev").hide(),D>=d.length-1&&t(".sl-next").hide(),D>0&&t(".sl-prev").show(),D<d.length-1&&t(".sl-next").show()),1==d.length&&t(".sl-prev, .sl-next").hide(),1==i||-1==i){var b={opacity:1};n.animationSlide&&(g?(W(0,100*i+"px"),setTimeout(function(){W(n.animationSpeed/1e3,"0px")},50)):b.left=parseInt(t(".sl-image").css("left"))+100*i+"px"),t(".sl-image").animate(b,n.animationSpeed,function(){q=!1,L(m)})}else q=!1,L(m);n.additionalHtml&&0===t(".sl-additional-html").length&&t("<div>").html(n.additionalHtml).addClass("sl-additional-html").appendTo(t(".sl-image"))}}},L=function(e){""!==e&&void 0!==e&&n.captions&&M.html(e).hide().appendTo(t(".sl-image")).delay(n.captionDelay).fadeIn("fast")},W=function(e,i){var n={};n[r+"transform"]="translateX("+i+")",n[r+"transition"]=r+"transform "+e+"s linear",t(".sl-image").css(n)},X=function(){t(e).on("resize."+E,z),t(i).on("click.simplelb touchstart."+E,".sl-close",function(t){t.preventDefault(),c&&H()}),n.history&&setTimeout(function(){t(e).on("hashchange."+E,function(){c&&v()===b&&H()})},40),k.on("click."+E,"button",function(e){e.preventDefault(),o=0,j(t(this).hasClass("sl-next")?1:-1)});var a=0,l=0,r=0,p=0,h=!1,u=0;A.on("touchstart.simplelb mousedown."+E,function(t){return!!h||(g&&(u=parseInt(A.css("left"))),h=!0,a=t.originalEvent.pageX||t.originalEvent.touches[0].pageX,r=t.originalEvent.pageY||t.originalEvent.touches[0].pageY,!1)}).on("touchmove.simplelb mousemove.simplelb pointermove MSPointerMove",function(t){if(!h)return!0;t.preventDefault(),l=t.originalEvent.pageX||t.originalEvent.touches[0].pageX,p=t.originalEvent.pageY||t.originalEvent.touches[0].pageY,o=a-l,s=r-p,n.animationSlide&&(g?W(0,-o+"px"):A.css("left",u-o+"px"))}).on("touchend.simplelb mouseup.simplelb touchcancel.simplelb mouseleave.simplelb pointerup pointercancel MSPointerUp MSPointerCancel",function(t){if(h){h=!1;var e=!0;n.loop||(0===D&&o<0&&(e=!1),D>=d.length-1&&o>0&&(e=!1)),Math.abs(o)>n.swipeTolerance&&e?j(o>0?1:-1):n.animationSlide&&(g?W(n.animationSpeed/1e3,"0px"):A.animate({left:u+"px"},n.animationSpeed/2)),n.swipeClose&&Math.abs(s)>50&&Math.abs(o)<n.swipeTolerance&&H()}})},N=function(){k.off("click","button"),t(i).off("click."+E,".sl-close"),t(e).off("resize."+E),t(e).off("hashchange."+E)},Y=function(){var e=D+1<0?d.length-1:D+1>=d.length-1?0:D+1,i=D-1<0?d.length-1:D-1>=d.length-1?0:D-1;t("<img />").attr("src",d.eq(e).attr(n.sourceAttr)).on("load",function(){-1==p.indexOf(t(this).attr("src"))&&p.push(t(this).attr("src")),d.eq(D).trigger(t.Event("nextImageLoaded.simplelightbox"))}),t("<img />").attr("src",d.eq(i).attr(n.sourceAttr)).on("load",function(){-1==p.indexOf(t(this).attr("src"))&&p.push(t(this).attr("src")),d.eq(D).trigger(t.Event("prevImageLoaded.simplelightbox"))})},j=function(e){d.eq(D).trigger(t.Event("change.simplelightbox")).trigger(t.Event((1===e?"next":"prev")+".simplelightbox"));var i=D+e;if(!(q||(i<0||i>=d.length)&&!1===n.loop)){D=i<0?d.length-1:i>d.length-1?0:i,t(".sl-wrapper .sl-counter .sl-current").text(D+1);var a={opacity:0};n.animationSlide&&(g?W(n.animationSpeed/1e3,-100*e-o+"px"):a.left=parseInt(t(".sl-image").css("left"))+-100*e+"px"),t(".sl-image").animate(a,n.animationSpeed,function(){setTimeout(function(){var i=d.eq(D);l.attr("src",i.attr(n.sourceAttr)),-1==p.indexOf(i.attr(n.sourceAttr))&&S.show(),t(".sl-caption").remove(),z(e),n.preloading&&Y()},100)})}},H=function(){if(!q){var e=d.eq(D),i=!1;e.trigger(t.Event("close.simplelightbox")),n.history&&y(),t(".sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter").fadeOut("fast",function(){n.disableScroll&&K("show"),t(".sl-wrapper, .sl-overlay").remove(),N(),i||e.trigger(t.Event("closed.simplelightbox")),i=!0}),l=t(),c=!1,q=!1}},K=function(n){var a=0;if("hide"==n){var o=e.innerWidth;if(!o){var s=i.documentElement.getBoundingClientRect();o=s.right-Math.abs(s.left)}if(i.body.clientWidth<o){var l=i.createElement("div"),r=parseInt(t("body").css("padding-right"),10);l.className="sl-scrollbar-measure",t("body").append(l),a=l.offsetWidth-l.clientWidth,t(i.body)[0].removeChild(l),t("body").data("padding",r),a>0&&t("body").addClass("hidden-scroll").css({"padding-right":r+a})}}else t("body").removeClass("hidden-scroll").css({"padding-right":t("body").data("padding")});return a};return n.close&&T.appendTo(R),n.showCounter&&d.length>1&&(I.appendTo(R),I.find(".sl-total").text(d.length)),n.nav&&k.appendTo(R),n.spinner&&S.appendTo(R),d.on("click."+E,function(e){if(O(this)){if(e.preventDefault(),q)return!1;P(t(this))}}),t(i).on("click.simplelb touchstart."+E,function(e){c&&n.docClose&&0===t(e.target).closest(".sl-image").length&&0===t(e.target).closest(".sl-navigation").length&&H()}),n.disableRightClick&&t(i).on("contextmenu",".sl-image img",function(t){return!1}),n.enableKeyboard&&t(i).on("keyup."+E,function(t){if(o=0,c){t.preventDefault();var e=t.keyCode;27==e&&H(),37!=e&&39!=t.keyCode||j(39==t.keyCode?1:-1)}}),this.open=function(e){e=e||t(this[0]),P(e)},this.next=function(){j(1)},this.prev=function(){j(-1)},this.close=function(){H()},this.destroy=function(){t(i).unbind("click."+E).unbind("keyup."+E),H(),t(".sl-overlay, .sl-wrapper").remove(),this.off("click")},this.refresh=function(){this.destroy(),t(this).simpleLightbox(n)},this}}(jQuery,window,document);



$(document).ready(function(){
	// make galleries invisible until photos are loaded
    $('.photography-gallery').css('visibility','hidden');
    $('.graphic-design-gallery').css('visibility','hidden');
    $('.filtr-controls').after('<div class="filtr-loading"></div>');
    
    // filter settings for separate galleries
	const ph_filter_end = function() {
            // only visible items
            var phGall = $('.active.ph-control').attr('data-filter');
            $('.photography-gallery .filtr-item').each( function() {
                if($(this).css('opacity') != 0) {
                    $(this).find('a').attr('data-simplelightbox',phGall);
                } else {
                    $(this).find('a').removeAttr('data-simplelightbox');
                }
            });
            var phlightbox = $('a[data-simplelightbox="'+phGall+'"]').simpleLightbox({
                showCounter : false,
                history : false,
                captionType : 'data',
                captionsData : 'caption'
            });
            phlightbox.refresh();
            console.log("PH-lightbox init");
    }

    const gd_filter_end = function(){
    	// only visible items
            var gdGall = $('.active.gd-control').attr('data-filter');
            $('.graphic-design-gallery .filtr-item').each( function() {
            	// console.log("avem GD");
                if($(this).css('opacity') != 0) {
                    $(this).find('a').attr('data-simplelightbox',gdGall);
                } else {
                    $(this).find('a').removeAttr('data-simplelightbox');
                }
            });
            var gdlightbox = $('a[data-simplelightbox="'+gdGall+'"]').simpleLightbox({
                showCounter : false,
                history : false,
                captionType : 'data',
                captionsData : 'caption'
            });
            gdlightbox.refresh();
           console.log("GD-lightbox init");
    }

    $('.photography-gallery').imagesLoaded( function() {
    	console.log("PH IMAGES LOADED");

    	// make the gallery visible after images are finished loading
    	$('.photography-gallery').css('visibility','visible');
        $('.filtr-loading').remove();

        // active class for controls
        // this way, categories stay selected in both galleries
	    $('.photography-gallery .filtr-controls').on('click','span',function(){
	        $('.photography-gallery .filtr-controls').find('span').removeClass('active');
	        $(this).addClass('active');
	    });


		// init filter settings
		var phFilterizd = new Filterizr('.ph-images', {
		controlsSelector: '.ph-control',
		layout: "sameWidth",
		callbacks: {
	      onFilteringEnd: ph_filter_end()
        },
		setupControls: false
		});

		// ###################### CUSTOM FILTERS ########################
		// # DEFINE CUSTOM FILTERS TO CONTROL BOTH GALLERIES SEPARATELY #
		// ##############################################################
		
		// ~~~~~~~ PHOTOGRAPHY ~~~~~~~
		$('#filtr-all-ph').click(function() {
			phFilterizd.filter('all');
		});

		$('#filtr-portraits').click(function() {
			phFilterizd.filter('portret');
		});

		$('#filtr-landscapes').click(function() {
		  phFilterizd.filter('land');
		});

		$('#nightPhotography').click(function() {
		  phFilterizd.filter('night');
		});

		$('#filtr-black-white').click(function() {
		  phFilterizd.filter('BW');
		});

		$('#filtr-others').click(function() {
		  phFilterizd.filter('other');
		});
    });

    $('.graphic-design-gallery').imagesLoaded( function() {
    	console.log("GD IMAGES LOADED");

    	// make the gallery visible after images are finished loading
    	$('.graphic-design-gallery').css('visibility','visible');
        $('.filtr-loading').remove();

        // active class for controls
        // this way, categories stay selected in both galleries
	    $('.graphic-design-gallery .filtr-controls').on('click','span',function(){
	        $('.graphic-design-gallery .filtr-controls').find('span').removeClass('active');
	        $(this).addClass('active');
	    });

	    // init filter settings
		var gdFilterizd = new Filterizr('.gd-images', {
		controlsSelector: '.gd-control',
		layout: "sameWidth",
		callbacks: {
	      onFilteringEnd: gd_filter_end()
        },
		setupControls: false
		});


		// ###################### CUSTOM FILTERS ########################
		// # DEFINE CUSTOM FILTERS TO CONTROL BOTH GALLERIES SEPARATELY #
		// ##############################################################

	    // ~~~~~~ GRAPHIC DESIGN ~~~~~~
	    $('#filtr-all-gd').click(function() {
			gdFilterizd.filter('all');
		});

		$('#filtr-logos').click(function() {
		  gdFilterizd.filter('logo');
		});

		$('#filtr-album-covers').click(function() {
		  gdFilterizd.filter('cover');
		});

		$('#filtr-posters').click(function() {
		  gdFilterizd.filter('poster');
		});

		$('#filtr-for-fun').click(function() {
		  gdFilterizd.filter('fun');
		});
    }); 
});

The CSS

.filtr-container {
  margin: 0 -4px;
}

.filtr-item {
  padding: 4px;
}

.filtr-controls {
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
  margin: 30px 0 15px;
}

.filtr-controls span {
  display: inline-block;
  margin: 10px 15px;
  cursor: pointer;
  padding: 5px 0;
  position: relative;
  color: #777;
}

.filtr-controls span:hover, .filtr-controls span.active {
  color: #000;
}

.filtr-controls span:after {
  content: ' ';
  width: 0;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  background: transparent;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

.filtr-controls span.active:after {
  width: 100%;
  left: 0;
  background: #000;
}

@media (max-width:479px) {
  .filtr-item {
    width: 100%;
  }
}

.filtr-item > a {
  position: relative;
  display: block;
}

.filtr-item > a:before, .filtr-item > a:after {
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

.filtr-item > a:before {
  content: ' ';
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent;
}

.filtr-item:hover > a:before {
  background: rgba(0,0,0,.2);
}

.filtr-item > a:after {
  font-family: FontAwesome;
  content: '\f0fe';
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -17px;
  color: #fff;
  font-size: 40px;
  line-height: 40px;
  opacity: 0;
}

.filtr-item:hover > a:after {
  opacity: .5;
}

.filtr-loading {
  border: 5px solid #333;
  position: relative;
  border-radius: 40px;
  height: 40px;
  left: 50%;
  margin: 80px 0;
  opacity: 0;
  top: 0;
  width: 40px;
  z-index: 2;
  -webkit-animation: pulsate 1s ease-out infinite;
  -moz-animation: pulsate 1s ease-out infinite;
  -ms-animation: pulsate 1s ease-out infinite;
  -o-animation: pulsate 1s ease-out infinite;
  animation: pulsate 1s ease-out infinite;
}

.sl-wrapper .sl-close, .sl-wrapper .sl-navigation button {
  height: 44px;
  line-height: 44px;
  font-family: Arial,Baskerville,monospace;
}

.sl-wrapper .sl-close:focus, .sl-wrapper .sl-navigation button:focus {
  outline: 0;
}

body.hidden-scroll {
  overflow: hidden;
}

.sl-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  /*opacity: .9;*/
  display: none;
  z-index: 1050;
}

.sl-wrapper .sl-close, .sl-wrapper .sl-counter {
  top: 30px;
  display: none;
  color: #000;
  position: fixed;
}

.sl-wrapper {
  z-index: 1040;
}

.sl-wrapper button {
  border: 0;
  background: 0 0;
  font-size: 28px;
  padding: 0;
  cursor: pointer;
}

.sl-wrapper button:hover {
  opacity: .7;
}

.sl-wrapper .sl-close {
  right: 30px;
  z-index: 1060;
  margin-top: -14px;
  margin-right: -14px;
  width: 44px;
  font-size: 5rem;
}

.sl-wrapper .sl-counter {
  left: 30px;
  z-index: 1060;
  font-size: 1rem;
}

.sl-wrapper .sl-navigation {
  width: 100%;
  display: none;
}

.sl-wrapper .sl-navigation button {
  position: fixed;
  top: 50%;
  margin-top: -22px;
  width: 22px;
  text-align: center;
  display: block;
  z-index: 1060;
  color: #000;
}

.sl-wrapper .sl-navigation button.sl-next {
  right: 5px;
  font-size: 2rem;
}

.sl-wrapper .sl-navigation button.sl-prev {
  left: 5px;
  font-size: 2rem;
}

.sl-wrapper .sl-image {
  position: fixed;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 10000;
  /*border: 1px solid #ddd;*/
}

.sl-wrapper .sl-image img {
  margin: 0;
  padding: 15px;
  display: block;
  /*border: 0;*/
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
  box-shadow: 0 0 15px rgba(0,0,0,.1);
  background: #fff;
}

.sl-wrapper .sl-image iframe {
  background: #000;
  border: 0;
}

@media (min-width:35.5em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
}

@media (min-width:35.5em) {
  .sl-wrapper .sl-navigation button.sl-next {
    right: 10px;
    font-size: 4rem;
  }
}

@media (min-width:35.5em) {
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 10px;
    font-size: 4rem;
  }
}

@media (min-width:35.5em) {
  .sl-wrapper .sl-image iframe, .sl-wrapper .sl-image img {
    border: 0;
  }
}

@media (min-width:50em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
}

@media (min-width:50em) {
  .sl-wrapper .sl-navigation button.sl-next {
    right: 20px;
    font-size: 6rem;
  }
}

@media (min-width:50em) {
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 20px;
    font-size: 6rem;
  }
}

@media (min-width:50em) {
  .sl-wrapper .sl-image iframe, .sl-wrapper .sl-image img {
    border: 0;
  }
}

.sl-wrapper .sl-image .sl-caption {
  display: none;
  padding: 10px;
  color: #fff;
  background: rgba(0,0,0,.8);
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  text-align: center;
  /*-webkit-animation: opacity .6s ease-out;*/
  /*-moz-animation: opacity .6s ease-out;*/
  /*-ms-animation: opacity .6s ease-out;*/
  /*-o-animation: opacity .6s ease-out;*/
  /*animation: opacity .6s ease-out;*/
}

.sl-wrapper .sl-image .sl-caption.pos-top {
  bottom: auto;
  top: 15px;
}

.sl-wrapper .sl-image .sl-caption.pos-outside {
  bottom: auto;
}

.sl-wrapper .sl-image .sl-download {
  display: none;
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #000;
  z-index: 1060;
}

.sl-spinner {
  display: none;
  border: 5px solid #333;
  border-radius: 40px;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -20px;
  opacity: 0;
  position: fixed;
  top: 50%;
  width: 40px;
  z-index: 1057;
  -webkit-animation: pulsate 1s ease-out infinite;
  -moz-animation: pulsate 1s ease-out infinite;
  -ms-animation: pulsate 1s ease-out infinite;
  -o-animation: pulsate 1s ease-out infinite;
  animation: pulsate 1s ease-out infinite;
}

.sl-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@keyframes pulsate {
}

@keyframes opacity {
}

.graphic-design-gallery {
}

Any ideas why this is happening? Maybe something in the bootstrap Tabs is messing with it.

FrogMustang · 2021-02-16T02:09:23Z

I solved the issue by bypassing it with some basic "display":"none" and "display":"block" css and click triggers to hide/show the galleries when the tab buttons are clicked.

It's a good solution and I'm happy with it, but I would still like to know why this was happening :/

jarodium · 2022-03-30T21:04:13Z

@FrogMustang this is just theorizing, but it must mean that calculated height from the tab is 0 at the time when the script runs from the first time. It may need the height of the parent container to calculate the layout.

FrogMustang added the help wanted label Feb 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HELP] Multiple galleries with tabs on the same page #153

[HELP] Multiple galleries with tabs on the same page #153

FrogMustang commented Feb 16, 2021 •

edited

FrogMustang commented Feb 16, 2021

jarodium commented Mar 30, 2022

[HELP] Multiple galleries with tabs on the same page #153

[HELP] Multiple galleries with tabs on the same page #153

Comments

FrogMustang commented Feb 16, 2021 • edited

FrogMustang commented Feb 16, 2021

jarodium commented Mar 30, 2022

FrogMustang commented Feb 16, 2021 •

edited