Issue #21: Add UI setting for popup min width

backdrop-contrib · Jun 7, 2021 · d21d14a · d21d14a
1 parent 745dedc
commit d21d14a
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 2 deletions.
diff --git a/js/leaflet.backdrop.js b/js/leaflet.backdrop.js
@@ -10,6 +10,12 @@
           return;
         }
 
+        // New setting - defensive handling.
+        var popupMinWidth = 50;
+        if (this.map.popupMinWidth !== 'undefined') {
+          popupMinWidth = this.map.popupMinWidth;
+        }
+
         // load a settings object with all of our map settings
         var settings = {
           'fullscreenControl': true,
@@ -108,7 +114,7 @@
             lMap.addLayer(lFeature);
 
             if (feature.popup) {
-              lFeature.bindPopup(feature.popup);
+              lFeature.bindPopup(feature.popup, {minWidth: popupMinWidth});
             }
 
             // Allow others to do something with the feature.

diff --git a/leaflet.formatters.inc b/leaflet.formatters.inc
@@ -21,6 +21,7 @@ function leaflet_field_formatter_info() {
         'popup' => array(
           'show' => '',
           'text' => '',
+          'min_width' => 50,
         ),
         'zoom' => array(
           'initialZoom' => '',
@@ -479,6 +480,10 @@ function leaflet_apply_map_settings(&$map, &$features, $map_settings, $entity_ty
     // Unset the entity here so it does not get returned to the client in JS.
     unset($feat['entity']);
   }
+  if (isset($map_settings['popup']['min_width'])) {
+    $map['popupMinWidth'] = $map_settings['popup']['min_width'];
+  }
+
 }
 
 /**
@@ -535,6 +540,20 @@ function leaflet_form_elements($group, $settings, $options = NULL) {
           ),
         ),
       );
+      $form_element['min_width'] = array(
+        '#title' => t('Minimum width'),
+        '#description' => t('Popups will be at least that wide.'),
+        '#type' => 'number',
+        '#min' => 50,
+        '#max' => 300,
+        '#field_suffix' => ' px',
+        '#default_value' => isset($settings[$group]['min_width']) ? $settings[$group]['min_width'] : 50,
+        '#states' => array(
+          'visible' => array(
+            ':input[name="' . $options['path'] . '[popup][show]"]' => array('checked' => TRUE),
+          ),
+        ),
+      );
       break;
 
     case 'zoom':

diff --git a/modules/leaflet_markercluster/js/leaflet_markercluster.backdrop.js b/modules/leaflet_markercluster/js/leaflet_markercluster.backdrop.js
@@ -17,6 +17,12 @@
           return; // false; // https://www.drupal.org/node/2494669
         }
 
+        // New setting - defensive handling.
+        var popupMinWidth = 50;
+        if (this.map.popupMinWidth !== 'undefined') {
+          popupMinWidth = this.map.popupMinWidth;
+        }
+
         // load a settings object with all of our map settings
         var settings = {
           'fullscreenControl': true, //+
@@ -174,7 +180,7 @@
                 lMap.addLayer(lFeature);
               }
               if (feature.popup) {
-                lFeature.bindPopup(feature.popup/*, {autoPanPadding: L.point(25,25)}*/);
+                lFeature.bindPopup(feature.popup, {minWidth: popupMinWidth});
               }
 
               // Allow others to do something with the feature. //?

diff --git a/modules/leaflet_views/leaflet_views_plugin_style.inc b/modules/leaflet_views/leaflet_views_plugin_style.inc
@@ -43,6 +43,7 @@ class leaflet_views_plugin_style extends views_plugin_style {
       'show' => array('default' => ''),
       'text' => array('default' => ''),
     );
+    $options['popup_min_width'] = array('default' => 50);
     $options['zoom']['contains'] = array(
       'initialZoom' => array('default' => ''),
       'minZoom' => array('default' => 0),
@@ -216,6 +217,21 @@ class leaflet_views_plugin_style extends views_plugin_style {
       $map_options[$key] = t('@label', array('@label' => $map['label']));
     }
 
+    $form['popup_min_width'] = array(
+      '#title' => t('Popup minimum width'),
+      '#description' => t('Popups will be at least that wide.'),
+      '#type' => 'number',
+      '#min' => 50,
+      '#max' => 300,
+      '#field_suffix' => ' px',
+      '#default_value' => isset($this->options['popup_min_width']) ? $this->options['popup_min_width'] : 50,
+      '#states' => array(
+        'visible' => array(
+          ':input[name="style_options[description_field]"]' => array('!value' => ''),
+        ),
+      ),
+    );
+
     $form['map'] = array(
       '#title' => t('Map'),
       '#type' => 'select',
@@ -264,6 +280,13 @@ class leaflet_views_plugin_style extends views_plugin_style {
     }
     $data = array();
     $map = leaflet_map_get_info($this->options['map']);
+    // Popup minimum width.
+    if (!empty($this->options['popup_min_width'])) {
+      $map['popupMinWidth'] = $this->options['popup_min_width'];
+    }
+    else {
+      $map['popupMinWidth'] = 50;
+    }
     // Is there a geofield selected?
     if ($this->options['data_source']) {
       $name_field = empty($this->options['name_field']) ? NULL : $this->options['name_field'];