From 3cfabec1941fc93a923040325fe9afff4cb95bcc Mon Sep 17 00:00:00 2001
From: philipp <philipp@7aebc617-e5e2-0310-91dc-80fb5f6d2477>
Date: Wed, 30 Oct 2013 23:07:53 +0000
Subject: [PATCH] The HTML generation of the popup is now DOM based.

git-svn-id: http://www.winterrodeln.org/svn/servermediawiki/mediawiki_extensions/wrmap/trunk@1773 7aebc617-e5e2-0310-91dc-80fb5f6d2477
---
 wrmap.js | 43 +++++++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/wrmap.js b/wrmap.js
index f6b23ec..aca6cc0 100644
--- a/wrmap.js
+++ b/wrmap.js
@@ -5,6 +5,22 @@ function init_wrmap(i, jq_map) {
 	var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat
 	var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
 
+	// tool functions
+	function createElement(tagName, attributes={}) {
+		var element = $(document.createElement(tagName));
+		for (var attribute in attributes) {
+			element.attr(attribute, attributes[attribute]);
+		}
+		return element;
+	}
+
+	function appendElement(parentElement, tagName, attributes={}) {
+		var element = createElement(tagName, attributes);
+		parentElement.append(element);
+		return element;
+	}
+
+
 	// extract geojson from map element and clear map element's content
 	jq_map = $(jq_map);
 	OpenLayers.ImgPath = jq_map.attr('data-img-path'); // e.g. "/mediawiki/extensions/wrmap/openlayers/img/"
@@ -212,25 +228,24 @@ function init_wrmap(i, jq_map) {
 		autoActivate: true,
 		toggle: true,
 		onSelect: function(feature) {
-			var popup_text = '';
+			var popup_div = createElement('div');
 			if (feature.attributes.type == 'sledrun') {
-				popup_text += "<h2>" + feature.attributes.name + '</h2>\n' +
-				'<ul>\n' +
-				'<li><a href="' + feature.attributes.wiki + '">Details zur Rodelbahn</a></li>\n' + 
-				'<li>Rodelbahnzustand<br/>';
+				popup_div.append(createElement('h2').text(feature.attributes.name));
+				var ul = appendElement(popup_div, 'ul');
+				ul.append(createElement('li').append(createElement('a', {'href': feature.attributes.wiki}).text('Details zur Rodelbahn')));
+				var li = appendElement(ul, 'li').text('Rodelbahnzustand').append(createElement('br'));
 				if (feature.attributes.condition !== undefined) {
-					var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelm&auml;&szlig;ig', 4: 'Schlecht', 5: 'Geht nicht'};
+					var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
 					var year_month_day = feature.attributes.date_report.split('-');
-					popup_text += '<a href="' + feature.attributes.wiki + '#Eintr.C3.A4ge">' + condition_text[feature.attributes.condition] + '</a> ' + 
-					'<small>' + year_month_day[2] + '.' + year_month_day[1] + '.</small> ' +
-					'<em><a href="' + feature.attributes.wiki + '#Eintragen">Neu</a></em>';
+					li.append(createElement('a', {'href': feature.attributes.wiki + '#Eintr.C3.A4ge'}).text(condition_text[feature.attributes.condition]), ' ');
+					li.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
+					li.append(createElement('em').append(createElement('a', {'href': feature.attributes.wiki + '#Eintragen'}).text('Neu')));
 				} else {
-					popup_text += '<em><a href="' + feature.attributes.wiki + '#Eintragen">Bitte eintragen</a></em>';
+					li.append(createElement('em').append(createElement('a', {'href': feature.attributes.wiki + '#Eintragen'}).text('Bitte eintragen')));
 				}
-				popup_text += '</li>\n</ul>\n';
 			} else if (feature.attributes.wiki !== undefined) {
-				if (feature.attributes.name != undefined) popup_text += '<h2>' + feature.attributes.name + '</h2>\n';
-				popup_text += '<p><a href="' + feature.attributes.wiki + '">Details</a></p>\n';
+				if (feature.attributes.name != undefined) popup_div.append(createElement('h2').text(feature.attributes.name));
+				popup_div.append(createElement('p').append(createElement('a', {'href': feature.attributes.wiki}).text('Details')));
 			} else return;
 
 			// Open popup
@@ -238,7 +253,7 @@ function init_wrmap(i, jq_map) {
 			var popup = new OpenLayers.Popup.FramedCloud('sledruninfopopup_' + feature.attributes.wiki, 
 			feature.geometry.getBounds().getCenterLonLat(),
 			null,
-			popup_text,
+			popup_div.html(),
 			null, true, function(event) {
 				// onPopupClose
 				selectFeatureControl.unselectAll();
-- 
2.39.5