Region popups (content not done)

HexGrid/Dynamic.pm

@@ -9,16 +9,21 @@ use feature "signatures";
 no warnings "experimental::signatures";
 
 $HexGrid::Dynamic::click_pin = <<EOS;
-function clickPin(pinId, containerId) {
+function clickPin(pinId, event) {
+	event.stopPropagation();
 	let popup = document.getElementById(pinId + '-popup');
 	popup.style.visibility = popup.style.visibility == 'visible' ? 'hidden' : 'visible';
 }
 EOS
 $HexGrid::Dynamic::click_region = <<EOS;
-function clickRegion(regionName, x, y) {
-	// let popup = document.getElementById(pinId + '-popup');
-	// popup.style.visibility = popup.style.visibility == 'visible' ? 'hidden' : 'visible';
-	alert("" + x + "," + y);
+function clickRegion(regionId, x, y, event) {
+	event.stopPropagation();
+	let popup = document.getElementById(regionId + '-popup');
+	popup.style.visibility = popup.style.visibility == 'visible' ? 'hidden' : 'visible';
+	if (popup.style.visibility == 'visible')
+	{
+		popup.transform.baseVal.getItem(0).setTranslate(x, y);
+	}
 }
 EOS
 $HexGrid::Dynamic::toggle_coords = <<EOS;

HexGrid/Pin.pm

@@ -21,7 +21,7 @@ sub render($this, $pin_container, $x, $y, $w, $h, $clip_path, $layers)
 	my $element = $group->use(href => "#$this->{icon}_symbol",
 		x => $x, y => $y, width => $w, height => $h);
 	$element->{id} = "$this->{id}-use";
-	$element->{onclick} = "clickPin('$this->{id}', '$pin_container->{id}');"
+	$element->{onclick} = "clickPin('$this->{id}', event);"
 		if $this->popup;
 	my $center_x = $x + $w/2;
 	my $center_y = $y + $h/2;

HexGrid/Region.pm

@@ -63,8 +63,12 @@ sub render($this, $svg, $grid, $layers)
 			{
 				my $tile_group = $this->{tiles}{$nw}{$sw}->render($g, $grid->tile_width, $grid->tile_height, $layers);
 				$tile_group->{transform} = "translate($x_translate, $y_translate)";
-				$tile_group->{onclick} = "clickRegion('$this->{name}', $x_translate, $y_translate);"
-					if ($this->popup);
+				if ($this->popup)
+				{
+					my $popup_x = $x_translate + $grid->tile_width / 2;
+					my $popup_y = $y_translate - $this->{popup}{height} + $grid->tile_height / 2;
+					$tile_group->{onclick} = "clickRegion('$base_id', $popup_x, $popup_y, event);";
+				}
 			};
 
 			$min_x = $x_translate if $x_translate < $min_x;
@@ -78,14 +82,9 @@ sub render($this, $svg, $grid, $layers)
 		push @{$layers->{popups}}, sub ($popup_container)
 		{
 			my $popup_scaler = $popup_container->
-			g(
-				id => "$base_id-popup",
-				# transform => $transform,
-				class => $this->{popup_class}
-			)->svg(id => "$base_id-scaler");
-			my $popup_element = $this->{popup}->render($popup_scaler);
-			$popup_element->{x} = 0;
-			$popup_element->{y} = 0;
+				g(id => "$base_id-popup", class => $this->{popup_class}, transform => "translate(0,0)")
+				->svg(id => "$base_id-scaler");
+			$this->{popup}->render($popup_scaler);
 		};
 	}
 	return { min_x => $min_x,min_y => $min_y,max_x => $max_x,max_y => $max_y, group => $g };

wiki-map.pl

@@ -98,13 +98,15 @@ foreach my $page (values %{$region_query_results->{query}{pages}})
 	$region->{defaults}{colour} = $parsed_template->{named_params}{colour};
 	$region->{defaults}{coords_colour} = $parsed_template->{named_params}{coordinates_colour}
 		if $parsed_template->{named_params}{coordinates_colour};
-	#TODO
-	$region->{popup} = HexGrid::PopUp->new
-	(
-		name => $region->{name},
-		description => "foo",
-		link => $page->{canonicalurl}
-	);
+	if($html_document)
+	{
+		$region->{popup} = HexGrid::PopUp->new
+		(
+			name => $region->{name},
+			description => $parsed_template->{named_params}{abstract},
+			link => $page->{canonicalurl}
+		);
+	}
 	if($regiondir)
 	{
 		$regions_by_subregion{$region->{name}} = $region->{name};
@@ -138,13 +140,15 @@ foreach my $page (values %{$subregion_query_results->{query}{pages}})
 	$subregion->{defaults}{colour} = $parsed_template->{named_params}{colour};
 	$subregion->{defaults}{coords_colour} = $parsed_template->{named_params}{coordinates_colour}
 		if $parsed_template->{named_params}{coordinates_colour};
-	#TODO
-	$subregion->{popup} = HexGrid::PopUp->new
-	(
-		name => $subregion->{name},
-		description => "foo",
-		link => $page->{canonicalurl}
-	);
+	if($html_document)
+	{
+		$subregion->{popup} = HexGrid::PopUp->new
+		(
+			name => $subregion->{name},
+			description => $parsed_template->{named_params}{abstract},
+			link => $page->{canonicalurl}
+		);
+	}
 	if($regiondir)
 	{
 		my $region_name = $parsed_template->{positional_params}[0];
@@ -468,37 +472,3 @@ if($regiondir)
 		close $location_fh;
 	}
 }
-
-
-# Puts the rendered SVG inside an html document,
-# along with a bit of javascript to show popups for sites and to toggle coordinates visibility
-sub wrap_in_html($grid)
-{
-	my $html_builder = "<!DOCTYPE html>";
-	$html_builder .= "\n<html>\n<body>";
-	$html_builder .= "\n" . <<EOS;
-<script>
-	function clickPin(pinId, containerId) {
-		let popup = document.getElementById(pinId + '-popup');
-		popup.style.visibility = popup.style.visibility == 'visible' ? 'hidden' : 'visible';
-	}
-</script>
-EOS
-	if($show_coords)
-	{
-		$html_builder .= <<EOS;
-<script>
-	function toggleCoords(show) {
-		for (var elem of document.getElementsByClassName('coords')) {
-			elem.style.visibility = show ? 'visible' : 'hidden';
-		}
-	}
-</script>
-	<label for="show-coords-checkbox">Show coordinates</label>
-	<input type="checkbox" checked id="show-coords-checkbox" onclick="toggleCoords(event.srcElement.checked)" />
-EOS
-	}
-	$html_builder .= "\n" . $grid->render;
-	$html_builder .= "\n</body>\n</html>";
-	return $html_builder;
-}