From 404d7184fcbed66c2f4dfbbc9fe56ad24e52104e Mon Sep 17 00:00:00 2001
From: Philipp Spitzer <philipp@spitzer.priv.at>
Date: Tue, 23 Oct 2018 23:11:30 +0200
Subject: [PATCH] Implement simple popup.

---
 extension.json |  4 ++--
 wrmap.body.php | 12 ++++++++----
 wrmap.js       | 12 ++++++++++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/extension.json b/extension.json
index 5d38497..849a1e6 100644
--- a/extension.json
+++ b/extension.json
@@ -19,14 +19,14 @@
 			"scripts": [
 				"wrmap.js"
 			],
-			"styles": [],
+			"styles": ["wrmap.css"],
 			"position": "top"
 		},
 		"ext.wrmap.mobile": {
 			"scripts": [
 				"wrmap.js"
 			],
-			"styles": [],
+			"styles": ["wrmap.css"],
 			"position": "top",
 			"targets": "mobile"
 		}
diff --git a/wrmap.body.php b/wrmap.body.php
index 03af984..79a4ee8 100644
--- a/wrmap.body.php
+++ b/wrmap.body.php
@@ -438,12 +438,16 @@ class WrBaseMap {
 		// Create <div/> element where the map is placed in
 		global $wgExtensionAssetsPath;
 		$doc = new WrMapDOMDocument();
-		$div = $doc->appendElement('div', array('class' => 'wrmap', 'style' => 'border-style:none;', 'data-ext-path' => "$wgExtensionAssetsPath/wrmap"));
+		$div_map = $doc->appendElement('div', array('class' => 'wrmap', 'style' => 'border-style:none;', 'data-ext-path' => "$wgExtensionAssetsPath/wrmap"));
 		// progress message
-		$div->appendElement('div', array())->appendText(wfMessage('wrmap-loading')->text());
+		$div_map->appendElement('div', array())->appendText(wfMessage('wrmap-loading')->text());
 		// data
-		$div->appendElement('div', array('style' => 'height: 0px; display:none;'))->appendText($json_string);
-		return array($doc->saveHTML($div), 'markerType' => 'nowiki');
+		$div_map->appendElement('div', array('style' => 'height: 0px; display:none;'))->appendText($json_string);
+		// popup
+		$div_popup = $doc->appendElement('div', array('id' => 'popup', 'class' => 'ol-popup'));
+		$div_popup->appendElement('a', array('id' => 'popup-closer', 'href' => '#', 'class' => 'ol-popup-closer'));
+		$div_popup->appendElement('div', array('id' => 'popup-content'));
+		return array($doc->saveHTML($div_map) . $doc->saveHTML($div_popup), 'markerType' => 'nowiki');
 	}
 
 
diff --git a/wrmap.js b/wrmap.js
index 67292d6..8b7607b 100644
--- a/wrmap.js
+++ b/wrmap.js
@@ -153,6 +153,13 @@ function init_wrmap(i, jq_map) {
 		return style_path_function(feature, resolution);
 	};
 
+	// popup overlay
+	// -------------
+	var popup_container = document.getElementById('popup');
+	var popup_content = document.getElementById('popup-content');
+	var popup_closer = document.getElementById('popup-closer');
+	var popup_overlay = new ol.Overlay({element: popup_container, autoPan: true, autoPanAnimation: {duration: 250}});
+	popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
 
 	/*
 	var layer_path = new OpenLayers.Layer.Vector("Path", {
@@ -335,6 +342,7 @@ function init_wrmap(i, jq_map) {
 			layer_map,
 			layer_sledrun
 		],
+		overlays: [popup_overlay],
 		view: new ol.View({
 			center: ol.proj.fromLonLat([lon, lat]),
 			zoom: zoom
@@ -352,6 +360,10 @@ function init_wrmap(i, jq_map) {
 		style: style_function_selected,
 	});
 	map.addInteraction(select_hover);
+	map.on('singleclick', function(event) {
+		popup_content.innerHTML = '<p>You clicked</p>';
+		popup_overlay.setPosition(event.coordinate);
+	});
 	select_hover.on('select', function(event) {
 		console.log(event);
 	});
-- 
2.39.5