Merge pull request #23 from toepoke/feature/#22--Allow-template-custo…

…misation-hooks

Feature/#22  allow template customisation hooks

README.md

@@ -211,6 +211,34 @@ As part of the callback *mapsed* typically passes the data for the place the eve
   <tr><td>url</td><td>More info url</td></tr>
 </table>
 
+## Template Customisations
+
+Allows custom text/html to be injected as a header and/or footer to the tooltip window which 
+appears when the end-user selects or adds a new _place_.
+
+````js
+templateOptions: {
+  custom: {
+    view: {
+      header: "<center>custom view header</center>",
+      footer: "<center>custom view footer</center>",
+    },
+    edit: {
+      header: "<center>custom edit header</center>",
+      footer: "<center>custom edit footer</center>"
+    }
+  }
+}
+````
+
+The above customisation will show a header and footer to the map tooltip when and end-user selects a _custom_ place.
+
+Custom headers & footers can be set for:
+ - _Custom_ places as above
+ - _New_ places (when your end-user clicks the [+](#onAdd) button
+ - _Google_ places where a map _marker_ is derived from [Google Places API](#Google-Place)
+
+[See full-window example](examples/06-full-example.js)
 
 ## Events / Callbacks
 

examples/02-place-picker-example.js

@@ -30,9 +30,16 @@ function runExample2() {
 				lat: 53.798823,
 				lng:-1.5426760000000286,
 				place_id: "ChIJQd3IwBtceUgRha6laiANoro"
+			},
+		templateOptions: {
+			google: {
+				view: {
+					footer: "<center>I came from Google Places</center>",
+				}
 			}
-
-	});
+		}
+
+	}); // mapsed
 }
 
 $(document).ready(function() {

examples/06-full-example.js

@@ -178,7 +178,50 @@ function fullWindowExample(e) {
 			// indicate tip should be closed
 			return true;
 		},
-
+
+		// Defines header and footers to be applied to the 
+		// ... select/edit/delete tooltips shown to the user
+		templateOptions: {
+			// You can have a different header or footer for
+			// each "markerType".  Supported customisations are:
+			// "custom" - Where your user has previously added a marker
+			// "add" - Where your user has click "add" to create a new marker
+			// "google" - Where your user has clicked on a marker found via Google Places APi
+			custom: {
+				view: {
+					header: "<center>custom view header</center>",
+					footer: "<center>custom view footer</center>",
+				},
+				edit: {
+					header: "<center>custom edit header</center>",
+					footer: "<center>custom edit footer</center>"
+				}
+			},
+
+			add: {
+				view: {
+					header: "<center>add view header</center>",
+					footer: "<center>add view footer</center>",
+				},
+				edit: {
+					header: "<center>add edit header</center>",
+					footer: "<center>add edit footer</center>"
+				}
+			},
+
+			google: {
+				view: {
+					header: "<center>google view header</center>",
+					footer: "<center>google view footer</center>",
+				},
+				edit: {
+					header: "<center>google edit header</center>",
+					footer: "<center>google edit footer</center>"
+				}
+			}
+
+		},
+
 		// Enables edit of new places (to your web application, not Google Maps!)
 		// ... again the presence of the callback enables the functionality
 		onSave: function(m, newPlace) {

index.html

@@ -187,14 +187,22 @@ <h3 class="text-center">Place Picker</h3>
   },
 
   showOnLoad: 
-    // City Varieties - note there's only one place here, we don't need an array
-    {
-      // flag that this place should have the tooltip shown when the map is first loaded
-      autoShow: true,
-      lat: 53.798823,
-      lng:-1.5426760000000286,
-      place_id: "ChIJQd3IwBtceUgRha6laiANoro"
+  // City Varieties
+  {
+    // flag that this place should have the tooltip shown when the map is first loaded
+    autoShow: true,
+    lat: 53.798823,
+    lng:-1.5426760000000286,
+    place_id: "ChIJQd3IwBtceUgRha6laiANoro"
+  },
+  templateOptions: {
+    google: {
+      view: {
+        footer: '&lt;center&gt;I came from Google Places&lt;/center&gt;',
+      }
     }
+  }
+
 });
 								</pre>
 							</div>
@@ -203,6 +211,9 @@ <h3 class="text-center">Place Picker</h3>
 								the <a href="https://github.com/toepoke/mapsed/blob/master/README.md#onselect">onSelect</a> 
 								callback.
 							</p>
+							<p>
+								Note you can also add your own <a href="https://github.com/toepoke/mapsed/blob/master/README.md#Template-Customisations">headers &amp; footers</a> too.
+							</p>
 						</div>
 					</div>
 				</div>

mapsed.js

@@ -910,7 +910,8 @@
 		/// Quick and dirty template function, just does a replacement
 		/// according to our model ... nothing more advanced than that!
 		/// </summary>
-		function applyTemplate(tmpl, model, $ctx) {
+		function applyTemplate(tmpl, model, renderOptions, $ctx) {
+			var header = "", footer = "";
 			tmpl = replaceAll("{NAME}", model.name, tmpl);
 			tmpl = replaceAll("{SHORT_NAME}", shorten(model.name, 25), tmpl);
 			tmpl = replaceAll("{STREET}", model.street, tmpl);
@@ -930,9 +931,18 @@
 			if (model.addInfo) {
 				tmpl = replaceAll("{ADD_INFO}", model.addInfo, tmpl);
 			}
+			if (renderOptions?.header) header = renderOptions.header;
+			if (renderOptions?.footer) footer = renderOptions.footer;
+			tmpl = replaceAll("{HEADER}", header, tmpl);
+			tmpl = replaceAll("{FOOTER}", footer, tmpl);
 
 			$ctx.html(tmpl);
 
+			// The edit template is a table so if there's no content we need to hide the row
+			// ... we don't know which template we're dealing with so just apply to both
+			$ctx.find(".mapsed-view-header").toggle( header !== '' );
+			$ctx.find(".mapsed-view-footer").toggle( footer !== '' );
+
 		} // applyTemplate
 
 
@@ -1412,15 +1422,25 @@
 			// ensure we have a _clean_ model to play with
 			sanitise(model);
 
+			// Do we have any header/footer customisation for _this_ typeof marker
+			var renderOptions = null;
+			if (settings.templateOptions && settings.templateOptions[marker.markerType]) {
+				if (inRwMode) {
+					renderOptions = settings.templateOptions[marker.markerType].edit;
+				} else {
+					renderOptions = settings.templateOptions[marker.markerType].view;
+				}
+			}
+
 			if (inRwMode) {
 				// re-apply template
 				var tmpl = getEditTemplate();
-				applyTemplate(tmpl, model, $rw);
+				applyTemplate(tmpl, model, renderOptions, $rw);
 
 			} else {
 				// re-apply template
 				var tmpl = getViewTemplate();
-				applyTemplate(tmpl, model, $ro);
+				applyTemplate(tmpl, model, renderOptions, $ro);
 				hideEmpty(model, $ro);
 			}
 
@@ -1439,6 +1459,11 @@
 			// proved to be too unreliable when used with map tooltips!
 			var html =
 				"<table class='mapsed-container mapsed-view'>"
+				+ "<tr class='mapsed-view-header'>"
+				+ "<td colspan='3'>"
+				+ "{HEADER}"
+				+ "</td>"
+				+ "</tr>"
 				+ "<tr>"
 				+ "<td colspan='3'>"
 				+ "<h1 class='mapsed-name' title='{NAME}'>{SHORT_NAME}</h1>"
@@ -1471,8 +1496,13 @@
 				+ "<button class='mapsed-delete-button'>" + settings.ActionButtons.Delete + "</button>"
 				+ "</td>"
 				+ "</tr>"
+				+ "<tr class='mapsed-view-footer'>"
+				+ "<td colspan='3'>"
+				+ "{FOOTER}"
+				+ "</td>"
+				+ "</tr>"
 				+ "</table>"
-				;
+			;
 
 			return html;
 
@@ -1485,6 +1515,7 @@
 		function getEditTemplate() {
 			var html =
 				"<div class='mapsed-container mapsed-address-entry mapsed-edit'>"
+				+ "{HEADER}"
 				+ "<h1>Place details:</h1>"
 				+ "<ul>"
 				+ "<li>"
@@ -1538,6 +1569,7 @@
 				// placeholder for error messages
 				+ "<span class='mapsed-error'>&nbsp;</span>"
 				+ "</div>"
+				+ "{FOOTER}"
 				+ "</div>"  // mapsed-address-entry
 				;