@panoramax/web-viewer 4.4.0-develop-ce62522e → 4.4.0-develop-e873def3

package/build/components/core/Basic.js

@@ -8,7 +8,7 @@ import PACKAGE_JSON from "../../../package.json" with { type: "json" };
 import BasicStyles from "./Basic.css" with { type: "css" };
 document.adoptedStyleSheets.push(BasicStyles);
 
-const __COMMIT_HASH__ = "ce62522";
+const __COMMIT_HASH__ = "e873def";
 
 /**
  * Event for overlaying menu opening

package/build/components/layout/Mini.js

@@ -1,7 +1,10 @@
 import { LitElement, css, html } from "lit";
+import { svgToImg } from "../../utils/utils.js";
+const SwitchBigSVG = await fetch(new URL("../../img/switch_big.svg", import.meta.url).href).then(res => res.text());
+const SwitchMiniSVG = await fetch(new URL("../../img/switch_mini.svg", import.meta.url).href).then(res => res.text());
 
-const SwitchBig = new URL("../../img/switch_big.svg", import.meta.url).href;
-const SwitchMini = new URL("../../img/switch_mini.svg", import.meta.url).href;
+const SwitchBig = svgToImg(SwitchBigSVG);
+const SwitchMini = svgToImg(SwitchMiniSVG);
 
 /**
  * Mini layout allows to show a reduced or collapsed component in a corner of a main component.
@@ -98,7 +101,7 @@ export default class Mini extends LitElement {
 					style="top: 0; right: 0"
 					@click=${onExpand}
 				>
-					<img src=${SwitchBig} alt="" />
+					${SwitchBig}
 					${this._parent?._t.pnx.expand}
 				</pnx-button>
 
@@ -108,7 +111,7 @@ export default class Mini extends LitElement {
 					style="bottom: 0; left: 0"
 					@click=${() => this.collapsed = true}
 				>
-					<img src=${SwitchMini} alt="" />
+					${SwitchMini}
 				</pnx-button>
 			`;
 		}

package/build/components/ui/Loader.js

@@ -1,8 +1,8 @@
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
 import { inRangeRandom } from "../../utils/utils.js";
 
-const LogoDead = new URL("../../img/logo_dead.svg", import.meta.url).href;
-const LoaderBg = new URL("../../img/loader_base.jpg", import.meta.url).href;
+const LogoDead = await fetch(new URL("../../img/logo_dead.svg", import.meta.url).href).then(res => res.text());
+const LoaderBg = await fetch(new URL("../../img/loader_base.jpg", import.meta.url).href).then(res => res.text());
 
 /**
  * Loader component display a full page covering for user waiting.

package/build/components/ui/Map.js

@@ -4,6 +4,7 @@ import {
 import SemanticsMapProtocol from "../../utils/SemanticsMapProtocol.js";
 import PanoraMapProtocol from "../../utils/PanoraMapProtocol.js";
 import { DISABLED_LEVEL, initIndoorEqualOnMap } from "../../utils/indoor.js";
+import { svgToImg } from "../../utils/utils.js";
 import MapStyles from "./Map.css" with { type: "css" };
 document.adoptedStyleSheets.push(MapStyles);
 
@@ -19,8 +20,8 @@ maplibregl.addProtocol("panora", new PanoraMapProtocol().tile());
 // eslint-disable-next-line no-undef
 maplibregl.addProtocol("panoras", new PanoraMapProtocol().tile());
 
-const MarkerBaseSVG = new URL("../../img/marker.svg", import.meta.url).href;
-const MarkerSelectedSVG = new URL("../../img/marker_blue.svg", import.meta.url).href;
+const MarkerBaseSVG = await fetch(new URL("../../img/marker.svg", import.meta.url).href).then(res => res.text());
+const MarkerSelectedSVG = await fetch(new URL("../../img/marker_blue.svg", import.meta.url).href).then(res => res.text());
 
 
 /**
@@ -326,7 +327,7 @@ export default class Map extends maplibregl.Map {
 		].forEach(m => {
 			const img = new Image(64, 64);
 			img.onload = () => this.addImage(m.id, img);
-			img.src = m.img;
+			svgToImg(m.img, img);
 		});
 	}
 
@@ -714,12 +715,9 @@ export default class Map extends maplibregl.Map {
 	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_getPictureMarker(selected = true) {
-		const img = document.createElement("img");
-		img.src = selected ? MarkerSelectedSVG : MarkerBaseSVG;
-		img.alt = "";
 		// eslint-disable-next-line no-undef
 		return new maplibregl.Marker({
-			element: img,
+			element: svgToImg(selected ? MarkerSelectedSVG : MarkerBaseSVG),
 			picId: null
 		})
 			// Only picMarker could be draggable, don't for picMarkerPreview.

package/build/components/ui/Photo.js

@@ -13,8 +13,8 @@ import PhotoAdapter from "../../utils/PhotoAdapter.js";
 import PhotoStyles from "./Photo.css" with { type: "css" };
 document.adoptedStyleSheets.push(PhotoStyles);
 
-const LogoDead = new URL("../../img/logo_dead.svg", import.meta.url).href;
-const LoaderImgBase = new URL("../../img/loader_base.jpg", import.meta.url).href;
+const LogoDead = await fetch(new URL("../../img/logo_dead.svg", import.meta.url).href).then(res => res.text());
+const LoaderImgBase = await fetch(new URL("../../img/loader_base.jpg", import.meta.url).href).then(res => res.text());
 
 
 // Default panorama (logo)

package/build/components/ui/widgets/Legend.js

@@ -4,8 +4,8 @@ import { fa, onceParentAvailable } from "../../../utils/widgets.js";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { classMap } from "lit/directives/class-map.js";
 import { PanoramaxWebsiteURL } from "../../../utils/services.js";
-
-const PanoramaxImg = new URL("../../../img/panoramax.svg", import.meta.url).href;
+import { svgToImg } from "../../../utils/utils.js";
+const PanoramaxImg = await fetch(new URL("../../../img/panoramax.svg", import.meta.url).href).then(res => res.text());
 
 /**
  * Legend widget, handling switch between map and photo components.
@@ -137,12 +137,15 @@ export default class Legend extends LitElement {
 			"pnx-legend-light": this.light,
 		};
 
+		const logo = svgToImg(PanoramaxImg);
+		logo.classList.add("logo");
+
 		return html`<div class=${classMap(classes)} part="panel">
 			<div
 				class="presentation"
 				style=${!this.light && this.focus != "map" && this.picture ? "display: none": ""}
 			>
-				<img class="logo" src=${PanoramaxImg} alt="" />
+				${logo}
 
 				${this.light ? html`
 					&copy; <a

package/build/package.json

@@ -38,6 +38,13 @@
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-url": "^8.0.2",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-rollup": "^0.6.4",
     "eslint": "^9.39.4",
@@ -50,6 +57,9 @@
     "jest-environment-jsdom": "^30.3.0",
     "jest-fixed-jsdom": "^0.0.11",
     "jsdoc-to-markdown": "^9.1.1",
+    "rollup": "^4.60.2",
+    "rollup-plugin-import-css": "^4.2.1",
+    "rollup-plugin-lit-css": "^6.0.1",
     "rollup-plugin-postcss": "^4.0.2",
     "whatwg-url": "^16.0.1"
   },
@@ -131,7 +141,9 @@
       "<rootDir>"
     ],
     "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
+      "\\.(eot|otf|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
+      "\\.(jpg|jpeg|png|gif|webp)$": "<rootDir>/config/jest/imgMock.js",
+      "\\.svg$": "<rootDir>/config/jest/svgMock.js",
       "\\.css$": "identity-obj-proxy"
     },
     "setupFilesAfterEnv": [

package/build/translations/hr.json

@@ -35,7 +35,7 @@
         "share_rss": "RSS sažetak sadržaja",
         "share_rss_title": "RSS sažetak sadržaja novih sekvenci u trenutno vidljivom području karte",
         "share_embed": "Ugradi na svoju web stranicu",
-        "share_embed_docs": "Ugradi na svoju web stranicu",
+        "share_embed_docs": "Pročitaj više o konfiguraciji ugradnje",
         "share_print": "Ispiši",
         "panoramax": "Panoramax",
         "whats_panoramax": "Panoramax je geo-commons za slike teritorija.",
@@ -57,11 +57,95 @@
         "josm_live": "Omogući JOSM automatsku sinkronizaciju prilikom učitavanja slike",
         "loading_labels_serious": [
             "🗺️ Učitavanje podataka karte",
-            "🖥️ API za upite"
+            "🖥️ API za upite",
+            "🖼️ Učitavanje sličica",
+            "🔍 Analiziranje EXIF metapodataka",
+            "🏘️ 3D prikaz",
+            "📷 Pokretanje 360°slika",
+            "🟠 Balansiranje boje",
+            "💯 Ocjena kvalitete računalstva ©",
+            "📡 Preuzimanje ažuriranja",
+            "🌍 Dohvaćanje pločica karte",
+            "📸 Obrada sjena"
         ],
         "show_map": "Pokaži kartu",
         "sequence_speed": "Brzina igrača",
         "minimize": "Sakrij ovu komponentu, možeš je ponovno prikazati pomoću tipke u donjem lijevom kutu",
-        "contribute_id": "Doprinesi OpenStreetMap pomoću iD uređivača"
+        "contribute_id": "Doprinesi OpenStreetMap pomoću iD uređivača",
+        "loading_labels_fun": [
+            "🦌 Otkrivanje znakova prijelaza jelena",
+            "🚘 Pretraživanje Panoramax Car ©",
+            "☕ Injekcija kofeina",
+            "😀 Osmjeh, kartiran si!",
+            "🐈 Dijeljenje slika mačaka",
+            "😴 Smanjenje odgađanja",
+            "🫖 Kuhanje čaja",
+            "🐧 Otvaranje izvornog koda",
+            "🚇 Indeksiranje stanica podzemne željeznice",
+            "🧹 Čišćenje metapodataka",
+            "🚒 Slanje fotografija vatrogasne stanice",
+            "🚲 Ažuriranje zelenih staza",
+            "🚉 Prolaz na peron stanice",
+            "🛰️ Traženje satelita",
+            "👥 Pisanje persona",
+            "🐟 Lociranje trgovine ribom",
+            "🧑‍💻 Sučelje za otklanjanje pogrešaka",
+            "📈 Statističko povećanje",
+            "🤖 Učenje značenja",
+            "🎨 Redizajn sučelja",
+            "📅 Planiranje zabava foto-kartiranja",
+            "🧀 Dozrijevanje cheddar sira",
+            "🌄 Izračunavanje kornvalskog sunca",
+            "🌊 Mjerenje plime i oseke"
+        ],
+        "error_psv": "Photo Sphere Viewer se ne učitava ispravno",
+        "error_pic": "Tražena slika nije pronađena",
+        "error_api": "Poslužitelj slika nije dostupan",
+        "error_webgl": "Vaš preglednik ne podržava WebGL",
+        "error_api_compatibility": "Poslužitelj slika nije kompatibilan s ovom verzijom preglednika",
+        "filter_source_world": "Cijeli svijet",
+        "filter_source_local": "Ovaj server",
+        "filter_date": "Datum",
+        "filter_date_1month": "1 mjesec",
+        "filter_date_6months": "6 mjeseci",
+        "filter_user": "Korisnik",
+        "filter_user_mypics": "Moje slike",
+        "filter_picture": "Tip slike",
+        "filter_locked": "Filter onemogućen",
+        "filter_zoom_in": "Povećajte za otključavanje",
+        "picture_all": "Svi",
+        "picture_flat": "Klasično",
+        "picture_360": "360°",
+        "picture_360_long": "Panoramska slika",
+        "popup_details_link": "Više detalja",
+        "filter_qualityscore": "Ocjena kvalitete",
+        "filter_qualityscore_help": "Klikni da omogućiš ili onemogućiš",
+        "qualityscore_doc_1": "Ocjena kvalitete izračunava se za svaku sliku.",
+        "qualityscore_doc_2": "Rezultat je prikazan kao slovo:",
+        "qualityscore_doc_3": "\"A\" je najbolja ocjena, \"E\" najgora.",
+        "qualityscore_doc_4": "Ova se ocjena izračunava na temelju:",
+        "qualityscore_doc_41": "GPS preciznost",
+        "qualityscore_doc_42": "rezolucija slike",
+        "qualityscore_doc_link": "Saznajte više o ocjeni kvalitete",
+        "filter_gps_precision": "Preciznost lokacije",
+        "filter_gps_precision_lessthan": "Manje od {n} metara",
+        "filter_gps_precision_between": "Između {n1} i {n2} metara",
+        "filter_gps_precision_morethan": "Više od {n} metara",
+        "filter_gps_precision_help": "Saznajte više o preciznosti lokacije",
+        "filter_gps_precision_help_1": "Informacije o preciznosti lokacije dostupne su za svaku sliku. To odgovara GPS preciznosti tijekom snimanja slike.",
+        "filter_gps_precision_help_2": "Preciznost je izražena zvjezdicama:",
+        "filter_gps_precision_help_4": "RTK GPS imat će ocjenu \"5⭐\", akcijska kamera poput GoPro Maxa ocjenu \"3⭐\", a GPS za pametni telefon u podzemnom parkingu ocjenu \"1⭐\".",
+        "map_background": "Pozadina karte",
+        "map_background_aerial": "Zračni",
+        "map_background_streets": "Ulice",
+        "map_background_default": "Početna vrijednost",
+        "map_theme_default": "Klasično",
+        "semantics_features_default_title": "Oznaka {nb}",
+        "qualityscore_doc_5": "Profesionalni uređaj imat će ocjenu A, akcijska kamera od 360° ocjenu B, a pametni telefon ocjenu između C i E.",
+        "picture_flat_long": "Klasična slika",
+        "filter_gps_precision_help_3": "\"5⭐\" je vrlo precizno (<= {p5}m), \"1⭐\" je vrlo neprecizno (> {p1}m) ili nepoznato.",
+        "error_nopic": "Nema dostupnih slika na datoj poziciji",
+        "error_josm": "JOSM ne odgovara, radi li i je li udaljeno omogućeno?",
+        "filter_date_1year": "1 godina"
     }
 }

package/build/utils/map.js

@@ -1,10 +1,10 @@
 import {
 	COLORS, GPS_VALUES, QUALITYSCORE_GPS_VALUES,
 	QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES, QUALITYSCORE_RES_360_VALUES,
-	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_VALUES, isNullId
+	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_VALUES, isNullId, svgToImg,
 } from "./utils.js";
 
-const LoaderImg = new URL("../img/marker.svg", import.meta.url).href;
+const LoaderImg = await fetch(new URL("../img/marker.svg", import.meta.url).href).then(res => res.text());
 
 export const RASTER_LAYER_ID = "pnx-aerial";
 
@@ -217,7 +217,7 @@ export const MAP_THEMES_STYLES = {
  */
 export function getThumbGif(lang) {
 	const thumbGif = document.createElement("img");
-	thumbGif.src = LoaderImg;
+	svgToImg(LoaderImg, thumbGif);
 	thumbGif.alt = lang.loading;
 	thumbGif.title = lang.loading;
 	thumbGif.classList.add("pnx-map-thumb", "pnx-map-thumb-loader");

package/build/utils/picture.js

@@ -1,5 +1,4 @@
 import { COLORS, getArrow, getDistance, getSimplifiedAngle, svgToPSVLink } from "./utils.js";
-
 const ArrowTriangleSVG = await fetch(new URL("../img/arrow_triangle.svg", import.meta.url).href).then(res => res.text());
 const ArrowTurnSVG = await fetch(new URL("../img/arrow_turn.svg", import.meta.url).href).then(res => res.text());
 const ArrowTriangle = svgToPSVLink(ArrowTriangleSVG, "white");

package/build/utils/semantics.js

@@ -2,8 +2,8 @@ import { html } from "lit";
 import { OSMURL, OSMWikiURL, PanoramaxPresetsURL, WikidataAPIURL, WikidataURL } from "./services.js";
 import { getBestLabel } from "./i18n.js";
 
-const logoOsm = new URL("../img/osm.svg", import.meta.url).href;
-const logoWd = new URL("../img/wd.svg", import.meta.url).href;
+const logoOsm = await fetch(new URL("../img/osm.svg", import.meta.url).href).then(res => res.text());
+const logoWd = await fetch(new URL("../img/wd.svg", import.meta.url).href).then(res => res.text());
 
 
 // List of [ Overlay ID, API filter, Maplibre Style, Sprites ]

package/build/utils/utils.js

@@ -92,6 +92,26 @@ export function getDistance(from, to) {
 	return Math.sqrt(dx*dx + dy*dy);
 }
 
+export function svgToImg(svg, img = null) {
+	if(svg.constructor.name === "HTMLImageElement") {
+		if(img) {
+			svg.width = img.width;
+			svg.height = img.height;
+			svg.onload = img.onload;
+		}
+		return svg;
+	}
+	else if(typeof svg === "string") {
+		if(!img) {
+			img = new Image();
+			img.alt = "";
+		}
+		if(svg.startsWith("<?xml")) { svg = URL.createObjectURL(new Blob([svg], {type: 'image/svg+xml'})); }
+		img.src = svg;
+		return img;
+	}
+}
+
 /**
  * Transforms a Base64 SVG string into a DOM img element.
  * @param {string} svg The SVG as Base64 string
@@ -100,6 +120,7 @@ export function getDistance(from, to) {
  */
 export function svgToPSVLink(svg, fillColor) {
 	try {
+		if(svg.startsWith("data:image/svg+xml,")) { svg = decodeURIComponent(svg.replace("data:image/svg+xml,", "")); }
 		if(!svg.startsWith("<svg")) { throw new Error(); }
 		const svgXml = (new DOMParser()).parseFromString(svg, "image/svg+xml").childNodes[0];
 		const btn = document.createElement("button");
@@ -110,10 +131,7 @@ export function svgToPSVLink(svg, fillColor) {
 	}
 	 
 	catch(e) {
-		const img = document.createElement("img");
-		img.src = svg;
-		img.alt = "";
-		return img;
+		return svgToImg(svg);
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.4.0-develop-ce62522e",
+  "version": "4.4.0-develop-e873def3",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "./build/index.js",
   "type": "module",
@@ -38,6 +38,13 @@
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-url": "^8.0.2",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-rollup": "^0.6.4",
     "eslint": "^9.39.4",
@@ -50,6 +57,9 @@
     "jest-environment-jsdom": "^30.3.0",
     "jest-fixed-jsdom": "^0.0.11",
     "jsdoc-to-markdown": "^9.1.1",
+    "rollup": "^4.60.2",
+    "rollup-plugin-import-css": "^4.2.1",
+    "rollup-plugin-lit-css": "^6.0.1",
     "rollup-plugin-postcss": "^4.0.2",
     "whatwg-url": "^16.0.1"
   },
@@ -131,7 +141,9 @@
       "<rootDir>"
     ],
     "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
+      "\\.(eot|otf|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
+      "\\.(jpg|jpeg|png|gif|webp)$": "<rootDir>/config/jest/imgMock.js",
+      "\\.svg$": "<rootDir>/config/jest/svgMock.js",
       "\\.css$": "identity-obj-proxy"
     },
     "setupFilesAfterEnv": [