Unverified Commit b06d5480 authored by Hoi Sing Edison Wong's avatar Hoi Sing Edison Wong
Browse files

Issue #3252846 by hswong3i: Refine Gesture Handling Configure with Options 

Currently we only support simple on/off for GestureHandling support, but
missing support for its configuration options (see
https://github.com/elmarquis/Leaflet.GestureHandling

), e.g.

    map.addControl(new L.Control.gestureHandling({
        duration: 1000,
        text: {
            touch: "Use two fingers to move the map",
            scroll: "Use ctrl + scroll to zoom the map",
            scrollMac: "Use \u2318 + scroll to zoom the map"
        },
    }));

This PR reference our Marker Cluster configuration form design, refine
GestureHandling configuration by provide a textarea for customize
options.

Signed-off-by: default avatarWong Hoi Sing Edison <hswong3i@pantarei-design.com>
parent 69620bdf

config/schema/leaflet.schema.yml

+20 −3
Original line number Diff line number Diff line
@@ -129,6 +129,16 @@ field.widget.settings.leaflet_widget_default: 
        options:

          type: text

          label: 'Options'

    gesture_handling:

      type: mapping

      label: 'Gesture Handling'

      mapping:

        control:

          type: boolean

          label: 'Control'

        options:

          type: text

          label: 'Options'

    path:

      type: text

      label: 'Path'
@@ -200,9 +210,6 @@ field.formatter.settings.leaflet_formatter_default: 
    disable_wheel:

      type: boolean

      label: 'Disable wheel'

    gesture_handling:

      type: boolean

      label: 'Gesture handling'

    popup:

      type: boolean

      label: 'Popup'
@@ -369,6 +376,16 @@ field.formatter.settings.leaflet_formatter_default: 
        options:

          type: text

          label: 'Options'

    gesture_handling:

      type: mapping

      label: 'Gesture Handling'

      mapping:

        control:

          type: boolean

          label: 'Control'

        options:

          type: text

          label: 'Options'

    path:

      type: text

      label: 'Path'

modules/leaflet_views/config/schema/leaflet_views.style.schema.yml

+10 −3
Original line number Diff line number Diff line
@@ -37,9 +37,6 @@ views.style.leaflet_map: 
    disable_wheel:

      type: boolean

      label: 'Disable wheel'

    gesture_handling:

      type: boolean

      label: 'Gesture handling'

    reset_map:

      type: mapping

      label: 'Reset map'
@@ -207,6 +204,16 @@ views.style.leaflet_map: 
        options:

          type: text

          label: 'Options'

    gesture_handling:

      type: mapping

      label: 'Gesture Handling'

      mapping:

        control:

          type: boolean

          label: 'Control'

        options:

          type: text

          label: 'Options'

    path:

      type: string

      label: 'Path'

modules/leaflet_views/src/Plugin/views/style/LeafletMap.php

+3 −0
Original line number Diff line number Diff line
@@ -615,6 +615,9 @@ class LeafletMap extends StylePluginBase implements ContainerFactoryPluginInterf 
    // Set Map Sync View Element.

    $this->setSyncViewElement($form, $this->options);

    

    // Set Gesture Handling Element.

    $this->setGestureHandlingElement($form, $this->options);



    // Set Map Geometries Options Element.

    $this->setMapPathOptionsElement($form, $this->options);

src/LeafletSettingsElementsTrait.php

+52 −15
Original line number Diff line number Diff line
@@ -53,7 +53,6 @@ trait LeafletSettingsElementsTrait { 
      'height_unit' => 'px',

      'hide_empty_map' => FALSE,

      'disable_wheel' => FALSE,

      'gesture_handling' => FALSE,

      'popup' => FALSE,

      'popup_content' => '',

      'map_position' => [
@@ -103,6 +102,10 @@ trait LeafletSettingsElementsTrait { 
        'control' => FALSE,

        'options' => '{"latitudeSelector":".geofield-lat","longitudeSelector":".geofield-lon"}',

      ],

      'gesture_handling' => [

        'control' => FALSE,

        'options' => '{"duration":1000}',

      ],

      'path' => '{"color":"#3388ff","opacity":"1.0","stroke":true,"weight":3,"fill":"depends","fillColor":"*","fillOpacity":"0.2","radius":"6"}',

      'geocoder' => [

        'control' => FALSE,
@@ -185,19 +188,6 @@ trait LeafletSettingsElementsTrait { 
      '#return_value' => 1,

    ];



    $elements['gesture_handling'] = [

      '#type' => 'checkbox',

      '#title' => $this->t('Gesture Handling'),

      '#description' => $this->t('Enable the @gesture_handling_link functionality for the Map.', [

        '@gesture_handling_link' => $this->link->generate($this->t('Leaflet Gesture Handling Library'), Url::fromUri('https://github.com/elmarquis/Leaflet.GestureHandling', [

          'absolute' => TRUE,

          'attributes' => ['target' => 'blank'],

        ])),

      ]),

      '#default_value' => $settings['gesture_handling'],

      '#return_value' => 1,

    ];



  }



  /**
@@ -746,7 +736,8 @@ trait LeafletSettingsElementsTrait { 
    $map['settings']['locate'] = isset($options['locate']) ? $options['locate'] : NULL;

    $map['settings']['resetview'] = isset($options['resetview']) ? $options['resetview'] : NULL;

    $map['settings']['syncview'] = isset($options['syncview']) ? $options['syncview'] : NULL;

    $map['settings']['gestureHandling'] = isset($options['gesture_handling']) ? $options['gesture_handling'] : $default_settings['gesture_handling'];

    $map['settings']['gestureHandling'] = isset($options['gesture_handling']['control']) ? $options['gesture_handling']['control'] : $default_settings['gestureHandling'];

    $map['settings']['gestureHandlingOptions'] = isset($options['gesture_handling']['options']) ? $options['gesture_handling']['options'] : $default_settings['gestureHandlingOptions'];

    $map['settings']['geocoder'] = isset($options['geocoder']) ? $options['geocoder'] : $default_settings['geocoder'];

  }
@@ -962,6 +953,52 @@ trait LeafletSettingsElementsTrait { 
    ];

  }



  /**

   * Set Gesture Handling Element.

   *

   * @param array $element

   *   The Form element to alter.

   * @param array $settings

   *   The Form Settings.

   */

  protected function setGestureHandlingElement(array &$element, array $settings) {



    $default_settings = $this::getDefaultSettings();



    $element['gesture_handling'] = [

      '#type' => 'details',

      '#title' => $this->t('Gesture Handling'),

      '#open' => FALSE,

    ];



    $element['gesture_handling']['control'] = [

      '#type' => 'checkbox',

      '#title' => $this->t('Enable the functionality of the @gesture_handling_api_link.', [

        '@gesture_handling_api_link' => $this->link->generate($this->t('Leaflet Gesture Handling JS Libr

ary'), Url::fromUri('https://github.com/elmarquis/Leaflet.GestureHandling', [

          'absolute' => TRUE,

          'attributes' => ['target' => 'blank'],

        ])),

      ]),

      '#default_value' => $settings['gesture_handling']['control'] ?? $default_settings['gesture_handlin

g']['control'],

      '#return_value' => 1,

    ];

    $element['gesture_handling']['options'] = [

      '#type' => 'textarea',

      '#rows' => 4,

      '#title' => $this->t('Gesture Handling Additional Options'),

      '#description' => $this->t('An object literal of additional gesture handling options, that comply 

with the Leaflet Gesture Handling JS Library.<br>The syntax should respect the javascript object notation

 (json) format.<br>As suggested in the field placeholder, always use double quotes (") both for the index

es and the string values.'),

      '#default_value' => $settings['gesture_handling']['options'] ?? $default_settings['gesture_handlin

g']['options'],

      '#placeholder' => $default_settings['gesture_handling']['options'],

      '#element_validate' => [[get_class($this), 'jsonValidate']],

    ];

  }



  /**

   * Set Map Geocoder Control Element.

   *

src/Plugin/Field/FieldFormatter/LeafletDefaultFormatter.php

+3 −0
Original line number Diff line number Diff line
@@ -244,6 +244,9 @@ class LeafletDefaultFormatter extends FormatterBase implements ContainerFactoryP 
    // Generate the Leaflet Reset View Element.

    $this->setResetViewElement($elements, $settings);

    

    // Set Gesture Handling Element.

    $this->setGestureHandlingElement($elements, $settings);



    // Set Map Geometries Options Element.

    $this->setMapPathOptionsElement($elements, $settings);