Merge pull request #40 from toepoke/feature/37--onAdd-needs-a-separat…

…e-save-event-from-onSave

Feature/37  on add needs a separate save event from on save

README.md

@@ -78,7 +78,7 @@ The method signature for the callback is *getMarkerImage(mapsed, markerType, tit
     <td><strong>markerType</strong> (string)</td>
     <td>
     	The type of marker being added to the map, this can be:<br/>
-    	*new* - New marker is being added by user (via the "+" button - see allowAdd)<br/>
+    	*new* - New marker is being added by user (via the "+" button - see onAddSave)<br/>
     	*google* - Marker being added was derived from the Google Places API<br/>
     	*custom* - Marker being added was derived from the application database, i.e. derived from the showOnLoad array.
     </td>
@@ -104,14 +104,6 @@ Ordinarily this is quite useful, however if it's outside the concern of your aud
 
 The **disablePoi** setting turns off these point of interest hotspots.  However POI cannot be turned off with [styled maps](https://developers.google.com/maps/documentation/javascript/styling).
 
-### allowAdd *(bool)*
-
-Places an "add place" icon (+) in the top-right of the map which allows the user to add additional places to your map.
-
-The *onSave* callback (see below) must be implemented to capture the place being added so it can be saved.
-
-[See add places example](examples/03-add-places-example.js)
-
 ### searchOptions *(object)*
 
 *searchOptions* is a JavaScript object (i.e. a child object) for defining how search functionality should be added to the map:
@@ -174,6 +166,7 @@ As part of the callback *mapsed* typically passes the data for the place the eve
     <th>Property</th><th>Description</th>
   </tr>
   <tr><td>canEdit</td><td>Flags this an <strong>editable</strong> place, i.e. when it's clicked on the map it has an <strong>edit</strong> button.</td></tr>
+  <tr><td>canDelete</td><td>Flags this a <strong>deletable</strong> place, i.e. when it's clicked on the map it has an <strong>delete</strong> button.</td></tr>
   <tr><td>lat</td><td>Latitude position of the place.</td></tr>
   <tr><td>lng</td><td>Longitude position of the place.</td></tr>
   <tr><td>place_id</td><td>Unique reference to a place in the Google Places database (this is provided by Google), see also <a href="#google-place">Google Place</a></td></tr>
@@ -217,17 +210,18 @@ Allows custom text/html to be injected as a header and/or footer to the tooltip
 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>"
-    }
-  }
+// Defines header and footers to be applied to the 
+// ... select/edit/delete tooltips shown to the user
+getHeaderTemplate: function(marker, isEditing) {
+	// You can have a different header 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
+	var markerType = marker.markerType;
+	var mode = (isEditing ? "edit" : "view");
+
+	return `<center>${markerType} ${mode} header</center>`.toUpperCase();
 }
 ````
 
@@ -261,9 +255,16 @@ Callback method signature:
 
 [See place picker example](examples/02-place-picker-example.js)
 
+
+### onAddSave
 ### onSave
 
-Fired when the **Save** button is clicked in a place window (after adding or editing a place).
+Fired when the **Save** button is clicked in a place window.  
+
+- For **new** places (added via the **+** toolbar icon) the **onAddSave** event is fired.
+- For **existing** places the **onSave** event is fired.
+
+The presence of the **onAddSave** event enables the **+** icon on the toolbar allowing the user to add a new place.
 
 Callback method signature:
 <table>

data/sporadic-places.json

@@ -1,20 +1,23 @@
 [
 	{
 		"canEdit": true,
+		"canDelete": true,
 		"lat": 50.0657041,
 		"lng": -5.713174599999999,
 		"name": "Land's End",
 		"street": "Land's End"
 	},
 	{
 		"canEdit": false,
+		"canDelete": false,
 		"lat": 51.5054564,
 		"lng": -0.07535649999999999,
 		"name": "Tower Bridge",
 		"street": "Tower Bridge Road"
 	},
 	{
 		"canEdit": false,
+		"canDelete": false,
 		"lat": 58.6373368,
 		"lng": -3.0688997,
 		"name": "John o' Groats",
@@ -23,6 +26,7 @@
 	},
 	{
 		"canEdit": false,
+		"canDelete": false,
 		"lat": 27.173891,
 		"lng": 78.042068,
 		"name": "Taj Mahal",
@@ -31,6 +35,7 @@
 	},
 	{
 		"canEdit": false,
+		"canDelete": false,
 		"lat": -25.344490,
 		"lng": 131.035431,
 		"name": "Ayers Rock",
@@ -39,6 +44,7 @@
 	},
 	{
 		"canEdit": false,
+		"canDelete": false,
 		"lat": 21.315603,
 		"lng": -157.858093,
 		"name": "Nankastu SC Hawaii Soccer Academy",

examples/01-custom-places-example.js

@@ -1,13 +1,14 @@
 function runExample1() {
     $("#custom-places").mapsed({
-		showOnLoad: 	
+		showOnLoad:
 		[
 			// City Varieties
 			{
 				// flag that this place should have the tooltip shown when the map is first loaded
 				autoShow: true,
-				// flags the user can edit this place
+				// flags the user cannot edit or delete this place
 				canEdit: false,
+				canDelete: false,
 				lat: 53.798823,
 				lng:-1.5426760000000286,
 				place_id: "ChIJQd3IwBtceUgRha6laiANoro"

examples/02-place-picker-example.js

@@ -31,13 +31,11 @@ function runExample2() {
 				lng:-1.5426760000000286,
 				place_id: "ChIJQd3IwBtceUgRha6laiANoro"
 			},
-		templateOptions: {
-			google: {
-				view: {
-					footer: "<center>I came from Google Places</center>",
-				}
-			}
-		}
+
+		getFooterTemplate: function(marker, isEditing) {
+			// Same footer for view & edit template
+			return "<center>Selected from Google Places</center>";
+		},
 
 	}); // mapsed
 }

examples/03-add-places-example.js

@@ -1,58 +1,65 @@
+function updateDatabase(m, newPlace) {
+	var missing = [];
+
+	// detect errors starting at bottom
+	// ... we only have space for one error at a time, so this way we'll report 
+	// ... from the top down
+	if (newPlace.postCode === "") missing.push("postcode");
+	if (newPlace.street === "")   missing.push("street");
+	if (newPlace.name === "")     missing.push("name");
+
+	// anything missing?
+	if (missing.length > 0) {
+		// return the error message so the callback doesn't progress
+		return "Required: " + missing.join();
+	}
+
+	if (newPlace) {
+		if (!newPlace.userData) {
+			// simulate a primary key being save to a db
+			newPlace.userData = parseInt(Math.random() * 100000);
+		}
+
+		var title = "";
+		var msg = 
+			"userData: " + newPlace.userData + 
+			"<br/>name: " + newPlace.name +
+			"<br/>street: " + newPlace.street + ", " + 
+				newPlace.area + ", " + 
+				newPlace.town + ", " + newPlace.postCode + 
+			"<br/>telNo: " + newPlace.telNo + 
+			"<br/>website: " + newPlace.website + 
+			"<br/>more: " + newPlace.url
+		;
+		if (newPlace.place_id) {
+			msg += "<br/>Place_id: " + details.place_id
+		}
+		if (newPlace.markerType == "new") {
+			title = "New place added!";
+		} else {
+			title = "Place saved!";
+		}
+		m.showMsg(title, msg);
+	}
+
+	// indicate form was OK and saved
+	return "";
+}
+
 function runExample3() {
     $("#add-places").mapsed({
 
-		// Adds the "+" button to the control bar at the top right of the map
-		allowAdd: true,
 		disablePoi: true,
 
 		// Enables edit of custom places (to your web application, not Google Maps!)
 		// ... again the presence of the callback enables the functionality
 		onSave: function(m, newPlace) {
-			var missing = [];
-
-			// detect errors starting at bottom
-			// ... we only have space for one error at a time, so this way we'll report 
-			// ... from the top down
-			if (newPlace.postCode === "") missing.push("postcode");
-			if (newPlace.street === "")   missing.push("street");
-			if (newPlace.name === "")     missing.push("name");
-
-			// anything missing?
-			if (missing.length > 0) {
-				// return the error message so the callback doesn't progress
-				return "Required: " + missing.join();
-			}
-
-			if (newPlace) {
-				if (!newPlace.userData) {
-					// simulate a primary key being save to a db
-					newPlace.userData = parseInt(Math.random() * 100000);
-				}
-
-				var title = "";
-				var msg = 
-					"userData: " + newPlace.userData + 
-					"<br/>name: " + newPlace.name +
-					"<br/>street: " + newPlace.street + ", " + 
-						newPlace.area + ", " + 
-						newPlace.town + ", " + newPlace.postCode + 
-					"<br/>telNo: " + newPlace.telNo + 
-					"<br/>website: " + newPlace.website + 
-					"<br/>more: " + newPlace.url
-				;
-				if (newPlace.place_id) {
-					msg += "<br/>Place_id: " + details.place_id
-				}
-				if (newPlace.markerType == "new") {
-					title = "New place added!";
-				} else {
-					title = "Place saved!";
-				}
-				m.showMsg(title, msg);
-			}
-
-			// indicate form was OK and saved
-			return "";
+			return updateDatabase(m, newPlace);
+		},
+		// Enables saving of new places, also adds the "+" button to the control bar 
+		// at the top right of the map
+		onAddSave: function(m, newPlace) {
+			return updateDatabase(m, newPlace);
 		},
 
 		// Custom marker images

examples/04-delete-places-example.js

@@ -4,7 +4,8 @@ function runExample4() {
 			// City Varieties
 			{
 				autoShow: true,
-				canEdit: true,
+				canEdit: false,
+				canDelete: true,
 				lat: 53.798823,
 				lng:-1.5426760000000286,
 				name: "CITY Varieties Music Hall",

examples/06-full-example.js

@@ -119,8 +119,9 @@ function fullWindowExample(e) {
 		// Emulate places being loaded from a db
 		showOnLoad: _myPlaces,
 
-		// Adds the "+" button to the control bar at the top right of the map
-		allowAdd: true,
+		// Disables showing Googles Points of Interest 
+		// (so we only show the user what we want them to see)
+		// ... note this doesn't work with custom themes
 		disablePoi: true,
 
 		// Illustrating custom behaviour
@@ -154,50 +155,44 @@ function fullWindowExample(e) {
 
 		// 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
+		getHeaderTemplate: function(marker, isEditing) {
+			// You can have a different header 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>"
-				}
-			}
+			var markerType = marker.markerType;
+			var mode = (isEditing ? "edit" : "view");
+
+			return `<center>${markerType} ${mode} header</center>`.toUpperCase();
+		},
+
+		// Defines header and footers to be applied to the 
+		// ... select/edit/delete tooltips shown to the user
+		getFooterTemplate: function(marker, isEditing) {
+			// You can have a different 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
+			var markerType = marker.markerType;
+			var mode = (isEditing ? "edit" : "view");
 
+			return `<center>${markerType} ${mode} footer</center>`.toUpperCase();
 		},
 
 		// 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) {
+			return this.__update(m, newPlace);
+		},
+		// Adds the "+" button to the control bar at the top right of the map
+		// And wires up the event for saving
+		onAddSave: function (m, newPlace) {
+			return this.__update(m, newPlace);
+		},
+
+		__update: function (m, newPlace) {
 			var missing = [];
 
 			// detect errors starting at bottom