Skip to content

Commit

Permalink
refactor: TemplateOptions was hard-coded for _all_ place popups.
Browse files Browse the repository at this point in the history
Changed to use a function (getHeaderTemplate or getFooterTemplate) so the consumer can show header/footer content dynamically based on the place that has been selected by the user.
  • Loading branch information
toepoke committed Mar 22, 2024
1 parent 2dee85e commit 1ac502a
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 54 deletions.
23 changes: 12 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,17 +209,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();
}
````

Expand Down
12 changes: 5 additions & 7 deletions examples/02-place-picker-example.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
42 changes: 20 additions & 22 deletions examples/06-full-example.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,33 +155,31 @@ 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>"
}
},
var markerType = marker.markerType;
var mode = (isEditing ? "edit" : "view");

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>"
}
},
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();
},

google: {
view: {
Expand Down
21 changes: 14 additions & 7 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -195,13 +195,20 @@ <h3 class="text-center" id="picking-places">Place Picker</h3>
lng:-1.5426760000000286,
place_id: "ChIJQd3IwBtceUgRha6laiANoro"
},
templateOptions: {
google: {
view: {
footer: '&lt;center&gt;I came from Google Places&lt;/center&gt;',
}
}
}

// 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 `&lt;center&gt;${markerType} ${mode} header&lt;/center&gt;`.toUpperCase();
},

});
</pre>
Expand Down
14 changes: 7 additions & 7 deletions mapsed.js
Original file line number Diff line number Diff line change
Expand Up @@ -1705,13 +1705,13 @@
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;
}
var renderOptions = {};

if (settings.getHeaderTemplate) {
renderOptions.header = settings.getHeaderTemplate(marker, inRwMode);
}
if (settings.getFooterTemplate) {
renderOptions.footer = settings.getFooterTemplate(marker, inRwMode);
}

if (inRwMode) {
Expand Down

0 comments on commit 1ac502a

Please sign in to comment.