https://www.bgco.ca/wp-content/plugins/wp-google-maps/js/v8/css-ba…?ver=10.0.09+pro-10.0.07

1/**
2 * @namespace WPGMZA
3 * @module CSSBackdropFilterInput
4 * @requires WPGMZA.EventDispatcher
5 */
6jQuery(function($) {
7    WPGMZA.CSSBackdropFilterInput = function(element, options){
8        if(!(element instanceof HTMLInputElement))
9            throw new Error("Element is not an instance of HTMLInputElement");
10
11        this.element = $(element);
12        this.dataAttributes = this.element.data();
13        this.type = element.type;
14        this.value = element.value;
15
16        this.options = {
17
18        };
19
20        this.parseOptions(options);
21
22        this.state = {
23            initialized : false
24        }
25
26        this.filters = {
27            blur : {
28                enable : false,
29                value : 0,
30                unit : 'px'
31            },
32            brightness : {
33                enable : false,
34                value : 0,
35                unit : '%'
36            },
37            contrast : {
38                enable : false,
39                value : 0,
40                unit : '%'
41            },
42            grayscale : {
43                enable : false,
44                value : 0,
45                unit : '%'
46            },
47            hue_rotate : {
48                enable : false,
49                value : 0,
50                unit : 'deg'
51            },
52            invert : {
53                enable : false,
54                value : 0,
55                unit : '%'
56            },
57            sepia : {
58                enable : false,
59                value : 0,
60                unit : '%'
61            },
62            saturate : {
63                enable : false,
64                value : 0,
65                unit : '%'
66            }
67        };
68
69        this.wrap();
70        this.renderControls();
71
72        this.parseFilters(this.value);
73    }
74
75    WPGMZA.extend(WPGMZA.CSSBackdropFilterInput, WPGMZA.EventDispatcher);
76
77    WPGMZA.CSSBackdropFilterInput.FILTER_PATTERN = /(\S+)/g;
78    WPGMZA.CSSBackdropFilterInput.VALUE_PATTERN = /(\(\S*\))/g;
79
80    WPGMZA.CSSBackdropFilterInput.createInstance = function(element) {
81        return new WPGMZA.CSSBackdropFilterInput(element);
82    }
83
84    WPGMZA.CSSBackdropFilterInput.prototype.parseOptions = function(options){
85        if(options){
86            for(var i in options){
87                if(typeof this.options[i] !== 'undefined'){
88                    if(typeof this.options[i] === 'object' && typeof options[i] === 'object'){
89                        this.options[i] = Object.assign(this.options[i], options[i]);
90                    } else {
91                        this.options[i] = options[i];
92                    }
93                }
94            }
95        }
96
97        if(this.dataAttributes){
98            for(var i in this.dataAttributes){
99                if(typeof this.options[i] !== 'undefined'){
100                    this.options[i] = this.dataAttributes[i];
101                } 
102            }
103        }
104    }
105
106    WPGMZA.CSSBackdropFilterInput.prototype.getFilters = function(override, format){
107        let filters = [];
108        for(let type in this.filters){
109            const data = this.filters[type];
110
111            if(data.enable){
112                type = type.replace("_", "-");
113                filters.push(type + "(" + data.value + data.unit + ")");
114            }
115        }
116        return filters.length > 0 ? filters.join(" ") : "none";
117    }
118
119    WPGMZA.CSSBackdropFilterInput.prototype.setFilters = function(filters){
120        this.clearFilters();
121        
122        if(filters instanceof Object){
123            for(let type in filters){
124                if(this.filters[type]){
125                    const value = filters[type];
126                    if(value){
127                        this.filters[type].enable = true;
128                        this.filters[type].value = value;
129                    }
130                }
131            }
132        }
133        
134        this.commit();
135        if(this.state.initialized){
136            this.update();
137        }
138    }
139
140    WPGMZA.CSSBackdropFilterInput.prototype.clearFilters = function(){
141        for(let i in this.filters){
142            this.filters[i].enable = false;
143            this.filters[i].value = 0;
144        }
145    }
146
147    WPGMZA.CSSBackdropFilterInput.prototype.parseFilters = function(value){
148        if(typeof value === "string"){
149            value = value.trim().toLowerCase();
150            if(value === ""){
151                value = "none";
152            }
153
154            let filters = {};

155            if(value !== "none"){
156                /* Some filters exist */
157                let matches = value.match(WPGMZA.CSSBackdropFilterInput.FILTER_PATTERN);
158                if(matches && matches instanceof Array){
159                    for(let match of matches){
160                        let valueArg = match.match(WPGMZA.CSSBackdropFilterInput.VALUE_PATTERN);
161                        valueArg = valueArg instanceof Array && valueArg.length > 0 ? valueArg[0] : '';
162
163                        let type = match.replace(valueArg, '').replace('-', '_');
164                        let value = null;
165                        if(valueArg.length > 0){
166                            let numericValue = valueArg.match(/(\d+)/g);
167                            if(numericValue instanceof Array && numericValue.length > 0){
168                                value = parseFloat(numericValue[0]);
169                            }
170                        }
171
172                        filters[type] = value;
173                    }
174                }
175            }
176
177            this.setFilters(filters);
178        }
179    }
180
181    WPGMZA.CSSBackdropFilterInput.prototype.wrap = function(){
182        var self = this;
183        if(this.element && this.type === "text"){
184            this.element.hide();
185            this.container = $("<div class='wpgmza-styling-backdrop-filter-input-wrapper' />");
186
187            this.container.insertAfter(this.element);
188            this.container.append(this.element);
189        } else {
190            throw new Error("WPGMZA.CSSUnitInput requires a text field as a base");
191        }
192    }
193
194    WPGMZA.CSSBackdropFilterInput.prototype.renderControls = function(){
195        var self = this;
196        if(this.container){
197            this.itemWrappers = {};
198            for(let type in this.filters){
199                let data = this.filters[type];
200
201                let printType = type.replace("_", " ");
202
203                const wrapper = $("<div class='backdrop-filter-item-wrap' data-type='" + type + "' />");
204
205                const toggleWrap = $("<div class='backdrop-filter-toggle-wrap' />");
206                const toggleInput = $("<input type='checkbox' class='backdrop-filter-item-toggle' />");
207                const toggleLabel = $("<label />");
208
209                const controlWrap = $("<div class='backdrop-filter-control-wrap' />");
210
211                let controlType = 'text';
212                controlAttributes = "data-min='1' data-max='100'";
213                if(data.unit === 'deg'){
214                    controlAttributes = "data-min='1' data-max='360'";
215                } else if (data.unit === 'px'){
216                    controlAttributes = "data-min='1' data-max='200'";
217                }
218
219                const controlInput = $("<input class='backdrop-filter-item-input' type='" + controlType + "' " + controlAttributes + " value='" + data.value + "' />");

220                const controlLabel = $("<small />");
221                controlLabel.append("<span>" + data.value + "</span>" + data.unit);
222
223                const slider = $("<div class='backdrop-filter-item-slider' />"); 
224
225
226                toggleLabel.append(toggleInput);
227                toggleLabel.append(printType);
228
229                toggleWrap.append(toggleLabel);
230
231                controlWrap.append(controlInput);
232                controlWrap.append(controlLabel);
233                controlWrap.append(slider);
234
235                wrapper.append(toggleWrap);
236                wrapper.append(controlWrap);
237
238
239                this.itemWrappers[type] = wrapper;
240                this.container.append(wrapper);
241
242                this.state.initialized = true;
243                
244                /* Events */
245                slider.slider({
246                    range: "max",
247                    min: controlInput.data('min'),
248                    max: controlInput.data('max'),
249                    value: controlInput.val(),
250                    slide: function( event, ui ) {
251                        controlInput.val(ui.value);
252                        controlLabel.find('span').text(ui.value);
253                        controlInput.trigger('change');
254                        // self.commit();
255                    },
256                    change: function(event, ui){
257                    }
258                });
259
260                controlInput.wpgmzaRelativeSlider = slider;               
261
262                toggleInput.on('change', (event) => {
263                    const target = $(event.currentTarget);
264                    const parent = target.closest('.backdrop-filter-item-wrap');
265                    const type = parent.data('type');
266
267                    if(target.is(':checked')){
268                        parent.addClass('enabled');
269                        this.setFilterState(type, true);
270                    } else {
271                        parent.removeClass('enabled');
272                        this.setFilterState(type, false);
273                    }
274                });
275
276                controlInput.on('change', (event) => {
277                    const target = $(event.currentTarget);
278                    const parent = target.closest('.backdrop-filter-item-wrap');
279                    const type = parent.data('type');
280                    this.setFilterValue(type, target.val());
281                });
282
283            }
284        }
285    }
286
287    WPGMZA.CSSBackdropFilterInput.prototype.setFilterState = function(type, state){
288        if(this.filters[type]){
289            this.filters[type].enable = state;
290        }
291
292        this.commit();
293    }
294
295    WPGMZA.CSSBackdropFilterInput.prototype.setFilterValue = function(type, value){
296        if(this.filters[type]){
297            this.filters[type].value = parseFloat(value);
298        }
299
300        this.commit();
301    }
302
303    WPGMZA.CSSBackdropFilterInput.prototype.update = function(){
304        if(this.container){
305            for(let type in this.filters){
306                const data = this.filters[type];
307                
308                const row = this.container.find('.backdrop-filter-item-wrap[data-type="' + type + '"]');
309
310                row.find('.backdrop-filter-item-toggle').prop('checked', data.enable).trigger('change');
311                row.find('.backdrop-filter-item-input').val(data.value).trigger('change');
312
313                row.find('.backdrop-filter-item-slider').slider('value', data.value);
314                row.find('.backdrop-filter-control-wrap').find('small span').text(data.value);
315
316            }
317        }
318    }
319
320    WPGMZA.CSSBackdropFilterInput.prototype.commit = function(){
321        var syncValue = this.getFilters();
322        this.element.val(syncValue);
323        this.element.trigger('change');
324    }
325
326    $(document.body).ready(function(){
327        $("input.wpgmza-styling-backdrop-filter-input").each(function(index, el) {
328            el.wpgmzaCSSBackdropFilterInput = WPGMZA.CSSBackdropFilterInput.createInstance(el);
329        });
330    });

331
332});