From d198bad91bd5b1ec548126b664d21ace991b1c13 Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Wed, 31 Jan 2024 15:12:11 +0100 Subject: [PATCH] Add a controlled layer group for the zones on the map It seems that we have to highlight the map zones too. On the previous website, they had a mouseover effect that displayed a tooltip, but here we can not do that because we use the mouse to select accommodations. This is just a test to see whether Oriol likes how it is shown, thus the red is likely to change to something else more pleasant to look at. --- Makefile | 2 +- po/ca.po | 42 +++++++++- po/es.po | 42 +++++++++- po/fr.po | 42 +++++++++- web/static/map.js | 129 ++++++++++++++++++------------- web/templates/campground_map.svg | 16 ++-- 6 files changed, 207 insertions(+), 66 deletions(-) diff --git a/Makefile b/Makefile index 5fdc6f9..81c0ca2 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,4 @@ -HTML_FILES := $(shell find web -name *.gohtml) +HTML_FILES := $(shell find web -name *.gohtml -o -name *.svg) GO_FILES := $(shell find . -name *.go) DEFAULT_DOMAIN = camper POT_FILE = po/$(DEFAULT_DOMAIN).pot diff --git a/po/ca.po b/po/ca.po index 90d637b..3894727 100644 --- a/po/ca.po +++ b/po/ca.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: camper\n" "Report-Msgid-Bugs-To: jordi@tandem.blog\n" -"POT-Creation-Date: 2024-01-29 14:22+0100\n" +"POT-Creation-Date: 2024-01-31 15:05+0100\n" "PO-Revision-Date: 2023-07-22 23:45+0200\n" "Last-Translator: jordi fita mas \n" "Language-Team: Catalan \n" @@ -18,6 +18,46 @@ msgstr "" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1);\n" +#: web/templates/campground_map.svg:1598 +msgctxt "title" +msgid "Zones" +msgstr "Zones" + +#: web/templates/campground_map.svg:1599 +msgctxt "tooltip" +msgid "Zone 7" +msgstr "Zona 7" + +#: web/templates/campground_map.svg:1600 +msgctxt "tooltip" +msgid "Zone 6" +msgstr "Zona 6" + +#: web/templates/campground_map.svg:1601 +msgctxt "tooltip" +msgid "Zone 5" +msgstr "Zona 5" + +#: web/templates/campground_map.svg:1602 +msgctxt "tooltip" +msgid "Zone 4" +msgstr "Zona 4" + +#: web/templates/campground_map.svg:1603 +msgctxt "tooltip" +msgid "Zone 3" +msgstr "Zona 3" + +#: web/templates/campground_map.svg:1604 +msgctxt "tooltip" +msgid "Zone 2" +msgstr "Zona 2" + +#: web/templates/campground_map.svg:1605 +msgctxt "tooltip" +msgid "Zone 1" +msgstr "Zona 1" + #: web/templates/public/payment/success.gohtml:6 #: web/templates/public/payment/success.gohtml:11 msgctxt "title" diff --git a/po/es.po b/po/es.po index 77c1efb..b55072d 100644 --- a/po/es.po +++ b/po/es.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: camper\n" "Report-Msgid-Bugs-To: jordi@tandem.blog\n" -"POT-Creation-Date: 2024-01-29 14:22+0100\n" +"POT-Creation-Date: 2024-01-31 15:06+0100\n" "PO-Revision-Date: 2023-07-22 23:46+0200\n" "Last-Translator: jordi fita mas \n" "Language-Team: Spanish \n" @@ -18,6 +18,46 @@ msgstr "" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1);\n" +#: web/templates/campground_map.svg:1598 +msgctxt "title" +msgid "Zones" +msgstr "Zonas" + +#: web/templates/campground_map.svg:1599 +msgctxt "tooltip" +msgid "Zone 7" +msgstr "Zona 7" + +#: web/templates/campground_map.svg:1600 +msgctxt "tooltip" +msgid "Zone 6" +msgstr "Zona 6" + +#: web/templates/campground_map.svg:1601 +msgctxt "tooltip" +msgid "Zone 5" +msgstr "Zona 6" + +#: web/templates/campground_map.svg:1602 +msgctxt "tooltip" +msgid "Zone 4" +msgstr "Zona 4" + +#: web/templates/campground_map.svg:1603 +msgctxt "tooltip" +msgid "Zone 3" +msgstr "Zona 3" + +#: web/templates/campground_map.svg:1604 +msgctxt "tooltip" +msgid "Zone 2" +msgstr "Zona 2" + +#: web/templates/campground_map.svg:1605 +msgctxt "tooltip" +msgid "Zone 1" +msgstr "Zona 1" + #: web/templates/public/payment/success.gohtml:6 #: web/templates/public/payment/success.gohtml:11 msgctxt "title" diff --git a/po/fr.po b/po/fr.po index 5d27943..77612e4 100644 --- a/po/fr.po +++ b/po/fr.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: camper\n" "Report-Msgid-Bugs-To: jordi@tandem.blog\n" -"POT-Creation-Date: 2024-01-29 14:22+0100\n" +"POT-Creation-Date: 2024-01-31 15:06+0100\n" "PO-Revision-Date: 2023-12-20 10:13+0100\n" "Last-Translator: Oriol Carbonell \n" "Language-Team: French \n" @@ -19,6 +19,46 @@ msgstr "" "Plural-Forms: nplurals=2; plural=(n > 1);\n" "X-Generator: Poedit 3.4.1\n" +#: web/templates/campground_map.svg:1598 +msgctxt "title" +msgid "Zones" +msgstr "Zones" + +#: web/templates/campground_map.svg:1599 +msgctxt "tooltip" +msgid "Zone 7" +msgstr "Zone 7" + +#: web/templates/campground_map.svg:1600 +msgctxt "tooltip" +msgid "Zone 6" +msgstr "Zone 6" + +#: web/templates/campground_map.svg:1601 +msgctxt "tooltip" +msgid "Zone 5" +msgstr "Zone 5" + +#: web/templates/campground_map.svg:1602 +msgctxt "tooltip" +msgid "Zone 4" +msgstr "Zone 4" + +#: web/templates/campground_map.svg:1603 +msgctxt "tooltip" +msgid "Zone 3" +msgstr "Zone 3" + +#: web/templates/campground_map.svg:1604 +msgctxt "tooltip" +msgid "Zone 2" +msgstr "Zone 2" + +#: web/templates/campground_map.svg:1605 +msgctxt "tooltip" +msgid "Zone 1" +msgstr "Zone 1" + #: web/templates/public/payment/success.gohtml:6 #: web/templates/public/payment/success.gohtml:11 msgctxt "title" diff --git a/web/static/map.js b/web/static/map.js index 2a1541a..36dff53 100644 --- a/web/static/map.js +++ b/web/static/map.js @@ -105,6 +105,63 @@ return getCTM(matrix.multiply(ctm), el.parentElement); } + function convertToPoints(path) { + const ctm = getCTM(new DOMMatrix([1, 0, 0, 1, 0, 0]), path); + const points = []; + const p0 = new DOMPoint(); + + function setP0(x, y) { + p0.x = x; + p0.y = y; + const p1 = p0.matrixTransform(ctm); + p0.x = p1.x; + p0.y = latLngBounds.getNorth() - p1.y; + } + + switch (path.localName) { + case 'rect': + const x = parseFloat(path.getAttribute('x')); + const y = parseFloat(path.getAttribute('y')); + const w = parseFloat(path.getAttribute('width')); + const h = parseFloat(path.getAttribute('height')); + setP0(x, y); + points.push([p0.y, p0.x]); + setP0(x + w, y); + points.push([p0.y, p0.x]); + setP0(x + w, y + h); + points.push([p0.y, p0.x]); + setP0(x, y + h); + points.push([p0.y, p0.x]); + break; + case 'path': + const commands = parse(path.getAttribute('d')); + for (const cmd of commands) { + switch (cmd[0]) { + case 'M': + case 'L': + setP0(cmd[1], cmd[2]); + break; + case 'm': + case 'l': + p0.x += cmd[1]; + p0.y -= cmd[2]; + break; + case 'C': + setP0(cmd[5], cmd[6]); + break; + case 'Z': + case 'z': + continue; + default: + console.error(cmd); + } + points.push([p0.y, p0.x]); + } + break; + } + return points; + } + function setupFeatures(prefix, baseURI) { for (const campsite of Array.from(container.querySelectorAll(`[id^="${prefix}"]`))) { const label = campsite.id.substring(prefix.length); @@ -116,59 +173,8 @@ console.warn(campsite, 'has no path'); continue; } - const ctm = getCTM(new DOMMatrix([1, 0, 0, 1, 0, 0]), path); - const points = []; - const p0 = new DOMPoint(); - function setP0(x, y) { - p0.x = x; - p0.y = y; - const p1 = p0.matrixTransform(ctm); - p0.x = p1.x; - p0.y = latLngBounds.getNorth() - p1.y; - } - - switch (path.localName) { - case 'rect': - const x = parseFloat(path.getAttribute('x')); - const y = parseFloat(path.getAttribute('y')); - const w = parseFloat(path.getAttribute('width')); - const h = parseFloat(path.getAttribute('height')); - setP0(x, y); - points.push([p0.y, p0.x]); - setP0(x + w, y); - points.push([p0.y, p0.x]); - setP0(x + w, y + h); - points.push([p0.y, p0.x]); - setP0(x, y + h); - points.push([p0.y, p0.x]); - break; - case 'path': - const commands = parse(path.getAttribute('d')); - for (const cmd of commands) { - switch (cmd[0]) { - case 'M': - case 'L': - setP0(cmd[1], cmd[2]); - break; - case 'm': - case 'l': - p0.x += cmd[1]; - p0.y -= cmd[2]; - break; - case 'C': - setP0(cmd[5], cmd[6]); - break; - case 'Z': - case 'z': - continue; - default: - console.error(cmd); - } - points.push([p0.y, p0.x]); - } - break; - } + const points = convertToPoints(path); const feature = L.polygon(points, {color: 'transparent'}).addTo(map); feature.on({ mouseover: highlightAccommodation, @@ -181,6 +187,21 @@ } const language = document.documentElement.getAttribute('lang'); - setupFeatures('cp_', `/${language}/campsites`) - setupFeatures('cr_', `/${language}/amenities`) + setupFeatures('cp_', `/${language}/campsites`); + setupFeatures('cr_', `/${language}/amenities`); + + const zones = container.querySelector('#zones'); + const zonesOverlay = L.layerGroup(); + for (const path of Array.from(zones.querySelectorAll('path'))) { + const points = convertToPoints(path); + const zone = L + .polygon(points, {color: 'red'}) + .bindTooltip(path.getAttribute('aria-label'), {permanent: true}) + ; + zonesOverlay.addLayer(zone); + } + L.control.layers(null, null, {collapsed: false}) + .addOverlay(zonesOverlay, zones.getAttribute('aria-label')) + .addTo(map) + ; })(); diff --git a/web/templates/campground_map.svg b/web/templates/campground_map.svg index 721474a..80163d7 100644 --- a/web/templates/campground_map.svg +++ b/web/templates/campground_map.svg @@ -1595,13 +1595,13 @@ - - - - - - - - + + + + + + + +