PageSourceSearch

https://www.daltile.com/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-daterange.js

js daltile.com collected 2026-09-24 19:03:30 UTC 13,356 bytes, 305 lines download raw bytes

1/**
2 * Includes functionality for daterange component
3 * @module facetDateRange
4 * @param  {jQuery} $ Instance of jQuery
5 * @param  {Document} document dom document object
6 * @return {Object} list of methods for working with date range component
7*/
8XA.component.search.facet.daterange = (function ($, document) {
9    /**
10    * This object stores all public api methods
11    * @type {Object.<Methods>}
12    * @memberOf module:facetDateRange
13    * */
14    var api = {}, queryModel, urlHelperModel, toUrlDate, fromUrlDate;
15    /**
16     * format date
17     * @param {String} date date that should be formatted
18     * @private
19     * @memberof module:facetDateRange
20     * @alias module:facetDateRange.toUrlDate
21     * @returns {String} date in format 'yymmdd'
22     */
23    toUrlDate = function (date) {
24        return date !== null && date !== "" ? $.datepicker.formatDate('yymmdd', date) : "";
25    };
26    /**
27     * format date from url
28     * @private
29     * @param {String} dateString date that should be formatted
30     * @memberof module:facetDateRange
31     * @alias module:facetDateRange.fromUrlDate
32     * @returns {Date} date
33     */
34    fromUrlDate = function (dateString) {
35        var y = dateString.substr(0, 4),
36            m = dateString.substr(4, 2) - 1,
37            d = dateString.substr(6, 2),
38            D = new Date(y, m, d);
39
40        if (dateString === "") {
41            return;
42        }
43
44        if (D.getFullYear() == y && D.getMonth() == m && D.getDate() == d)
45            return D;
46        else
47            throw "Invalid date: " + dateString;
48    };
49    /**
50    * @name module:facetDateRange.FacetDateRangeModel
51    * @constructor
52    * @augments Backbone.Model
53    */
54    var FacetDateRangeModel = Backbone.Model.extend(
55        /** @lends module:facetDateRange.FacetDateRangeModel.prototype **/
56        {
57            /**
58           * Default model options
59           * @default
60           */
61            defaults: {
62                dataProperties: {},
63                sig: []
64            }
65        });
66    /**
67      * @name module:facetDateRange.FacetDateRangeView
68      * @constructor
69      * @augments Backbone.View
70      */
71    var FacetDateRangeView = XA.component.search.baseView.extend(
72        /** @lends module:facetDateRange.FacetDateRangeView.prototype **/
73        {
74            /**
75            * Initially sets data to model and watches events on which
76            * view should be updated
77            * @listens module:facetDateRange.FacetDateRangeView~event:change
78            * @listens module:XA.component.search.vent~event:hashChanged
79            * @memberof module:facetDateRange.FacetDateRangeView
80            */
81            initialize: function () {
82                this.properties = this.$el.data().properties;
83                if (this.model) {
84                    this.model.set({ dataProperties: this.properties });
85                    this.model.set("sig", this.translateSignatures(this.properties.searchResultsSignature, this.properties.f));
86                }
87                this.model.on("change", this.render, this);
88                
89                XA.component.search.vent.on("hashChanged", this.updateComponent.bind(this));
90            },
91            /**
92             * list of events for Backbone View
93             * @memberof module:facetDateRange.FacetDateRangeView
94             * @alias module:facetDateRange.FacetDateRangeView#events
95             */
96            events: {
97                'change .startDate': 'updateFacet',
98                'change .endDate': 'updateFacet',
99                'click .bottom-remove-filter, .clear-filter': 'clearFilter'
100            },
101            /**
102             * Renders view. Use jquery ui datepicker
103             * @memberof module:facetDateRange.FacetDateRangeView
104             * @alias module:facetDateRange.FacetDateRangeView#render
105             */
106            render: function () {
107                var fromDateDefaultOffset = parseInt(this.model.get('dataProperties').fromDateDefaultOffset),
108                    toDateDefaultOffset = parseInt(this.model.get('dataProperties').toDateDefaultOffset),
109                    fromDateFormat = this.model.get('dataProperties').fromDateDisplayFormat,
110                    toDateFormat = this.model.get('dataProperties').toDateDisplayFormat,
111                    fromDateMonthsShown = this.model.get('dataProperties').fromDateMonthsShown,
112                    toDateMonthsShown = this.model.get('dataProperties').toDateMonthsShown,
113                    fromDatePastDays = this.model.get('dataProperties').fromDatePastDays,
114                    toDateFutureDays = this.model.get('dataProperties').toDateFutureDays,
115                    fromDateVisible = this.model.get('dataProperties').fromDateVisible,
116                    toDateVisible = this.model.get('dataProperties').toDateVisible,
117                    $fromDate = this.$el.find('.startDate'),
118                    $toDate = this.$el.find('.endDate'),
119                    hashObj = queryModel.parseHashParameters(window.location.hash),
120                    sig = this.model.get('sig'),
121                    lang = $("html").attr("lang") ? $("html").attr("lang") : "",
122                    inOverlay = this.$el.closest('.overlay-inner').length,
123                    dates, i;
124
125                if (toDateFormat) {
126                    toDateFormat = toDateFormat.replace(/yy/g, "y");
127                }
128                if (fromDateFormat) {
129                    fromDateFormat = fromDateFormat.replace(/yy/g, "y");
130                }
131
132                if (fromDateVisible) {
133                    $fromDate.datepicker({
134                        dateFormat: fromDateFormat,
135                        changeMonth: fromDateMonthsShown,
136                        changeYear: fromDateMonthsShown,
137                        minDate: fromDatePastDays ? (fromDateDefaultOffset != '' ? -1 * fromDateDefaultOffset : new Date(1900, 1, 1)) : new Date(),
138                        beforeShow: inOverlay ? this.overrideZIndex : undefined
139                    });
140                }
141
142                if (toDateVisible) {
143                    $toDate.datepicker({
144                        dateFormat: toDateFormat,
145                        changeMonth: toDateMonthsShown,
146                        changeYear: toDateMonthsShown,
147                        maxDate: toDateFutureDays ? (toDateDefaultOffset != '' ? toDateDefaultOffset : new Date(2100, 1, 1)) : new Date(),
148                        beforeShow: inOverlay ? this.overrideZIndex : undefined
149                    });
150                }
151                $xa.datepicker.setDefaults($xa.datepicker.regional[lang]);
152                for (i = 0; i < sig.length; i++) {
153                    if (hashObj.hasOwnProperty(sig[i]) && hashObj[sig[i]] != '') {
154                        dates = hashObj[sig[i]].split("|");
155                        $fromDate.datepicker("setDate", fromUrlDate(dates[0]));
156                        $toDate.datepicker("setDate", fromUrlDate(dates[1]));
157                    }
158                }
159            },
160            /**
161            * Updates hash by calling ["updateHash"]{@link module:searchQuery.updateHash}
162            * @memberof module:facetDateRange.FacetDateRangeView
163            * @alias module:facetDateRange.FacetDateRangeView#updateFacet
164            */
165            updateFacet: function (param) {
166                var $facetClose = this.$el.find('.facet-heading > span'),
167                    $fromDate = this.$el.find('.startDate'),
168                    $toDate = this.$el.find('.endDate'),
169                    fromDate = $fromDate.length > 0 ? $fromDate.datepicker("getDate") : null,
170                    toDate = $toDate.length > 0 ? $toDate.datepicker("getDate") : null,
171                    sig = this.model.get('sig');
172
173                queryModel.updateHash(this.updateSignaturesHash(sig, toUrlDate(fromDate) + "|" + toUrlDate(toDate), {}));
174                $facetClose.addClass('has-active-facet');
175            },
176            /**
177            * Clears selected filter in component
178            * @param {Object} param
179            * @memberof module:facetDateRange.FacetDateRangeView
180            * @alias module:facetDateRange.FacetDateRangeView#clearFilter
181            */
182            clearFilter: function (param) {
183                var properties = this.model.get('dataProperties'),
184                    $facetClose = this.$el.find('.facet-heading > span'),
185                    hash = queryModel.parseHashParameters(window.location.hash),
186                    sig = this.model.get('sig'),
187                    shouldClear = false,
188                    facetData,
189                    i;
190
191                $facetClose.removeClass('has-active-facet');
192
193                for (i = 0; i < sig.length; i++) {  
194                    facetData = sig[i];
195                    if (typeof hash[facetData] !== "undefined" && hash[facetData] !== "") {                                      
196                        delete properties[facetData];
197                        shouldClear = true;
198                    }
199                }
200
201                if (!shouldClear) {
202                    return;
203                }
204
205                queryModel.updateHash(this.updateSignaturesHash(sig, "", hash));
206
207                this.model.set({ dataProperties: properties });
208
209                this.$el.find('.startDate').val("");
210                this.$el.find('.endDate').val("");
211            },
212            /**
213            * Updates component after changes in hash
214            * @param {Object} hash object that stores hash values
215            * @memberof module:facetDateRange.FacetDateRangeView
216            * @alias module:facetDateRange.FacetDateRangeView#updateComponent
217            */
218            updateComponent: function (hash) {
219                var $fromDate = this.$el.find('.startDate'),
220                    $toDate = this.$el.find('.endDate'),
221                    sig = this.model.get('sig'),
222                    facetPart,
223                    dates,
224                    i;
225
226                for (i = 0; i < sig.length; i++) {
227                    facetPart = sig[i].toLowerCase();
228                    if (hash.hasOwnProperty(facetPart) && hash[facetPart] !== '') {
229                        dates = hash[facetPart].split("|");
230                        if (dates[0] !== "") {
231                            this.handleDate($fromDate, dates[0]);
232                        }
233                        if (dates[1] !== "") {
234                            this.handleDate($toDate, dates[1]);
235                        }
236                    } else {
237                        this.clearFilter();
238                    }
239                }
240            },
241            /**
242            * Updates datepicker date
243            * @param {jQuery<DomElement>} control element where start date specified
244            * @param {String} value date that should be set  
245            * @memberof module:facetDateRange.FacetDateRangeView
246            * @alias module:facetDateRange.FacetDateRangeView#handleDate
247            */
248            handleDate: function (control, value) {
249                var $facetClose = this.$el.find('.facet-heading > span');
250                if (control.length !== 0 && toUrlDate(control.datepicker('getDate')) !== value) {
251                    control.datepicker("setDate", fromUrlDate(value));
252                    $facetClose.addClass('has-active-facet');
253                } else if (value === "") {
254                    control.datepicker('setDate', null);
255                }
256            },
257            /**
258             * Override default datepicker z-index
259             * to show datepicker in overlay
260             * @memberof module:facetDateRange.FacetDateRangeView
261             * @alias module:facetDateRange.FacetDateRangeView#overrideZIndex
262             */
263            overrideZIndex: function() {
264                setTimeout(function () {
265                    var $el = $('.ui-datepicker'),
266                        style = $el.attr('style');
267
268                    $el.attr('style', style + 'z-index: 10000 !important')
269                }, 0);
270            }
271        });
272
273    /**
274    * For each search date range on a page creates instance of 
275    * ["FacetDateRangeModel"]{@link module:facetDateRange.FacetDateRangeModel} and 
276    * ["FacetDateRangeView"]{@link module:facetDateRange.FacetDateRangeView} 
277    * @memberOf module:facetDateRange
278    * @alias module:facetDateRange.init
279    */
280    api.init = function () {
281        if ($("body").hasClass("on-page-editor")) {
282            return;
283        }
284
285        queryModel = XA.component.search.query;
286        urlHelperModel = XA.component.search.url;
287
288        var facetDateRangesList = $(".facet-date-range:not(.initialized)");
289
290        _.each(facetDateRangesList, function (elem) {
291            var $el = $(elem),
292                model = new FacetDateRangeModel(),
293                view = new FacetDateRangeView({ el: $el, model: model });
294
295            view.render();
296
297            $el.addClass("initialized");
298        });
299    };
300
301    return api;
302
303}(jQuery, document));
304
305XA.register('facetDateRange', XA.component.search.facet.daterange);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.