Removing jQuery altogether
This commit is contained in:
@@ -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"),
|
||||
'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'
|
||||
"@scripts": path.resolve(SRC, "scripts")
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -2,5 +2,6 @@ const { merge } = require('webpack-merge')
|
||||
|
||||
module.exports = merge(require('./webpack.common.js'), {
|
||||
mode: 'development',
|
||||
devtool: 'inline-source-map',
|
||||
watch: true
|
||||
})
|
||||
})
|
||||
|
||||
199
package-lock.json
generated
199
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -1,87 +1,127 @@
|
||||
<script>
|
||||
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',
|
||||
components: { SpotButton, SpotIcon },
|
||||
inject: ['spot', 'projects', 'consts', 'user'],
|
||||
data() {
|
||||
return {
|
||||
project: this.projects[this.spot.vars('default_project_codename')],
|
||||
files: [],
|
||||
logs: [],
|
||||
progress: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.spot.addPage('upload', {});
|
||||
|
||||
if(this.project.editable) {
|
||||
$('#fileupload')
|
||||
.fileupload({
|
||||
dataType: 'json',
|
||||
formData: {t: this.user.timezone},
|
||||
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov)$/i,
|
||||
done: (e, asData) => {
|
||||
$.each(asData.result.files, (iKey, oFile) => {
|
||||
let bError = ('error' in oFile);
|
||||
|
||||
//Feedback
|
||||
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: {
|
||||
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));})
|
||||
.catch((sMsgId) => {this.logs.push(this.spot.lang(sMsgId));});
|
||||
},
|
||||
addPosition() {
|
||||
if(navigator.geolocation) {
|
||||
this.logs.push('Determining position...');
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(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));})
|
||||
.catch((sMsgId) => {this.logs.push(self.lang(sMsgId));});
|
||||
},
|
||||
(error) => {
|
||||
this.logs.push(error.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
else this.logs.push('This browser does not support geolocation');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div id="upload">
|
||||
<a name="back" class="button" href="#project"><SpotIcon :icon="'back'" :text="spot.lang('nav_back')" /></a>
|
||||
<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 />
|
||||
</div>
|
||||
<div class="section progress" v-if="progress > 0">
|
||||
<div class="bar" :style="{width:progress+'%'}"></div>
|
||||
</div>
|
||||
<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';
|
||||
|
||||
export default {
|
||||
name: 'upload',
|
||||
components: { SpotButton, SpotIcon },
|
||||
inject: ['spot', 'projects', 'consts', 'user'],
|
||||
data() {
|
||||
return {
|
||||
project: this.projects[this.spot.vars('default_project_codename')],
|
||||
files: [],
|
||||
logs: [],
|
||||
progress: 0,
|
||||
uppy: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.spot.addPage('upload', {});
|
||||
|
||||
if(!this.project.editable) {
|
||||
this.logs = [this.spot.lang('upload_mode_archived', [this.project.name])];
|
||||
return;
|
||||
}
|
||||
|
||||
this.initUploader();
|
||||
},
|
||||
beforeUnmount() {
|
||||
if(this.uppy) {
|
||||
this.uppy.destroy();
|
||||
this.uppy = null;
|
||||
}
|
||||
},
|
||||
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));})
|
||||
.catch((sMsgId) => {this.logs.push(this.spot.lang(sMsgId));});
|
||||
},
|
||||
addPosition() {
|
||||
if(navigator.geolocation) {
|
||||
this.logs.push('Determining position...');
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(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(this.spot.lang('success'));})
|
||||
.catch((sMsgId) => {this.logs.push(this.spot.lang(sMsgId));});
|
||||
},
|
||||
(error) => {
|
||||
this.logs.push(error.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
else this.logs.push('This browser does not support geolocation');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div id="upload">
|
||||
<a name="back" class="button" href="#project"><SpotIcon :icon="'back'" :text="spot.lang('nav_back')" /></a>
|
||||
<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[]" 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>
|
||||
</div>
|
||||
<div class="section comment" v-for="file in files">
|
||||
<img class="thumb" :src="file.thumbnail" />
|
||||
<div class="form">
|
||||
@@ -98,4 +138,4 @@ export default {
|
||||
<p class="log" v-for="log in logs">{{ log }}.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,30 +1,4 @@
|
||||
$.prototype.addInput = function(sType, sName, sValue, aoEvents) {
|
||||
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':'')}));
|
||||
};
|
||||
import { getDragPosition } from './common.js';
|
||||
|
||||
$.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) => {
|
||||
@@ -126,4 +75,4 @@ $.prototype.onSwipe = function(fOnStart, fOnMove, fOnEnd){
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
31
src/scripts/lang.js
Normal file
31
src/scripts/lang.js
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,3 +1,6 @@
|
||||
import { copyArray, getElem, setElem } from './common.js';
|
||||
import Lang from './lang.js';
|
||||
|
||||
export default class Spot {
|
||||
|
||||
constructor(asGlobals) {
|
||||
@@ -6,6 +9,11 @@ export default class Spot {
|
||||
this.consts.title = 'Spotty';
|
||||
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 = {};
|
||||
|
||||
@@ -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.lang(oResponse.desc.substr(this.consts.lang_prefix.length));
|
||||
}
|
||||
oResponse.desc = this.translator.parse(oResponse.desc);
|
||||
|
||||
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 '';
|
||||
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;
|
||||
return this.translator.lang(sKey, asParams);
|
||||
}
|
||||
|
||||
isMobile() {
|
||||
@@ -313,4 +304,4 @@ export default class Spot {
|
||||
checkClearance(sClearance) {
|
||||
return (this.vars(['user', 'clearance']) >= sClearance);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user