Changeset 1936759

Timestamp:

09/06/2018 10:07:29 AM (7 years ago)

Author:

andrekelling

Message:

add customisation possiblity of maps style v1.4.0

Location:

mapple

Files:

• assets/screenshot-2.jpg (modified) (previous)
• assets/screenshot-3.jpg (modified) (previous)
• assets/screenshot-4.jpg (added)
• trunk/README.md (added)
• trunk/admin/class-mapple-admin.php (modified) (3 diffs)
• trunk/admin/partials/mapple-admin-field-textarea.php (added)
• trunk/admin/partials/mapple-admin-page-settings.php (modified) (1 diff)
• trunk/admin/partials/mapple-admin-settings-section-api.php (modified) (1 diff)
• trunk/mapple.php (modified) (2 diffs)
• trunk/public/class-mapple-public.php (modified) (1 diff)
• trunk/public/js/mapple-public.js (modified) (2 diffs)
• trunk/readme.txt (modified) (3 diffs)

mapple/trunk/admin/class-mapple-admin.php

@@ -202 +202 @@
 
     /**
+     * Creates a textarea field
+     *
+     * @param   array       $args           The arguments for the field
+     * @return  string                      The HTML field
+     */
+    public function field_textarea( $args ) {
+
+        $defaults['class']          = 'widefat';
+        $defaults['description']    = '';
+        $defaults['label']          = '';
+        $defaults['name']           = $this->plugin_name . '-options[' . $args['id'] . ']';
+        $defaults['placeholder']    = '';
+        $defaults['value']          = '';
+        $defaults['rows']           = 6;
+
+        apply_filters( $this->plugin_name . '-field-text-options-defaults', $defaults );
+
+        $atts = wp_parse_args( $args, $defaults );
+
+        if ( ! empty( $this->options[$atts['id']] ) ) {
+
+            $atts['value'] = $this->options[$atts['id']];
+
+        }
+
+        include( plugin_dir_path( __FILE__ ) . 'partials/' . $this->plugin_name . '-admin-field-textarea.php' );
+
+    } // field_textarea()
+
+    /**
      * Returns an array of options names, fields types, and default values
      *
@@ -211 +241 @@
 
         $options[] = array( 'gmap-api-key', 'text', '' );
+        $options[] = array( 'gmap-style-json', 'text', '' );
 
         return $options;
@@ -230 +261 @@
             $this->plugin_name . '-api',
             array(
-                'description'   => 'Enter your key and save.',
+                'description'   => esc_html__( 'Enter your key and save.', 'mapple' ),
                 'id'            => 'gmap-api-key',
                 'placeholder'   => 'tHiSwIlLbEyOuRkEyToGoOgLeMaPsApI'
+            )
+        );
+
+        add_settings_field(
+            'gmap-style-json',
+            apply_filters( $this->plugin_name . 'label-gmap-style-json', esc_html__( 'Google Maps Style JSON', 'mapple' ) ),
+            array( $this, 'field_textarea' ),
+            $this->plugin_name,
+            $this->plugin_name . '-api',
+            array(
+                'description'   => esc_html__( 'There is a nice tool https://mapstyle.withgoogle.com/ to create the JSON.', 'mapple' ),
+                'id'            => 'gmap-style-json',
+                'placeholder'   => esc_html__( 'put your JSON code inside here', 'mapple' ),
+                'rows'          => 24,
             )
         );

mapple/trunk/admin/partials/mapple-admin-page-settings.php

@@ -36 +36 @@
 </ul>
 <p><?php echo __( 'There are a few possible attributes you can provide to your `mapple_clients` shortcode. Here a full example with all possible options:', 'mapple' ); ?></p>
-<code>[mapple_clients title-name="Name" title-address="Adresse" title-desc="Beschreibung" title-tags="Branche" title-search="Suche" title-search-placeholder="lostippen..." with-tags="true" with-search="true"]</code>
+<code>[mapple_clients title-name="Name" title-address="Adresse" title-desc="Beschreibung" title-tags="Branche" title-search="Suche" title-search-placeholder="lostippen..." title-filter-label="Nach Branche filtern" with-tags="true" with-search="true"]</code>
 <p><?php echo __( 'all `title-` attributes are for customising words', 'mapple' ); ?></p>
 <p><?php echo __( 'all `with-` attributes activate the tags coloumn, and filter when search is also active', 'mapple' ); ?></p>

mapple/trunk/admin/partials/mapple-admin-settings-section-api.php

@@ -13 +13 @@
  */
 
-?><p></p>
+// nothing to add here

mapple/trunk/mapple.php

@@ -17 +17 @@
  * Plugin URI:        https://andrekelling.de/
  * Description:       To show a google map with the locations of your clients. You can output additionally a sorted listing table of all your clients. Just with shortcodes.
- * Version:           1.3.0
+ * Version:           1.4.0
  * Author:            André Kelling
  * Author URI:        https://andrekelling.de/about
@@ -36 +36 @@
  * Rename this for your plugin and update it as you release new versions.
  */
-define( 'MAPPLE_VERSION', '1.3.0' );
+define( 'MAPPLE_VERSION', '1.4.0' );
 
 /**

mapple/trunk/public/class-mapple-public.php

@@ -99 +99 @@
         wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/mapple-public.js', array($this->plugin_name.'gmaps'), $this->version, true );
 
-        $dataToBePassed = array(
-            'home'            => get_stylesheet_directory_uri(),
-            'pleaseWaitLabel' => __( 'Please wait...', 'default' )
-        );
-        wp_localize_script( $this->plugin_name, 'php_vars', $dataToBePassed );
-
-
         $options    = get_option( $this->plugin_name . '-options' );
         $apiKey     = $options['gmap-api-key'];
+        $styleJSON  = $options['gmap-style-json'];
 
         if(! empty($apiKey)){
             wp_enqueue_script($this->plugin_name.'gmaps' , 'https://maps.googleapis.com/maps/api/js?key='.$apiKey, '', $this->version, true );
+
+            if(! empty($styleJSON)){
+                $dataToBePassed = array(
+                    'styleJSON'            => json_decode($styleJSON)
+                );
+                wp_localize_script( $this->plugin_name, 'mapple_vars', $dataToBePassed );
+            }
         }
-
-
     }
 

mapple/trunk/public/js/mapple-public.js

@@ -4 +4 @@
 
     const plugin = {};
-
+    
     const settings = {
         bounds: new google.maps.LatLngBounds(),
         infowindow: new google.maps.InfoWindow(),
+        mapStyle: (typeof(mapple_vars) !== 'undefined') ? mapple_vars.styleJSON : '',
         tableSelector: document.querySelectorAll('.mapple__table')[0],
         tableTagsSelectorClass: 'mapple__tags',
@@ -35 +36 @@
             mapTypeControl: false,
             zoomControl: true,
-            panControl: true
+            panControl: true,
+            styles: settings.mapStyle
         };
 

mapple/trunk/readme.txt

@@ -5 +5 @@
 Requires at least: 4.7
 Tested up to: 4.9.5
-Stable tag: 1.3.0
+Stable tag: 1.4.0
 Requires PHP: 7.0
 License: GPLv3.0 or later
@@ -19 +19 @@
 This Plugin does not need jQuery!
 
-The google map is centered shown to all markers added. Markers got little Infowindows with client's name, website and address
+The google map is centered shown to all markers added. Markers got little Infowindows with client's name, website and address.
+Map Style customisation is possible.
 
 A few notes about technical things:
@@ -52 +53 @@
 
 1. Output of Map and Table on the Front End. In between some text. You can place your shortcodes around.
-2. New custom clients Post Type with address autocompletion
-3. Enable search and filter section for clients in the table
+2. custom styled Map with open infowindow
+3. New custom clients Post Type with address autocompletion
+4. Enable search and filter section for clients in the table
 
 == Changelog ==
+
+= 1.4.0 =
+* enable google maps style customisation
+* remove unused `php_vars` from wp_localize_script
 
 = 1.3.0 =