Add src/components/MapControlGeocoding.js and src/components/MapControlNominatimResults.js

src/app/g3w-ol/controls/geocodingcontrol.js

@@ -1,5 +1,9 @@
-import ApplicationState from "store/application-state";
+import ApplicationState from 'store/application-state';
 import GUI from 'services/gui';
+
+import MapControlGeocoding from 'components/MapControlGeocoding';
+import MapControlNominatimResults from 'components/MapControlNominatimResults';
+
 const Control = require('./control');
 const { toRawType, XHR } = require('core/utils/utils');
 const Projections = require('g3w-ol/projection/projections');
@@ -400,6 +404,7 @@ function GeocodingControl(options={}) {
     debug: false,
     viewbox: options.bbox,
     bounded: 1,
+    classMobile: options.isMobile ? 'nominatim-mobile' : '',
     mapCrs: options.mapCrs,
     fontIcon: GUI.getFontClass('search')
   };
@@ -445,76 +450,13 @@ function GeocodingControl(options={}) {
 
   this.projection;
 
-  const containerClass = `${cssClasses.namespace} ${cssClasses.inputText.container}`;
-  const self = this;
-
-  const GeocoderVueContainer = Vue.extend({
-    functional: true,
-    render(h){
-      return h('div', {class: {[containerClass]: true}}, [
-        h('div', {
-          class: {
-            [cssClasses.inputText.control]: true,
-          }
-        }, [
-          h('input', {
-            attrs: {
-              type: 'text',
-              id: cssClasses.inputQueryId,
-              autocomplete: 'off'
-            },
-            class:{
-              [cssClasses.inputText.input]: true
-            },
-            directives:[
-              {
-                name: 't-placeholder',
-                value: placeholder
-              }
-            ]
-          }),
-          h('button', {
-            attrs: {
-              type: 'button',
-              id: 'search_nominatim'
-            },
-            class:{
-              btn: true
-            },
-            on: {
-              click() {
-                const value = $(`input.${cssClasses.inputText.input}`).val();
-                self.query(value);
-              }
-            }
-          }, [h('i', {
-            attrs: {
-              'aria-hidden': true
-            },
-            style: {
-              color:'#ffffff'
-            },
-            class: {
-              [fontIcon]: true
-            }
-          })]),
-          h('button', {
-            attrs: {
-              type: 'button',
-              id:  cssClasses.inputResetId
-            },
-            class: {
-              [`${cssClasses.inputText.reset}  ${cssClasses.hidden}`]: true
-            }
-          }),
-        ]),
-        h('ul', {
-          class: {
-            [cssClasses.inputText.result]: true
-          }
-        })])
-    }
-  });
+  const GeocoderVueContainer = Vue.extend(MapControlGeocoding({
+    containerClass: `${cssClasses.namespace} ${cssClasses.inputText.container} ${this.options.classMobile}`,
+    cssClasses,
+    fontIcon,
+    placeholder,
+    ctx: this
+  }));
   this.container = new GeocoderVueContainer().$mount().$el;
   this.lastQuery = '';
   this.registeredListeners = {
@@ -653,18 +595,7 @@ function GeocodingControl(options={}) {
         ul.appendChild(li);
       });
     } else {
-      const {noresults} = this.options;
-      const elementVue = Vue.extend({
-        functional: true,
-        render(h){
-          return h('li', {
-            class: {
-              'nominatim-noresult': true
-            },
-            directives:[{name: 't', value: noresults}]
-          })
-        }
-      });
+      const elementVue = Vue.extend(MapControlNominatimResults({noresults: this.options.noresults}));
       const li = new elementVue().$mount().$el;
       ul.appendChild(li);
     }

src/components/MapControlGeocoding.js

@@ -0,0 +1,73 @@
+/**
+ * @file
+ * @since v3.9
+ */
+
+export default function({containerClass, cssClasses, fontIcon, placeholder, ctx}) {
+  return {
+    functional: true,
+    render(h){
+      return h('div', {class: {[containerClass]: true}}, [
+        h('div', {
+          class: {
+            [cssClasses.inputText.control]: true,
+          }
+        }, [
+          h('input', {
+            attrs: {
+              type: 'text',
+              id: cssClasses.inputQueryId,
+              autocomplete: 'off'
+            },
+            class:{
+              [cssClasses.inputText.input]: true
+            },
+            directives:[
+              {
+                name: 't-placeholder',
+                value: placeholder
+              }
+            ]
+          }),
+          h('button', {
+            attrs: {
+              type: 'button',
+              id: 'search_nominatim'
+            },
+            class:{
+              btn: true
+            },
+            on: {
+              click() {
+                ctx.query($(`input.${cssClasses.inputText.input}`).val());
+              }
+            }
+          }, [h('i', {
+            attrs: {
+              'aria-hidden': true
+            },
+            style: {
+              color:'#ffffff'
+            },
+            class: {
+              [fontIcon]: true
+            }
+          })]),
+          h('button', {
+            attrs: {
+              type: 'button',
+              id:  cssClasses.inputResetId
+            },
+            class: {
+              [`${cssClasses.inputText.reset}  ${cssClasses.hidden}`]: true
+            }
+          }),
+        ]),
+        h('ul', {
+          class: {
+            [cssClasses.inputText.result]: true
+          }
+        })])
+    }
+  };
+};

src/components/MapControlNominatimResults.js

@@ -0,0 +1,18 @@
+/**
+ * @file
+ * @since 3.9
+ */
+
+export default function({ noresults }) {
+  return {
+    functional: true,
+    render(h){
+      return h('li', {
+        class: {
+          'nominatim-noresult': true
+        },
+        directives:[{name: 't', value: noresults}]
+      })
+    }
+  };
+};

src/components/index.js

@@ -63,6 +63,8 @@ import LayerOpacityPicker from './LayerOpacityPicker.vue';
 import Map from './Map.vue';
 import MapAddLayer from './MapAddLayer.vue';
 import MapControlButton from './MapControlButton.js';
+import MapControlGeocoding from './MapControlGeocoding.js';
+import MapControlNominatimResults from './MapControlNominatimResults.js';
 import MapControlZoomHistory from './MapControlZoomHistory.vue';
 import MetadataLayer from './MetadataLayer.vue';
 import MetadataProject from './MetadataProject.vue';
@@ -184,6 +186,8 @@ export {
   Map,
   MapAddLayer,
   MapControlButton,
+  MapControlGeocoding,
+  MapControlNominatimResults,
   MapControlZoomHistory,
   MetadataLayer,
   MetadataProject,