added support for new style of map markers

assets/admin/js/admin.js

@@ -32,6 +32,25 @@
     });
 })(jQuery);
 
+(function($) {
+    "use strict";
+    $(function() {
+        const taxonomyBoxes = $("#cmb2-metabox-_cb_taxonomy_metabox");
+        if (taxonomyBoxes.length) {
+            const mapMarkerUploadInput = $("#_cb_map_marker_id");
+            const mapMarkerColor = $(".cmb2-id--cb-map-marker-color");
+            const handleMapMarkerSelection = function() {
+                if (mapMarkerUploadInput.val() !== "") {
+                    mapMarkerColor.show();
+                } else {
+                    mapMarkerColor.hide();
+                }
+            };
+            setInterval(handleMapMarkerSelection, 500);
+        }
+    });
+})(jQuery);
+
 (function($) {
     "use strict";
     $(function() {

assets/admin/js/src/item-taxonomy.js

@@ -0,0 +1,20 @@
+(function ($) {
+    'use strict';
+    $(function () {
+        const taxonomyBoxes =  $("#cmb2-metabox-_cb_taxonomy_metabox");
+        if (taxonomyBoxes.length) {
+            const mapMarkerUploadInput = $('#_cb_map_marker_id');
+            const mapMarkerColor = $( '.cmb2-id--cb-map-marker-color' );
+
+            const handleMapMarkerSelection = function() {
+                if (mapMarkerUploadInput.val() !== "") {
+                    mapMarkerColor.show();
+                } else {
+                    mapMarkerColor.hide();
+                }
+            }
+            //TODO: Prevent polling. Find event handler that will be called when upload input value changes programmatically.
+            setInterval(handleMapMarkerSelection, 500);
+        }
+    });
+})(jQuery);

assets/map/js/cb-map-marker-upload.js

@@ -114,6 +114,91 @@ var cb_map_marker_upload = {
   }
 }
 
+var cb_map_icon_upload = {
+  translation: {},
+
+  //based on: https://jeroensormani.com/how-to-include-the-wordpress-media-selector-in-your-plugin/
+  init: function($, data) {
+    // uploading files
+  	var file_frame;
+  	var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
+  	var set_to_post_id = data.$custom_marker_media_id.val();
+
+    data.$remove_image_button.on('click', function(event) {
+      event.preventDefault();
+
+      data.$custom_marker_media_id.val('');
+      data.$image_preview.attr('src', '');
+
+      data.$marker_icon_color.val(0);
+
+      data.$image_preview_settings.hide();
+    });
+
+  	data.$select_image_button.on('click', function(event) {
+
+  		event.preventDefault();
+  		// if the media frame already exists, reopen it.
+  		if ( file_frame ) {
+  			// Set the post ID to what we want
+  			file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
+  			// Open frame
+  			file_frame.open();
+  			return;
+
+  		} else {
+  			// set the wp.media post id so the uploader grabs the ID we want when initialised
+  			wp.media.model.settings.post.id = set_to_post_id;
+  		}
+
+  		// create the media frame
+  		file_frame = wp.media.frames.file_frame = wp.media({
+  			title: cb_map_marker_upload.translation.SELECT_IMAGE,
+  			button: {
+  				text: cb_map_marker_upload.translation.SAVE,
+  			},
+  			multiple: false
+  		});
+
+  		// image select callback
+  		file_frame.on( 'select', function() {
+  			var attachment = file_frame.state().get('selection').first().toJSON();
+
+  			// Do something with attachment.id and/or attachment.url here
+  			data.$image_preview.attr( 'src', attachment.url ).css( 'width', 'auto' );
+  			data.$custom_marker_media_id.val( attachment.id );
+  			// restore the main post ID
+  			wp.media.model.settings.post.id = wp_media_post_id;
+  		});
+
+  		// finally, open the modal
+  		file_frame.open();
+  	});
+
+  	// restore the main ID when the add media button is pressed
+  	$( 'a.add_media' ).on( 'click', function() {
+  		wp.media.model.settings.post.id = wp_media_post_id;
+  	});
+
+    data.$image_preview.on('load', function() {
+
+      data.$image_preview_settings.show();
+      data.$marker_icon_color.show();
+    });
+
+    //if parent details got opened, trigger load for cached images
+    var $parent_details = data.$image_preview.closest('details');
+    $parent_details.on('toggle', function() {
+      var src = data.$image_preview.attr('src');
+      if($parent_details.prop('open') == true && src.length > 0) {
+        setTimeout(function() {
+          data.$image_preview.load();
+        }, 0);
+      }
+    });
+  }
+}
+
 jQuery(document).ready(function($) {
 
   var marker_data = {
@@ -166,4 +251,14 @@ jQuery(document).ready(function($) {
   };
 
   cb_map_marker_upload.init($, marker_item_draft_data);
+
+  var marker_icon_data = {
+    $select_image_button: $('#select-marker-icon-button'),
+    $remove_image_button: $('#remove-marker-icon-button'),
+    $custom_marker_media_id: $('input[name="cb_map_options[custom_marker_icon_media_id]"'),
+    $image_preview: $('#marker-icon-preview'),
+    $marker_icon_color: $('#marker-icon-color'),
+    $image_preview_settings: $('#marker-icon-preview-settings')
+  };
+  cb_map_icon_upload.init($, marker_icon_data);
 });

src/Map/MapAdmin.php

@@ -36,6 +36,8 @@ class MapAdmin {
 		'marker_icon_height',
 		'marker_icon_anchor_x',
 		'marker_icon_anchor_y',
+		'custom_marker_icon_media_id',
+		'marker_icon_color',
 		'show_location_contact',
 		'label_location_contact',
 		'show_location_opening_hours',
@@ -128,6 +130,8 @@ class MapAdmin {
 	const MARKER_ITEM_DRAFT_ICON_ANCHOR_Y_DEFAULT = 0;
 	const AVAILABILITY_MAX_DAYS_TO_SHOW_DEFAULT = 11;
 	const AVAILABILITY_MAX_DAY_COUNT_DEFAULT = 14;
+	const CUSTOM_MARKER_ICON_MEDIA_ID_DEFAULT = null;
+	const MARKER_ICON_COLOR_DEFAULT = '#84AE53';
 
 	//const MARKER_POPUP_CONTENT_DEFAULT = "'<b>' + location.location_name + '</b><br>' + location.address.street + '<br>' + location.address.zip + ' ' + location.address.city + '<p>' + location.opening_hours + '</p>'";
 

src/Map/MapShortcode.php

@@ -198,6 +198,13 @@ public static function get_settings( $cb_map_id ): array {
 						],
 					];
 				}
+			} elseif ( $key == 'custom_marker_icon_media_id') {
+				if ($value != null ) {
+					$settings['marker_icon'] = [
+						'url'  => wp_get_attachment_url( $options['custom_marker_icon_media_id'] ),
+						'color' => $options['marker_icon_color'],
+					];
+				}
 			}
 			//@since 2.9 new filtergroups pulled from settings
 			elseif ( $key == 'cb_items_available_filtergroups' ) {

src/Plugin.php

@@ -405,7 +405,7 @@ public static function registerItemTaxonomyMetaboxes() {
 
 		$cmb_taxonomy = new_cmb2_box(
 			array(
-				'id'           => COMMONSBOOKING_METABOX_PREFIX . 'edit',
+				'id'           => COMMONSBOOKING_METABOX_PREFIX . 'taxonomy_metabox',
 				'title'        => esc_html__( 'Item Category', 'commonsbooking' ),
 				'object_types' => array( 'term' ),
 				'taxonomies'   => array( 'category', $taxonomy ),
@@ -421,6 +421,32 @@ public static function registerItemTaxonomyMetaboxes() {
 				'desc' => __( 'Define name that should be used for the category if it is displayed in the map as a filter group. You can also use this to add custom HTML to the category name. When left empty, the defined name of the category will be used.', 'commonsbooking' ),
 			)
 		);
+		$cmb_taxonomy->add_field( 
+			array(
+				'name'    => __( 'Map Marker image', 'commonsbooking'),
+				'desc'    => __( 'Add a custom image that will be used in the marker for this category. (Optional)', 'commonsbooking' ),
+				'id'      => COMMONSBOOKING_METABOX_PREFIX . 'map_marker',
+				'type'    => 'file',
+				'options' => array(
+					'url' => false,
+				),
+				'query_args' => array(
+					'type' => array(
+						'image/png',
+					),
+				),
+				'preview_size' => 'small', // Image size to use when previewing in the admin.
+			) 
+		);
+		$cmb_taxonomy->add_field(
+			array (
+				'name' => __( 'Map Marker base color', 'commonsbooking' ),
+				'desc' => __( 'Define the color that makes up the marker sorrounding the image.', 'commonsbooking' ),
+				'id'   => COMMONSBOOKING_METABOX_PREFIX . 'map_marker_color',
+				'type' => 'colorpicker',
+				'default' => '#84AE53',
+			)
+		);
 	}
 
 	/**