diff --git a/docs/changelog.md b/docs/changelog.md
index 77fe4c29..ca2ed60d 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -74,6 +74,7 @@ COMMIT;
- allow to use an unicode character as Marker symbol (#527)
- add `{rank}` as dynamic feature property (to be used in popup or icon symbol)
- add an explicit button to attach a owner to an anonyous map (#568)
+- Add 'TablePanel' popup template (#481)
## 0.8.0
diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index 1d14edfd..aa112191 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -209,7 +209,8 @@ L.FormBuilder.PopupTemplate = L.FormBuilder.Select.extend({
['Table', L._('Table')],
['GeoRSSImage', L._('GeoRSS (title + image)')],
['GeoRSSLink', L._('GeoRSS (only link)')],
- ['SimplePanel', L._('Side panel')]
+ ['SimplePanel', L._('Side panel')],
+ ['TablePanel', L._('Side panel')]
],
toJS: function () {
diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index 23855e5f..cd8994cb 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -21,7 +21,7 @@ L.U.Popup = L.Popup.extend({
renderBody: function () {
var template = this.feature.getOption('popupContentTemplate'),
container = L.DomUtil.create('div', ''),
- content, properties, center;
+ content = '', properties, center;
if (this.options.parseTemplate) {
properties = this.feature.extendedProperties();
// Resolve properties inside description
@@ -106,36 +106,6 @@ L.U.Popup.BaseWithTitle = L.U.Popup.extend({
});
-L.U.Popup.Table = L.U.Popup.BaseWithTitle.extend({
-
- formatRow: function (key, value) {
- if (value.indexOf('http') === 0) {
- value = '' + value + '';
- }
- return value;
- },
-
- addRow: function (container, key, value) {
- var tr = L.DomUtil.create('tr', '', container);
- L.DomUtil.add('th', '', tr, key);
- L.DomUtil.add('td', '', tr, this.formatRow(key, value));
- },
-
- renderBody: function () {
- var table = L.DomUtil.create('table');
-
- for (var key in this.feature.properties) {
- if (typeof this.feature.properties[key] === 'object' || key === 'name') continue;
- // TODO, manage links (url, mailto, wikipedia...)
- this.addRow(table, key, L.Util.escapeHTML(this.feature.properties[key]).trim());
- }
- return table;
- }
-
-});
-
-L.U.Popup.table = L.U.Popup.Table; // backward compatibility
-
L.U.Popup.GeoRSSImage = L.U.Popup.BaseWithTitle.extend({
options: {
@@ -178,11 +148,7 @@ L.U.Popup.GeoRSSLink = L.U.Popup.extend({
}
});
-L.U.Popup.SimplePanel = L.U.Popup.extend({
-
- options: {
- zoomAnimation: false
- },
+L.U.Popup.PanelMixin = {
allButton: function () {
var button = L.DomUtil.create('li', '');
@@ -206,4 +172,54 @@ L.U.Popup.SimplePanel = L.U.Popup.extend({
_updateLayout: function () {},
_updatePosition: function () {},
_adjustPan: function () {}
+
+}
+
+L.U.Popup.SimplePanel = L.U.Popup.extend({
+
+ includes: L.U.Popup.PanelMixin,
+
+ options: {
+ zoomAnimation: false
+ }
+
+});
+
+
+L.U.Popup.TableMixin = {
+
+ formatRow: function (key, value) {
+ if (value.indexOf('http') === 0) {
+ value = '' + value + '';
+ }
+ return value;
+ },
+
+ addRow: function (container, key, value) {
+ var tr = L.DomUtil.create('tr', '', container);
+ L.DomUtil.add('th', '', tr, key);
+ L.DomUtil.add('td', '', tr, this.formatRow(key, value));
+ },
+
+ renderBody: function () {
+ var table = L.DomUtil.create('table');
+
+ for (var key in this.feature.properties) {
+ if (typeof this.feature.properties[key] === 'object' || key === 'name') continue;
+ // TODO, manage links (url, mailto, wikipedia...)
+ this.addRow(table, key, L.Util.escapeHTML(this.feature.properties[key]).trim());
+ }
+ return table;
+ }
+
+};
+
+L.U.Popup.Table = L.U.Popup.BaseWithTitle.extend({
+ includes: L.U.Popup.TableMixin
+});
+
+L.U.Popup.table = L.U.Popup.Table; // backward compatibility
+
+L.U.Popup.TablePanel = L.U.Popup.extend({
+ includes: [L.U.Popup.PanelMixin, L.U.Popup.TableMixin]
});