https://www.kreativ-treff-maxdorf.de/assets/uicomponents/form-elements/input-location.js

1window.Log.locationinput = new window.Log('Locationinput');
2
3function Locationinput (element, data, keys) {
4  this.super.call(this, element, data, keys); // eslint-disable-line
5}
6
7Locationinput.prototype = Object.create(window.Input.prototype);
8Locationinput.prototype.constructor = Locationinput;
9Locationinput.prototype.super = window.Input;
10
11Locationinput.initialize = function (element, data) {
12  if (!element) {
13    window.Log.locationinput.error('initialize: Could not find element');
14    return;
15  }
16
17  var inputs = [].slice.call(element.querySelectorAll('input'));
18  if (!inputs || inputs.length !== 2) {
19    window.Log.locationinput.error('initialize: Could not find inputs');
20    return;
21  }
22
23  if (!data) {
24    data = {};
25  }
26
27  data.skipPrefill = true;
28
29  var input = new Locationinput(element, data, {
30    'latitudeInput': inputs[0],
31    'longitudeInput': inputs[1]
32  });
33
34  input.bindEvents(data);
35};
36
37Locationinput.prototype.bindEvents = function (data) {
38  if (!this.element) {
39    window.Log.locationinput.error('bindEvents: Could not find element');
40    return;
41  }
42
43  if (!this.latitudeInput || !this.longitudeInput) {
44    window.Log.locationinput.error('bindEvents: Could not find inputs');
45    return;
46  }
47
48  if (!data) {
49    data = {};
50  }
51
52  if (data.isrequired) {
53    this.latitudeInput.setAttribute('required', '');
54    this.longitudeInput.setAttribute('required', '');
55  }
56
57  var field = this.element.getAttribute('bp-field');
58  if (field) {
59    this.latitudeInput.setAttribute('bp-field', field + '.lat');
60    this.longitudeInput.setAttribute('bp-field', field + '.lon');
61  }
62
63  this.element.style.display = 'grid';
64  this.element.style.gridTemplateColumns = 'repeat(auto-fit, minmax(38px, 1fr))';
65  this.element.style.columnGap = '10px';
66
67  var vm = this;
68
69  this.latitudeInput.addEventListener('input', function (event) {
70    vm.input(event);
71  });
72
73  this.longitudeInput.addEventListener('input', function (event) {
74    vm.input(event);
75  });
76
77  this.prefill();
78};
79
80Locationinput.prototype.prefill = function () {
81  if (!this.element) {
82    window.Log.locationinput.error('prefill: Could not find element');
83    return;
84  }
85
86  if (!this.latitudeInput || !this.longitudeInput) {
87    window.Log.locationinput.error('prefill: Could not find inputs');
88    return;
89  }
90
91  var parent = this.element.parentNode;
92  if (!parent) {
93    window.Log.locationinput.error('prefill: Could not find parent element');
94    return;
95  }
96
97  var fields = this.element.getAttribute('bp-field');
98  if (!fields) {
99    return;
100  }
101
102  var formelement = (this.latitudeInput || {}).form || (this.longitudeInput || {}).form;
103  if (!formelement) {
104    return;
105  }
106
107  var form = formelement.getAttribute('bp-outlet');
108  if (!form) {
109    return;
110  }
111
112  var value = this.getValueInForm({
113    'form': form,
114    'fields': fields
115  });
116
117  if (!value) {
118    this.latitudeInput.value = '';
119    this.longitudeInput.value = '';
120    return;
121  }
122
123  if (value && value.lat) {
124    this.latitudeInput.valueAsNumber = value.lat;
125  }
126
127  if (value && value.lon) {
128    this.longitudeInput.valueAsNumber = value.lon;
129  }
130};
131
132Locationinput.prototype.update = function (value) {
133  if (!this.element) {
134    window.Log.locationinput.error('update: Could not find element');
135    return;
136  }
137
138  if (!this.latitudeInput || !this.longitudeInput) {
139    window.Log.locationinput.error('upedat: Could not find inputs');
140    return;
141  }
142
143  var parent = this.element.parentNode;
144  if (!parent) {
145    window.Log.locationinput.error('update: Could not find parent element');
146    return;
147  }
148
149  if (!value) {
150    this.latitudeInput.value = '';
151    this.longitudeInput.value = '';
152    return;
153  }
154
155  if (value && value.lat) {
156    this.latitudeInput.valueAsNumber = value.lat;
157  }
158
159  if (value && value.lon) {
160    this.longitudeInput.valueAsNumber = value.lon;
161  }
162};
163
164Locationinput.prototype.input = function (event, inputs, data) {
165  var fields = this.element.getAttribute('bp-field');
166  if (!fields) {
167    return;
168  }
169
170  if (!event.target.form || event.target.form.hasAttribute('bp-outlet') === false) {
171    return;
172  }
173
174  var form = event.target.form.getAttribute('bp-outlet');
175
176  var value = {
177    'lat': (this.latitudeInput ? this.latitudeInput.valueAsNumber : null),

178    'lon': (this.longitudeInput ? this.longitudeInput.valueAsNumber : null)
179  };
180
181  if ([null, undefined, NaN].includes(value.lat)) {
182    value.lat = null;
183  }
184
185  if ([null, undefined, NaN].includes(value.lon)) {
186    value.lon = null;
187  }
188
189  if (value.lat === null || value.lon === null) {
190    value = null;
191  }
192
193  this.setValueInForm({
194    'form': form,
195    'fields': fields,
196    'value': value
197  });
198
199  this.updateElementsWithFields({
200    'event': {
201      'target': this.element
202    },
203    'form': form,
204    'fields': fields,
205    'value': value
206  });
207};
208
209window.Locationinput = Locationinput;