fix: Make contries map responsive (#9003)

* deps(vscode): Remove deprecated extension

* fix: Make map responsive

* deps(npm): Migrate from jvectormap to jsvectormap

jvectormap (and jvectormap-next for that matter) seem to be unmaintained.
jsvectormap is a fork, which doesn't depend on jQuery any more, and
is actually updated regularly. Also, `updateSize` doesn't seem to work in
jvectormap.

This change also moves the map initialization code from Display.pm to
it's own JS file, so that it can be linted correctly.

* chg: Use new `visualizeData` for the regions

Has better styling for the different countries.

* chg: Update jsvectormap styling

Now uses a few OFF colours from _variables.scss.

.vscode/extensions.json

@@ -5,7 +5,6 @@
         "stylelint.vscode-stylelint",
         "syler.sass-indented",
         "mrorz.language-gettext",
-        "eg2.vscode-npm-script",
         "ms-vscode-remote.remote-containers"
     ]
 }

gulpfile.ts

@@ -75,8 +75,8 @@ export function copyJs() {
     "./node_modules/jquery-cropper/dist/jquery-cropper.js",
     "./node_modules/jquery-form/src/jquery.form.js",
     "./node_modules/highcharts/highcharts.js",
-    "./node_modules/jvectormap-next/jquery-jvectormap.js",
-    "./node_modules/jvectormap-content/world-mill.js",
+    "./node_modules/jsvectormap/dist/js/jsvectormap.js",
+    "./node_modules/jsvectormap/dist/maps/world-merc.js",
     "./node_modules/select2/dist/js/select2.min.js",
   ]).
     pipe(init()).
@@ -134,7 +134,6 @@ function copyCss() {
     "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
     "./node_modules/@yaireo/tagify/dist/tagify.css",
     "./node_modules/cropperjs/dist/cropper.css",
-    "./node_modules/jvectormap-next/jquery-jvectormap.css",
     "./node_modules/select2/dist/css/select2.min.css",
   ]).
     pipe(init()).

html/js/display-list-of-tags.js

@@ -0,0 +1,62 @@
+// This file is part of Product Opener.
+//
+// Product Opener
+// Copyright (C) 2011-2023 Association Open Food Facts
+// Contact: contact@openfoodfacts.org
+// Address: 21 rue des Iles, 94100 Saint-Maur des Fossés, France
+//
+// Product Opener is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+/*exported displayWorldMap*/
+/*global lang jsVectorMap*/
+
+function getServerDomain() {
+  return window.location.href.match(/^https?:\/\/([^/?#]+)(?:[/?#]|$)/i)[1];
+}
+
+function displayWorldMap(selector, countries) {
+  const countries_map_data = countries.data;
+  const countries_map_links = countries.links;
+  const countries_map_names = countries.names;
+  const products = lang().products;
+  const direction = getComputedStyle(document.querySelector(selector)).direction;
+
+  const map = new jsVectorMap({
+    selector: selector,
+    map: "world_merc",
+    visualizeData: {
+      values: countries_map_data,
+      scale: ["#008C8C", "#ff8714"]
+    },
+    onRegionTooltipShow: (_e, tooltip, index) => {
+      let label = countries_map_names[index];
+      if (countries_map_data[index] > 0) {
+        label =
+          direction === "rtl"
+            ? `(${products} ${countries_map_data[index]}) ${label}`
+            : `${label} (${countries_map_data[index]} ${products})`;
+      }
+      tooltip.text(label);
+    },
+    onRegionClick: (_e, code) => {
+      if (countries_map_links[code]) {
+        window.location.href = `//${getServerDomain()}${countries_map_links[code]}`;
+      }
+    },
+  });
+
+  window.addEventListener("resize", () => {
+    map.updateSize();
+  });
+}

lib/ProductOpener/Display.pm

@@ -2369,43 +2369,16 @@ HTML
 				.= 'var countries_map_links=JSON.parse(' . $json->encode($json->encode($countries_map_links)) . ');'
 				.= 'var countries_map_names=JSON.parse(' . $json->encode($json->encode($countries_map_names)) . ');'
 				.= <<"JS";
-\$('#world-map').vectorMap({
-  map: 'world_mill',
-  series: {
-    regions: [{
-      values: countries_map_data,
-      scale: ['#C8EEFF', '#0071A4'],
-      normalizeFunction: 'polynomial'
-    }]
-  },
-  onRegionLabelShow: function(e, el, code){
-	var label = el.html();
-	label = countries_map_names[code];
-	if (countries_map_data[code] > 0) {
-		label = label + ' (' + countries_map_data[code] + ' $Lang{products}{$lc})';
-	}
-	el.html(label);
-  },
-  onRegionClick: function(e, code, region){
-	if (countries_map_links[code]) {
-		window.location.href = "$formatted_subdomain" + countries_map_links[code];
-	}
-  },
-});
-
+displayWorldMap('#world-map', { 'data': countries_map_data, 'links': countries_map_links, 'names': countries_map_names });
 JS
 			$scripts .= <<SCRIPTS
-<script src="$static_subdomain/js/dist/jquery-jvectormap.js"></script>
-<script src="$static_subdomain/js/dist/world-mill.js"></script>
+<script src="$static_subdomain/js/dist/jsvectormap.js"></script>
+<script src="$static_subdomain/js/dist/world-merc.js"></script>
+<script src="$static_subdomain/js/dist/display-list-of-tags.js"></script>
 SCRIPTS
 				;
-
-			$header .= <<HEADER
-<link rel="stylesheet" media="all" href="/css/dist/jquery-jvectormap.css">
-HEADER
-				;
 			my $map_html = <<HTML
-  <div id="world-map" style="width: 600px; height: 400px"></div>
+  <div id="world-map" style="min-width: 250px; max-width: 600px; min-height: 250px; max-height: 400px;"></div>
 
 HTML
 				;