https://www.stlouisfed.org/-/media/base-themes/searchtheme/scripts/component-search-radius-filter.js

1/**
2 * Radius filter component functionality
3 * @module radiusFilter
4 * @param  {jQuery} $ Instance of jQuery
5 * @param  {Document} document dom document object
6 * @return {Object} list of methods for working with radius filter
7*/
8XA.component.search.radiusFilter = function ($, document) {
9    /**
10    * This object stores all public api methods
11    * @type {Object.<Methods>}
12    * @memberOf module:radiusFilter
13    */
14    var api = {},
15        initializeComponent,
16        RadiusFilterModel,
17        RadiusFilterView,
18        queryModel,
19        urlHelperModel;
20
21	/**
22    * @name module:radiusFilter.RadiusFilterModel
23    * @constructor
24    * @augments Backbone.Model
25    */
26    RadiusFilterModel = Backbone.Model.extend(
27        /** @lends module:radiusFilter.RadiusFilterModel.prototype **/
28        {
29            /**
30            * Default model options
31            * @default
32            */
33            defaults: {
34                properties: [],
35                selected: {},
36                sig: []
37            }
38        });
39    /**
40    * @name module:radiusFilter.RadiusFilterView
41    * @constructor
42    * @augments Backbone.View
43    */
44    RadiusFilterView = XA.component.search.baseView.extend(
45        /** @lends module:radiusFilter.RadiusFilterView.prototype **/
46        {
47            /**
48            * Initially sets data to model and watches events on which
49            * view should be updated
50            * @listens module:radiusFilter.RadiusFilterView~event:change
51            * @listens module:XA.component.search.vent~event:hashChanged
52            * @memberof module:radiusFilter.RadiusFilterView
53            * @alias radiusFilter.RadiusFilterView#initialize
54            */
55            initialize: function () {
56                var radiusElements = _.map(this.$el.find("li[data-value][data-title]"), function (r) { return $(r); }),
57                    properties = this.$el.data("properties");
58
59                _.each(radiusElements, function (r) { r.addClass("radius-button"); });
60
61                this.model.set({ properties: properties, selected: {} });
62                this.model.bind("change", this.render, this);
63                this.model.set("sig", this.translateSignatures(properties.searchResultsSignature, properties.f));
64
65                XA.component.search.vent.on("hashChanged", this.hashChanged.bind(this));
66                this.render();
67            },
68            /**
69            * list of events for Backbone View
70            * @memberof module:radiusFilter.RadiusFilterView
71            * @alias module:radiusFilter.RadiusFilterView#events
72            */
73            events: {
74                "click li": "radiusClick",
75                'click .bottom-remove-filter, .clear-filter': 'deselect'
76            },
77            /**
78            * Render view
79            * @memberof module:radiusFilter.RadiusFilterView
80            * @alias module:radiusFilter.RadiusFilterView#render
81            */
82            render: function () {
83                var _this = this, selected;
84
85                selected = this.model.get("selected");
86                _this.$el.find(".selected").removeClass("selected");
87
88                if (typeof (selected) !== "undefined" && selected.length) {
89                    selected.addClass("selected");
90                }
91                else {
92                    selected = _this.$el.find("[data-value='-1']");
93                    if (selected.length && selected.length >= 1) {
94                        $(selected[0]).addClass("selected");
95                    }
96                }
97            },
98            /**
99            * Updates hash with new value
100            * @param {Number|String} newValue new value of hash parameter
101            * @memberof module:radiusFilter.RadiusFilterView
102            * @alias module:radiusFilter.RadiusFilterView#updateHash
103            */
104            updateHash: function (newValue) {
105                var sig = this.model.get("sig");
106                newValue = newValue == -1 ? "" : newValue;

107                queryModel.updateHash(this.updateSignaturesHash(sig, newValue, {}));
108            },
109            /**
110            * Updates hash and model 'selected' value
111            * @param {Event} args Event object that contain current target
112            * @memberof module:radiusFilter.RadiusFilterView
113            * @alias module:radiusFilter.RadiusFilterView#radiusClick
114            */
115            radiusClick: function (args) {
116                var _this = this,
117                    selected = $(args.currentTarget);
118
119                _this.updateHash(selected.data("value"));
120                _this.model.set({ selected: selected });
121            },
122            /**
123            * Updates hash with empty string and model 'selected' value set to undefined
124            * @param {Event} args Event object that contains current target
125            * @memberof module:radiusFilter.RadiusFilterView
126            * @alias module:radiusFilter.RadiusFilterView#deselect
127            */
128            deselect: function (args) {
129                var _this = this;
130
131                _this.updateHash("");
132                _this.model.set({ selected: undefined });
133            },
134            /**
135            * Updates model 'selected' value based on hash value
136            * @param {Object} hash Hash parameter stored as an Object
137            * @memberof module:radiusFilter.RadiusFilterView
138            * @alias module:radiusFilter.RadiusFilterView#hashChanged
139            */
140            hashChanged: function (hash) {
141                var _this = this,
142                    sig = this.model.get("sig"),
143                    facetPart,
144                    value,
145                    selected,
146                    i;
147
148                for (i = 0; i < sig.length; i++) {
149                    facetPart = sig[i].toLowerCase();
150                    if (hash.hasOwnProperty(facetPart)) {
151                        value = hash[facetPart];
152                        value = value === "" ? -1 : value;
153                        selected = _this.$el.find("[data-value='" + value + "']");
154                        if (selected.length && selected.length >= 1) {
155                            _this.model.set({ selected: $(selected[0]) });
156                        }
157                        else {
158                            _this.model.set({ selected: undefined });
159                        }
160                    }
161                }
162            }
163
164        });
165    /**
166    * Create
167    * ["RadiusFilterModel"]{@link module:radiusFilter.RadiusFilterModel} and 
168    * ["RadiusFilterView"]{@link module:radiusFilter.RadiusFilterView} 
169    * @memberOf module:radiusFilter
170    * @alias module:radiusFilter.initializeComponent
171    */
172    initializeComponent = function (component) {
173        var model = new RadiusFilterModel();
174        var view = new RadiusFilterView({ el: component[0], model: model });
175        component.addClass("initialized");
176    }
177    /**
178    * For each radius filter component on a page calls
179    * ["initializeComponent"]{@link module:radiusFilter.initializeComponent}
180    * @memberOf module:radiusFilter
181    * @alias module:radiusFilter.init
182    */
183    api.init = function () {
184        if ($("body").hasClass("on-page-editor")) {
185            return;
186        }
187
188        var components = $(".radius-filter:not(.initialized)");
189        _.each(components, function (component) {
190            initializeComponent($(component));
191        });
192
193        queryModel = XA.component.search.query;
194        urlHelperModel = XA.component.search.url;
195    };
196
197    return api;
198}(jQuery, document);
199XA.register("radiusFilter", XA.component.search.radiusFilter);