Commit c692d937 authored by Jonas Götze's avatar Jonas Götze
Browse files

[WIP][FEATURE] move fields for adding a new location to a modal

future todo: hide the fields, provide new Locations via Maps API in the suggest and fill the fields via JS with the data provided by the API
parent 5390722a
Pipeline #15626 passed with stages
in 4 minutes and 38 seconds
......@@ -256,115 +256,130 @@ renderables:
defaultValue: ''
type: Hidden
identifier: location
label: Location
label: search Location
properties:
elementDescription: ''
-
defaultValue: ''
type: Text
identifier: locationSearch
label: Location
properties:
elementDescription: ''
elementClassAttribute: 'js__eventsubmissionform__location-search_input'
fluidAdditionalAttributes:
data-location-search-target: 'location'
- type: Fieldset
identifier: fieldset-event-new-location
label: 'OR add new location'
- type: GridRow
identifier: gridrow-event-location-switch
properties:
elementClassAttribute: 'js__eventsubmissionform__new-location-field-container'
elementClassAttribute: 'row js__eventsubmissionform__location-container'
label: 'Grid: Row'
renderables:
-
defaultValue: ''
type: Text
identifier: newLocationTitle
label: Location title
identifier: locationSearch
label: Location
properties:
placeholder: 'type to search'
elementDescription: ''
elementClassAttribute: 'js__eventsubmissionform__location-search_input'
fluidAdditionalAttributes:
data-location-search-target: 'location'
autocomplete: 'off'
-
defaultValue: ''
type: Textarea
identifier: newLocationAddress
label: Location Address
type: Checkbox
identifier: createNewLocationMode
label: 'OR add new location'
properties:
elementDescription: ''
-
type: GridRow
identifier: gridrow-event-newlocation-1
label: 'Grid: Row'
elementClassAttribute: 'js__eventsubmissionform__new-location-mode-switch mt-3'
value: 1
- type: Fieldset
identifier: fieldset-event-new-location
label: 'add new location'
properties:
elementClassAttribute: 'js__eventsubmissionform__new-location-field-container'
renderables:
-
defaultValue: ''
type: Text
identifier: newLocationZip
label: Location zip
identifier: newLocationTitle
label: Location title
properties:
elementDescription: ''
-
defaultValue: ''
type: Text
identifier: newLocationCity
label: Location city
type: Textarea
identifier: newLocationAddress
label: Location Address
properties:
elementDescription: ''
-
type: GridRow
identifier: gridrow-event-newlocation-2
label: 'Grid: Row'
renderables:
-
defaultValue: ''
type: Text
identifier: newLocationCountry
label: Location country
properties:
elementDescription: ''
type: GridRow
identifier: gridrow-event-newlocation-1
label: 'Grid: Row'
renderables:
-
defaultValue: ''
type: Text
identifier: newLocationZip
label: Location zip
properties:
elementDescription: ''
-
defaultValue: ''
type: Text
identifier: newLocationCity
label: Location city
properties:
elementDescription: ''
-
defaultValue: ''
type: Url
identifier: newLocationLink
label: Location link
properties:
elementDescription: ''
-
type: GridRow
identifier: gridrow-event-newlocation-3
label: 'Grid: Row'
renderables:
type: GridRow
identifier: gridrow-event-newlocation-2
label: 'Grid: Row'
renderables:
-
defaultValue: ''
type: Text
identifier: newLocationCountry
label: Location country
properties:
elementDescription: ''
-
defaultValue: ''
type: Url
identifier: newLocationLink
label: Location link
properties:
elementDescription: ''
-
defaultValue: ''
type: Text
identifier: newLocationLatitude
label: Location latitude
validators:
type: GridRow
identifier: gridrow-event-newlocation-3
label: 'Grid: Row'
renderables:
-
identifier: NumberRange
options:
minimum: -90
maximum: 90
properties:
elementDescription: ''
defaultValue: ''
type: Text
identifier: newLocationLatitude
label: Location latitude
validators:
-
identifier: NumberRange
options:
minimum: -90
maximum: 90
properties:
elementDescription: ''
-
defaultValue: ''
type: Text
identifier: newLocationLongitude
label: Location longitude
validators:
-
identifier: NumberRange
options:
minimum: -180
maximum: 180
properties:
elementDescription: ''
-
defaultValue: ''
type: Text
identifier: newLocationLongitude
label: Location longitude
validators:
-
identifier: NumberRange
options:
minimum: -180
maximum: 180
type: Textarea
identifier: newLocationDescription
label: Location description
properties:
elementDescription: ''
-
defaultValue: ''
type: Textarea
identifier: newLocationDescription
label: Location description
properties:
elementDescription: ''
-
defaultValue: ''
type: Url
......
......@@ -96,15 +96,51 @@ document.querySelectorAll('input.js__eventsubmissionform__location-search_input'
}
});
let eventNewLocationModalIds = [];
document.querySelectorAll('fieldset.js__eventsubmissionform__new-location-field-container').forEach(function(container) {
document.querySelectorAll('.js__eventsubmissionform__location-container').forEach(function(container) {
const fieldset = container.querySelector('fieldset.js__eventsubmissionform__new-location-field-container');
const searchInput = container.querySelector('input.js__eventsubmissionform__location-search_input');
let targetElementName = searchInput.getAttribute('data-location-search-target');
let targetElementId = searchInput.id.replace('-locationSearch', '-' + targetElementName);
let targetElement = document.getElementById(targetElementId);
const modalId = 'js__eventsubmissionform__new-location-modal-' + (eventNewLocationModalIds.length + 1);
eventNewLocationModalIds.push(modalId);
let childNodes = [];
const modal = document.createElement('div');
const modalButton = document.createElement('div');
modalButton.setAttribute('data-toggle','modal');
modalButton.setAttribute('data-target', '#' + modalId);
modalButton.classList.add('btn','btn-success');
const editButton = document.createElement('button');
editButton.setAttribute('type','button');
editButton.setAttribute('data-toggle','modal');
editButton.setAttribute('data-target','#' + modalId);
editButton.classList.add('btn','btn-secondary','mt-3');
editButton.innerText = 'edit';
editButton.disabled = true;
const modeSwitch = container.querySelector('label.js__eventsubmissionform__new-location-mode-switch');
modeSwitch.parentElement.classList.add('btn-group-toggle','btn-group');
modeSwitch.classList.add('btn','btn-success');
modeSwitch.querySelector('input.js__eventsubmissionform__new-location-mode-switch').addEventListener('change',function(event) {
if (event.target.checked) {
modeSwitch.classList.add('btn-warning');
modeSwitch.classList.remove('btn-success');
modeSwitch.title = 'click to cancel';
searchInput.value = '';
searchInput.disabled = true;
targetElement.value = '';
fieldset.disabled = false;
editButton.disabled = false;
editButton.classList.add('btn-info');
editButton.classList.remove('btn-secondary');
$modal.modal('show');
} else {
modeSwitch.classList.remove('btn-warning');
modeSwitch.classList.add('btn-success');
modeSwitch.title = '';
searchInput.disabled = false;
fieldset.disabled = true;
editButton.disabled = true;
editButton.classList.remove('btn-info');
editButton.classList.add('btn-secondary');
}
});
modeSwitch.parentElement.append(editButton);
modal.classList.add('modal');
modal.id = modalId;
modal.innerHTML = '<div class="modal-dialog modal-lg">\n' +
......@@ -119,16 +155,16 @@ document.querySelectorAll('fieldset.js__eventsubmissionform__new-location-field-
' </div>\n' +
' </div>\n' +
' </div>';
for (let i = 0; i < container.children.length; i++) {
if (container.children[i].nodeName === 'LEGEND') {
modal.querySelector('.modal-title').textContent = container.children[i].textContent;
modalButton.textContent = container.children[i].textContent;
container.children[i].classList.add('d-none');
for (let i = 0; i < fieldset.children.length; i++) {
if (fieldset.children[i].nodeName === 'LEGEND') {
modal.querySelector('.modal-title').textContent = fieldset.children[i].textContent;
fieldset.children[i].classList.add('d-none');
} else {
childNodes.push(container.children[i]);
childNodes.push(fieldset.children[i]);
}
}
modal.querySelector('.modal-body').append(...childNodes);
container.appendChild(modal);
container.appendChild(modalButton);
fieldset.appendChild(modal);
const $modal = $(modal);
$modal.modal({show: false});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment