https://www.experiencesbynick.com/packages/theme_nickexperiences/b…=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba

1/**
2 * Define Globals
3 */
4const RANGE_TYPE = 'input[type=range]:not(.custom-range):not(.multi-range)';
5const RANGE_WRAPPER = '.range-field';
6let ORDER_BY = ['is_featured_desc', 'oldest'];
7
8// Processes the cards returned
9const formatCards = function (data) {
10    return new Promise((resolve) => {
11        //console.log("card filter data", data);
12        $.each(data, function (index, cardRaw) {
13            const card = Object.assign({}, cardRaw, MUSTACHE_FUNCTIONS);
14            switch (card.type) {
15                case 'experience_parent':
16                case 'experience_entry':
17                    $("#cardsShow").append(
18                        Mustache.render(
19                            '<div class="col-sm-6 col-lg-4 col-xl-3 p-0 p-sm-3 mb-4 card-box more-results animate">' +
20                            '<div class="card card-wrapper">' +
21                            '<div id="card-{{id}}" class="card-rotating text-center">' +
22                            '<div class="face front h-100">' +
23                            '<a class="rotate-btn" data-card="card-{{id}}">' +
24                            '<div class="card-up">' +
25                            '<img class="card-img-top lazyload" src="{{#getImage}}{{thumbnail}}{{/getImage}}"/>' +
26                            '</div> ' +
27                            '<div class="avatar mx-auto rounded-circle {{#getExperienceStyle}}{{experience_type}}{{/getExperienceStyle}}"><img src="{{#getExperienceImage}}{{experience_type}}{{/getExperienceImage}}" class="card-svg {{#getExperienceStyle}}{{experience_type}}{{/getExperienceStyle}}" alt=""></div>' +
28                            '<div class="card-body">' +
29                            '<h4 class="font-weight-bold text-uppercase mb-0">{{name}}</h4>' +
30                            '{{#marketing_city}} {{marketing_city}} {{/marketing_city}}' +
31                            '{{#marketing_state}}{{marketing_state}} {{/marketing_state}}' +
32                            '{{#marketing_country}}{{marketing_country}}{{/marketing_country}}' +
33                            '{{#formatDate}}{{type}}|{{marketing_date}}|{{public_date}}{{/formatDate}}' +
34                            '</div>' +
35                            '</a>' +
36                            '<div class="card-footer"><a class="rotate-btn" data-card="card-{{id}}"><i class="fas fa-redo-alt rounded-circle bg--green p-2"></i> </a></div>' +
37                            '</div>' +
38                            '<div class="face back h-100">' +
39                            '<div class="card-body">' +
40                            '<h4 class="font-bold mb-2">{{name}}</h4>' +
41                            '<p>{{description}}</p>' +
42                            '{{#getExternalUrl}}{{type}},{{ticket_url_name}},{{ticket_url}},{{parent_link}},{{link}}{{/getExternalUrl}}' +
43                            '</div>' +
44                            '<div class="card-footer">' +
45                            '<a class="rotate-btn p-2 text-uppercase" data-card="card-{{id}}">return <i class="fas fa-undo rounded-circle border p-2"></i> to front</a>' +
46                            '</div>' +
47                            '</div>' +
48                            '</div>' +
49                            '</div>',
50                            card,
51                        ),
52                    );
53                    break;
54                case 'special_offer_entry':
55                    $("#cardsShow").append(
56                        Mustache.render(
57                            '<div class="col-sm-6 col-lg-4 col-xl-3 p-0 p-sm-3 mb-4 card-box more-results animate">' +
58                            '<div class="card card-wrapper card-image">' +
59                            '<div id="card-{{id}}" class="card-rotating text-center">' +
60                            '<div class="face front h-100" {{#show_card_slime}} style="background-image: url(/application/files/6815/5803/0298/bg_card_drip.png);"{{/show_card_slime}}' +
61                            '{{^show_card_slime}} style="background-color: #DE4F02;"{{/show_card_slime}}>' +
62                            '<a class="rotate-btn" data-card="card-{{id}}">' +
63                            '<div class="card-body h-75 d-flex align-items-center">' +
64                            '<div class="card-image-title font-bold text-uppercase">{{name}}</div>' +
65                            '</div>' +
66                            '</a>' +
67                            '<div class="card-footer"><a class="rotate-btn" data-card="card-{{id}}"><i class="fas fa-redo-alt rounded-circle bg--green p-2"></i> </a></div>' +
68                            '</div>' +
69                            '<div class="face back h-100">' +
70                            '<div class="card-body">' +
71                            '<h4 class="font-bold mb-2">{{name}}</h4>' +
72                            '<p>{{description}}</p>' +
73                            '{{#getExternalUrl}}{{type}},{{ticket_url_name}},{{ticket_url}},{{link}}{{/getExternalUrl}}' +
74                            '</div>' +
75                            '<div class="card-footer">' +
76                            '<a class="rotate-btn p-2 text-uppercase" data-card="card-{{id}}">return <i class="fas fa-undo rounded-circle border p-2"></i> to front</a>' +
77                            '</div>' +
78                            '</div>' +
79                            '</div>' +
80                            '</div>',
81                            card,
82                        ),
83                    );
84                    break;
85                default:
86                    $("#cardsShow").append(
87                        Mustache.render(
88                            '<div class="col-sm-6 col-lg-4 col-xl-3 p-0 p-sm-3 mb-4 card-box more-results animate">' +
89                            '<div class="card card-wrapper">' +
90                            '<div id="card-{{id}}" class="card-rotating text-center">' +
91                            '<div class="face front h-100">' +
92                            '<a class="rotate-btn" data-card="card-{{id}}">' +
93                            '<div class="card-body">' +
94                            '<h4 class="font-weight-bold text-uppercase mb-0">{{name}}</h4>' +
95                            '{{#formatDate}}{{type}}|{{marketing_date}}|{{public_date}}{{/formatDate}}' +
96                            '</div>' +
97                            '<div class="card-up">' +
98                            '<img class="card-img-top lazyload" src="{{#getImage}}{{thumbnail}}{{/getImage}}"/>' +
99                            '</div>' +
100                            '</a>' +
101                            '<div class="card-footer"><a class="rotate-btn" data-card="card-{{id}}"><i class="fas fa-redo-alt rounded-circle bg--green p-2"></i> </a></div>' +
102                            '</div>' +
103                            '<div class="face back h-100">' +
104                            '<div class="card-body">' +
105                            '<h4 class="font-bold mb-2">{{name}}</h4>' +
106                            '<p>{{description}}</p>' +
107                            '{{#getExternalUrl}}{{type}},{{ticket_url_name}},{{ticket_url}},{{parent_link}},{{link}}{{/getExternalUrl}}' +
108                            '</div>' +
109                            '<div class="card-footer">' +
110                            '<a class="rotate-btn p-2 text-uppercase" data-card="card-{{id}}">return <i class="fas fa-undo rounded-circle border p-2"></i> to front</a>' +
111                            '</div>' +
112                            '</div>' +
113                            '</div>' +
114                            '</div>',
115                            card,
116                        ),
117                    );
118            }
119        });
120        return resolve();
121    });
122};
123$(document).ready(function () {
124    /**
125     * Define Scope Functions
126     */
127    // Setup the countries dropdown with a cleared list and blank option
128    const setupCountries = function () {
129        $("#countrySelect").children('option:not(:first)').remove();
130        setupStates();
131    };
132    // Setup the states dropdown with a cleared list and blank option
133    const setupStates = function (country) {
134        $("#stateSelect").children('option:not(:first)').remove();
135        switch (country) {
136            case 'US':
137                $("#stateDropdown").show();
138                if (!STATES.hasOwnProperty(country)) {
139                    return;
140                }
141                const states = STATES[country].sort(function (a, b) {
142                    const nameA = a.name.toUpperCase();
143                    const nameB = b.name.toUpperCase();
144                    if (nameA > nameB) {
145                        return 1;
146                    } else if (nameA < nameB) {
147                        return -1;
148                    }
149                    return 0;
150                });
151                $.each(states, function (key, entry) {
152                    $("#stateSelect").append($("<option></option>").attr('value', entry.abbreviation).text(entry.name));
153                });
154                break;
155            default:
156                $('#stateDropdown').hide();
157        }
158    };
159    /**
160     * Declare Event Functions
161     */
162    // Price Range Change Value to show $$$$$
163    $(document).on('change', RANGE_TYPE, function () {
164        const $thumb = $(this).siblings('.thumb');
165        const $thumbValue = $thumb.find('.value');
166        switch ($thumb.context.value) {
167            case '1':
168                $thumbValue.html('');
169                break;
170            case '2':
171                $thumbValue.html('$$');
172                $(".range-field span.thumb").removeClass('d-none');
173                $("span.value").removeClass('d-none');
174                break;
175            case '3':
176                $thumbValue.html('$$$');
177                $("span.value").removeClass('d-none');
178                break;
179            case '4':
180                $thumbValue.html('');
181                break;
182            default:
183        }
184        // Price Range on change, mouseover and touchmove to hide range value that is added by default styling
185        $(document).on('input mousedown touchstart', RANGE_TYPE, function () {
186            $("span.value").addClass('d-none');
187        });
188        $(document).on('mousemove touchmove', RANGE_WRAPPER, function () {
189            $thumb.hide();
190        });
191    });
192    /**
193     * Main Execution
194     */
195    // Keep elements aligned
196    $("#noResults").insertAfter('#cardsShow');
197    $("#spinner").insertAfter('#cardsShow');
198    $("#btn-more-results").insertAfter('#cardsShow');
199    // For default CMS page list block
200    loadSVGResults();
201    // Get list of countries for filter
202    setupCountries();
203    getCountries(processParams()).then(function (countries) {
204        $.each(countries, function (key, entry) {
205            $("#countrySelect").append($("<option></option>").attr('value', entry.abbreviation).text(entry.name));
206            STATES[entry.abbreviation] = entry.states;
207        });
208    }).catch(console.error);
209    // Get the cached pins for the map
210    sessionStorage.removeItem('pins');
211    getPins();
212    // Get the cards with default values
213    getCards().catch(console.error);
214    // Update list of states based on country
215    $("#countrySelect").change(function () {
216        setupStates($(this).val());
217    });
218    // Sort cards by recent
219    $(".btnSort_recent").on('click', function (e) {
220        ORDER_BY = ['recent'];
221        $('#cardsShow').fadeOut(400, function () {
222            $(this).empty().show();
223        });
224        getCards(false).then((data) => {
225            return formatCards(data);
226        }).catch(console.error).then(function () {
227            $("#filterList").removeClass("disabled overlay");
228            $("#btn-more-results").removeClass("d-none");
229        });
230    });
231    // Sort cards by featured
232    $(".btnSort_featured").on('click', function (e) {
233        ORDER_BY = ['is_featured_desc', 'oldest'];
234        $('#cardsShow').fadeOut(400, function () {
235            $(this).empty().show();
236        });
237        getCards(false).then((data) => {
238            return formatCards(data);
239        }).catch(console.error).then(function () {
240            $("#filterList").removeClass("disabled overlay");
241            $("#btn-more-results").removeClass("d-none");
242        });
243    });
244    // Reset Button
245    $(".resetBtn").on('click', function (e) {
246        FILTERED = false;

247        ORDER_BY = ['is_featured_desc', 'oldest'];
248        $('#cardsShow').fadeOut(400, function () {
249            $(this).empty().show();
250        });
251        $("#cards-tab .btnSort_featured").trigger('click');
252        $("input:checkbox").removeAttr('checked');
253        $("#countrySelect").find('option').attr("selected", false);
254        $("#stateSelect").find('option').attr("selected", false);
255        getPins().then(function (pins) {
256            leafletMapInit(filterPins(pins, processParams(false)), false);
257            //locationMapInit(filterPins(pins, processParams(false)));
258        });
259        getCards().then((data) => {
260            return formatCards(data);
261        }).catch(console.error).then(function () {
262            $("#filterList").removeClass("disabled overlay");
263            $("#btn-more-results").removeClass("d-none");
264        });
265    });
266});