https://smetom-geeode.fr/wp-content/plugins/wp-google-maps/js/v8/css-unit-input.js?ver=10.1.09%2Bpro-10.1.05

1/**
2 * @namespace WPGMZA
3 * @module CSSUnitInput
4 * @requires WPGMZA.EventDispatcher
5 */
6jQuery(function($) {
7    WPGMZA.CSSUnitInput = 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.unit = {
27            value : 0,
28            suffix : "px" 
29        };
30
31        this.wrap();
32        this.renderControls();
33
34        this.parseUnits(this.value);
35    }
36
37    WPGMZA.extend(WPGMZA.CSSUnitInput, WPGMZA.EventDispatcher);
38
39    WPGMZA.CSSUnitInput.VALID_TYPES = ['px', '%', 'rem', 'em'];
40
41    WPGMZA.CSSUnitInput.createInstance = function(element) {
42        return new WPGMZA.CSSUnitInput(element);
43    }
44
45    WPGMZA.CSSUnitInput.prototype.parseOptions = function(options){
46        if(options){
47            for(var i in options){
48                if(typeof this.options[i] !== 'undefined'){
49                    if(typeof this.options[i] === 'object' && typeof options[i] === 'object'){
50                        this.options[i] = Object.assign(this.options[i], options[i]);
51                    } else {
52                        this.options[i] = options[i];
53                    }
54                }
55            }
56        }
57
58        if(this.dataAttributes){
59            for(var i in this.dataAttributes){
60                if(typeof this.options[i] !== 'undefined'){
61                    this.options[i] = this.dataAttributes[i];
62                } 
63            }
64        }
65    }
66
67    WPGMZA.CSSUnitInput.prototype.getUnits = function(override, format){
68        return this.unit.value + this.unit.suffix;
69    }
70
71    WPGMZA.CSSUnitInput.prototype.setUnits = function(value, suffix){
72        this.unit.value = value ? parseFloat(value) : this.unit.value;
73        this.unit.suffix = suffix ? suffix.trim() : this.unit.suffix;               
74
75        if(this.unit.value - parseInt(this.unit.value) > 0.0){
76            this.unit.value = parseFloat(this.unit.value.toFixed(2));
77        }
78
79        if(this.unit.value <= 0){
80            this.unit.value = 0;
81        }
82
83        this.validateSuffix();
84        this.commit();
85
86        if(this.state.initialized){
87            this.update();
88        }
89    }
90
91    WPGMZA.CSSUnitInput.prototype.parseUnits = function(value){
92        if(typeof value === "string"){
93            value = value.trim().toLowerCase().replace(/ /g, '');
94            if(value === ""){
95                value = "0px";
96            }
97
98            let unit = value.match(/((\d+\.\d+)|(\d+))/);
99            if(unit && unit[0]){
100                unit = parseFloat(unit[0]);
101            } else {
102                unit = this.unit.value;
103            }
104
105            let suffix = value.match(/(([a-z]+)|(%))/);
106            if(suffix && suffix[0]){
107                suffix = suffix[0];
108            } else {
109                suffix = this.unit.suffix;
110            }
111
112            this.setUnits(unit, suffix);
113        }
114    }
115
116    WPGMZA.CSSUnitInput.prototype.wrap = function(){
117        var self = this;
118        if(this.element && this.type === "text"){
119            this.element.hide();
120            this.container = $("<div class='wpgmza-styling-unit-input-wrapper' />");
121
122            this.container.insertAfter(this.element);
123            this.container.append(this.element);
124        } else {
125            throw new Error("WPGMZA.CSSUnitInput requires a text field as a base");
126        }
127    }
128
129    WPGMZA.CSSUnitInput.prototype.renderControls = function(){
130        var self = this;
131        if(this.container){
132            this.unitValueInput = $("<input type='text' class='unit-value-input' />");
133            this.unitSuffixToggle = $("<div class='unit-suffix-toggle' />");
134
135            this.unitValueStepDownBtn = $("<div class='unit-stepper-button' data-mode='down' />");
136            this.unitValueStepUpBtn = $("<div class='unit-stepper-button' data-mode='up' />");
137            this.unitValueStepperWrap = $("<div class='unit-stepper-wrapper' />");
138
139            this.unitInnerWrap = $("<div class='unit-input-inner-wrap' />");
140
141            this.unitValueStepperWrap.append(this.unitValueStepUpBtn);
142            this.unitValueStepperWrap.append(this.unitValueStepDownBtn);
143
144            this.unitInnerWrap.append(this.unitValueStepperWrap);
145            this.unitInnerWrap.append(this.unitValueInput);
146            this.unitInnerWrap.append(this.unitSuffixToggle);
147
148            this.container.append(this.unitInnerWrap);
149
150            this.state.initialized = true;
151
152            this.unitValueInput.on('keydown', (event) => {
153                const originalEvent = event.originalEvent;
154                if(originalEvent.key && originalEvent.key.length === 1){
155                    if(originalEvent.key.trim().length === 0 || (originalEvent.key !== '.' && isNaN(parseInt(originalEvent.key)))){
156                        /* Space, hide the dimensions input */
157                        this.unitSuffixToggle.hide();
158                    } 
159                } else {
160                    if(originalEvent.key === 'ArrowUp'){
161                        this.increment();
162                    } else if(originalEvent.key === 'ArrowDown'){

163                        this.decrement();
164                    } else if(originalEvent.key === 'Enter'){
165                        originalEvent.preventDefault();
166                        originalEvent.stopPropagation();
167
168                        $(event.currentTarget).trigger('change');
169                    }
170                }
171            });
172
173            this.unitValueInput.on('change', (event) => {
174                const input = $(event.currentTarget);
175                this.parseUnits(input.val());
176            });
177
178            this.unitValueStepUpBtn.on('click', (event) => {
179                this.increment();
180            });
181
182            this.unitValueStepDownBtn.on('click', (event) => {
183                this.decrement();
184            });
185        }
186    }
187
188    WPGMZA.CSSUnitInput.prototype.validateSuffix = function(){
189        if(this.unit.suffix){
190            if(WPGMZA.CSSUnitInput.VALID_TYPES.indexOf(this.unit.suffix) === -1){
191                this.unit.suffix = this.options.defaultSuffix;
192            }
193        } else {
194            this.unit.suffix = this.options.defaultSuffix;
195        }
196    }
197
198    WPGMZA.CSSUnitInput.prototype.increment = function(){
199        this.parseUnits(this.unitValueInput.val());
200        
201        let value = this.unit.value;
202        if(value - parseInt(value) > 0.0){
203            value += 0.1;
204        } else {
205            value += 1;
206        }
207        this.setUnits(value, this.unit.suffix);
208    }
209
210    WPGMZA.CSSUnitInput.prototype.decrement = function(){
211        this.parseUnits(this.unitValueInput.val());
212
213        let value = this.unit.value;
214        if(value - parseInt(value) > 0.0){
215            value -= 0.1;
216        } else {
217            value -= 1;
218        }
219
220        this.setUnits(this.unit.value - 1, this.unit.suffix);
221    }
222
223    WPGMZA.CSSUnitInput.prototype.update = function(){
224        if(this.unitValueInput && this.unitSuffixToggle){
225            this.unitValueInput.val(this.unit.value);
226            this.unitSuffixToggle.text(this.unit.suffix);
227
228            this.unitSuffixToggle.show();
229        }
230    }
231
232    WPGMZA.CSSUnitInput.prototype.commit = function(){
233        var syncValue = this.getUnits();
234        this.element.val(syncValue);
235        this.element.trigger('change');
236    }
237
238    $(document.body).ready(function(){
239        $("input.wpgmza-stylig-unit-input").each(function(index, el) {
240            el.wpgmzaCSSUnitInput = WPGMZA.CSSUnitInput.createInstance(el);
241        });
242    });
243
244});