feat: Removed jQuery from LeafletGeotagField.js MultiLeafletGeotagFie…

…ld.js
roadiz · Sep 12, 2023 · 6de56cf · 6de56cf
1 parent f1ac591
commit 6de56cf
Show file tree

Hide file tree

Showing 11 changed files with 175 additions and 139 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -8,7 +8,7 @@ services:
             args:
                 USER_UID: ${USER_UID}
         networks:
-            default:
+            - default
         volumes:
             - "./.data/db_test:/var/lib/mysql:delegated"
             - "./docker/mysql/performances.cnf:/etc/mysql/conf.d/performances.cnf"
@@ -35,7 +35,7 @@ services:
         ports:
             - ${PUBLIC_DB_PORT}:3306/tcp
         networks:
-            default:
+            - default
         volumes:
             - "./.data/db:/var/lib/mysql:delegated"
             - "./docker/mysql/performances.cnf:/etc/mysql/conf.d/performances.cnf"
@@ -61,6 +61,8 @@ services:
                 aliases:
                     - ${APP_NAMESPACE}_pma
             default:
+                aliases:
+                    - pma
         labels:
             - "traefik.enable=true"
             - "traefik.http.services.${APP_NAMESPACE}_pma.loadbalancer.server.scheme=http"
@@ -128,9 +130,7 @@ services:
         volumes:
             - ./:/var/www/html:cached
         networks:
-            default:
-                aliases:
-                    - app
+            - default
         environment:
             APP_CACHE: ${APP_CACHE}
             TRUSTED_PROXIES: ${TRUSTED_PROXIES}
@@ -176,6 +176,8 @@ services:
                 aliases:
                     - ${APP_NAMESPACE}_nginx
             default:
+                aliases:
+                    - nginx
         labels:
             - "traefik.enable=true"
             - "traefik.http.services.${APP_NAMESPACE}.loadbalancer.server.scheme=http"
@@ -215,6 +217,8 @@ services:
                 aliases:
                     - ${APP_NAMESPACE}_mailer
             default:
+                aliases:
+                    - mailer
         labels:
             - "traefik.enable=true"
             - "traefik.http.services.${APP_NAMESPACE}_mailer.loadbalancer.server.scheme=http"

diff --git a/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js b/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js
@@ -6,32 +6,37 @@ export const DEFAULT_LOCATION = { lat: 45.769785, lng: 4.833967, zoom: 14 }
 
 export default class LeafletGeotagField {
     constructor() {
-        this.$fields = $('.rz-geotag-field:not(.is-enable)')
+        this.$fields = document.querySelectorAll('.rz-geotag-field:not(.is-enable)')
 
         if (this.$fields.length) {
             this.init()
         }
     }
 
     init() {
-        if (!this.$fields.hasClass('is-enable')) {
-            this.$fields.addClass('is-enable')
-            this.bindFields()
-        }
+        this.bindFields()
     }
 
     unbind() {}
 
     bindFields() {
-        this.$fields.each((index, element) => {
-            this.bindSingleField(element)
-        })
+        const fieldsLength = this.$fields.length
+        for (let i = 0; i < fieldsLength; i++) {
+            const element = this.$fields[i]
+            if (!element.classList.contains('is-enable')) {
+                this.bindSingleField(element)
+                element.classList.add('is-enable')
+            }
+        }
     }
 
+    /**
+     * @param {HTMLInputElement} element
+     * @returns {boolean}
+     */
     bindSingleField(element) {
-        const $input = $(element)
-        const $label = $input.parent().find('.uk-form-label')
-        const labelText = $label[0].innerHTML
+        const $label = element.parentElement.querySelector('.uk-form-label')
+        const labelText = $label.innerHTML
         let jsonCode = null
 
         if (window.Rozier.defaultMapLocation) {
@@ -47,10 +52,9 @@ export default class LeafletGeotagField {
         /*
          * prepare DOM
          */
-        $input.hide()
-        $label.hide()
-        $input.attr('data-geotag-canvas', fieldId)
-        $input.after('<div class="rz-geotag-canvas" id="' + fieldId + '" style="width: 100%; height: 400px;"></div>')
+        element.style.display = 'none'
+        $label.style.display = 'none'
+        element.setAttribute('data-geotag-canvas', fieldId)
 
         // Geocode input text
         let metaDOM = [
@@ -70,14 +74,25 @@ export default class LeafletGeotagField {
             '</div>',
             '</div>',
             '</nav>',
+            '<div class="rz-geotag-canvas" id="' + fieldId + '" style="width: 100%; height: 400px;"></div>',
         ].join('')
+        const metaNode = document.createElement('div')
+        metaNode.innerHTML = metaDOM
+        element.after(metaNode)
 
-        $input.after(metaDOM)
-        let $geocodeInput = $('#' + fieldAddressId)
-        $geocodeInput.attr('placeholder', window.Rozier.messages.geotag.typeAnAddress)
+        const mapContainer = document.getElementById(fieldId)
+        if (!mapContainer) {
+            throw new Error('Map container does not exist')
+        }
+        let $geocodeInput = document.getElementById(fieldAddressId)
+        if ($geocodeInput) {
+            $geocodeInput.setAttribute('placeholder', window.Rozier.messages.geotag.typeAnAddress)
+        }
         // Reset button
-        let $geocodeReset = $('#' + resetButtonId)
-        $geocodeReset.hide()
+        let $geocodeReset = document.getElementById(resetButtonId)
+        if ($geocodeReset) {
+            $geocodeReset.style.display = 'none'
+        }
 
         /*
          * Prepare map and marker
@@ -90,25 +105,28 @@ export default class LeafletGeotagField {
         let map = this.createMap(fieldId, mapOptions)
         let marker = null
 
-        if ($input.val() !== '') {
+        if (element.value !== '') {
             try {
-                jsonCode = JSON.parse($input.val())
+                jsonCode = JSON.parse(element.value)
                 marker = this.createMarker(jsonCode, map)
-                $geocodeReset.show()
+                $geocodeReset.style.display = 'inline-block'
             } catch (e) {
-                $input.show()
-                $(document.getElementById(fieldId)).hide()
+                element.style.display = null
+                document.getElementById(fieldId).style.display = 'none'
                 return false
             }
         } else {
             marker = this.createMarker(jsonCode, map)
         }
 
-        marker.on('dragend', $.proxy(this.setMarkerEvent, this, marker, $input, $geocodeReset, map))
-        map.on('click', $.proxy(this.setMarkerEvent, this, marker, $input, $geocodeReset, map))
+        marker.on('dragend', $.proxy(this.setMarkerEvent, this, marker, element, $geocodeReset, map))
+        map.on('click', $.proxy(this.setMarkerEvent, this, marker, element, $geocodeReset, map))
 
-        $geocodeInput.on('keypress', $.proxy(this.requestGeocode, this, marker, $input, $geocodeReset, map))
-        $geocodeReset.on('click', $.proxy(this.resetMarker, this, marker, $input, $geocodeReset, map))
+        $geocodeInput.addEventListener(
+            'keypress',
+            $.proxy(this.requestGeocode, this, marker, element, $geocodeReset, map)
+        )
+        $geocodeReset.addEventListener('click', $.proxy(this.resetMarker, this, marker, element, $geocodeReset, map))
         window.Rozier.$window.on('resize', $.proxy(this.resetMap, this, map, marker, mapOptions))
         window.Rozier.$window.on('pageshowend', $.proxy(this.resetMap, this, map, marker, mapOptions))
         this.resetMap(map, marker, mapOptions, null)
@@ -127,22 +145,22 @@ export default class LeafletGeotagField {
 
     /**
      * @param {Object} marker
-     * @param {jQuery} $input
-     * @param {jQuery} $geocodeReset
+     * @param {HTMLInputElement} $input
+     * @param {HTMLElement} $geocodeReset
      * @param {Map} map
      * @param {Event} event
      */
     resetMarker(marker, $input, $geocodeReset, map, event) {
         marker.removeFrom(map)
-        $input.val('')
-        $geocodeReset.hide()
+        $input.value = ''
+        $geocodeReset.style.display = 'none'
         return false
     }
 
     /**
      * @param {Marker} marker
-     * @param {jQuery} $input
-     * @param {jQuery} $geocodeReset
+     * @param {HTMLInputElement} $input
+     * @param {HTMLElement} $geocodeReset
      * @param {Map} map
      * @param {Event} event
      */
@@ -158,8 +176,8 @@ export default class LeafletGeotagField {
 
     /**
      * @param {Marker} marker
-     * @param {jQuery} $input
-     * @param {jQuery} $geocodeReset
+     * @param {HTMLInputElement} $input
+     * @param {HTMLElement} $geocodeReset
      * @param {Map} map
      * @param {LatLng} latlng
      */
@@ -196,16 +214,16 @@ export default class LeafletGeotagField {
     }
 
     /**
-     * @param {jQuery} $input
-     * @param {jQuery} $geocodeReset
+     * @param {HTMLInputElement} $input
+     * @param {HTMLElement} $geocodeReset
      * @param {LatLng} latLng
      * @param {Number} zoom
      * @param {String|undefined} name
      * @return {void}
      */
     applyGeocode($input, $geocodeReset, latLng, zoom, name) {
-        $input.val(JSON.stringify(this.latLngToFeature(latLng, zoom, name)))
-        $geocodeReset.show()
+        $input.value = JSON.stringify(this.latLngToFeature(latLng, zoom, name))
+        $geocodeReset.style.display = 'inline-block'
     }
 
     /**
@@ -241,8 +259,8 @@ export default class LeafletGeotagField {
 
     /**
      * @param {Marker} marker
-     * @param {jQuery} $input
-     * @param {jQuery} $geocodeReset
+     * @param {HTMLInputElement} $input
+     * @param {HTMLElement} $geocodeReset
      * @param {Map} map
      * @param {Event} event
      * @return {Promise<void>}
@@ -267,8 +285,8 @@ export default class LeafletGeotagField {
 
     /**
      *
-     * @param fieldId
-     * @param mapOptions
+     * @param {string} fieldId
+     * @param {object} mapOptions
      * @returns {*}
      */
     createMap(fieldId, mapOptions) {
@@ -287,11 +305,8 @@ export default class LeafletGeotagField {
             return new LatLng(data.lat, data.lng, data.zoom || data.alt)
         } else if (data.type && data.type === 'Feature') {
             // Data is a GeoJSON feature
-            const latLng = new LatLng(
-                data.geometry.coordinates[1],
-                data.geometry.coordinates[0],
-                data.properties.zoom || 7
-            )
+            const zoom = data.properties && data.properties.zoom ? Number.parseInt(data.properties.zoom) : 7
+            const latLng = new LatLng(data.geometry.coordinates[1], data.geometry.coordinates[0], zoom)
             if (data.properties && data.properties.name) {
                 latLng.name = data.properties.name
             }
@@ -316,7 +331,7 @@ export default class LeafletGeotagField {
     /**
      *
      * @param {String} address
-     * @return Promise<LatLng|null>
+     * @return {Promise<LatLng|null>}
      */
     getLatLngForAddress(address) {
         return GeoCodingService.geoCode(address)