Removing jQuery altogether

build/webpack.common.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const { SRC, DIST, ASSETS, LIB } = require('./paths');
-var webpack = require("webpack");
+const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const SymlinkWebpackPlugin = require('symlink-webpack-plugin');
@@ -13,9 +13,8 @@ module.exports = {
 	output: {
     	path: DIST,
 		filename: '[name].js',
-    	publicPath: './' //meaning dist/
+    	publicPath: '../dist/'
 	},
-	devtool: "inline-source-map",
 	module: {
 		rules: [{
 				test: /\.vue$/,
@@ -72,10 +71,6 @@ module.exports = {
 		]
 	},
 	plugins: [
-		new webpack.ProvidePlugin({
-			$: require.resolve('jquery'),
-			jQuery: require.resolve('jquery')
-		}),
 		new CopyWebpackPlugin({
 			patterns: [/*{
 					from: 'geo/',
@@ -108,12 +103,7 @@ module.exports = {
 	resolve: {
 		extensions: ['', '.js'],
 		alias: {
-			"@scripts": path.resolve(SRC, "scripts"),
+			"@scripts": path.resolve(SRC, "scripts")
-			'load-image': 'blueimp-load-image/js/load-image.js',
-			'load-image-meta': 'blueimp-load-image/js/load-image-meta.js',
-			'load-image-exif': 'blueimp-load-image/js/load-image-exif.js',
-			'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
-			'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
 		}
 	}
 };

build/webpack.dev.js

@@ -2,5 +2,6 @@ const { merge } = require('webpack-merge')
 
 module.exports = merge(require('./webpack.common.js'), {
 	mode: 'development',
+	devtool: 'inline-source-map',
 	watch: true
 })

package-lock.json

@@ -8,8 +8,9 @@
       "name": "spot",
       "version": "2.0.0",
       "dependencies": {
+        "@uppy/core": "^5.2.0",
+        "@uppy/xhr-upload": "^5.2.0",
         "autosize": "^6.0.1",
-        "blueimp-file-upload": "^10.32.0",
         "clean-webpack-plugin": "^4.0.0",
         "copy-webpack-plugin": "^14.0.0",
         "css-loader": "^7.1.2",
@@ -2017,6 +2018,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@transloadit/prettier-bytes": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@transloadit/prettier-bytes/-/prettier-bytes-0.3.5.tgz",
+      "integrity": "sha512-xF4A3d/ZyX2LJWeQZREZQw+qFX4TGQ8bGVP97OLRt6sPO6T0TNHBFTuRHOJh7RNmYOBmQ9MHxpolD9bXihpuVA==",
+      "license": "MIT"
+    },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -2080,6 +2087,12 @@
         "undici-types": "~7.19.0"
       }
     },
+    "node_modules/@types/retry": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
+      "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==",
+      "license": "MIT"
+    },
     "node_modules/@types/supercluster": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
@@ -2089,6 +2102,83 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@uppy/companion-client": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@uppy/companion-client/-/companion-client-5.1.1.tgz",
+      "integrity": "sha512-DzrOWTbIZHvtgAFXBMYHk2wD27NjpBSVhY2tEiEIUhPd2CxbFRZjHM/N3HOt3VwZEAP471QWFLlJRWPcIY3A2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@uppy/utils": "^7.1.1",
+        "namespace-emitter": "^2.0.1",
+        "p-retry": "^6.1.0"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^5.1.1"
+      }
+    },
+    "node_modules/@uppy/core": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@uppy/core/-/core-5.2.0.tgz",
+      "integrity": "sha512-uvfNyz4cnaplt7LYJmEZHuqOuav0tKp4a9WKJIaH6iIj7XiqYvS2J5SEByexAlUFlzefOAyjzj4Ja2dd/8aMrw==",
+      "license": "MIT",
+      "dependencies": {
+        "@transloadit/prettier-bytes": "^0.3.4",
+        "@uppy/store-default": "^5.0.0",
+        "@uppy/utils": "^7.1.4",
+        "lodash": "^4.17.21",
+        "mime-match": "^1.0.2",
+        "namespace-emitter": "^2.0.1",
+        "nanoid": "^5.0.9",
+        "preact": "^10.5.13"
+      }
+    },
+    "node_modules/@uppy/core/node_modules/nanoid": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.9.tgz",
+      "integrity": "sha512-ZUvP7KeBLe3OZ1ypw6dI/TzYJuvHP77IM4Ry73waSQTLn8/g8rpdjfyVAh7t1/+FjBtG4lCP42MEbDxOsRpBMw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/@uppy/store-default": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@uppy/store-default/-/store-default-5.0.0.tgz",
+      "integrity": "sha512-hQtCSQ1yGiaval/wVYUWquYGDJ+bpQ7e4FhUUAsRQz1x1K+o7NBtjfp63O9I4Ks1WRoKunpkarZ+as09l02cPw==",
+      "license": "MIT"
+    },
+    "node_modules/@uppy/utils": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@uppy/utils/-/utils-7.2.0.tgz",
+      "integrity": "sha512-6lC246qszMv6bTyl/+QyHwrudgeguWkA94ME1wHn+a6uRAvmtAEaUManIfGqTJfoKvWAiCJqdJPl5xRJjhAloQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.23",
+        "preact": "^10.26.10"
+      }
+    },
+    "node_modules/@uppy/xhr-upload": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@uppy/xhr-upload/-/xhr-upload-5.2.0.tgz",
+      "integrity": "sha512-3LV/X5Of6BINnKplP+CwUJ0a4/7cRFfzxwGyXnW+uCrNQHoo09dttcz3begWHejGvzenQHuUnMO3Fxyc71Pryg==",
+      "license": "MIT",
+      "dependencies": {
+        "@uppy/companion-client": "^5.1.1",
+        "@uppy/utils": "^7.2.0"
+      },
+      "peerDependencies": {
+        "@uppy/core": "^5.2.0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.33",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.33.tgz",
@@ -2590,44 +2680,6 @@
         "node": "*"
       }
     },
-    "node_modules/blueimp-canvas-to-blob": {
-      "version": "3.29.0",
-      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
-      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/blueimp-file-upload": {
-      "version": "10.32.0",
-      "resolved": "https://registry.npmjs.org/blueimp-file-upload/-/blueimp-file-upload-10.32.0.tgz",
-      "integrity": "sha512-3WMJw5Cbfz94Adl1OeyH+rRpGwHiNHzja+CR6aRWPoAtwrUwvP5gXKo0XdX+sdPE+iCU63Xmba88hoHQmzY8RQ==",
-      "license": "MIT",
-      "optionalDependencies": {
-        "blueimp-canvas-to-blob": "3",
-        "blueimp-load-image": "5",
-        "blueimp-tmpl": "3"
-      },
-      "peerDependencies": {
-        "jquery": ">=1.7"
-      }
-    },
-    "node_modules/blueimp-load-image": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-5.16.0.tgz",
-      "integrity": "sha512-3DUSVdOtlfNRk7moRZuTwDmA3NnG8KIJuLcq3c0J7/BIr6X3Vb/EpX3kUH1joxUhmoVF4uCpDfz7wHkz8pQajA==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/blueimp-tmpl": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/blueimp-tmpl/-/blueimp-tmpl-3.20.0.tgz",
-      "integrity": "sha512-g6ln9L+VX8ZA4WA8mgKMethYH+5teroJ2uOkCvcthy9Y9d9LrQ42OAMn+r3ECKu9CB+xe9GOChlIUJBSxwkI6g==",
-      "license": "MIT",
-      "optional": true,
-      "bin": {
-        "tmpl.js": "js/compile.js"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
@@ -4038,6 +4090,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-network-error": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.3.1.tgz",
+      "integrity": "sha512-6QCxa49rQbmUWLfk0nuGqzql9U8uaV2H6279bRErPBHe/109hCzsLUBUHfbEtvLIHBd6hyXbgedBSHevm43Edw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-path-cwd": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@@ -4363,6 +4427,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mime-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/mime-match/-/mime-match-1.0.2.tgz",
+      "integrity": "sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==",
+      "license": "ISC",
+      "dependencies": {
+        "wildcard": "^1.1.0"
+      }
+    },
+    "node_modules/mime-match/node_modules/wildcard": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-1.1.2.tgz",
+      "integrity": "sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==",
+      "license": "MIT"
+    },
     "node_modules/mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
@@ -4409,6 +4488,12 @@
       "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==",
       "license": "MIT"
     },
+    "node_modules/namespace-emitter": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
+      "integrity": "sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -4524,6 +4609,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/p-retry": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.1.tgz",
+      "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/retry": "0.12.2",
+        "is-network-error": "^1.0.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
@@ -4861,6 +4963,16 @@
       "integrity": "sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ==",
       "license": "ISC"
     },
+    "node_modules/preact": {
+      "version": "10.29.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.1.tgz",
+      "integrity": "sha512-gQCLc/vWroE8lIpleXtdJhTFDogTdZG9AjMUpVkDf2iTCNwYNWA+u16dL41TqUDJO4gm2IgrcMv3uTpjd4Pwmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/protocol-buffers-schema": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.1.tgz",
@@ -5075,6 +5187,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",

package.json

@@ -21,8 +21,9 @@
   "keywords": [],
   "author": "Franzz",
   "dependencies": {
+    "@uppy/core": "^5.2.0",
+    "@uppy/xhr-upload": "^5.2.0",
     "autosize": "^6.0.1",
-    "blueimp-file-upload": "^10.32.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.2",

src/components/project.vue

@@ -1,13 +1,11 @@
 <script>
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { Map, NavigationControl, Marker, LngLatBounds, LngLat, Popup } from 'maplibre-gl';
-import { createApp, defineComponent, nextTick, ref, defineCustomElement, provide, inject } from 'vue';
+import { createApp, ref, provide, inject } from 'vue';
 import Simplebar from 'simplebar-vue';
 
-import autosize from 'autosize';
-import mousewheel from 'jquery-mousewheel';
-import waitforimages from 'jquery.waitforimages';
 import lightbox from '../scripts/lightbox.js';
+import { getOuterWidth } from '../scripts/common.js';
 
 import SpotIcon from './spotIcon.vue';
 import SpotIconStack from './spotIconStack.vue';

src/components/projectPost.vue

@@ -6,6 +6,7 @@
 	import projectMapLink from './projectMapLink.vue';
 	import projectRelTime from './projectRelTime.vue';
 	import { LngLat } from 'maplibre-gl';
+	import { copyTextToClipboard } from '../scripts/common.js';
 
 	import autosize from 'autosize';
 

src/components/upload.vue

@@ -1,9 +1,11 @@
 <script>
+import { markRaw } from 'vue';
+import Uppy from '@uppy/core';
+import XHRUpload from '@uppy/xhr-upload';
+import '@uppy/core/css/style.min.css';
+
 import SpotIcon from './spotIcon.vue';
 import SpotButton from './spotButton.vue';
-import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
-import "blueimp-file-upload/js/jquery.iframe-transport.js";
-import "blueimp-file-upload/js/jquery.fileupload.js";
 
 export default {
 	name: 'upload',
@@ -14,38 +16,76 @@ export default {
 			project: this.projects[this.spot.vars('default_project_codename')],
 			files: [],
 			logs: [],
-			progress: 0
+			progress: 0,
+			uppy: null
 		};
 	},
 	mounted() {
 		this.spot.addPage('upload', {});
 
-		if(this.project.editable) {
+		if(!this.project.editable) {
-			$('#fileupload')
+			this.logs = [this.spot.lang('upload_mode_archived', [this.project.name])];
-				.fileupload({
+			return;
-					dataType: 'json',
+		}
-					formData: {t: this.user.timezone},
+
-					acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov)$/i,
+		this.initUploader();
-					done: (e, asData) => {
+	},
-						$.each(asData.result.files, (iKey, oFile) => {
+	beforeUnmount() {
-							let bError = ('error' in oFile);
+		if(this.uppy) {
-
+			this.uppy.destroy();
-							//Feedback
+			this.uppy = null;
-							this.logs.push(bError?oFile.error:(this.spot.lang('upload_success', [oFile.name])));
-
-							//Comments
-							oFile.content = '';
-							if(!bError) this.files.push(oFile);
-						});
-					},
-					progressall: (e, data) => {
-						this.progress = parseInt(data.loaded / data.total * 100, 10);
-					}
-				});
 		}
-		else this.logs = [this.spot.lang('upload_mode_archived', [this.project.name])];
 	},
 	methods: {
+		initUploader() {
+			const endpoint = `${this.consts.process_page}?a=upload`;
+
+			this.uppy = markRaw(new Uppy({
+				autoProceed: true,
+				restrictions: {
+					allowedFileTypes: ['.gif', '.jpg', '.jpeg', '.png', '.mov', '.mp4']
+				}
+			}));
+
+			this.uppy.setMeta({t: this.user.timezone});
+
+			this.uppy.use(XHRUpload, {
+				endpoint,
+				fieldName: 'files[]',
+				formData: true,
+				allowedMetaFields: ['t', 'name', 'type'],
+				getResponseData(xhr) {
+					return JSON.parse(xhr.responseText || '{}');
+				}
+			});
+
+			this.uppy.on('progress', (progress) => {
+				this.progress = progress;
+			});
+
+			this.uppy.on('upload-success', (file, response) => {
+				const uploadedFiles = response?.body?.files || [];
+				uploadedFiles.forEach((uploadedFile) => {
+					const hasError = Object.prototype.hasOwnProperty.call(uploadedFile, 'error');
+					this.logs.push(hasError ? uploadedFile.error : this.spot.lang('upload_success', [uploadedFile.name]));
+					if(!hasError) this.files.push({...uploadedFile, content: ''});
+				});
+			});
+
+			this.uppy.on('upload-error', (file, error, response) => {
+				const message = response?.body?.error || error?.message || this.spot.lang('error');
+				this.logs.push(message);
+			});
+
+			this.uppy.on('complete', () => {
+				this.progress = 0;
+			});
+		},
+		onFileChange(event) {
+			const files = Array.from(event.target.files || []);
+			if(files.length > 0 && this.uppy) this.uppy.addFiles(files.map((file) => ({source: 'local', name: file.name, type: file.type, data: file})));
+			event.target.value = '';
+		},
 		addComment(oFile) {
 			this.spot.get2('add_comment', {id: oFile.id, content: oFile.content})
 				.then((asData) => {this.logs.push(this.spot.lang('media_comment_update', asData.filename));})
@@ -58,8 +98,8 @@ export default {
 					(position) => {
 						this.logs.push('Sending position...');
 						this.spot.get2('add_position', {'latitude':position.coords.latitude, 'longitude':position.coords.longitude, 'timestamp':Math.round(position.timestamp / 1000)})
-							.then((asData) => {this.logs.push(self.lang(sMsgId));})
+							.then((asData) => {this.logs.push(this.spot.lang('success'));})
-							.catch((sMsgId) => {this.logs.push(self.lang(sMsgId));});
+							.catch((sMsgId) => {this.logs.push(this.spot.lang(sMsgId));});
 					},
 					(error) => {
 						this.logs.push(error.message);
@@ -77,7 +117,7 @@ export default {
 		<h1>{{ spot.lang('upload_media_title') }}</h1>
 		<h2>{{ this.project.name }}</h2>
 		<div class="section" v-if="project.editable">
-			<input id="fileupload" type="file" name="files[]" :data-url="this.spot.getActionLink('upload')" multiple />
+			<input id="fileupload" type="file" name="files[]" multiple accept=".gif,.jpg,.jpeg,.png,.mov,.mp4" @change="onFileChange" />
 		</div>
 		<div class="section progress" v-if="progress > 0">
 			<div class="bar" :style="{width:progress+'%'}"></div>

src/scripts/app.js

@@ -1,14 +1,3 @@
-//jQuery
-import './jquery.helpers.js';
-
-//Common
-import * as common from './common.js';
-window.copyArray = common.copyArray;
-window.getElem = common.getElem;
-window.setElem = common.setElem;
-window.getDragPosition = common.getDragPosition;
-window.copyTextToClipboard = common.copyTextToClipboard;
-window.getOuterWidth = common.getOuterWidth;
 import Css from './../styles/spot.scss';
 
 //Masks

src/scripts/jquery.helpers.js

@@ -1,30 +1,4 @@
-$.prototype.addInput = function(sType, sName, sValue, aoEvents) {
+import { getDragPosition } from './common.js';
-	aoEvents = aoEvents || [];
-	let $Input = $('<input>', {type: sType, name: sName, value: sValue}).data('old_value', sValue);
-	$.each(aoEvents, (iIndex, aoEvent) => {
-		$Input.on(aoEvent.on, aoEvent.callback);
-	});
-	return $(this).append($Input);
-};
-
-$.prototype.addButton = function(sIcon, sText, sName, fOnClick, sClass)
-{
-	sText = sText || '';
-	sClass = sClass || '';
-	var $Btn = $('<button>', {name: sName, 'class':sClass})
-		.addIcon('fa-'+sIcon, (sText != ''))
-		.append(sText)
-		.click(fOnClick);
-
-	return $(this).append($Btn);
-};
-
-$.prototype.addIcon = function(sIcon, bMargin, sStyle)
-{
-	bMargin = bMargin || false;
-	sStyle = sStyle || '';
-	return $(this).append($('<i>', {'class':'fa'+sStyle+' '+sIcon+(bMargin?' push':'')}));
-};
 
 $.prototype.defaultVal = function(sDefaultValue)
 {
@@ -57,31 +31,6 @@ $.prototype.checkForm = function(sSelector)
 	return bOk;
 };
 
-$.prototype.cascadingDown = function(sDuration)
-{
-	return $(this).slideDown(sDuration, function(){$(this).next().cascadingDown(sDuration);});
-};
-
-$.prototype.hoverSwap = function(sDefault, sHover)
-{
-	return $(this)
-		.data('default', sDefault)
-		.data('hover', sHover)
-		.hover(function(){
-			var	$This = $(this),
-				sHover = $This.data('hover');
-				sDefault = $This.data('default');
-
-			if(sDefault!='' && sHover != '') {
-				$This.fadeOut('fast', function() {
-					var $This = $(this);
-					$This.text((sDefault==$This.text())?sHover:sDefault).fadeIn('fast');
-			    });
-			}
-		})
-		.text(sDefault);
-};
-
 $.prototype.onSwipe = function(fOnStart, fOnMove, fOnEnd){
 	return $(this)
 		.on('dragstart', (e) => {

src/scripts/lang.js

@@ -0,0 +1,31 @@
+export default class Lang {
+
+	constructor({ translations = {}, prefix = '' } = {}) {
+		this.translations = translations;
+		this.prefix = prefix;
+	}
+
+	lang(key = '', params = []) {
+		if(key === '') return '';
+
+		const normalizedParams = Array.isArray(params) ? params : [params];
+
+		if(Object.prototype.hasOwnProperty.call(this.translations, key)) {
+			let text = this.translations[key];
+			normalizedParams.forEach((param, index) => {
+				text = text.replace('$' + index, param);
+			});
+			return text;
+		}
+
+		console.warn('Missing translation:', key);
+		return key;
+	}
+
+	parse(message = '') {
+		if(this.prefix && typeof message === 'string' && message.startsWith(this.prefix)) {
+			return this.lang(message.slice(this.prefix.length));
+		}
+		return message;
+	}
+}

src/scripts/spot.js

@@ -1,3 +1,6 @@
+import { copyArray, getElem, setElem } from './common.js';
+import Lang from './lang.js';
+
 export default class Spot {
 
 	constructor(asGlobals) {
@@ -7,6 +10,11 @@ export default class Spot {
 		this.consts.default_page = 'project';
 		//this.consts.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || this.consts.default_timezone;
 		
+		this.translator = new Lang({
+			translations: this.consts.lang || {},
+			prefix: this.consts.lang_prefix || ''
+		});
+
 		this.pages = {};
 
 		//Variables & constants from php
@@ -104,9 +112,7 @@ export default class Spot {
 			else {
 				let oResponse = await oRequest.json();
 				bLoading = false;
-				if(oResponse.desc.substr(0, this.consts.lang_prefix.length)==this.consts.lang_prefix) {
+				oResponse.desc = this.translator.parse(oResponse.desc);
-					oResponse.desc = this.lang(oResponse.desc.substr(this.consts.lang_prefix.length));
-				}
 
 				if(oResponse.result == this.consts.error) return Promise.reject(oResponse.desc);
 				else return oResponse.data;
@@ -119,22 +125,7 @@ export default class Spot {
 	}
 
 	lang(sKey, asParams = []) {
-		if(sKey == '') return '';
+		return this.translator.lang(sKey, asParams);
-		if(typeof asParams !== 'object') asParams = [asParams];
-
-		var sLang = '';
-		if(sKey in this.consts.lang) {
-			sLang = this.consts.lang[sKey];
-			for(let i in asParams) {
-				sLang = sLang.replace('$'+i, asParams[i]);
-			}
-		}
-		else {
-			console.log('missing translation: '+sKey);
-			sLang = sKey;
-		}
-
-		return sLang;
 	}
 
 	isMobile() {