https://welcomebreak.co.uk/wp-content/themes/cn-core-theme/assets/js/modules/grid-filter.js

1var CN = CN || {};
2
3/**
4 * Create the object literal
5 * @param {object} el The object element with the data-attribute
6 */
7CN.GridFilter = function(el, customSettings) {
8
9    // Ability to pass custom settings array
10    this.customSettings = customSettings || {};
11
12    this.elements = {
13        base: el,
14    };
15
16    // Setup options based on any customSettings added
17    this.setupOptions();
18
19    this.grid = {};
20
21    // Initialise this module
22    this.init();
23};
24
25CN.GridFilter.prototype.init = function() {
26
27    var _this = this;
28
29    // Initialise Isotope grid
30    _this.grid = _this.elements.container.isotope({
31        itemSelector: _this.customSettings.itemSelector,
32        layoutMode: _this.customSettings.layoutMode,
33        stagger: _this.customSettings.stagger,
34        transitionDuration: _this.customSettings.transitionDuration,
35        getSortData: _this.customSettings.getSortData,
36        sortBy: 'sortOrder',
37        sortAscending: _this.customSettings.sortAscending,
38        masonry: {
39            columnWidth: '.grid-sizer'
40        }
41    });
42
43    // Add classes for hidden Isotope elements
44    var itemHide   = Isotope.Item.prototype.hide;
45    var itemReveal = Isotope.Item.prototype.reveal;
46
47    Isotope.Item.prototype.hide = function() {
48        itemHide.apply( this, arguments );
49        $( this.element ).addClass('isotope-hidden');
50    };
51
52    Isotope.Item.prototype.reveal = function() {
53        itemReveal.apply( this, arguments );
54        $( this.element ).removeClass('isotope-hidden');
55    };
56
57    // Perform initial filter
58    _this.filter();
59
60    // Watch for filter changes
61    _this.elements.filterEl.on('change', function() {
62        _this.filter();
63    });
64
65    // Relayout the grid after SiteOrigin stretches rows
66    (function(grid) {
67        return $( window ).on( 'panelsStretchRows', function() {
68            if(grid && grid.data('isotope')) {
69                grid.isotope('layout');
70            }
71        } );
72    })(_this.grid);
73};
74
75CN.GridFilter.prototype.filter = function() {
76
77    var _this = this,
78        filter = _this.customSettings.defaultFilter;
79
80    _this.elements.filterSelect.each(function(index) {
81
82        var filterType = $(this).data('grid-filter'),
83            filterValue = $(this).val(),
84            filterNode = $(this).prop('nodeName');
85
86        switch (filterNode) {
87
88            case 'SELECT':
89                if (filterValue && filterValue !== '*') {
90                    if (filterValue && typeof filterValue === 'object') {
91                        $.each(filterValue, function (key, value) {
92                            filter += '[data-filter-' + filterType + '*=' + value + ']';
93                        });
94                    } else {
95                        filter += '[data-filter-' + filterType + '*=' + filterValue + ']';
96                    }
97
98                    _this.elements.base.find('[data-filter-term]').removeClass('is-active');
99                    _this.elements.base.find('[data-filter-term="' + filterValue + '"]').addClass('is-active');
100                }
101                break;
102
103            case 'INPUT':
104                if (filterValue === '*') {
105                    _this.elements.base.find('[data-filter-term]').removeClass('is-active');
106                }
107
108                if ($(this).prop('checked') && filterValue !== '*') {
109                    filter += '[data-filter-' + filterType + '*=' + filterValue + '], ';
110                    _this.elements.base.find('[data-filter-term]').removeClass('is-active');
111                    _this.elements.base.find('[data-filter-term="' + filterValue + '"]').addClass('is-active');
112                }
113
114                if (filterValue === '*') {
115                    _this.elements.base.find('[data-filter-term="' + filterValue + '"]').addClass('is-active');
116                }
117                break;
118        }
119    });
120
121    var separatorPosition = filter.lastIndexOf(', ');
122
123    filter = filter.substring(0,separatorPosition) + filter.substring(separatorPosition+1);
124
125    _this.grid.isotope({ filter: filter.replace(/\s+/g, '') });
126
127    $(_this.customSettings.itemSelector).removeAttr('data-grid-item-index');
128
129    $.each(_this.grid.data('isotope').filteredItems, function (index, item) {
130        var el = $(item.element);
131        el.attr('data-grid-item-index', index);
132    });
133
134    var noResultsText = _this.elements.base.find('.js-no-results');
135    if (noResultsText){
136        if (_this.grid.data('isotope').filteredItems.length < 1 ){
137            noResultsText.show();
138        }else{
139            noResultsText.hide();
140        }
141    }
142};
143
144CN.GridFilter.prototype.setupOptions = function() {
145
146    var _this = this;
147
148    /**
149     * Firstly check for element selectors
150     */
151    if (typeof _this.customSettings.container === 'undefined') {
152        _this.elements.container = _this.elements.base.find('.js-grid-container');
153    } else {
154        _this.elements.container = _this.customSettings.container;
155    }
156    if (typeof _this.customSettings.item === 'undefined') {
157        _this.elements.item = _this.elements.base.find('.js-grid-item');
158    } else {
159        _this.elements.item = _this.customSettings.item;
160    }
161    if (typeof _this.customSettings.filterEl === 'undefined') {
162        _this.elements.filterEl = _this.elements.base.find('.js-filter');
163    } else {
164        _this.elements.filterEl = _this.customSettings.filterEl;
165    }
166    if (typeof _this.customSettings.filterSelect === 'undefined') {
167        _this.elements.filterSelect = _this.elements.base.find('[data-grid-filter]');
168    } else {
169        _this.elements.filterSelect = _this.customSettings.filterSelect;
170    }
171    if (typeof _this.customSettings.defaultFilter === 'undefined') {
172        _this.customSettings.defaultFilter = '';
173    }
174
175    /**
176     * Check for isotope init settings
177     */
178    if (typeof _this.customSettings.itemSelector === 'undefined') {
179        _this.customSettings.itemSelector = '.js-grid-item';
180    }
181    if (typeof _this.customSettings.layoutMode === 'undefined') {
182        _this.customSettings.layoutMode = 'fitRows';
183    }
184    if (typeof _this.customSettings.stagger === 'undefined') {
185        _this.customSettings.stagger = 50;
186    }
187    if (typeof _this.customSettings.transitionDuration === 'undefined') {
188        _this.customSettings.transitionDuration = 400;
189    }
190    if (typeof _this.customSettings.sortAscending === 'undefined') {
191        _this.customSettings.sortAscending = true;
192    }
193    if (typeof _this.customSettings.getSortData === 'undefined') {
194        _this.customSettings.getSortData = {
195            sortOrder: '[data-sort-order] parseInt'
196        }
197    }
198};