Add src/components/MapControlButton.js (#329)

* Add `src/components/MapControlButton.js` * Update imports within `control.js` * Export `MapControlButton.js` component * update @SInCE tag --------- Co-authored-by: volterra79 <[email protected]>
g3w-suite · Aug 8, 2023 · 2b2023c · 2b2023c
1 parent efe9d94
commit 2b2023c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 36 deletions.
diff --git a/src/app/g3w-ol/controls/control.js b/src/app/g3w-ol/controls/control.js
@@ -1,3 +1,5 @@
+import MapControlButton from 'components/MapControlButton';
+
 const { layout } = require('g3w-ol/controls/utils');
 
 const Control = function(options={}) {
@@ -16,42 +18,13 @@ const Control = function(options={}) {
   this.positionCode = options.position || 'tl';
   this.priority = options.priority || 0;
   if (!options.element) {
-    const className = "ol-"+this.name.split(' ').join('-').toLowerCase();
-    const customClass = options.customClass;
-    const tipLabel = options.tipLabel || this.name;
-    const label = options.label || '';
-    const mapControlButtonVue =  Vue.extend({
-      functional: true,
-      render(h){
-        return h('div', {
-          class: {
-            [className]: !!className,
-            'ol-unselectable': true,
-            'ol-control': true
-          }
-        }, [
-            h('button', {
-              attrs: {
-                type: 'button',
-              },
-              directives: [{
-                name: 't-tooltip',
-                value: tipLabel
-              }]
-            }, [
-                label,
-                h('i', {
-                  class: {
-                    [customClass]: !!customClass
-                  }
-                })
-            ])
-          ]
-        )
-      }
-    });
-    const mapControlButtonDOMElement = new mapControlButtonVue().$mount().$el;
-    options.element = mapControlButtonDOMElement;
+    const mapControlButtonVue =  Vue.extend(MapControlButton({
+      className: "ol-"+this.name.split(' ').join('-').toLowerCase(),
+      customClass: options.customClass,
+      tipLabel: options.tipLabel || this.name,
+      label: options.label || ''
+    }));
+    options.element = new mapControlButtonVue().$mount().$el;
   }
   const buttonClickHandler = options.buttonClickHandler || Control.prototype._handleClick.bind(this);
   $(options.element).on('click',buttonClickHandler);

diff --git a/src/components/MapControlButton.js b/src/components/MapControlButton.js
@@ -0,0 +1,37 @@
+/**
+ * @file
+ * @since v3.9
+ */
+
+export default function ({ className, customClass, tipLabel, label }) {
+  return {
+    functional: true,
+    render(h) {
+      return h('div', {
+        class: {
+          [className]: !!className,
+          'ol-unselectable': true,
+          'ol-control': true
+        }
+      }, [
+        h('button', {
+          attrs: {
+            type: 'button',
+          },
+          directives: [{
+            name: 't-tooltip',
+            value: tipLabel
+          }]
+        }, [
+          label,
+          h('i', {
+            class: {
+              [customClass]: !!customClass
+            }
+          })
+        ])
+      ]
+      )
+    }
+  };
+};
diff --git a/src/components/index.js b/src/components/index.js
@@ -62,6 +62,7 @@ import InputUnique from './InputUnique.vue';
 import LayerOpacityPicker from './LayerOpacityPicker.vue';
 import Map from './Map.vue';
 import MapAddLayer from './MapAddLayer.vue';
+import MapControlButton from './MapControlButton.js';
 import MapControlZoomHistory from './MapControlZoomHistory.vue';
 import MetadataLayer from './MetadataLayer.vue';
 import MetadataProject from './MetadataProject.vue';
@@ -182,6 +183,7 @@ export {
   LayerOpacityPicker,
   Map,
   MapAddLayer,
+  MapControlButton,
   MapControlZoomHistory,
   MetadataLayer,
   MetadataProject,