Voorzie layer toggler van een standaard omschrijving

Author: Htbaa

plugins/gh-datainmap/CHANGELOG.md

@@ -1,5 +1,5 @@
 - Nieuwe versies van ondersteunende software bibliotheken in gebruik genomen (o.a. Redux 4.1.0).
-- Mogelijkheid toegevoegd om lagen in/uit te schakelen door gebruik van shortcode instellingen `enable_toggler`, `toggle_layers`, `toggle_types`, `untoggled_layers` en `untoggled_types`. Let op! Bij gebruik eigen stylesheet moet de toggler van opmaak voorzien worden. Standaard staat de toggler uit. Meer informatie in de shortcode documentatie.
+- Mogelijkheid toegevoegd om lagen in/uit te schakelen door gebruik van shortcode instellingen `enable_toggler`, `toggle_layers`, `toggle_types`, `untoggled_layers` en `untoggled_types`. Met `filter_description="Uw eigen tekst"` is het mogelijk om per kaart de begeleidende tekst te wijzigen of onderdrukken. Let op! Bij gebruik eigen stylesheet moet de toggler van opmaak voorzien worden. Standaard staat de toggler uit. Meer informatie in de shortcode documentatie.
 
 **1.9.3 (2021-05-27)**
 

plugins/gh-datainmap/includes/settings.php

@@ -43,7 +43,8 @@ function gh_dim_sanitize_settings($input) {
         'maxZoom',
         'projection',
         'search_coord_system',
-        'filter_description'
+        'filter_description',
+        'toggler_description',
     ];
     foreach($text_fields as $k) {
         $input[$k] = sanitize_text_field( $input[$k] );

plugins/gh-datainmap/includes/shortcode.php

@@ -38,6 +38,7 @@ function gh_dim_shortcode($atts, $content = null) {
             'untoggled_layers' => null,
             'toggle_types' => 'ALL',
             'untoggled_types' => null,
+            'toggler_description' => $settings['toggler_description'],
             'dynamic_loading' => 0,
             'css_class' => null,
             'filter_properties' => null,
@@ -57,6 +58,7 @@ function gh_dim_shortcode($atts, $content = null) {
     $settings['enable_filter'] = $args['enable_filter'] == 1 ? true : false;
     $settings['enable_features_listbox'] = $args['enable_features_listbox'] == 1 ? true : false;
     $settings['enable_toggler'] = $args['enable_toggler'] == 1 ? true : false;
+    $settings['toggler_description'] = $args['toggler_description'];
     $settings['dynamic_loading'] = $args['dynamic_loading'] == 1 ? true : false;
     $settings['filter_description'] = $args['filter_description'];
     foreach(['toggle_layers', 'toggle_types', 'untoggled_layers', 'untoggled_types'] as $k) {

plugins/gh-datainmap/views/settings.php

@@ -198,6 +198,15 @@
                     <p class="description"><?php _e('Optinally provide a default description to be shown when a user opens the filter menu.', 'gh-datainmap'); ?></p>
                 </td>
             </tr>
+            <tr>
+                <th scope="row" valign="top">
+                    <label for="gh-datainmap-settings[toggler_description]"><?php _e('Toggler description', 'gh-datainmap') ?></label>
+                </th>
+                <td>
+                    <input type="text" name="gh-datainmap-settings[toggler_description]" id="gh-datainmap-settings[toggler_description]" value="<?php echo esc_attr( $settings['toggler_description'] ) ?>" class="regular-text" />
+                    <p class="description"><?php _e('Optinally provide a default description to be shown when a user opens the toggler menu.', 'gh-datainmap'); ?></p>
+                </td>
+            </tr>
             <tr>
                 <th scope="row" valign="top">
                     <label for="gh-datainmap-settings[projections]"><?php _e('Additional projections (proj4)', 'gh-datainmap') ?></label>

src/actions.js

@@ -261,6 +261,11 @@ export function storeFeatures(features, sourceId) {
     return { type: STORE_FEATURES, features: features, sourceId: sourceId};
 }
 
+export const SET_TOGGLER_DESCRIPTION = 'SET_TOGGLER_DESCRIPTION';
+export function setTogglerDescription(description) {
+    return { type: SET_TOGGLER_DESCRIPTION, description: description };
+}
+
 export const SET_TOGGLER = 'SET_TOGGLER';
 export function setToggler(togglers) {
     return { type: SET_TOGGLER, togglers };

src/components/toggler.js

@@ -76,6 +76,9 @@ export class TogglerComponent extends Component {
                         <h1 id={id}>Lagen</h1>
                     </header>
                     <div className="gh-dim-togglers">
+                        {this.props.description &&
+                            <p className="gh-dim-togglers-description">{this.props.description}</p>
+                        }
                         <form>
                             <div role="group" aria-label="Togglers">
                                 {this.props.layers.map((layer) => {

src/containers/togglerlink.js

@@ -20,6 +20,7 @@ const mapStateToProps  = (state) => {
         layers: state.map.layers,
         togglers: state.toggler.togglers,
         toggledLayersState: state.toggler.toggledLayersState,
+        description: state.toggler.description
     }
 }
 

src/datainmap.js

@@ -22,7 +22,7 @@ import SearchComponentLink from './containers/searchlink';
 import FeatureComponentLink from './containers/featurelink';
 import FilterComponentLink from './containers/filterlink';
 import TogglerComponentLink from './containers/togglerlink';
-import {configureMapView, fetchWMTSLayer, addMapLayer, setSearchProjection, setSearchTownship, setAvailableFilters, storeFeatures, setFilterDescription, setToggler, toggleLayer} from './actions';
+import {configureMapView, fetchWMTSLayer, addMapLayer, setSearchProjection, setSearchTownship, setAvailableFilters, storeFeatures, setFilterDescription, setToggler, toggleLayer, setTogglerDescription} from './actions';
 import {mapReducer} from './reducers/map';
 import {searchReducer} from './reducers/search';
 import {filterReducer} from './reducers/filter';
@@ -207,6 +207,7 @@ if(settings.toggle_layers.length > 0 || settings.toggle_types.length > 0) {
         });
     });
     store.dispatch(setToggler(toggler));
+    store.dispatch(setTogglerDescription(settings.toggler_description));
 }
 if(settings.untoggled_layers.length > 0 || settings.untoggled_types.length > 0) {
     settings.untoggled_layers.forEach(id => {

src/reducers/toggler.js

@@ -1,4 +1,4 @@
-import { SET_TOGGLER, TOGGLE_LAYER } from '../actions';
+import { SET_TOGGLER, SET_TOGGLER_DESCRIPTION, TOGGLE_LAYER } from '../actions';
 import _ from 'lodash';
 
 const initialState = {
@@ -19,6 +19,8 @@ export const togglerReducer = (state = initialState, action) => {
             });
             toggledLayersState.push(action.layer);
             return { ...state, toggledLayersState };
+        case SET_TOGGLER_DESCRIPTION:
+            return { ...state, description: action.description };
     }
     return state;
 };