[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

extensions/t3org_layout/Resources/Private/Forms/eventSubmission.form.yaml

@@ -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

extensions/t3org_layout/Resources/Public/JavaScript/EventSubmission.js

@@ -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});
 });