https://www.semex.com/proof2016/js/cubeportfolio/main.js

1(function($, window, document, undefined) {
2    'use strict';
3
4    var gridContainer = $('#grid-container'),
5        filtersContainer = $('#filters-container'),
6        wrap, filtersCallback;
7
8
9    /*********************************
10        init cubeportfolio
11     *********************************/
12    gridContainer.cubeportfolio({
13        defaultFilter: '*',
14        animationType: 'fadeOutTop',
15        gapHorizontal: 0,
16        gapVertical: 0,
17        gridAdjustment: 'responsive',
18        mediaQueries: [{
19            width: 1600,
20            cols: 4
21        },{
22            width: 1200,
23            cols: 4
24        }, {
25            width: 800,
26            cols: 3
27        }, {
28            width: 500,
29            cols: 2
30        }, {
31            width: 320,
32            cols: 1
33        }],
34        caption: 'zoom',
35        displayType: 'lazyLoading',
36        displayTypeSpeed: 100,
37
38        // lightbox
39        lightboxDelegate: '.cbp-lightbox',
40        lightboxGallery: true,
41        lightboxTitleSrc: 'data-title',
42        lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
43
44        // singlePage popup
45        singlePageDelegate: '.cbp-singlePage',
46        singlePageDeeplinking: true,
47        singlePageStickyNavigation: true,
48        singlePageCounter: '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>',
49        singlePageCallback: function(url, element) {
50            // to update singlePage content use the following method: this.updateSinglePage(yourContent)
51        },
52
53        // singlePageInline
54        singlePageInlineDelegate: '.cbp-singlePageInline',
55        singlePageInlinePosition: 'above',
56        singlePageInlineInFocus: true,
57        singlePageInlineCallback: function(url, element) {
58            // to update singlePageInline content use the following method: this.updateSinglePageInline(yourContent)
59        }
60    });
61
62
63    /*********************************
64        add listener for filters
65     *********************************/
66    if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
67        wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');
68
69        wrap.on({
70            'mouseover.cbp': function() {
71                wrap.addClass('cbp-l-filters-dropdownWrap-open');
72            },
73            'mouseleave.cbp': function() {
74                wrap.removeClass('cbp-l-filters-dropdownWrap-open');
75            }
76        });
77
78        filtersCallback = function(me) {
79            wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
80            wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
81            me.addClass('cbp-filter-item-active');
82            wrap.trigger('mouseleave.cbp');
83        };
84    } else {
85        filtersCallback = function(me) {
86            me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
87        };
88    }
89
90    filtersContainer.on('click.cbp', '.cbp-filter-item', function() {
91        var me = $(this);
92
93        if (me.hasClass('cbp-filter-item-active')) {
94            return;
95        }
96
97        // get cubeportfolio data and check if is still animating (reposition) the items.
98        if (!$.data(gridContainer[0], 'cubeportfolio').isAnimating) {
99            filtersCallback.call(null, me);
100        }
101
102        // filter the items
103        gridContainer.cubeportfolio('filter', me.data('filter'), function() {});
104    });
105
106
107    /*********************************
108        activate counter for filters
109     *********************************/
110    gridContainer.cubeportfolio('showCounter', filtersContainer.find('.cbp-filter-item'), function() {
111        // read from url and change filter active
112        var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
113            item;
114        if (match !== null) {
115            item = filtersContainer.find('.cbp-filter-item').filter('[data-filter="' + match[1] + '"]');
116            if (item.length) {
117                filtersCallback.call(null, item);
118            }
119        }
120    });
121
122
123    /*********************************
124        add load more functionality
125     *********************************/
126    var loadMoreObject = Object.create({
127            init: function() {
128                var t = this;
129
130                // the job inactive
131                t.isActive = false;

132
133                t.numberOfClicks = 0;
134
135                // cache link selector
136                t.loadMore = $('.cbp-l-loadMore-text-link');
137
138                // cache window selector
139                t.window = $(window);
140
141                // add events for scroll
142                t.addEvents();
143
144                // trigger method on init
145                t.getNewItems();
146
147                return t;
148            },
149
150            addEvents: function() {
151                var t = this;
152
153                t.window.on("scroll.loadMoreObject", function() {
154                    // get new items on scroll
155                    t.getNewItems();
156                });
157            },
158
159            getNewItems: function() {
160                var t = this,
161                    topLoadMore, topWindow;
162
163                if (t.isActive || t.loadMore.hasClass('cbp-l-loadMore-text-stop')) {
164                    return;
165                }
166
167                //topLoadMore = t.loadMore.offset().top;
168                topWindow = t.window.scrollTop() + t.window.height();
169
170                if (topLoadMore > topWindow) {
171                    return;
172                }
173
174                // this job is now busy
175                t.isActive = true;
176
177                // increment number of clicks
178                t.numberOfClicks++;
179
180                // perform ajax request
181                $.ajax({
182                        url: t.loadMore.attr('data-href'),
183                        type: 'GET',
184                        dataType: 'HTML',
185                        cache: true
186                    })
187                    .done(function(result) {
188                        var items, itemsNext;
189
190                        // find current container
191                        items = $(result).filter(function() {
192                            return $(this).is('div' + '.cbp-loadMore-block' + t.numberOfClicks);
193                        });
194
195                        gridContainer.cubeportfolio('appendItems', items.html(),
196                            function() {
197                                // check if we have more works
198                                itemsNext = $(result).filter(function() {
199                                    return $(this).is('div' + '.cbp-loadMore-block' + (t.numberOfClicks + 1));
200                                });
201
202                                if (itemsNext.length === 0) {
203
204                                    t.loadMore.text('NO MORE ENTRIES');
205                                    t.loadMore.addClass('cbp-l-loadMore-text-stop');
206
207                                    t.window.off("scroll.loadMoreObject");
208
209                                } else {
210                                    // make the job inactive
211                                    t.isActive = false;
212
213                                    //topLoadMore = t.loadMore.offset().top;
214                                    topWindow = t.window.scrollTop() + t.window.height();
215
216                                    if (topLoadMore <= topWindow) {
217                                        t.getNewItems();
218                                    }
219                                }
220
221                            });
222
223                    })
224                    .fail(function() {
225                        // make the job inactive
226                        t.isActive = false;
227                    });
228            }
229        }).init();
230
231    // when the height of grid is changed
232    gridContainer.on('filterComplete.cbp', function() {
233        loadMoreObject.window.trigger('scroll.loadMoreObject');
234    });
235
236})(jQuery, window, document);