mirror of
https://github.com/photoprism/photoprism.git
synced 2025-09-26 21:01:58 +08:00
i18n: Improved Right-to-Left (RTL) Language Layout
"mapbox-gl" has been replaced by "maplibre-gl" due to licensing changes.
This commit is contained in:
Michael Mayer
161
frontend/package-lock.json
generated
161
frontend/package-lock.json
generated
@@ -58,7 +58,7 @@
|
||||
"karma-verbose-reporter": "^0.0.8",
|
||||
"karma-webpack": "^5.0.0",
|
||||
"luxon": "^2.3.0",
|
||||
"mapbox-gl": "^1.13.2",
|
||||
"maplibre-gl": "^2.1.1",
|
||||
"material-design-icons-iconfont": "^6.1.1",
|
||||
"mini-css-extract-plugin": "^2.5.3",
|
||||
"minimist": ">=1.2.5",
|
||||
@@ -1904,11 +1904,6 @@
|
||||
"geojson-rewind": "geojson-rewind"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/geojson-types": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
|
||||
"integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
|
||||
},
|
||||
"node_modules/@mapbox/jsonlint-lines-primitives": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
|
||||
@@ -1917,29 +1912,11 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/mapbox-gl-supported": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
|
||||
"integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==",
|
||||
"peerDependencies": {
|
||||
"mapbox-gl": ">=0.32.1 <2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/point-geometry": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
|
||||
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
|
||||
},
|
||||
"node_modules/@mapbox/tiny-sdf": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz",
|
||||
"integrity": "sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw=="
|
||||
},
|
||||
"node_modules/@mapbox/unitbezier": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
|
||||
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
|
||||
},
|
||||
"node_modules/@mapbox/vector-tile": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
|
||||
@@ -6175,11 +6152,6 @@
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
|
||||
"integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ=="
|
||||
},
|
||||
"node_modules/grid-index": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
|
||||
"integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
|
||||
},
|
||||
"node_modules/growl": {
|
||||
"version": "1.10.5",
|
||||
"resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
|
||||
@@ -7670,39 +7642,47 @@
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/mapbox-gl": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.2.tgz",
|
||||
"integrity": "sha512-CPjtWygL+f7naL+sGHoC2JQR0DG7u+9ik6WdkjjVmz2uy0kBC2l+aKfdi3ZzUR7VKSQJ6Mc/CeCN+6iVNah+ww==",
|
||||
"node_modules/maplibre-gl": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.1.1.tgz",
|
||||
"integrity": "sha512-FRAHc4kPYKDF0+QMm8tnkyhv65Ed5SKLbzcH6hHM20XAK+9pqHMIHxlwpxcb4zGl+czz1bUegYf/KXjJRh9aDA==",
|
||||
"dependencies": {
|
||||
"@mapbox/geojson-rewind": "^0.5.0",
|
||||
"@mapbox/geojson-types": "^1.0.2",
|
||||
"@mapbox/geojson-rewind": "^0.5.1",
|
||||
"@mapbox/jsonlint-lines-primitives": "^2.0.2",
|
||||
"@mapbox/mapbox-gl-supported": "^1.5.0",
|
||||
"@mapbox/mapbox-gl-supported": "^2.0.1",
|
||||
"@mapbox/point-geometry": "^0.1.0",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"@mapbox/unitbezier": "^0.0.0",
|
||||
"@mapbox/tiny-sdf": "^2.0.4",
|
||||
"@mapbox/unitbezier": "^0.0.1",
|
||||
"@mapbox/vector-tile": "^1.3.1",
|
||||
"@mapbox/whoots-js": "^3.1.0",
|
||||
"csscolorparser": "~1.0.3",
|
||||
"earcut": "^2.2.2",
|
||||
"earcut": "^2.2.3",
|
||||
"geojson-vt": "^3.2.1",
|
||||
"gl-matrix": "^3.2.1",
|
||||
"grid-index": "^1.1.0",
|
||||
"minimist": "^1.2.5",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"murmurhash-js": "^1.0.0",
|
||||
"pbf": "^3.2.1",
|
||||
"potpack": "^1.0.1",
|
||||
"potpack": "^1.0.2",
|
||||
"quickselect": "^2.0.0",
|
||||
"rw": "^1.3.3",
|
||||
"supercluster": "^7.1.0",
|
||||
"supercluster": "^7.1.4",
|
||||
"tinyqueue": "^2.0.3",
|
||||
"vt-pbf": "^3.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.4.0"
|
||||
"vt-pbf": "^3.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/maplibre-gl/node_modules/@mapbox/mapbox-gl-supported": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
|
||||
"integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
|
||||
},
|
||||
"node_modules/maplibre-gl/node_modules/@mapbox/tiny-sdf": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
|
||||
"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
|
||||
},
|
||||
"node_modules/maplibre-gl/node_modules/@mapbox/unitbezier": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
|
||||
"integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
|
||||
},
|
||||
"node_modules/material-design-icons-iconfont": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-6.1.1.tgz",
|
||||
@@ -10209,11 +10189,6 @@
|
||||
"resolved": "https://registry.npmjs.org/rndm/-/rndm-1.2.0.tgz",
|
||||
"integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
|
||||
},
|
||||
"node_modules/rw": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
|
||||
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
@@ -13757,37 +13732,16 @@
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"@mapbox/geojson-types": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
|
||||
"integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
|
||||
},
|
||||
"@mapbox/jsonlint-lines-primitives": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
|
||||
"integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
|
||||
},
|
||||
"@mapbox/mapbox-gl-supported": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
|
||||
"integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==",
|
||||
"requires": {}
|
||||
},
|
||||
"@mapbox/point-geometry": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
|
||||
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
|
||||
},
|
||||
"@mapbox/tiny-sdf": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz",
|
||||
"integrity": "sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw=="
|
||||
},
|
||||
"@mapbox/unitbezier": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
|
||||
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
|
||||
},
|
||||
"@mapbox/vector-tile": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
|
||||
@@ -16933,11 +16887,6 @@
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
|
||||
"integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ=="
|
||||
},
|
||||
"grid-index": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
|
||||
"integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
|
||||
},
|
||||
"growl": {
|
||||
"version": "1.10.5",
|
||||
"resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
|
||||
@@ -18011,34 +17960,47 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"mapbox-gl": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.2.tgz",
|
||||
"integrity": "sha512-CPjtWygL+f7naL+sGHoC2JQR0DG7u+9ik6WdkjjVmz2uy0kBC2l+aKfdi3ZzUR7VKSQJ6Mc/CeCN+6iVNah+ww==",
|
||||
"maplibre-gl": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.1.1.tgz",
|
||||
"integrity": "sha512-FRAHc4kPYKDF0+QMm8tnkyhv65Ed5SKLbzcH6hHM20XAK+9pqHMIHxlwpxcb4zGl+czz1bUegYf/KXjJRh9aDA==",
|
||||
"requires": {
|
||||
"@mapbox/geojson-rewind": "^0.5.0",
|
||||
"@mapbox/geojson-types": "^1.0.2",
|
||||
"@mapbox/geojson-rewind": "^0.5.1",
|
||||
"@mapbox/jsonlint-lines-primitives": "^2.0.2",
|
||||
"@mapbox/mapbox-gl-supported": "^1.5.0",
|
||||
"@mapbox/mapbox-gl-supported": "^2.0.1",
|
||||
"@mapbox/point-geometry": "^0.1.0",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"@mapbox/unitbezier": "^0.0.0",
|
||||
"@mapbox/tiny-sdf": "^2.0.4",
|
||||
"@mapbox/unitbezier": "^0.0.1",
|
||||
"@mapbox/vector-tile": "^1.3.1",
|
||||
"@mapbox/whoots-js": "^3.1.0",
|
||||
"csscolorparser": "~1.0.3",
|
||||
"earcut": "^2.2.2",
|
||||
"earcut": "^2.2.3",
|
||||
"geojson-vt": "^3.2.1",
|
||||
"gl-matrix": "^3.2.1",
|
||||
"grid-index": "^1.1.0",
|
||||
"minimist": "^1.2.5",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"murmurhash-js": "^1.0.0",
|
||||
"pbf": "^3.2.1",
|
||||
"potpack": "^1.0.1",
|
||||
"potpack": "^1.0.2",
|
||||
"quickselect": "^2.0.0",
|
||||
"rw": "^1.3.3",
|
||||
"supercluster": "^7.1.0",
|
||||
"supercluster": "^7.1.4",
|
||||
"tinyqueue": "^2.0.3",
|
||||
"vt-pbf": "^3.1.1"
|
||||
"vt-pbf": "^3.1.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mapbox/mapbox-gl-supported": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
|
||||
"integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
|
||||
},
|
||||
"@mapbox/tiny-sdf": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
|
||||
"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
|
||||
},
|
||||
"@mapbox/unitbezier": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
|
||||
"integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"material-design-icons-iconfont": {
|
||||
@@ -19780,11 +19742,6 @@
|
||||
"resolved": "https://registry.npmjs.org/rndm/-/rndm-1.2.0.tgz",
|
||||
"integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
|
||||
},
|
||||
"rw": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
|
||||
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
"karma-verbose-reporter": "^0.0.8",
|
||||
"karma-webpack": "^5.0.0",
|
||||
"luxon": "^2.3.0",
|
||||
"mapbox-gl": "^1.13.2",
|
||||
"maplibre-gl": "^2.1.1",
|
||||
"material-design-icons-iconfont": "^6.1.1",
|
||||
"mini-css-extract-plugin": "^2.5.3",
|
||||
"minimist": ">=1.2.5",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="photoprism" :class="'theme-' + $config.themeName">
|
||||
<div id="photoprism" :class="[isRtl ? 'is-rtl' : '', 'theme-' + themeName]">
|
||||
<p-loading-bar height="4"></p-loading-bar>
|
||||
|
||||
<p-notify></p-notify>
|
||||
@@ -25,6 +25,9 @@ export default {
|
||||
name: 'PhotoPrism',
|
||||
data() {
|
||||
return {
|
||||
isRtl: this.$config.rtl(),
|
||||
themeName: this.$config.themeName,
|
||||
subscriptions: [],
|
||||
touchStart: 0,
|
||||
};
|
||||
},
|
||||
@@ -32,13 +35,21 @@ export default {
|
||||
created() {
|
||||
window.addEventListener('touchstart', (e) => this.onTouchStart(e), {passive: true});
|
||||
window.addEventListener('touchmove', (e) => this.onTouchMove(e), {passive: true});
|
||||
this.subscriptions['view.refresh'] = Event.subscribe("view.refresh", (ev, data) => this.onRefresh(data));
|
||||
this.$config.setVuetify(this.$vuetify);
|
||||
},
|
||||
destroyed() {
|
||||
for (let i = 0; i < this.subscriptions.length; i++) {
|
||||
Event.unsubscribe(this.subscriptions[i]);
|
||||
}
|
||||
window.removeEventListener('touchstart', (e) => this.onTouchStart(e), false);
|
||||
window.removeEventListener('touchmove', (e) => this.onTouchMove(e), false);
|
||||
},
|
||||
methods: {
|
||||
onRefresh(config) {
|
||||
this.isRtl = config.rtl();
|
||||
this.themeName = config.themeName;
|
||||
},
|
||||
onTouchStart(e) {
|
||||
this.touchStart = e.touches[0].pageY;
|
||||
},
|
||||
|
||||
@@ -286,11 +286,7 @@ export default class Config {
|
||||
setTheme(name) {
|
||||
this.themeName = name;
|
||||
|
||||
const el = document.getElementById("photoprism");
|
||||
|
||||
if (el) {
|
||||
el.className = "theme-" + name;
|
||||
}
|
||||
Event.publish("view.refresh", this);
|
||||
|
||||
this.theme = themes[name] ? themes[name] : themes["default"];
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* https://github.com/klokantech/openmaptiles-language
|
||||
* (c) 2018 Klokan Technologies GmbH
|
||||
*/
|
||||
import mapboxgl from "mapbox-gl";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import { config } from "../session";
|
||||
|
||||
const langFallbackDecorate = function (style, cfg) {
|
||||
@@ -56,8 +56,8 @@ const langFallbackDecorate = function (style, cfg) {
|
||||
let langEnabled = true;
|
||||
|
||||
let setStyleMutex = false;
|
||||
let origSetStyle = mapboxgl.Map.prototype.setStyle;
|
||||
mapboxgl.Map.prototype.setStyle = function () {
|
||||
let origSetStyle = maplibregl.Map.prototype.setStyle;
|
||||
maplibregl.Map.prototype.setStyle = function () {
|
||||
origSetStyle.apply(this, arguments);
|
||||
|
||||
if (langEnabled && !setStyleMutex) {
|
||||
@@ -75,11 +75,11 @@ mapboxgl.Map.prototype.setStyle = function () {
|
||||
}
|
||||
};
|
||||
|
||||
mapboxgl.Map.prototype.setLanguageEnabled = function (enable) {
|
||||
maplibregl.Map.prototype.setLanguageEnabled = function (enable) {
|
||||
langEnabled = enable;
|
||||
};
|
||||
|
||||
mapboxgl.Map.prototype.setLanguage = function (language, noAlt) {
|
||||
maplibregl.Map.prototype.setLanguage = function (language, noAlt) {
|
||||
this.languageOptions = {
|
||||
language: language,
|
||||
noAlt: noAlt,
|
||||
@@ -162,13 +162,13 @@ mapboxgl.Map.prototype.setLanguage = function (language, noAlt) {
|
||||
setStyleMutex = false;
|
||||
};
|
||||
|
||||
mapboxgl.Map.prototype.autodetectLanguage = function (opt_fallback) {
|
||||
maplibregl.Map.prototype.autodetectLanguage = function (opt_fallback) {
|
||||
this.setLanguage(config.values.settings.ui.language.split("-")[0] || opt_fallback || "native");
|
||||
};
|
||||
|
||||
// See https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/
|
||||
mapboxgl.setRTLTextPlugin(
|
||||
`${config.staticUri}/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js`,
|
||||
// Add plugin to support right-to-left languages such as Arabic and Hebrew.
|
||||
maplibregl.setRTLTextPlugin(
|
||||
`${config.staticUri}/plugins/maplibre-gl-rtl-text/v0.2.3/maplibre-gl-rtl-text.js`,
|
||||
null,
|
||||
true // Lazy load the plugin
|
||||
);
|
||||
|
||||
@@ -30,7 +30,7 @@ https://docs.photoprism.app/developer-guide/
|
||||
|
||||
@import url("../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css");
|
||||
@import url("../../node_modules/vuetify/dist/vuetify.min.css");
|
||||
@import url("../../node_modules/mapbox-gl/dist/mapbox-gl.css");
|
||||
@import url("../../node_modules/maplibre-gl/dist/maplibre-gl.css");
|
||||
@import url("themes.css");
|
||||
@import url("animate.css");
|
||||
@import url("splash.css");
|
||||
@@ -204,4 +204,51 @@ main {
|
||||
}
|
||||
.lh-20 {
|
||||
line-height: 2.0rem !important;
|
||||
}
|
||||
|
||||
/* RTL alignments */
|
||||
|
||||
#photoprism.is-rtl .text-xs-left,
|
||||
#photoprism.is-rtl .text-sm-left {
|
||||
text-align: right!important;
|
||||
}
|
||||
|
||||
#photoprism.is-rtl .text-xs-right,
|
||||
#photoprism.is-rtl .text-sm-right {
|
||||
text-align: left!important;
|
||||
}
|
||||
|
||||
#photoprism.is-rtl .v-text-field .v-input__prepend-inner {
|
||||
margin-left: auto;
|
||||
padding-left: 4px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#photoprism.is-rtl .v-toolbar.page-toolbar .v-text-field .v-input__slot {
|
||||
padding-left: 12px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#photoprism.is-rtl .card-details button {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#photoprism.is-rtl .p-flex-menuitem .nav-count {
|
||||
margin-left: 48px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#photoprism.is-rtl .v-list__group__header .p-flex-menuitem .nav-count {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#photoprism.is-rtl .v-toolbar__content>:last-child.v-btn--icon,
|
||||
#photoprism.is-rtl .v-toolbar__extension>:last-child.v-btn--icon {
|
||||
margin-left: -6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
@@ -1,11 +1,16 @@
|
||||
#photoprism .p-map-control {
|
||||
position: fixed;
|
||||
#photoprism .map-control {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
bottom: 35px;
|
||||
right: 30px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#photoprism.is-rtl .map-control {
|
||||
right: auto;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
#photoprism #map .marker {
|
||||
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
@@ -16,6 +21,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#photoprism .mapboxgl-ctrl-attrib-inner a {
|
||||
#photoprism .maplibregl-ctrl-attrib-inner a {
|
||||
color: #333 !important;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<v-container fluid fill-height class="pa-0 p-page p-page-places">
|
||||
<div id="map" style="width: 100%; height: 100%;">
|
||||
<div class="p-map-control">
|
||||
<div class="mapboxgl-ctrl mapboxgl-ctrl-group">
|
||||
<div class="map-control">
|
||||
<div class="maplibregl-ctrl maplibregl-ctrl-group">
|
||||
<v-text-field v-model="filter.q"
|
||||
class="pa-0 ma-0 input-search"
|
||||
single-line
|
||||
@@ -24,7 +24,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mapboxgl from "mapbox-gl";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import Api from "common/api";
|
||||
import Thumb from "model/thumb";
|
||||
|
||||
@@ -290,17 +290,19 @@ export default {
|
||||
});
|
||||
},
|
||||
renderMap() {
|
||||
this.map = new mapboxgl.Map(this.options);
|
||||
this.map = new maplibregl.Map(this.options);
|
||||
this.map.setLanguage(this.$config.values.settings.ui.language.split("-")[0]);
|
||||
|
||||
this.map.addControl(new mapboxgl.NavigationControl({showCompass: true}, 'top-right'));
|
||||
this.map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('body')}));
|
||||
this.map.addControl(new mapboxgl.GeolocateControl({
|
||||
const controlPos = this.$rtl ? 'top-left' : 'top-right';
|
||||
|
||||
this.map.addControl(new maplibregl.NavigationControl({showCompass: true}), controlPos);
|
||||
this.map.addControl(new maplibregl.FullscreenControl({container: document.querySelector('body')}), controlPos);
|
||||
this.map.addControl(new maplibregl.GeolocateControl({
|
||||
positionOptions: {
|
||||
enableHighAccuracy: true
|
||||
},
|
||||
trackUserLocation: true
|
||||
}));
|
||||
}), controlPos);
|
||||
|
||||
this.map.on("load", () => this.onMapLoad());
|
||||
},
|
||||
@@ -326,7 +328,7 @@ export default {
|
||||
el.style.height = '50px';
|
||||
|
||||
el.addEventListener('click', () => this.openPhoto(props.UID));
|
||||
marker = this.markers[id] = new mapboxgl.Marker({
|
||||
marker = this.markers[id] = new maplibregl.Marker({
|
||||
element: el
|
||||
}).setLngLat(coords);
|
||||
} else {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="photoprism" :class="'theme-' + $config.themeName">
|
||||
<div id="photoprism" :class="[isRtl ? 'is-rtl' : '', 'theme-' + themeName]">
|
||||
<p-loading-bar height="4"></p-loading-bar>
|
||||
|
||||
<p-notify></p-notify>
|
||||
@@ -22,9 +22,12 @@ import "./css/app.css";
|
||||
import Event from "pubsub-js";
|
||||
|
||||
export default {
|
||||
name: 'Photoprism',
|
||||
name: "PhotoPrism",
|
||||
data() {
|
||||
return {
|
||||
isRtl: this.$config.rtl(),
|
||||
themeName: this.$config.themeName,
|
||||
subscriptions: [],
|
||||
touchStart: 0,
|
||||
};
|
||||
},
|
||||
@@ -32,13 +35,21 @@ export default {
|
||||
created() {
|
||||
window.addEventListener('touchstart', (e) => this.onTouchStart(e), {passive: true});
|
||||
window.addEventListener('touchmove', (e) => this.onTouchMove(e), {passive: true});
|
||||
this.subscriptions['view.refresh'] = Event.subscribe("view.refresh", (ev, data) => this.onRefresh(data));
|
||||
this.$config.setVuetify(this.$vuetify);
|
||||
},
|
||||
destroyed() {
|
||||
for (let i = 0; i < this.subscriptions.length; i++) {
|
||||
Event.unsubscribe(this.subscriptions[i]);
|
||||
}
|
||||
window.removeEventListener('touchstart', (e) => this.onTouchStart(e), false);
|
||||
window.removeEventListener('touchmove', (e) => this.onTouchMove(e), false);
|
||||
},
|
||||
methods: {
|
||||
onRefresh(config) {
|
||||
this.isRtl = config.rtl();
|
||||
this.themeName = config.themeName;
|
||||
},
|
||||
onTouchStart(e) {
|
||||
this.touchStart = e.touches[0].pageY;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user