(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{120:function(e){e.exports={faq:[{question:"Why Filterizr?",answer:"Filterizr is fast, responsive, performs well on mobile and is written with up-to-date JavaScript. It has no dependencies and can be used either as a vanilla JavaScript library, a jQuery plugin and soon as a React component."},{question:"Can I redistribute, sell or alter Filterizr?",answer:"Yes, Filterizr is licensed under MIT. This means you can do whatever you please with it."},{question:"How can I contribute to Filterizr?",answer:'If you would like to help build Filterizr into something better, you can find its GitHub repo right <a  href="https://github.com/giotiskl/filterizr" target="_blank" rel="noopener noreferrer">here</a>. If you used Filterizr I would appreciate if you could starthe repo on GitHub.'}],caveats:[{question:"Margin don't work for me?",answer:"Bear in mind that Filterizr has no notion of margins. If you wish to create whitespace I suggest using a wrapper element and set padding on it, both for your items and your container. The width of your items will have to sum up to 100% per row."},{question:"The CSS for my filtering has bad performance",answer:'If the performance of your Filterizr\'s effect is not silky smooth, please make sure to read on <a href="https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count" target="_blank" rel="noopener noreferrer">compositor-only properties</a> as well as <a href="https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/" target="_blank" rel="noopener noreferrer">hardware-accelerated CSS</a> and go through your code again.'}]}},163:function(e,t,a){e.exports=a.p+"static/media/filterizr-logo.f5573e1e.png"},180:function(e,t,a){window,e.exports=function(e){var t={};function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}return a.m=e,a.c=t,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=2)}([function(e,t,a){var r,n;!function(i,o){"use strict";r=[a(1)],void 0===(n=function(e){return function(e,t){var a=e.jQuery,r=e.console;function n(e,t){for(var a in t)e[a]=t[a];return e}var i=Array.prototype.slice;function o(e,t,l){if(!(this instanceof o))return new o(e,t,l);var s=e;"string"==typeof e&&(s=document.querySelectorAll(e)),s?(this.elements=function(e){return Array.isArray(e)?e:"object"==typeof e&&"number"==typeof e.length?i.call(e):[e]}(s),this.options=n({},this.options),"function"==typeof t?l=t:n(this.options,t),l&&this.on("always",l),this.getImages(),a&&(this.jqDeferred=new a.Deferred),setTimeout(this.check.bind(this))):r.error("Bad element for imagesLoaded "+(s||e))}o.prototype=Object.create(t.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(e){"IMG"==e.nodeName&&this.addImage(e),!0===this.options.background&&this.addElementBackgroundImages(e);var t=e.nodeType;if(t&&l[t]){for(var a=e.querySelectorAll("img"),r=0;r<a.length;r++){var n=a[r];this.addImage(n)}if("string"==typeof this.options.background){var i=e.querySelectorAll(this.options.background);for(r=0;r<i.length;r++){var o=i[r];this.addElementBackgroundImages(o)}}}};var l={1:!0,9:!0,11:!0};function s(e){this.img=e}function c(e,t){this.url=e,this.element=t,this.img=new Image}return o.prototype.addElementBackgroundImages=function(e){var t=getComputedStyle(e);if(t)for(var a=/url\((['"])?(.*?)\1\)/gi,r=a.exec(t.backgroundImage);null!==r;){var n=r&&r[2];n&&this.addBackground(n,e),r=a.exec(t.backgroundImage)}},o.prototype.addImage=function(e){var t=new s(e);this.images.push(t)},o.prototype.addBackground=function(e,t){var a=new c(e,t);this.images.push(a)},o.prototype.check=function(){var e=this;function t(t,a,r){setTimeout(function(){e.progress(t,a,r)})}this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?this.images.forEach(function(e){e.once("progress",t),e.check()}):this.complete()},o.prototype.progress=function(e,t,a){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded,this.emitEvent("progress",[this,e,t]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,e),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&r&&r.log("progress: "+a,e,t)},o.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(e,[this]),this.emitEvent("always",[this]),this.jqDeferred){var t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},s.prototype=Object.create(t.prototype),s.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)},s.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},s.prototype.confirm=function(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.img,t])},s.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},s.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},s.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},s.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(s.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(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.element,t])},o.makeJQueryPlugin=function(t){(t=t||e.jQuery)&&((a=t).fn.imagesLoaded=function(e,t){return new o(this,e,t).jqDeferred.promise(a(this))})},o.makeJQueryPlugin(),o}(i,e)}.apply(t,r))||(e.exports=n)}("undefined"!=typeof window?window:this)},function(e,t,a){var r,n;"undefined"!=typeof window&&window,void 0===(n="function"==typeof(r=function(){"use strict";function e(){}var t=e.prototype;return t.on=function(e,t){if(e&&t){var a=this._events=this._events||{},r=a[e]=a[e]||[];return-1==r.indexOf(t)&&r.push(t),this}},t.once=function(e,t){if(e&&t){this.on(e,t);var a=this._onceEvents=this._onceEvents||{};return(a[e]=a[e]||{})[t]=!0,this}},t.off=function(e,t){var a=this._events&&this._events[e];if(a&&a.length){var r=a.indexOf(t);return-1!=r&&a.splice(r,1),this}},t.emitEvent=function(e,t){var a=this._events&&this._events[e];if(a&&a.length){a=a.slice(0),t=t||[];for(var r=this._onceEvents&&this._onceEvents[e],n=0;n<a.length;n++){var i=a[n];r&&r[i]&&(this.off(e,i),delete r[i]),i.apply(this,t)}return this}},t.allOff=function(){delete this._events,delete this._onceEvents},e})?r.call(t,a,t,e):r)||(e.exports=n)},function(e,t,a){"use strict";a.r(t);var r=function(e){if(!e.includes("-"))return e;var t=e.split("-");return""+t[0]+t.slice(1,t.length).map(function(e){return e[0].toUpperCase()+e.slice(1,e.length)}).join("")};function n(e,t){Object.entries(t).forEach(function(t){var a=t[0],n=t[1];e.style[r(a)]=n})}function i(e){for(var t={category:"",sort:""},a=0,r=e.attributes,n=r.length;a<n;a++){var i=r[a],o=i.nodeName,l=i.nodeValue;o.includes("data")&&(t[o.slice(5,o.length)]=l)}return delete t.category,delete t.sort,t}var o=function e(t,a){var r=function(e){var t={};for(var a in e)t[a]=e[a];return t}(a);for(var n in t)n in r?"object"!=typeof r[n]||"object"!=typeof t[n]||Array.isArray(t[n])||(r[n]=e(t[n],"object"==typeof r[n]?r[n]:{})):r[n]=t[n];return r},l=function(e,t,a){var r;return function(){var n=this,i=arguments;clearTimeout(r),r=window.setTimeout(function(){r=null,a||e.apply(n,i)},t),a&&!r&&e.apply(n,i)}},s=function(e){for(var t=e.slice(0),a=[];0!==t.length;){var r=Math.floor(t.length*Math.random());a.push(t[r]),t.splice(r,1)}return a},c=function(e,t){if(e.length!==t.length)return!1;for(var a=0;a<e.length;a++)if(e[a].props.index!==t[a].props.index)return!1;return!0},u=function(e,t,a,r,n){if(void 0!==t){var i=new Error('Filterizr: expected type of option "'+e+'" to be "'+a+'", but its type is: "'+typeof t+'"'),o=!1,l=!1,s=a.includes("array");if((typeof t).match(a)?o=!0:!o&&s&&(l=Array.isArray(t)),!o&&!s)throw i;if(!o&&s&&!l)throw i;var c=function(e){return e?" For further help read here: "+e:""};if(Array.isArray(r)){var u=!1;if(r.forEach(function(e){e===t&&(u=!0)}),!u)throw new Error('Filterizr: allowed values for option "'+e+'" are: '+r.map(function(e){return'"'+e+'"'}).join(", ")+'. Value received: "'+t+'".'+c(n))}else if("string"==typeof t&&r instanceof RegExp&&!t.match(r))throw new Error('Filterizr: invalid value "'+t+'" for option "'+e+'" received.'+c(n))}},m=function(e){return"string"==typeof e?document.querySelector(e):e},d=/(^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+)\))$/,p={IDLE:"IDLE",FILTERING:"FILTERING",SORTING:"SORTING",SHUFFLING:"SHUFFLING"},h=["webkitTransitionEnd","otransitionend","oTransitionEnd","msTransitionEnd","transitionend"],f=function(){},g=function(){function e(){}return e.prototype.debounceEventHandler=function(e){return l(e,250,!1)},e.prototype.destroy=function(){this.removeResizeHandler()},e.prototype.setResizeEventHandler=function(e){this.removeResizeHandler(),this.resizeHandler=this.debounceEventHandler(e),window.addEventListener("resize",this.resizeHandler)},e.prototype.removeResizeHandler=function(){window.removeEventListener("resize",this.resizeHandler),this.resizeHandler=null},e}(),y={animationDuration:.5,callbacks:{onInit:f,onFilteringStart:f,onFilteringEnd:f,onShufflingStart:f,onShufflingEnd:f,onSortingStart:f,onSortingEnd:f},controlsSelector:"",delay:0,delayMode:"progressive",easing:"ease-out",filter:"all",filterOutCss:{opacity:0,transform:"scale(0.5)"},filterInCss:{opacity:1,transform:"scale(1)"},gridSelector:".filtr-container",gridItemsSelector:".filtr-item",layout:"sameSize",multifilterLogicalOperator:"or",searchTerm:"",setupControls:!0},E=function(){function e(e){this._filter=e}return e.prototype.get=function(){return this._filter},e.prototype.set=function(e){this._filter=e},e.prototype.toggle=function(e){this._filter=this._toggle(this._filter,e)},e.prototype._toggle=function(e,t){if("all"===e)return t;if(Array.isArray(e)){if(e.includes(t)){var a=e.filter(function(e){return e!==t});return 1===a.length?a[0]:a}return e.concat([t])}return e===t?"all":[e,t]},e}(),v=function(){return(v=Object.assign||function(e){for(var t,a=1,r=arguments.length;a<r;a++)for(var n in t=arguments[a])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)},b=function(){function e(e){var t=o(y,this.validate(e));this._options=this.convertToFilterizrOptions(t)}return Object.defineProperty(e.prototype,"filter",{get:function(){return this._options.filter.get()},set:function(e){this._options.filter.set(e)},enumerable:!0,configurable:!0}),e.prototype.toggleFilter=function(e){this._options.filter.toggle(e)},Object.defineProperty(e.prototype,"searchTerm",{get:function(){return this._options.searchTerm},set:function(e){this._options.searchTerm=e},enumerable:!0,configurable:!0}),e.prototype.get=function(){return this._options},e.prototype.getRaw=function(){return this.convertToOptions(this._options)},e.prototype.set=function(e){var t=o(this.convertToOptions(this._options),this.validate(e));this._options=this.convertToFilterizrOptions(t)},e.prototype.convertToFilterizrOptions=function(e){return v({},e,{filter:new E(e.filter)})},e.prototype.convertToOptions=function(e){return v({},e,{filter:e.filter.get()})},e.prototype.validate=function(e){return u("animationDuration",e.animationDuration,"number"),u("callbacks",e.callbacks,"object"),u("controlsSelector",e.controlsSelector,"string"),u("delay",e.delay,"number"),u("easing",e.easing,"string",d,"https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp"),u("delayMode",e.delayMode,"string",["progressive","alternate"]),u("filter",e.filter,"string|number|array"),u("filterOutCss",e.filterOutCss,"object"),u("filterInCss",e.filterOutCss,"object"),u("layout",e.layout,"string",["sameSize","vertical","horizontal","sameHeight","sameWidth","packed"]),u("multifilterLogicalOperator",e.multifilterLogicalOperator,"string",["and","or"]),u("searchTerm",e.searchTerm,"string"),u("setupControls",e.setupControls,"boolean"),e},e}(),w=function(){function e(e,t){void 0===t&&(t=""),this.filterControls=document.querySelectorAll(t+"[data-filter]"),this.multiFilterControls=document.querySelectorAll(t+"[data-multifilter]"),this.shuffleControls=document.querySelectorAll(t+"[data-shuffle]"),this.searchControls=document.querySelectorAll(t+"[data-search]"),this.sortAscControls=document.querySelectorAll(t+"[data-sortAsc]"),this.sortDescControls=document.querySelectorAll(t+"[data-sortDesc]"),this.props={filterizr:e,selector:t,handlers:{filterControlsHandler:null,multiFilterControlsHandler:null,shuffleControlsHandler:null,searchControlsHandler:null,sortAscControlsHandler:null,sortDescControlsHandler:null}},this.initialize()}return e.prototype.initialize=function(){this.setupFilterControls(),this.setupShuffleControls(),this.setupSearchControls(),this.setupSortControls()},e.prototype.destroy=function(){this.destroyFilterControls(),this.destroyShuffleControls(),this.destroySearchControls(),this.destroySortControls()},e.prototype.setupFilterControls=function(){var e=this,t=this.filterControls,a=this.multiFilterControls,r=this.props.filterizr;t&&(this.props.handlers.filterControlsHandler=function(e){var t=e.currentTarget.getAttribute("data-filter");r.filter(t)},t.forEach(function(t){return t.addEventListener("click",e.props.handlers.filterControlsHandler)})),a&&(this.props.handlers.multiFilterControlsHandler=function(e){var t=e.target.getAttribute("data-multifilter");r.toggleFilter(t)},a.forEach(function(t){return t.addEventListener("click",e.props.handlers.multiFilterControlsHandler)}))},e.prototype.destroyFilterControls=function(){var e=this,t=this.filterControls,a=this.multiFilterControls;t&&t.forEach(function(t){return t.removeEventListener("click",e.props.handlers.filterControlsHandler)}),a&&a.forEach(function(t){return t.removeEventListener("click",e.props.handlers.multiFilterControlsHandler)})},e.prototype.setupShuffleControls=function(){var e=this,t=this.shuffleControls,a=this.props.filterizr;t&&(this.props.handlers.shuffleControlsHandler=function(){a.shuffle()},t.forEach(function(t){return t.addEventListener("click",e.props.handlers.shuffleControlsHandler)}))},e.prototype.destroyShuffleControls=function(){var e=this,t=this.shuffleControls;t&&t.forEach(function(t){return t.removeEventListener("click",e.props.handlers.shuffleControlsHandler)})},e.prototype.setupSearchControls=function(){var e=this,t=this.searchControls,a=this.props.filterizr;t&&(this.props.handlers.searchControlsHandler=l(function(e){var t=e.target.value;a.search(t)},250,!1),t.forEach(function(t){return t.addEventListener("keyup",e.props.handlers.searchControlsHandler)}))},e.prototype.destroySearchControls=function(){var e=this,t=this.searchControls;t&&t.forEach(function(t){return t.removeEventListener("keyup",e.props.handlers.searchControlsHandler)})},e.prototype.setupSortControls=function(){var e=this,t=this.sortAscControls,a=this.sortDescControls,r=this.props,n=r.filterizr,i=r.selector;t&&(this.props.handlers.sortAscControlsHandler=function(){var e=document.querySelector(i+"[data-sortOrder]").value;n.sort(e,"asc")},t.forEach(function(t){return t.addEventListener("click",e.props.handlers.sortAscControlsHandler)})),a&&(this.props.handlers.sortDescControlsHandler=function(){var e=document.querySelector(i+"[data-sortOrder]").value;n.sort(e,"desc")},a.forEach(function(t){return t.addEventListener("click",e.props.handlers.sortDescControlsHandler)}))},e.prototype.destroySortControls=function(){var e=this,t=this.sortAscControls,a=this.sortDescControls;t&&t.forEach(function(t){return t.removeEventListener("click",e.props.handlers.sortAscControlsHandler)}),a&&a.forEach(function(t){return t.removeEventListener("click",e.props.handlers.sortDescControlsHandler)})},e}(),F=a(0),j=function(){function e(e,t,a){var r=this;this.options=a,this.node=e;var o=this.options.get(),l=(o.animationDuration,o.delay,o.delayMode,o.filterOutCss);o.easing,this.props={data:i(this.node),filteredOut:!1,index:t,lastPosition:{left:0,top:0},onTransitionEndHandler:function(){r.props.filteredOut?(r.node.classList.add("filteredOut"),n(r.node,{zIndex:-1e3})):(r.node.classList.remove("filteredOut"),n(r.node,{zIndex:""}))},sortData:this.node.getAttribute("data-sort"),w:this.getWidth(),h:this.getHeight()},n(this.node,Object.assign({},l,{"-webkit-backface-visibility":"hidden",perspective:"1000px","-webkit-perspective":"1000px","-webkit-transform-style":"preserve-3d",position:"absolute"})),this.setTransitionStyle(),this.bindEvents()}return e.prototype.filterIn=function(e,t){n(this.node,Object.assign({},t,{transform:(t.transform||"")+" translate3d("+e.left+"px, "+e.top+"px, 0)"})),this.props.lastPosition=e,this.props.filteredOut=!1},e.prototype.filterOut=function(e){var t=this.props.lastPosition;n(this.node,Object.assign({},e,{transform:(e.transform||"")+" translate3d("+t.left+"px, "+t.top+"px, 0)"})),this.props.filteredOut=!0},e.prototype.getTransitionDelay=function(e,t){var a=0;return"progressive"===t?a=e*this.props.index:this.props.index%2==0&&(a=e),a},e.prototype.contentsMatchSearch=function(e){return Boolean(this.getContentsLowercase().includes(e))},e.prototype.getContentsLowercase=function(){return this.node.textContent.toLowerCase()},e.prototype.getCategories=function(){return this.node.getAttribute("data-category").split(/\s*,\s*/g)},e.prototype.getHeight=function(){return this.node.clientHeight},e.prototype.getWidth=function(){return this.node.clientWidth},e.prototype.trigger=function(e){var t=new Event(e);this.node.dispatchEvent(t)},e.prototype.updateDimensions=function(){this.props.w=this.getWidth(),this.props.h=this.getHeight()},e.prototype.bindEvents=function(){var e=this;h.forEach(function(t){e.node.addEventListener(t,e.props.onTransitionEndHandler)})},e.prototype.unbindEvents=function(){var e=this;h.forEach(function(t){e.node.removeEventListener(t,e.props.onTransitionEndHandler)})},e.prototype.getTransitionStyle=function(){var e=this.options.get(),t=e.animationDuration,a=e.easing,r=e.delay,n=e.delayMode;return"all "+t+"s "+a+" "+this.getTransitionDelay(r,n)+"ms"},e.prototype.setTransitionStyle=function(){var e=this;this.node.querySelectorAll("img").length?F(this.node,function(){setTimeout(function(){n(e.node,{transition:e.getTransitionStyle()})},10)}):setTimeout(function(){n(e.node,{transition:e.getTransitionStyle()})},10)},e}(),C=function(){function e(e,t){if(!e)throw new Error("Filterizr: could not initialize container, check the selector or node you passed to the constructor exists.");this.node=e,this.options=t,n(this.node,{padding:0,position:"relative",width:"100%",display:"flex",flexWrap:"wrap"});var a=this.getFilterItems(this.options);if(!a.length)throw new Error("Filterizr: cannot initialize empty container. Make sure the gridItemsSelector option corresponds to the selector of your grid's items");this.props={filterItems:a,w:this.getWidth(),h:0,onTransitionEndHandler:null},this.updateFilterItemsDimensions()}return e.prototype.destroy=function(){this.node.removeAttribute("style"),Array.from(this.node.querySelectorAll(this.options.get().gridItemsSelector)).forEach(function(e){return e.removeAttribute("style")}),this.unbindEvents(this.options.get().callbacks)},e.prototype.getFilterItems=function(e){return Array.from(this.node.querySelectorAll(e.get().gridItemsSelector)).map(function(t,a){return new j(t,a,e)})},e.prototype.push=function(e,t){var a=this.props.filterItems,r=e.cloneNode(!0);r.removeAttribute("style"),this.node.appendChild(r),this.props.filterItems.push(new j(r,a.length,t))},e.prototype.calculateColumns=function(){return Math.round(this.props.w/this.props.filterItems[0].props.w)},e.prototype.updateFilterItemsTransitionStyle=function(e){var t=e.animationDuration,a=e.easing,r=e.delay,i=e.delayMode;this.props.filterItems.forEach(function(e){return n(e.node,{transition:"all "+t+"s "+a+" "+e.getTransitionDelay(r,i)+"ms"})})},e.prototype.updateHeight=function(e){this.props.h=e,n(this.node,{height:e+"px"})},e.prototype.updateWidth=function(){this.props.w=this.getWidth()},e.prototype.updateFilterItemsDimensions=function(){this.props.filterItems.forEach(function(e){return e.updateDimensions()})},e.prototype.updateDimensions=function(){this.updateWidth(),this.updateFilterItemsDimensions()},e.prototype.getWidth=function(){return this.node.clientWidth},e.prototype.bindEvents=function(e){var t=this;this.props.onTransitionEndHandler=e.onTransitionEnd,h.forEach(function(e){t.node.addEventListener(e,t.props.onTransitionEndHandler)}),this.node.addEventListener("filteringStart",e.onFilteringStart),this.node.addEventListener("filteringEnd",e.onFilteringEnd),this.node.addEventListener("shufflingStart",e.onShufflingStart),this.node.addEventListener("shufflingEnd",e.onShufflingEnd),this.node.addEventListener("sortingStart",e.onSortingStart),this.node.addEventListener("sortingEnd",e.onSortingEnd)},e.prototype.unbindEvents=function(e){var t=this;h.forEach(function(e){t.node.removeEventListener(e,t.props.onTransitionEndHandler)}),this.node.removeEventListener("filteringStart",e.onFilteringStart),this.node.removeEventListener("filteringEnd",e.onFilteringEnd),this.node.removeEventListener("shufflingStart",e.onShufflingStart),this.node.removeEventListener("shufflingEnd",e.onShufflingEnd),this.node.removeEventListener("sortingStart",e.onSortingStart),this.node.removeEventListener("sortingEnd",e.onSortingEnd)},e.prototype.trigger=function(e){var t=new Event(e);this.node.dispatchEvent(t)},e}(),x=function(){function e(e,t){this._filterItems=e,this._options=t}return e.prototype.get=function(){return this._filterItems},e.prototype.set=function(e){this._filterItems=e},e.prototype.getFiltered=function(e){var t=this,a=this.get();return"all"===e?a:a.filter(function(a){var r=a.getCategories();return t._shouldBeFiltered(r,e)})},e.prototype.getFilteredOut=function(e){var t=this;return this.get().filter(function(a){var r=a.getCategories(),n=t._shouldBeFiltered(r,e),i=a.contentsMatchSearch(t._options.searchTerm);return!n||!i})},e.prototype.getSorted=function(e,t){void 0===e&&(e="index"),void 0===t&&(t="asc");var a,r=this.get(),n=(a=function(t){return"index"===e||"sortData"===e?t.props[e]:t.props.data[e]},r.slice(0).sort(function(e){return function(t,a){var r=e(t),n=e(a);return r<n?-1:r>n?1:0}}(a))),i="asc"===t?n:n.reverse();return this.set(i),this.getFiltered(this._options.filter)},e.prototype.getSearched=function(e){var t=this.getFiltered(this._options.filter);return e?t.filter(function(t){return t.contentsMatchSearch(e)}):t},e.prototype.getShuffled=function(){var e=this,t=this.getFiltered(this._options.filter);if(t.length<=1)return t;var a,r=this.getFiltered(this._options.filter).map(function(t){return e.get().indexOf(t)}).slice();do{a=s(t)}while(c(t,a));return(a=s(t)).forEach(function(t,a){var n,i=r[a];e.set(Object.assign([],e.get(),((n={})[i]=t,n)))}),a},e.prototype._shouldBeFiltered=function(e,t){var a,r,n=this._options.get().multifilterLogicalOperator;return Array.isArray(t)?"or"===n?!!(a=e,r=t,Array.prototype.filter.call(a,function(e){return r.includes(e)})).length:function(e,t){for(var a=0;a<e.length;a++){for(var r=!1,n=e[a],i=0;i<t.length;i++)n===t[i]&&(r=!0);if(!r)return!1}return!0}(t,e):e.includes(t)},e}(),N=function(e,t,a){if(t<=0)return 0;var r=0;if(a<t-1)return 0;for(a-=t;a>=0;)r+=e[a].props.h,a-=t;return r},I=function(){function e(e){this.init(e)}return e.prototype.init=function(e){this.root={x:0,y:0,w:e}},e.prototype.fit=function(e){var t,a,r,n=e.length,i=n>0?e[0].h:0;for(this.root.h=i,t=0;t<n;t++)r=e[t],(a=this.findNode(this.root,r.w,r.h))?r.fit=this.splitNode(a,r.w,r.h):r.fit=this.growDown(r.w,r.h)},e.prototype.findNode=function(e,t,a){return e.used?this.findNode(e.right,t,a)||this.findNode(e.down,t,a):t<=e.w&&a<=e.h?e:null},e.prototype.splitNode=function(e,t,a){return e.used=!0,e.down={x:e.x,y:e.y+a,w:e.w,h:e.h-a},e.right={x:e.x+t,y:e.y,w:e.w-t,h:a},e},e.prototype.growDown=function(e,t){var a;return this.root={used:!0,x:0,y:0,w:this.root.w,h:this.root.h+t,down:{x:0,y:this.root.h,w:this.root.w,h:t},right:this.root},(a=this.findNode(this.root,e,t))?this.splitNode(a,e,t):null},e}(),z=function(e,t){switch(e){case"horizontal":return function(e){var t=e.props.filterContainer,a=e.props.filterItems.getFiltered(e.options.get().filter.get()),r=0,n=0,i=a.map(function(e){var t=e.props,a=t.w,i=t.h,o={left:r,top:0};return r+=a,i>n&&(n=i),o});return t.updateHeight(n),i}(t);case"vertical":return function(e){var t=e.props.filterContainer,a=e.props.filterItems.getFiltered(e.options.get().filter.get()),r=0,n=a.map(function(e){var t=e.props.h,a={left:0,top:r};return r+=t,a});return t.updateHeight(r),n}(t);case"sameHeight":return function(e){var t=e.props.filterContainer,a=e.props.filterItems.getFiltered(e.options.get().filter.get()),r=t.props.w,n=a[0].props.h,i=0,o=0,l=a.map(function(e){var t=e.props.w;o+t>r&&(i++,o=0);var a={left:o,top:n*i};return o+=t,a});return t.updateHeight((i+1)*a[0].props.h),l}(t);case"sameWidth":return function(e){var t=e.props.filterContainer,a=e.props.filterItems.getFiltered(e.options.get().filter.get()),r=t.calculateColumns(),n=0,i=Array.apply(null,Array(r)).map(Number.prototype.valueOf,0),o=a.map(function(e,t){var o=e.props,l=o.w,s=o.h;t%r==0&&t>=r&&n++;var c=t-r*n;return i[c]+=s,{left:c*l,top:N(a,r,t)}});return t.updateHeight(Math.max.apply(Math,i)),o}(t);case"packed":return function(e){var t=e.props.filterContainer,a=e.props.filterItems.getFiltered(e.options.get().filter.get()),r=new I(t.props.w),n=a.map(function(e){var t=e.props;return{w:t.w,h:t.h}});r.fit(n);var i=n.map(function(e){var t=e.fit;return{left:t.x,top:t.y}});return t.updateHeight(r.root.h),i}(t);case"sameSize":default:return function(e){var t=e.props,a=t.filterContainer,r=t.filterItems.getFiltered(e.options.get().filter.get()),n=a.calculateColumns(),i=0,o=r.map(function(e,t){var a=e.props,r=a.w,o=a.h;return t%n==0&&t>=n&&i++,{left:(t-n*i)*r,top:i*o}}),l=r[0]&&r[0].props.h||0;return a.updateHeight((i+1)*l),o}(t)}};function S(e){if(!e)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.");e.fn.filterizr=function(){var t="."+e.trim(this.get(0).className).replace(/\s+/g,"."),a=arguments;if(!this._fltr&&0===a.length||1===a.length&&"object"==typeof a[0]){var r=a.length>0?a[0]:y;this._fltr=new T(t,r)}else if(a.length>=1&&"string"==typeof a[0]){var n=a[0],i=Array.prototype.slice.call(a,1),o=this._fltr;switch(n){case"filter":return o.filter.apply(o,i),this;case"insertItem":return o.insertItem.apply(o,i),this;case"toggleFilter":return o.toggleFilter.apply(o,i),this;case"sort":return o.sort.apply(o,i),this;case"shuffle":return o.shuffle.apply(o,i),this;case"search":return o.search.apply(o,i),this;case"setOptions":return o.setOptions.apply(o,i),this;case"destroy":return o.destroy.apply(o,i),delete this._fltr,this;default:throw new Error("Filterizr: "+n+" is not part of the Filterizr API. Please refer to the docs for more information.")}}return this}}var k=function(){return(k=Object.assign||function(e){for(var t,a=1,r=arguments.length;a<r;a++)for(var n in t=arguments[a])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)},O=a(0),T=function(){function e(e,t){void 0===e&&(e=y.gridSelector),void 0===t&&(t={}),this.options=new b(t);var a=new C(m(e),this.options),r=this.options.get(),n=r.setupControls,i=r.controlsSelector;this.props=k({browserWindow:new g,filterContainer:a},n&&{filterControls:new w(this,i)},{filterItems:new x(a.props.filterItems,this.options),filterizrState:p.IDLE}),this._bindEvents(),this._renderWithImagesLoaded(this.options.get().callbacks.onInit)}return e.prototype.filter=function(e){this.props.filterContainer.trigger("filteringStart"),this.props.filterizrState=p.FILTERING,e=Array.isArray(e)?e.map(function(e){return e.toString()}):e.toString(),this.options.filter=e,this._render(this.props.filterItems.getSearched(this.options.searchTerm))},e.prototype.destroy=function(){var e=this.props,t=e.browserWindow,a=e.filterControls;e.filterContainer.destroy(),t.destroy(),this.options.get().setupControls&&a&&a.destroy()},e.prototype.insertItem=function(e){this.props.filterContainer.push(e,this.options),this._renderWithImagesLoaded()},e.prototype.sort=function(e,t){void 0===e&&(e="index"),void 0===t&&(t="asc");var a=this.props,r=a.filterContainer,n=a.filterItems;r.trigger("sortingStart"),this.props.filterizrState=p.SORTING,this._render(n.getSorted(e,t))},e.prototype.search=function(e){void 0===e&&(e=this.options.get().searchTerm),this.options.searchTerm=e.toLowerCase(),this._render(this.props.filterItems.getSearched(this.options.searchTerm))},e.prototype.shuffle=function(){var e=this.props,t=e.filterContainer,a=e.filterItems;t.trigger("shufflingStart"),this.props.filterizrState=p.SHUFFLING,this._render(a.getShuffled())},e.prototype.setOptions=function(e){e.callbacks&&this.props.filterContainer.unbindEvents(this.options.get().callbacks),this.options.set(e),(e.animationDuration||e.delay||e.delayMode||e.easing)&&this.props.filterContainer.updateFilterItemsTransitionStyle(this.options.getRaw()),(e.callbacks||e.animationDuration)&&this._rebindFilterContainerEvents(),"searchTerm"in e&&this.search(e.searchTerm),(e.filter||e.multifilterLogicalOperator)&&this.filter(this.options.filter)},e.prototype.toggleFilter=function(e){this.options.toggleFilter(e),this.filter(this.options.filter)},e.prototype._render=function(e){var t=this.options.get(),a=t.filterInCss,r=t.filterOutCss,n=t.layout;this.props.filterItems.getFilteredOut(this.options.filter).forEach(function(e){e.filterOut(r)});var i=z(n,this);e.forEach(function(e,t){e.filterIn(i[t],a)})},e.prototype._onTransitionEndCallback=function(){var e=this.props,t=e.filterizrState,a=e.filterContainer;switch(t){case p.FILTERING:a.trigger("filteringEnd");break;case p.SORTING:a.trigger("sortingEnd");break;case p.SHUFFLING:a.trigger("shufflingEnd")}this.props.filterizrState=p.IDLE},e.prototype._rebindFilterContainerEvents=function(){var e=this.props.filterContainer,t=this.options.get(),a=t.animationDuration,r=t.callbacks;e.unbindEvents(r),e.bindEvents(k({},r,{onTransitionEnd:l(this._onTransitionEndCallback.bind(this),a,!1)}))},e.prototype._bindEvents=function(){var e=this.props.browserWindow;this._rebindFilterContainerEvents(),e.setResizeEventHandler(this._updateDimensionsAndRerender.bind(this))},e.prototype._renderWithImagesLoaded=function(e){var t=this;void 0===e&&(e=f);var a=this.props.filterContainer;if(a.node.querySelectorAll("img").length)O(a.node,function(){t._updateDimensionsAndRerender(),e()});else{var r=this.props.filterItems,n=this.options.filter;this._render(r.getFiltered(n)),e()}},e.prototype._updateDimensionsAndRerender=function(){var e=this.props,t=e.filterContainer,a=e.filterItems,r=this.options.filter;t.updateDimensions(),this._render(a.getFiltered(r))},e.FilterContainer=C,e.FilterItem=j,e.defaultOptions=y,e.installAsJQueryPlugin=S,e}();a.d(t,"default",function(){return T})}]).default},182:function(e){e.exports={fields:[{name:"animationDuration",type:"Number",defaultValue:"0.5",description:"The duration of CSS3 transitions, taking place for your effects."},{name:"callbacks",type:"Object",defaultValue:"-",description:"Used as the container for your event callbacks. Check the nested list below.",fields:[{name:"onInit",type:"Function",defaultValue:"() => {}",description:"Triggered only once when the grid is initialized."},{name:"onFilteringStart",type:"Function",defaultValue:"() => {}",description:"Triggered when filtering of the grid starts."},{name:"onFilteringEnd",type:"Function",defaultValue:"() => {}",description:"Triggered when filtering of the grid ends."},{name:"onSortingStart",type:"Function",defaultValue:"() => {}",description:"Triggered when sorting of the grid starts"},{name:"onSortingEnd",type:"Function",defaultValue:"() => {}",description:"Triggered when sorting of the grid ends"},{name:"onShufflingStart",type:"Function",defaultValue:"() => {}",description:"Triggered when shuffling of the grid starts"},{name:"onShufflingEnd",type:"Function",defaultValue:"() => {}",description:"Triggered when shuffling of the grid ends"}]},{name:"controlsSelector",type:"String",defaultValue:"''",description:"In case there is the need to have more than one Filterizr instance on the same page then you need to set up different controls for them. This is where this option comes in handy. When instantiating your Filterizr you will need to set the following options: `{ controlsSelector: '.filtr-controls', setupControls: false }`. Then you will have to set the same class on all of your Filterizr controls, i.e. in this case `.filtr-controls`. The option `setupControls: false` will prevent the default controls from being set up and by defining the `controlsSelector` you target a specific set of controls for this Filterizr instance."},{name:"delay",type:"Number",defaultValue:0,description:"Measured in milliseconds and used to set the value of the transition-delay property of every item. The value of the transition-delay is incremented progressively by the value of delay for every item to create a more progressive version of your effect."},{name:"delayMode",type:"Enum (progressive|alternate)",defaultValue:"progressive",description:"Determines how delay is applied to the transition between items. The two possible values are progressive and alternate. The value of delayMode makes no difference if delay is 0."},{name:"easing",type:"Enum (linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit)",defaultValue:"ease-out",description:"Specifies the speed curve of the transition effect"},{name:"filterInCss",type:"Object",defaultValue:"{ opacity: 0, transform: 'scale(0,0)' }",description:"A CSS object. This the transition that is triggered when your items are being filtered in."},{name:"filterOutCss",type:"Object",defaultValue:"{ opacity: 1, transform: 'scale(1,1)' }",description:"A CSS object. This the transition that is triggered when your items are being filtered out."},{name:"gridItemsSelector",type:"String",defaultValue:".filtr-item",description:"The CSS selector of items in your grid's container."},{name:"layout",type:"Enum (sameSize|sameWidth|sameHeight|packed|horizontal|vertical)",defaultValue:"sameSize",description:"The layout of your Filterizr grid. For a demo of what the different layouts look like check the tutorials section."},{name:"multifilterLogicalOperator",type:"Enum (or|and)",defaultValue:"or",description:"If you are using multifiltering controls, this option defines the logic of how items are rendered. When set to `or` it will render items belonging to either category of the selected filters, when set to `and` it will render only items belonging to both."},{name:"searchTerm",type:"String",defaultValue:"''",description:"The search term that applies as an extra layer of filtering over the active categories. If you set a value your grid's item will be searched and filtered on first render."},{name:"setupControls",type:"Boolean",defaultValue:"true",description:"If set to true then Filterizr will try to detect and set up filtering, shuffling and sorting controls. In case you have multiple Filterizrs in your view, you might decide to set this to false and set up your own controls, using the public API, so as to avoid interference the controls of your Filterizr instances."}]}},183:function(e){e.exports={vanilla:{preview:"filterizr.destroy();",description:"Tears down the Filterizr instance."},jquery:{preview:"filterizrInstance.filterizr('destroy');",description:"Tears down the Filterizr instance."}}},184:function(e){e.exports={vanilla:{preview:"filterizr.filter(targetFilter);",description:"Filter the items in the grid by setting an active category. When called it updates the `options.filter` property to reflect the new active category and triggers the `onFilteringStart` event.",args:[{name:"targetFilter",type:"String",description:"The target filter towards which to filter the visible category, should be a numerical value based on the data-category attribute of `.filtr-item` elements. The value `'all'` can be used for an unfiltered gallery."}]},jquery:{preview:"filterizrInstance.filterizr('filter', targetFilter);",description:"Filter the items in the grid by setting an active category. When called it updates the `options.filter` property to reflect the new active category and triggers the `onFilteringStart` event.",args:[{name:"targetFilter",type:"String",description:"The target filter towards which to filter the visible category, should be a numerical value based on the data-category attribute of `.filtr-item` elements. The value `'all'` can be used for an unfiltered gallery."}]}}},185:function(e){e.exports={jquery:{preview:"$(selector).filterizr(options);",description:"A jQuery method added to `jQuery.fn`. It can be used on DOM nodes to create a Filterizr instance. It returns the jQuery object to facilitate method-chaining. If you already have created a Filterizr instance (e.g. `const fltr = $('.container').filterizr({});`), you can use the `.filterizr` method on your instance to access all of Filterizr's public API. For example to filter the grid you can do `fltr.filterizr('filter', targetCategory)`, passing in method name and arguments.",args:[{name:"options",type:"Object",description:'Filterizr options object, see documentation on "options".'}]}}},186:function(e){e.exports={vanilla:{preview:"filterizr.insertItem(node);",description:"Appends a new item to the grid. This method could be used in case you need to load item dynamically.",args:[{name:"node",type:"HTMLElement",description:"The new grid item to be appended."}]},jquery:{preview:"filterizrInstance.filterizr('insertItem', node);",description:"Appends a new item to the grid. This method could be used in case you need to load item dynamically.",args:[{name:"node",type:"HTMLElement",description:"The new grid item to be appended."}]}}},187:function(e){e.exports={vanilla:{preview:"Filterizr.installAsJQueryPlugin(jQuery)",description:'A static method on the Filterizr class, that will extend the jQuery object with a `.filterizr` method. Check the "As jQuery Plugin" tutorial for a working example.',args:[{name:"jQuery",type:"Object",description:"The jQuery object. It will be `window.$` or `window.jQuery` if you include jQuery via a script tag."}]}}},188:function(e){e.exports={vanilla:{preview:"filterizr.search(text);",description:"Apply an extra filter on top of your grid based on the search term. Passing an empty string will render an unfiltered gallery.",args:[{name:"text",type:"String",description:"The string for which the contents of the grid items are searched."}]},jquery:{preview:"filterizrInstance.filterizr('search', text);",description:"Apply an extra filter on top of your grid based on the search term. Passing an empty string will render an unfiltered gallery.",args:[{name:"text",type:"String",description:"The string for which the contents of the grid items are searched."}]}}},189:function(e){e.exports={vanilla:{preview:"filterizr.setOptions(options);",description:"Merges the options into the default options (see documentation on options for defaults) and triggers a rerender to reflect the new options.",args:[{name:"options",type:"Object",description:"The new options to merge into the defaults."}]},jquery:{preview:"filterizrInstance.filterizr('setOptions', options);",description:"Merges the options into the default options (see documentation on options for defaults) and triggers a rerender to reflect the new options.",args:[{name:"options",type:"Object",description:"The new options to merge into the defaults."}]}}},190:function(e){e.exports={vanilla:{preview:"filterizr.shuffle();",description:"Shuffles the grid items in a random order."},jquery:{preview:"filterizrInstance.filterizr('shuffle');",description:"Shuffles the grid items in a random order."}}},191:function(e){e.exports={vanilla:{preview:"filterizr.sort(attribute, order);",description:"Sorts the grid based on a certain attribute in ascending or descending order.",args:[{name:"attribute",type:"String",defaultValue:"index",description:"The attribute based on which the grid is sorted. When it defaults to `'index'` the items are sorted based on their initial position in the DOM. If its value is set to `'sortData'`, the elements are sorted based on the value of the user-defined `data-sort` attribute. Other possible values includes `'w'` or `'h'` if you wish to sort your elements by width or height (used for layouts of items of different size). To use a custom data-attribute for sorting you can to pass its name omitting the `data-` part. For example if you have defined a `data-author` HTML attribute on your grid items, you could invoke `filterizr.sort('author', 'asc');`."},{name:"sortOrder",type:"Enum (asc|desc)",defaultValue:"asc",description:"Makes the grid be sorted in ascending or descending order."}]},jquery:{preview:"filterizrInstance.filterizr('sort', attribute, order);",description:"Sorts the grid based on a certain attribute in ascending or descending order.",args:[{name:"attribute",type:"String",defaultValue:"index",description:"The attribute based on which the grid is sorted. When it defaults to `'index'` the items are sorted based on their initial position in the DOM. If its value is set to `'sortData'`, the elements are sorted based on the value of the user-defined `data-sort` attribute. Other possible values includes `'w'` or `'h'` if you wish to sort your elements by width or height (used for layouts of items of different size). To use a custom data-attribute for sorting you can to pass its name omitting the `data-` part. For example if you have defined a `data-author` HTML attribute on your grid items, you could invoke `filterizr.sort('author', 'asc');`."},{name:"sortOrder",type:"Enum (asc|desc)",defaultValue:"asc",description:"Makes the grid be sorted in ascending or descending order."}]}}},192:function(e){e.exports={vanilla:{preview:"filterizr.toggleFilter(toggledFilter);",description:"Filters the grid based on the filters toggled on. If all filters are toggled off then an unfiltered gallery is rendered. The default controls that come with this method are the controls with a `data-multifilter` attribute. This method triggers the `onFilteringStart` callback. If you want `and` logic for the active filters (i.e. render items belonging to all active categories) you need to first set the `multifilterLogicalOperator` by calling `filterizr.setOptions({ multifilterLogicalOperator: 'and'})`.",args:[{name:"toggledFilter",type:"String",description:"The filter to toggle on/off."}]},jquery:{preview:"filterizrInstance.filterizr('toggleFilter', toggledFilter);",description:"Filters the grid based on the filters toggled on. If all filters are toggled off then an unfiltered gallery is rendered. The default controls that come with this method are the controls with a `data-multifilter` attribute. This method triggers the `onFilteringStart` callback. If you want `and` logic for the active filters (i.e. render items belonging to all active categories) you need to first set the `multifilterLogicalOperator` by calling `filterizr.setOptions({ multifilterLogicalOperator: 'and'})`.",args:[{name:"toggledFilter",type:"String",description:"The filter to toggle on/off."}]}}},194:function(e,t,a){e.exports=a.p+"static/media/city_1.ccdc3a7a.jpg"},195:function(e,t,a){e.exports=a.p+"static/media/city_2.1abd20cd.jpg"},196:function(e,t,a){e.exports=a.p+"static/media/city_3.9c8af41d.jpg"},197:function(e,t,a){e.exports=a.p+"static/media/industrial_1.88b84a91.jpg"},198:function(e,t,a){e.exports=a.p+"static/media/industrial_2.38fadfab.jpg"},199:function(e,t,a){e.exports=a.p+"static/media/industrial_3.d5416f34.jpg"},200:function(e,t,a){e.exports=a.p+"static/media/nature_1.c7d6e606.jpg"},201:function(e,t,a){e.exports=a.p+"static/media/nature_2.df608809.jpg"},202:function(e,t,a){e.exports=a.p+"static/media/nature_3.aef42b3c.jpg"},214:function(e,t,a){e.exports=a(552)},219:function(e,t,a){},220:function(e,t,a){},349:function(e,t,a){},541:function(e,t,a){},542:function(e,t,a){},543:function(e,t,a){},544:function(e,t,a){},547:function(e,t,a){},548:function(e,t,a){},549:function(e,t,a){},552:function(e,t,a){"use strict";a.r(t);var r=a(0),n=a.n(r),i=a(48),o=a.n(i),l=(a(219),a(23)),s=a(43),c=a(17),u=a(18),m=a(20),d=a(19),p=a(21),h=a(565),f=a(564),g=a(203),y=a(70),E=a(163),v=a.n(E),b=(a(220),function(e){function t(){return Object(c.a)(this,t),Object(m.a)(this,Object(d.a)(t).apply(this,arguments))}return Object(p.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){var e=this.props.history.location.pathname;return n.a.createElement(h.a,{className:"Navigation",inverted:!0},n.a.createElement(f.a,{inverted:!0,className:"Navigation__navbar"},n.a.createElement(f.a.Menu,{as:l.b,to:"/",className:"Navigation__logo",position:"left"},n.a.createElement(g.a,{src:v.a,fluid:!0})),n.a.createElement(f.a.Menu,{position:"right"},n.a.createElement(f.a.Item,{as:l.b,to:"/",name:"showcase",active:"/"===e}),n.a.createElement(y.a,{item:!0,className:e.includes("tutorials")?"active":"",text:"Tutorials"},n.a.createElement(y.a.Menu,null,n.a.createElement(y.a.Item,{as:l.b,to:"/tutorials/quickstart"},"Get started"),n.a.createElement(y.a.Item,{as:l.b,to:"/tutorials/filtering"},"Filtering"),n.a.createElement(y.a.Item,{as:l.b,to:"/tutorials/sorting"},"Sorting"),n.a.createElement(y.a.Item,{as:l.b,to:"/tutorials/searching"},"Searching"),n.a.createElement(y.a.Item,{as:l.b,to:"/tutorials/delay-modes"},"Delay modes"),n.a.createElement(y.a.Item,{as:l.b,to:"/tutorials/layouts"},"Layouts"),n.a.createElement(y.a.Item,{as:l.b,to:"/tutorials/as-jquery-plugin"},"As jQuery plugin"))),n.a.createElement(y.a,{item:!0,className:e.includes("documentation")?"active":"",text:"Documentation"},n.a.createElement(y.a.Menu,null,n.a.createElement(y.a.Item,{as:l.b,to:"/documentation/vanilla/options"},"Vanilla Filterizr"),n.a.createElement(y.a.Item,{as:l.b,to:"/documentation/jquery/options"},"jQuery Filterizr"))),n.a.createElement(f.a.Item,{as:l.b,to:"/faq",name:"FAQ",active:e.includes("faq")}))))}}]),t}(r.Component)),w=Object(s.e)(b),F=(a(349),function(){return n.a.createElement("footer",{className:"Footer"},"Made by ",n.a.createElement("a",{href:"https://yiotis.net"},"Yiotis Kaltsikis"),". MIT License.")}),j=a(567),C=a(568),x=a(561),N=a(7),I=a.n(N),z=function(e){function t(){return Object(c.a)(this,t),Object(m.a)(this,Object(d.a)(t).apply(this,arguments))}return Object(p.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){return n.a.createElement(j.a,{className:"AsJqueryPluginTutorialPage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h1"},"As jQuery plugin"),n.a.createElement("p",null,"First off a little bit of history. Up until version 2.0.0 was released, Filterizr was shipped as a jQuery plugin. To make it more future proof the dependency on jQuery was dropped. Nevertheless, it is still possible to use it as a jQuery plugin if you so wish."),n.a.createElement("p",null,"The two different ways to achieve this are explained below."))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Method A \u2014 Via a script tag"),n.a.createElement("p",null,"If you're looking for a plug'n'play solution then: "),n.a.createElement(x.a,{className:"hljs-inline",bulleted:!0},n.a.createElement(x.a.Item,null,"Download the jQuery Filterizr variation by",n.a.createElement("a",{href:"https://github.com/giotiskl/filterizr/blob/master/dist/jquery.filterizr.min.js",target:"_blank",rel:"noopener noreferrer"},"clicking here"),"."),n.a.createElement(x.a.Item,{className:"hljs-inline"},"Add it to the end of your HTML's"," ",n.a.createElement(I.a,{className:"html"},"<body>")," tag, after adding jQuery itself, using a script tag like this:"," ",n.a.createElement(I.a,{className:"html"},'<script type="text/javascript" src="/jquery.filterizr.min.js"><\/script>'))),n.a.createElement("div",{className:"hljs-inline"},"It is important to add the Filterizr script after jQuery as it will try to detect the global jQuery object and extend it with a"," ",n.a.createElement(I.a,{className:"javascript"},".filterizr")," method."),n.a.createElement("div",{className:"hljs-inline"},"Additionally to extending jQuery this variation of Filterizr will also expose the vanilla JavaScript Filterizr as a global, you can access it on"," ",n.a.createElement(I.a,{className:"javascript"},"window.Filterizr"),".")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Method B \u2014 Via npm with ES6 import"),n.a.createElement("p",null,"If you're working on a project with Babel and/or Webpack and you're using ES6 modules then you're probably going to install Filterizr via npm. In this case you can still extend jQuery with Filterizr as follows:"),n.a.createElement(x.a,{bulleted:!0},n.a.createElement(x.a.Item,{className:"hljs-inline"},"Install jQuery and Filterizr via npm:"," ",n.a.createElement(I.a,{className:"javascript"},"npm install jquery filterizr")),n.a.createElement(x.a.Item,null,n.a.createElement("div",{className:"hljs-inline"},"Import jQuery and Filterizr and extend jQuery using Filterizr's static method"," ",n.a.createElement(I.a,{className:"javascript"},"Filterizr.installAsJQueryPlugin(jQueryObject)")),n.a.createElement(I.a,{className:"javascript"},"import $ from 'jquery';\nimport Filterizr from 'filterizr';\n\n// Extend the jQuery object with a .filterizr method\nFilterizr.installAsJQueryPlugin($);\n\n// Use Filterizr as a jQuery plugin\n$('.filtr-container').filterizr(options);\n"))))))}}]),t}(n.a.Component),S=a(65),k=a(95),O=a(50),T=a(563),A=function(e){var t=e.active,a=e.onClick,r=e.targetFilter,i=e.text;return n.a.createElement(T.a,{active:t,onClick:function(){return a(r)},primary:!0},i)};A.defaultProps={active:!1,onClick:O.noop};var _=a(560),D=a(559),L=a(180),M=a.n(L),B=function(e){function t(e){var a;return Object(c.a)(this,t),(a=Object(m.a)(this,Object(d.a)(t).call(this,e))).state={activeFilter:"all",searchTerm:"",sortAttr:null},a.setActiveFilter=function(e){return a.setState({activeFilter:e})},a.toggleActiveFilter=function(e){return a.setState(function(t){var a=t.activeFilter;if("all"===e||"string"===typeof a&&"all"!==a&&a===e)return{activeFilter:"all"};if("string"===typeof a&&e!==a)return{activeFilter:[a,e]};if(Array.isArray(a)){if(!a.includes(e))return{activeFilter:[].concat(Object(k.a)(a),[e])};var r=[].concat(Object(k.a)(a.slice(0,a.indexOf(e))),Object(k.a)(a.slice(a.indexOf(e)+1,a.length)));return 1===r.length?{activeFilter:r[0]}:{activeFilter:r}}})},a.sortFilterizr=function(e){return function(){var t=a.state.sortAttr;a.filterizr.sort(t,e)}},a.filterizr=null,a}return Object(p.a)(t,e),Object(u.a)(t,[{key:"componentDidMount",value:function(){var e=this.props,t=e.options,a=e.selector,r=this.state.activeFilter,n=Object(O.merge)({},{filter:r,setupControls:!1},t),i=new M.a(a,n);this.filterizr=i}},{key:"componentWillUnmount",value:function(){this.filterizr.destroy(),this.filterizr=null}},{key:"componentDidUpdate",value:function(e,t){var a=t.activeFilter,r=t.searchTerm,n=this.state,i=n.activeFilter,o=n.searchTerm,l=e.options,s=this.props.options,c=Object(O.merge)({},{filter:i,setupControls:!1},l),u=Object(O.merge)({},{filter:i,setupControls:!1},s);a!==i&&this.filterizr.setOptions({filter:i}),Object(O.isEqual)(c,u)||this.filterizr.setOptions(u),o!==r&&this.filterizr.search(o)}},{key:"render",value:function(){var e=this,t=this.state.activeFilter,a=this.props,r=a.filterControls,i=a.multiFilterControls,o=a.searchable,l=a.selector,s=a.shuffleControl,c=a.sortAttributes,u=a.sortable;return n.a.createElement(n.a.Fragment,null,!!r.length&&n.a.createElement("div",{className:"Filterizr__filter-controls"},n.a.createElement(T.a.Group,{widths:r.length},n.a.Children.map(r,function(a,r){return n.a.cloneElement(a,Object(S.a)({},a.props,{active:a.props.targetFilter===t,onClick:function(){return e.setActiveFilter(a.props.targetFilter)}}))}))),!!i.length&&n.a.createElement("div",{className:"Filterizr__multi-filter-controls"},n.a.createElement(T.a.Group,{widths:i.length},n.a.Children.map(i,function(a,r){var i=a.props.targetFilter,o=Array.isArray(t)?t.includes(i):t===i;return n.a.cloneElement(a,Object(S.a)({},a.props,{active:o,onClick:function(){return e.toggleActiveFilter(a.props.targetFilter)}}))}))),(s||u)&&n.a.createElement("div",{className:"Filterizr__secondary-controls"},s&&n.a.createElement("div",{className:"Filterizr__shuffle-control"},n.a.cloneElement(s,Object(S.a)({},s.props,{onClick:function(){return e.filterizr.shuffle()}}))),u&&n.a.createElement("div",{className:"Filterizr__sort-controls"},n.a.createElement(T.a.Group,{widths:"2"},n.a.createElement(T.a,{color:this.state.sortAttr?"red":"grey",disabled:!this.state.sortAttr,onClick:this.sortFilterizr("asc")},"Asc"),n.a.createElement(T.a,{color:this.state.sortAttr?"red":"grey",disabled:!this.state.sortAttr,onClick:this.sortFilterizr("desc")},"Desc")),n.a.createElement(_.a,null,n.a.createElement(_.a.Field,null,n.a.createElement(D.a,{onChange:function(t,a){return e.setState({sortAttr:a.value})},placeholder:"Sort by...",options:c}))))),o&&n.a.createElement(_.a,{className:"Filterizr__search-control"},n.a.createElement(_.a.Field,null,n.a.createElement("input",{type:"text",placeholder:"Search...",onChange:function(t){var a=t.target.value;return e.setState({searchTerm:a})},value:this.state.searchTerm}))),n.a.createElement("div",{className:l.slice(1,l.length)},this.props.children))}}]),t}(n.a.Component);function H(){return n.a.createElement(n.a.Fragment,null,n.a.createElement("div",{className:"filtr-item","data-category":"orange"},n.a.createElement("span",{className:"colored orange"},"1")),n.a.createElement("div",{className:"filtr-item","data-category":"green"},n.a.createElement("span",{className:"colored green"},"2")),n.a.createElement("div",{className:"filtr-item","data-category":"purple"},n.a.createElement("span",{className:"colored purple"},"3")),n.a.createElement("div",{className:"filtr-item","data-category":"green"},n.a.createElement("span",{className:"colored green"},"4")),n.a.createElement("div",{className:"filtr-item","data-category":"orange"},n.a.createElement("span",{className:"colored orange"},"5")),n.a.createElement("div",{className:"filtr-item","data-category":"purple"},n.a.createElement("span",{className:"colored purple"},"6")),n.a.createElement("div",{className:"filtr-item","data-category":"orange"},n.a.createElement("span",{className:"colored orange"},"7")),n.a.createElement("div",{className:"filtr-item","data-category":"purple"},n.a.createElement("span",{className:"colored purple"},"8")),n.a.createElement("div",{className:"filtr-item","data-category":"green"},n.a.createElement("span",{className:"colored green"},"9")),n.a.createElement("div",{className:"filtr-item","data-category":"purple"},n.a.createElement("span",{className:"colored purple"},"10")),n.a.createElement("div",{className:"filtr-item","data-category":"orange"},n.a.createElement("span",{className:"colored orange"},"11")),n.a.createElement("div",{className:"filtr-item","data-category":"green"},n.a.createElement("span",{className:"colored green"},"12")))}B.defaultProps={filterControls:[],multiFilterControls:[],options:{delay:10,filterOutCss:{opacity:0,transform:"scale(0.75)"},filterInCss:{opacity:1,transform:"scale(1)"}},searchable:!1,selector:".filtr-container",shuffleControl:null,sortAttributes:[{key:"index",value:"index",text:"Index"},{key:"sortData",value:"sortData",text:"Description"}],sortable:!1},B.FilterButton=A;a(541);var P=function(e){function t(){return Object(c.a)(this,t),Object(m.a)(this,Object(d.a)(t).apply(this,arguments))}return Object(p.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){return n.a.createElement(j.a,{className:"DelayModeTutorialPage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h1"},"Delay modes"),n.a.createElement("div",{className:"hljs-inline"},"If you would like to spice up the effect of your Filterizr by making it less synchronous, you could experiment with adding delays between your gallery's items. Filterizr uses by default"," ",n.a.createElement(I.a,{className:"javascript"},"delayMode: 'progressive'")," ","but the value of"," ",n.a.createElement(I.a,{className:"javascript"},"delay")," in the options is set to 0. Thus, there is no delay effect by default."))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Progressive delay mode"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("div",{className:"hljs-inline"},"This delay mode increases the transition-delay property of your items consecutively by the amount you've set the"," ",n.a.createElement(I.a,{className:"javascript"},"delay")," option in Filterizr's options. I would suggest a value between 25-50 ms for an optimal effect."),n.a.createElement(C.a,{as:"h3"},"Example"),n.a.createElement(I.a,{className:"javascript"},"filterizr.setOptions({ delay: 50, delayMode: 'progressive' });")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"}),n.a.createElement(B.FilterButton,{text:"Mix",targetFilter:["purple","orange"]})],selector:".mode-progressive",options:{delay:50,delayMode:"progressive"}},n.a.createElement(H,null)))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Alternate delay mode"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("div",{className:"hljs-inline"},"This delay mode sets the transition-delay property of every other item to the amount you've set the"," ",n.a.createElement(I.a,{className:"javascript"},"delay")," option in Filterizr's options. I would suggest a value between 250-400 ms for an optimal effect if you choose this delay mode."),n.a.createElement(C.a,{as:"h3"},"Example"),n.a.createElement(I.a,{className:"javascript"},"filterizr.setOptions({ delay: 250, delayMode: 'alternate' });")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"}),n.a.createElement(B.FilterButton,{text:"Mix",targetFilter:["purple","orange"]})],selector:".mode-alternate",options:{delay:250,delayMode:"alternate"}},n.a.createElement(H,null)))))}}]),t}(n.a.Component),q=a(92);function Q(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.split(/`/g).map(function(e,t){return(t+1)%2===0?n.a.createElement(I.a,{className:"javascript",key:t},e):e})}var R=function e(t){var a=t.jsonDefinition,r=t.secondary;return n.a.createElement(h.a.Group,null,a.map(function(t,a){var i=t.name,o=t.defaultValue,l=t.type,s=t.description,c=t.fields;return n.a.createElement(h.a,{key:a,secondary:r},n.a.createElement("div",{className:"hljs-inline"},n.a.createElement("strong",null,"Name:"),n.a.createElement(I.a,{className:"javascript"},i),n.a.createElement("br",null),n.a.createElement("strong",null,"Type:"),n.a.createElement(I.a,{className:"javascript"},l),o&&n.a.createElement(n.a.Fragment,null,n.a.createElement("br",null)," ",n.a.createElement("strong",null,"Default value:"),n.a.createElement(I.a,{className:"javascript"},o))),n.a.createElement("br",null),n.a.createElement("strong",null,"Description:"),n.a.createElement("div",{className:"hljs-inline"},Q(s)),!!c&&n.a.createElement(e,{jsonDefinition:c,secondary:!0}))}))};R.defaultProps={secondary:!1};var W=R,G=a(182),V=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(C.a,{as:"h3"},"Preview"),n.a.createElement(I.a,{className:"javascript"},"//Default options\nconst options = {\n  animationDuration: 0.5,\n  callbacks: {\n    onInit: function() { },\n    onFilteringStart: function() { },\n    onFilteringEnd: function() { },\n    onShufflingStart: function() { },\n    onShufflingEnd: function() { },\n    onSortingStart: function() { },\n    onSortingEnd: function() { }\n  },\n  controlsSelector: '',\n  delay: 0,\n  delayMode: 'progressive',\n  easing: 'ease-out',\n  filter: 'all',\n  filterOutCss: {\n    opacity: 0,\n    transform: 'scale(0.5)'\n  },\n  filterInCss: {\n    opacity: 0,\n    transform: 'scale(1)'\n  },\n  gridItemsSelector: '.filtr-item',\n  layout: 'sameSize',\n  multifilterLogicalOperator: 'or',\n  searchTerm: '',\n  setupControls: true\n}"),n.a.createElement(W,{jsonDefinition:G.fields}))},J=function(e){var t=e.jsonDefinition,a=t.preview,r=t.description,i=t.args;e.secondary;return n.a.createElement(n.a.Fragment,null,n.a.createElement(C.a,{as:"h3"},"Preview"),n.a.createElement(I.a,{className:"javascript"},a),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("div",{className:"hljs-inline"},Q(r)),i&&n.a.createElement(n.a.Fragment,null,n.a.createElement(C.a,{as:"h3"},"Arguments"),n.a.createElement(W,{jsonDefinition:i})))};J.defaultProps={secondary:!1};var $=J;var U=function(e){var t=e.variation;return n.a.createElement(n.a.Fragment,null,n.a.createElement(C.a,{as:"h3"},"Preview"),n.a.createElement(I.a,{className:"javascript"},function(e){return"vanilla"===e?"new Filterizr(selectorOrNode, {\n  callbacks: {\n    onInit: function() {\n      // your code here\n    }\n  }\n})":"jquery"===e?"filterizrInstance.filterizr(selectorOrNode, {\n  callbacks: {\n    onInit: function() {\n      //your code here \n    }\n  }\n})":void 0}(t)),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("p",null,"Triggered only once when the grid is first initialized."))};var Y=function(e){var t=e.eventName,a=e.variation;if("onInit"===t)return n.a.createElement(U,{variation:a});var r=t.split(/(?=[A-Z])/),i=Object(q.a)(r,3),o=i[1],l=i[2];return n.a.createElement(n.a.Fragment,null,n.a.createElement(C.a,{as:"h3"},"Preview"),n.a.createElement(I.a,{className:"javascript"},function(e,t){return"vanilla"===t?"filterizr.setOptions({\n  callbacks: {\n    ".concat(e,": function() {\n      //your code here \n    }\n  }\n})"):"jquery"===t?"filterizrInstance.filterizr('setOptions', {\n  callbacks: {\n    ".concat(e,": function() {\n      //your code here \n    }\n  }\n})"):void 0}(t,a)),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("p",null,"Triggered when ",o.toLowerCase()," ",l.toLowerCase(),"s."))},Z=a(183),K=a(184),X=a(185),ee=a(186),te=a(187),ae=a(188),re=a(189),ne=a(190),ie=a(191),oe=a(192);function le(e){var t={installAsJQueryPlugin:te[e]},a={filterizr:X[e]},r="vanilla"===e?t:a;return Object(S.a)({destroy:Z[e],filter:K[e],insertItem:ee[e],search:ae[e],setOptions:re[e],shuffle:ne[e],sort:ie[e],toggleFilter:oe[e]},r)}var se=["onInit","onFilteringStart","onFilteringEnd","onShufflingStart","onShufflingEnd","onSortingStart","onSortingEnd"],ce=function(e){function t(){var e,a;Object(c.a)(this,t);for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];return(a=Object(m.a)(this,(e=Object(d.a)(t)).call.apply(e,[this].concat(i)))).state={activeItem:a.props.history.location.pathname.slice(a.props.history.location.pathname.lastIndexOf("/")+1,a.props.history.location.pathname.length)},a.handleItemClick=function(e){return function(){return a.setState({activeItem:e})}},a.renderMenuItems=function(e){var t=a.props.match,r=a.state.activeItem;return e.map(function(e,i){return n.a.createElement(f.a.Item,{as:l.b,to:"".concat(t.url,"/").concat(e),name:e,active:r===e,onClick:a.handleItemClick(e),key:i},e)})},a}return Object(p.a)(t,e),Object(u.a)(t,[{key:"componentDidUpdate",value:function(e,t){var a=this.state.activeItem,r=this.props.history.location.pathname.slice(this.props.history.location.pathname.lastIndexOf("/")+1,this.props.history.location.pathname.length);r!==a&&this.setState({activeItem:r})}},{key:"render",value:function(){var e=this.props.match,t=e.params.variation,a="vanilla"===t?"Filterizr documentation":"jQuery Filterizr documentation";return n.a.createElement(j.a,{className:"DocsPage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h1"},a))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:3},n.a.createElement(f.a,{vertical:!0},n.a.createElement(f.a.Item,null,n.a.createElement(f.a.Header,null,"Objects"),n.a.createElement(f.a.Menu,null,this.renderMenuItems(["options"]))),n.a.createElement(f.a.Item,null,n.a.createElement(f.a.Header,null,"Methods"),n.a.createElement(f.a.Menu,null,this.renderMenuItems(Object.keys(le(t)).sort()))),n.a.createElement(f.a.Item,null,n.a.createElement(f.a.Header,null,"Events"),n.a.createElement(f.a.Menu,null,this.renderMenuItems(se))))),n.a.createElement(j.a.Column,{mobile:16,computer:13},n.a.createElement(s.a,{component:V,path:"".concat(e.url,"/options")}),Object.entries(le(t)).map(function(t,a){var r=Object(q.a)(t,2),i=r[0],o=r[1];return n.a.createElement(s.a,{render:function(){return n.a.createElement($,{jsonDefinition:o})},path:"".concat(e.url,"/").concat(i),key:a})}),se.map(function(a,r){return n.a.createElement(s.a,{render:function(){return n.a.createElement(Y,{eventName:a,variation:t})},path:"".concat(e.url,"/").concat(a.toLowerCase()),key:r})}))))}}]),t}(r.Component),ue=a(562),me=a(44),de=a(120),pe=function(e){function t(){var e,a;Object(c.a)(this,t);for(var r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return(a=Object(m.a)(this,(e=Object(d.a)(t)).call.apply(e,[this].concat(n)))).state={activeIndexFAQ:0,activeIndexCaveats:0},a.handleClickFAQ=function(e,t){var r=t.index,n=a.state.activeIndexFAQ===r?-1:r;a.setState({activeIndexFAQ:n})},a.handleClickCaveats=function(e,t){var r=t.index,n=a.state.activeIndexCaveats===r?-1:r;a.setState({activeIndexCaveats:n})},a}return Object(p.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){var e=this,t=this.state,a=t.activeIndexFAQ,r=t.activeIndexCaveats,i=de.faq,o=de.caveats;return n.a.createElement(j.a,{className:"FAQPage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"FAQ"),n.a.createElement(ue.a,{styled:!0,fluid:!0},i.map(function(t,r){var i=t.question,o=t.answer;return n.a.createElement(n.a.Fragment,{key:r},n.a.createElement(ue.a.Title,{active:a===r,index:r,onClick:e.handleClickFAQ},n.a.createElement(me.a,{name:"dropdown"}),i),n.a.createElement(ue.a.Content,{active:a===r},n.a.createElement("p",{dangerouslySetInnerHTML:{__html:o}})))}))),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Caveats"),n.a.createElement(ue.a,{styled:!0,fluid:!0},o.map(function(t,a){var i=t.question,o=t.answer;return n.a.createElement(n.a.Fragment,{key:a},n.a.createElement(ue.a.Title,{active:r===a,index:a,onClick:e.handleClickCaveats},n.a.createElement(me.a,{name:"dropdown"}),i),n.a.createElement(ue.a.Content,{active:r===a},n.a.createElement("p",{dangerouslySetInnerHTML:{__html:o}})))})))))}}]),t}(r.Component),he=(a(542),function(e){function t(){return Object(c.a)(this,t),Object(m.a)(this,Object(d.a)(t).apply(this,arguments))}return Object(p.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){return n.a.createElement(j.a,{className:"FilteringTutorialPage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h1"},"Filtering"),n.a.createElement("p",null,"Filterizr offers two filtering modes, the active filter mode and the toggle filter mode. All you have to do is use the appropriate preset Filterizr control for each one of the options and Filterizr will handle the rest for you. In the section below you can find examples of both modes, what they look like as well as how to set them up."))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Active filter mode"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("div",{className:"hljs-inline"},"For this filtering mode all you need to do is to include the",n.a.createElement(I.a,{className:"html"},"data-filter")," attribute in your controls as illustrated below. Each time you switch between filters by clicking a button, items of the corresponding"," ",n.a.createElement(I.a,{className:"html"},"data-category")," will be shown. This mode uses the"," ",n.a.createElement(I.a,{className:"javascript"},"Filterizr.prototype.filter(targetFilter)")," ","method in the background to switch between categories."),n.a.createElement(C.a,{as:"h3"},"Control setup"),n.a.createElement(I.a,{className:"html"},'<ul>\n  <li data-filter="all"> All </li>\n  <li data-filter="green"> Green </li>\n  <li data-filter="orange"> Orange </li>\n  <li data-filter="purple"> Purple </li>\n  <li data-filter="orange, purple"> Mix </li>\n</ul>\n')),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"}),n.a.createElement(B.FilterButton,{text:"Mix",targetFilter:["purple","orange"]})],selector:".active-filter"},n.a.createElement(H,null)))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Toggle filter mode"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("div",{className:"hljs-inline"},"For this filtering mode you need to include the"," ",n.a.createElement(I.a,{className:"html"},"data-multifilter")," attribute in your controls as illustrated below. When all buttons are switched off an unfiltered gallery is shown. This mode uses the"," ",n.a.createElement(I.a,{className:"javascript"},"Filterizr.prototype.toggleFilter(toggledFilter)")," ","method in the background to hide or display categories."),n.a.createElement(C.a,{as:"h3"},"Control setup"),n.a.createElement(I.a,{className:"html"},'<ul>\n  <li data-multifilter="all"> All </li>\n  <li data-multifilter="1"> Green </li>\n  <li data-multifilter="2"> Orange </li>\n  <li data-multifilter="3"> Purple </li>\n</ul>')),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{multiFilterControls:[n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"})],selector:".toggle-filter"},n.a.createElement(H,null)))))}}]),t}(n.a.Component)),fe=(a(543),function(e){function t(){return Object(c.a)(this,t),Object(m.a)(this,Object(d.a)(t).apply(this,arguments))}return Object(p.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){return n.a.createElement(j.a,{className:"LayoutsTutorialPage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h1"},"Layouts"),n.a.createElement("p",null,"Filterizr offers multiple layouts to cover galleries of all needs."))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Same size layout"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("p",{className:"hljs-inline"},"This layout should be used with items having the same width and height."),n.a.createElement(C.a,{as:"h3"},"Example"),n.a.createElement(I.a,{className:"javascript"},"filterizr.setOptions({layout: 'sameSize'});")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"}),n.a.createElement(B.FilterButton,{text:"Mix",targetFilter:["purple","orange"]})],selector:".same-size-layout"},n.a.createElement(H,null)))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Same width layout"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("p",{className:"hljs-inline"},"This layout should be used with items having the same width and a varying height."),n.a.createElement(C.a,{as:"h3"},"Example"),n.a.createElement(I.a,{className:"javascript"},"filterizr.setOptions({layout: 'sameWidth'});")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"}),n.a.createElement(B.FilterButton,{text:"Mix",targetFilter:["purple","orange"]})],selector:".same-width-layout",options:{layout:"sameWidth"}},n.a.createElement(H,null)))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Same height layout"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("p",{className:"hljs-inline"},"This layout should be used with items having the same height and a varying width."),n.a.createElement(C.a,{as:"h3"},"Example"),n.a.createElement(I.a,{className:"javascript"},"filterizr.setOptions({layout: 'sameHeight'});")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"}),n.a.createElement(B.FilterButton,{text:"Mix",targetFilter:["purple","orange"]})],selector:".same-height-layout",options:{layout:"sameHeight"}},n.a.createElement(H,null)))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Packed layout"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("p",{className:"hljs-inline"},"This layout can be used with items of any size and it will make smart decisions about where to place them. It makes use of"," ",n.a.createElement("a",{href:"https://github.com/jakesgordon/bin-packing",target:"_blank",rel:"noopener noreferrer"},"Jake Gordon's Bin Packing algorithm")," ","to place the items in the container."),n.a.createElement(C.a,{as:"h3"},"Example"),n.a.createElement(I.a,{className:"javascript"},"filterizr.setOptions({layout: 'packed'});")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"}),n.a.createElement(B.FilterButton,{text:"Mix",targetFilter:["purple","orange"]})],selector:".packed-layout",options:{layout:"packed"}},n.a.createElement(H,null)))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Horizontal layout"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("p",{className:"hljs-inline"},"This layout can be used to lay out your elements horizontally."),n.a.createElement(C.a,{as:"h3"},"Example"),n.a.createElement(I.a,{className:"javascript"},"filterizr.setOptions({layout: 'horizontal'});")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"}),n.a.createElement(B.FilterButton,{text:"Mix",targetFilter:["purple","orange"]})],selector:".horizontal-layout",options:{layout:"horizontal"}},n.a.createElement(H,null)))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Vertical layout"),n.a.createElement(C.a,{as:"h3"},"Description"),n.a.createElement("p",{className:"hljs-inline"},"This layout can be used to lay out your elements vertically."),n.a.createElement(C.a,{as:"h3"},"Example"),n.a.createElement(I.a,{className:"javascript"},"filterizr.setOptions({layout: 'vertical'});")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(B,{filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Orange",targetFilter:"orange"}),n.a.createElement(B.FilterButton,{text:"Green",targetFilter:"green"}),n.a.createElement(B.FilterButton,{text:"Purple",targetFilter:"purple"}),n.a.createElement(B.FilterButton,{text:"Mix",targetFilter:["purple","orange"]})],selector:".vertical-layout",options:{layout:"vertical"}},n.a.createElement(H,null)))))}}]),t}(n.a.Component)),ge=function(e){function t(){return Object(c.a)(this,t),Object(m.a)(this,Object(d.a)(t).apply(this,arguments))}return Object(p.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){return n.a.createElement(j.a,{className:"QuickstartTutorialPage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h1"},"Getting started"),n.a.createElement("p",null,"First, you must add Filterizr in your project. There are three ways to do this:"),n.a.createElement("ol",null,n.a.createElement("li",{className:"hljs-inline"},"If you would like to add the vanilla JavaScript Filterizr variation with a plain script tag, then download it"," ",n.a.createElement("a",{href:"https://github.com/giotiskl/filterizr/blob/master/dist/filterizr.min.js",target:"_blank",rel:"noopener noreferrer"},"here"),". Then include it in your project like this:"," ",n.a.createElement(I.a,{language:"html"},'<script type="text/javascript" src="filterizr.min.js"><\/script>'),n.a.createElement("p",null,"This script will expose the Filterizr class as a global.")),n.a.createElement("li",{className:"hljs-inline"},"If you would like to add the jQuery Filterizr variation again with a plain script tag, you can download it"," ",n.a.createElement("a",{href:"https://github.com/giotiskl/filterizr/blob/master/dist/jquery.filterizr.min.js",target:"_blank",rel:"noopener noreferrer"},"here"),". Then include it in your project like this:"," ",n.a.createElement(I.a,{language:"html"},'<script type="text/javascript" src="jquery.filterizr.min.js"><\/script>'),n.a.createElement("div",null,"Make sure to include this script after you have included jQuery, as it will try to detect the jQuery object and extend it with a"," ",n.a.createElement(I.a,{language:"javascript"},".filterizr")," ","method.")),n.a.createElement("li",{className:"hljs-inline"},"Finally if you would like to install Filterizr as a module via npm, then you can do:",n.a.createElement(I.a,{language:"javascript"},"npm install filterizr"),n.a.createElement("div",null,"Then in your code:"," ",n.a.createElement(I.a,{language:"javascript"},"import Filterizr from 'filterizr';")))))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"1. Prepare the HTML"),n.a.createElement("p",null,"To set up your own gallery, modify your HTML as follows:"),n.a.createElement(x.a,{className:"hljs-inline",bulleted:!0},n.a.createElement(x.a.Item,null,"Add to your items the class:"," ",n.a.createElement(I.a,{className:"html"},"filtr-item")),n.a.createElement(x.a.Item,null,"Give your items a"," ",n.a.createElement(I.a,{className:"html"},"data-category")," attribute.",n.a.createElement("br",null),' Multiple categories must be separated with a comma (",")'),n.a.createElement(x.a.Item,null,"To sort your items by custom data, include the data-sort attribute.")),n.a.createElement(I.a,{className:"html"},'<div class="filter-container">\n  <div class="filtr-item" data-category="1" data-sort="value">\n    <img src="img/sample1.jpg" alt="sample" />\n  </div>\n  <div class="filtr-item" data-category="2, 1" data-sort="value">\n    <img src="img/sample2.jpg" alt="sample" />\n  </div>\n  <div class="filtr-item" data-category="1, 3" data-sort="value">\n    <img src="img/sample3.jpg" alt="sample" />\n  </div>\n</div>\n')),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"2. Add the controls"),n.a.createElement("p",null,"To be able to use your filterized gallery, you will have to set up some controls (e.g. buttons to trigger filtering or a text search etc)."),n.a.createElement(x.a,{className:"hljs-inline",bulleted:!0},n.a.createElement(x.a.Item,null,"Create your controls, with the HTML of your preference. Style them the way you want with your CSS."),n.a.createElement(x.a.Item,null,"Add the necessary data attributes as illustrated below. This is what Filterizr will look for. Use the value"," ",n.a.createElement(I.a,{className:"html"},"all")," for an unfiltered gallery.")),n.a.createElement(I.a,{className:"html"},'<ul>\n  \x3c!-- For filtering controls add --\x3e\n  <li data-filter="all"> All items </li>\n  <li data-filter="1"> Category 1 </li>\n  <li data-filter="2"> Category 2 </li>\n  <li data-filter="3"> Category 3 </li>\n  \x3c!-- For a shuffle control add --\x3e\n  <li data-shuffle> Shuffle items </li>\n  \x3c!-- For sorting controls add --\x3e\n  <li data-sortAsc> Ascending </li>\n  <li data-sortDesc> Descending </li>\n</ul>\n\x3c!-- To choose the value by which you want to sort add --\x3e\n<select data-sortOrder>\n  <option value="index"> Position </option>\n  <option value="sortData"> Custom Data </option>\n</select>\n\x3c!-- To create a search control --\x3e\n<input type="text" name="filtr-search" value="" placeholder="Your search" data-search="">'))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"3. Instantiate Filterizr"),n.a.createElement("p",null,"After installing Filterizr via npm:"),n.a.createElement(I.a,{className:"javascript"},"import Filterizr from 'filterizr'\n\n// Configure your options\nconst options = { /* check next step for available options */ };\n\n// Adjust the CSS selector to match the container where\n// you set up your image gallery\nconst filterizr = new Filterizr('.filter-container', options);\n")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"4. Available options"),n.a.createElement("div",{className:"hljs-inline"},"Filterizr's magic lies in"," ",n.a.createElement(I.a,{className:"javascript"},"filterInCss")," and"," ",n.a.createElement(I.a,{className:"javascript"},"filterOutCss"),"."),n.a.createElement("div",{className:"hljs-inline"},"If you wish overwrite any options, pass the options object to the constructor methods or if you have an instance call the method",n.a.createElement(I.a,{className:"javascript"},"setOptions(options)"),"."),n.a.createElement("p",null,"Here is a list of all the available options (for more details look in the documentation)."),n.a.createElement(I.a,{className:"javascript"},"// Default options\nconst options = {\n  animationDuration: 0.5, // in seconds\n  callbacks: { \n    onFilteringStart: function() { },\n    onFilteringEnd: function() { },\n    onShufflingStart: function() { },\n    onShufflingEnd: function() { },\n    onSortingStart: function() { },\n    onSortingEnd: function() { }\n  },\n  controlsSelector: '', // Selector for custom controls\n  delay: 0, // Transition delay in ms\n  delayMode: 'progressive', // 'progressive' or 'alternate'\n  easing: 'ease-out',\n  filter: 'all', // Initial filter\n  filterOutCss: { // Filtering out animation\n    opacity: 0,\n    transform: 'scale(0.5)'\n  },\n  filterInCss: { // Filtering in animation\n    opacity: 0,\n    transform: 'scale(1)'\n  },\n  gridItemsSelector: '.filtr-container',\n  layout: 'sameSize', // See layouts\n  multifilterLogicalOperator: 'or',\n  searchTerm: '',\n  setupControls: true // Should be false if controlsSelector is set \n} \n"))))}}]),t}(n.a.Component),ye=(a(544),function(){return n.a.createElement(j.a,{className:"SearchingTutorialPage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h1"},"Searching"))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement("p",null,"Apart from filtering between categories, since v1.2.1 Filterizr now offers you the ability to apply a dynamic filter while typing in a search term as exhibited on the demo page of this website. Setting up the search control of Filterizr is a matter of seconds. All you have to do is include the corresponding control if you would like this added functionality as follows:"),n.a.createElement(I.a,{className:"html"},'\x3c!-- This is what the search control looks like --\x3e\n<input type="text" name="search" placeholder="Search..." data-search>\n'),n.a.createElement("p",null,"Done! Once your search control is added, Filterizr will handle the rest of the magic!"))))}),Ee=a(193),ve=a(194),be=a.n(ve),we=a(195),Fe=a.n(we),je=a(196),Ce=a.n(je),xe=a(197),Ne=a.n(xe),Ie=a(198),ze=a.n(Ie),Se=a(199),ke=a.n(Se),Oe=a(200),Te=a.n(Oe),Ae=a(201),_e=a.n(Ae),De=a(202),Le=a.n(De),Me=(a(547),function(e){function t(){var e,a;Object(c.a)(this,t);for(var r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return(a=Object(m.a)(this,(e=Object(d.a)(t)).call.apply(e,[this].concat(n)))).state={playgroundValue:{delay:25,filterOutCss:{opacity:0,transform:"scale(0.75)"},filterInCss:{opacity:1,transform:"scale(1)"}}},a}return Object(p.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){var e=this;return n.a.createElement(j.a,{className:"ShowcasePage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h1"},"Filter all night long"),n.a.createElement("p",null,"Filterizr is a JavaScript library that searches, sorts, shuffles and applies stunning filters over responsive galleries using CSS3 transitions."),n.a.createElement("ul",null,n.a.createElement("li",null,"Pluggable look & feel (edit the JSON settings on the right)"),n.a.createElement("li",null,"Smooth performance \u2014 optimized for smooth experience on mobile devices"),n.a.createElement("li",null,"Lightweight \u2014 around 20kb"),n.a.createElement("li",null,"Responsive \u2014 with your Media Queries (resize the window!)"),n.a.createElement("li",null,"Platform support: Chrome, Firefox, Safari, Opera Android and iOS browsers Edge, IE(v.10+)"),n.a.createElement("li",null," Open source MIT licensed (i.e. free for all uses) ")),"Get it on NPM:",n.a.createElement(I.a,null,"npm install filterizr"),n.a.createElement(T.a,{as:"a",href:"https://github.com/giotiskl/filterizr",target:"_blank",rel:"noopener noreferrer",color:"black"},n.a.createElement(me.a,{name:"github"})," Github")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h1"},"Filter playground"),n.a.createElement("p",null,"Edit the styles and see the effects take place immediately in the demo gallery!"),n.a.createElement("div",{className:"ShowcasePage__playground-wrapper"},n.a.createElement(Ee.a,{value:this.state.playgroundValue,onChange:function(t){return e.setState({playgroundValue:t})}})))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h1",textAlign:"center"},"Demo gallery"),n.a.createElement(B,{options:this.state.playgroundValue,filterControls:[n.a.createElement(B.FilterButton,{text:"All",targetFilter:"all"}),n.a.createElement(B.FilterButton,{text:"Cities",targetFilter:"1"}),n.a.createElement(B.FilterButton,{text:"Nature",targetFilter:"2"}),n.a.createElement(B.FilterButton,{text:"Industrial",targetFilter:"3"}),n.a.createElement(B.FilterButton,{text:"Daylight",targetFilter:"4"}),n.a.createElement(B.FilterButton,{text:"Nightscape",targetFilter:"5"})],shuffleControl:n.a.createElement(T.a,{color:"yellow"},"Shuffle"),searchable:!0,sortable:!0,selector:".filtr-container"},n.a.createElement("div",{className:"filtr-item","data-category":"1, 5","data-sort":"Busy streets"},n.a.createElement("span",{className:"item-index"},"1"),n.a.createElement(g.a,{src:be.a,fluid:!0}),n.a.createElement("span",{className:"item-desc"},"Busy Streets")),n.a.createElement("div",{className:"filtr-item","data-category":"2, 5","data-sort":"Luminous night"},n.a.createElement("span",{className:"item-index"},"2"),n.a.createElement(g.a,{src:Te.a,fluid:!0}),n.a.createElement("span",{className:"item-desc"},"Luminous night")),n.a.createElement("div",{className:"filtr-item","data-category":"1, 4","data-sort":"City wonders"},n.a.createElement("span",{className:"item-index"},"3"),n.a.createElement(g.a,{src:Fe.a,fluid:!0}),n.a.createElement("span",{className:"item-desc"},"City wonders")),n.a.createElement("div",{className:"filtr-item","data-category":"3","data-sort":"In production"},n.a.createElement("span",{className:"item-index"},"4"),n.a.createElement(g.a,{src:Ne.a,fluid:!0}),n.a.createElement("span",{className:"item-desc"},"In production")),n.a.createElement("div",{className:"filtr-item","data-category":"3, 4","data-sort":"Industrial site"},n.a.createElement("span",{className:"item-index"},"5"),n.a.createElement(g.a,{src:ze.a,fluid:!0}),n.a.createElement("span",{className:"item-desc"},"Industrial site")),n.a.createElement("div",{className:"filtr-item","data-category":"2, 4","data-sort":"Peaceful lake"},n.a.createElement("span",{className:"item-index"},"6"),n.a.createElement(g.a,{src:_e.a,fluid:!0}),n.a.createElement("span",{className:"item-desc"},"Peaceful lake")),n.a.createElement("div",{className:"filtr-item","data-category":"1, 5","data-sort":"City lights"},n.a.createElement("span",{className:"item-index"},"7"),n.a.createElement(g.a,{src:Ce.a,fluid:!0}),n.a.createElement("span",{className:"item-desc"},"City lights")),n.a.createElement("div",{className:"filtr-item","data-category":"2, 4","data-sort":"Dreamhouse"},n.a.createElement("span",{className:"item-index"},"8"),n.a.createElement(g.a,{src:Le.a,fluid:!0}),n.a.createElement("span",{className:"item-desc"},"Dreamhouse")),n.a.createElement("div",{className:"filtr-item","data-category":"3","data-sort":"Restless machines"},n.a.createElement("span",{className:"item-index"},"9"),n.a.createElement(g.a,{src:ke.a,fluid:!0}),n.a.createElement("span",{className:"item-desc"},"Restless machines"))))))}}]),t}(n.a.Component)),Be=(a(548),function(e){function t(){return Object(c.a)(this,t),Object(m.a)(this,Object(d.a)(t).apply(this,arguments))}return Object(p.a)(t,e),Object(u.a)(t,[{key:"render",value:function(){return n.a.createElement(j.a,{className:"SortingTutorialPage",divided:"vertically"},n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h1"},"Sorting"),n.a.createElement("p",null,"Filterizr allows you to sort your grid in two ways. You can either use the default preset options that work out of the box, or define your own custom data-attribute and use them to sort."))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,null,n.a.createElement(C.a,{as:"h2"},"Example"),n.a.createElement(B,{sortAttributes:[{key:"index",value:"index",text:"Index"},{key:"black",value:"black",text:"Black letter"},{key:"blue",value:"blue",text:"Blue letter"}],sortable:!0,selector:".sortable-grid"},n.a.createElement("div",{className:"filtr-item","data-black":"A","data-blue":"X","data-category":"orange"},n.a.createElement("span",{className:"colored orange"},"1-",n.a.createElement("span",{className:"black-letter"},"A"),"-",n.a.createElement("span",{className:"blue-letter"},"X"))),n.a.createElement("div",{className:"filtr-item","data-black":"D","data-blue":"F","data-category":"green"},n.a.createElement("span",{className:"colored green"},"2-",n.a.createElement("span",{className:"black-letter"},"D"),"-",n.a.createElement("span",{className:"blue-letter"},"F"))),n.a.createElement("div",{className:"filtr-item","data-black":"E","data-blue":"Z","data-category":"purple"},n.a.createElement("span",{className:"colored purple"},"3-",n.a.createElement("span",{className:"black-letter"},"E"),"-",n.a.createElement("span",{className:"blue-letter"},"Z"))),n.a.createElement("div",{className:"filtr-item","data-black":"C","data-blue":"H","data-category":"green"},n.a.createElement("span",{className:"colored green"},"4-",n.a.createElement("span",{className:"black-letter"},"C"),"-",n.a.createElement("span",{className:"blue-letter"},"H"))),n.a.createElement("div",{className:"filtr-item","data-black":"G","data-blue":"J","data-category":"orange"},n.a.createElement("span",{className:"colored orange"},"5-",n.a.createElement("span",{className:"black-letter"},"G"),"-",n.a.createElement("span",{className:"blue-letter"},"J"))),n.a.createElement("div",{className:"filtr-item","data-black":"R","data-blue":"Y","data-category":"purple"},n.a.createElement("span",{className:"colored purple"},"6-",n.a.createElement("span",{className:"black-letter"},"R"),"-",n.a.createElement("span",{className:"blue-letter"},"Y"))),n.a.createElement("div",{className:"filtr-item","data-black":"M","data-blue":"L","data-category":"orange"},n.a.createElement("span",{className:"colored orange"},"7-",n.a.createElement("span",{className:"black-letter"},"M"),"-",n.a.createElement("span",{className:"blue-letter"},"L"))),n.a.createElement("div",{className:"filtr-item","data-black":"M","data-blue":"Q","data-category":"purple"},n.a.createElement("span",{className:"colored purple"},"8-",n.a.createElement("span",{className:"black-letter"},"K"),"-",n.a.createElement("span",{className:"blue-letter"},"Q"))),n.a.createElement("div",{className:"filtr-item","data-black":"W","data-blue":"V","data-category":"green"},n.a.createElement("span",{className:"colored green"},"9-",n.a.createElement("span",{className:"black-letter"},"W"),"-",n.a.createElement("span",{className:"blue-letter"},"V"))),n.a.createElement("div",{className:"filtr-item","data-black":"P","data-blue":"U","data-category":"purple"},n.a.createElement("span",{className:"colored purple"},"10-",n.a.createElement("span",{className:"black-letter"},"P"),"-",n.a.createElement("span",{className:"blue-letter"},"U"))),n.a.createElement("div",{className:"filtr-item","data-black":"O","data-blue":"S","data-category":"orange"},n.a.createElement("span",{className:"colored orange"},"11-",n.a.createElement("span",{className:"black-letter"},"O"),"-",n.a.createElement("span",{className:"blue-letter"},"S"))),n.a.createElement("div",{className:"filtr-item","data-black":"I","data-blue":"T","data-category":"green"},n.a.createElement("span",{className:"colored green"},"12-",n.a.createElement("span",{className:"black-letter"},"I"),"-",n.a.createElement("span",{className:"blue-letter"},"T")))))),n.a.createElement(j.a.Row,{columns:1},n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Basic sorting"),n.a.createElement("p",null,"Filterizr has some preset options for sorting. In the"," ",n.a.createElement(l.b,{to:"/tutorials/quickstart"},"Get started")," tutorial, in the default sorting controls a select input element is used to determine the value by which Filterizr's elements are ordered:"),n.a.createElement(I.a,{className:"html"},'<select data-sortOrder>\n  <option value="index">Order it appears in DOM</option>\n  <option value="sortData">Value of data-sort attribute</option>\n  \x3c!-- Next two can be used only for layouts of varying widths/heights --\x3e\n  <option value="w">Item Width</option>\n  <option value="h">Item Height</option>\n</select>\n'),n.a.createElement("p",null,"Then you can either use Filterizr's preset controls to sort your elements by that value, or call the corresponding public method like this:"),n.a.createElement(I.a,{className:"javascript"},"//Example 1: sort by item width, descending.\nfilterizr.sort('w', 'desc');\n//Example 2: sort by the value of data-sort attribute, ascending.\nfilterizr.sort('sortData', 'asc');\n")),n.a.createElement(j.a.Column,{mobile:16,computer:8},n.a.createElement(C.a,{as:"h2"},"Advanced sorting"),n.a.createElement("p",null,"If you want to use custom values by which to sort your elements, Filterizr allows you to add arbitrary data-attributes with custom names and values to your items and use them for sorting. For example you could have a grid looking like this:"),n.a.createElement(I.a,{className:"html"},'<div class="filtr-container">\n  <div class="filtr-item" data-category="1" data-author="John Doe" data-year="1998" data-novel="Cool book 1">\n    <img src="img/sample.jpg" alt="sample">\n  </div>\n  <div class="filtr-item" data-category="1" data-author="Jane Doe" data-year="2003" data-novel="Cooler book">\n    <img src="img/sample.jpg" alt="sample">\n  </div>\n  <div class="filtr-item" data-category="1" data-author="Jake Doe" data-year="2008" data-novel="Coolest book">\n    <img src="img/sample.jpg" alt="sample">\n  </div>\n</div>'),n.a.createElement("p",null,"Then all you have to do is add those private data-attribute names to your select input element:"),n.a.createElement(I.a,{className:"html"},'<select data-sortOrder>\n  <option value="index"> Position in DOM </option>\n  \x3c!-- Other options and then... --\x3e\n  <option value="author">Author Name</option>\n  <option value="year">Year Published</option>\n  <option value="novel">Book Title</option>\n</select>'),n.a.createElement("div",{className:"hljs-inline"},"If you are using the default sorting controls that's it! If you wish to use the public API once again you simply pass the value of the option elements as the sort attribute parameter. Just remember to omit the ",n.a.createElement(I.a,{className:"html"},"data-")," part. For example:"),n.a.createElement(I.a,{className:"javascript"},"//Example 1: sort by author name, descending.\nfilterizr.sort('author', 'desc');\n//Example 2: sort by book title, ascending.\nfilterizr.sort('novel', 'asc');\n"))))}}]),t}(n.a.Component));a(549);var He=function(){return n.a.createElement("div",{className:"App"},n.a.createElement(l.a,null,n.a.createElement(w,null),n.a.createElement("main",null,n.a.createElement(s.a,{path:"/",exact:!0,component:Me}),n.a.createElement(s.a,{path:"/documentation/:variation",component:ce}),n.a.createElement(s.a,{path:"/faq",exact:!0,component:pe}),n.a.createElement(s.a,{path:"/tutorials/quickstart",exact:!0,component:ge}),n.a.createElement(s.a,{path:"/tutorials/filtering",exact:!0,component:he}),n.a.createElement(s.a,{path:"/tutorials/sorting",exact:!0,component:Be}),n.a.createElement(s.a,{path:"/tutorials/searching",exact:!0,component:ye}),n.a.createElement(s.a,{path:"/tutorials/delay-modes",exact:!0,component:P}),n.a.createElement(s.a,{path:"/tutorials/layouts",exact:!0,component:fe}),n.a.createElement(s.a,{path:"/tutorials/as-jquery-plugin",exact:!0,component:z}))),n.a.createElement(F,null))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));a(550),a(551);o.a.render(n.a.createElement(He,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then(function(e){e.unregister()})}},[[214,1,2]]]);
//# sourceMappingURL=main.cdedcec6.chunk.js.map