Initial implementation
This commit is contained in:
parent
24dd530db8
commit
a6b62fcd46
60
dropzone-mixin.js
Normal file
60
dropzone-mixin.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
export const dropzoneMixin = function(superClass) {
|
||||||
|
return class extends superClass {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this._boundOnDragStart = this._onDragStart.bind(this);
|
||||||
|
this._boundOnDrag = this._onDrag.bind(this);
|
||||||
|
this._boundOnDrag = this._onDrag.bind(this);
|
||||||
|
this._boundOnLeave = this._onLeave.bind(this);
|
||||||
|
this._boundOnDrop = this._onDrop.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
super.connectedCallback();
|
||||||
|
this.addEventListener('dragstart', this._boundOnDragStart, false)
|
||||||
|
this.addEventListener('dragenter', this._boundOnDrag, false)
|
||||||
|
this.addEventListener('dragover', this._boundOnDrag, false)
|
||||||
|
this.addEventListener('dragleave', this._boundOnLeave, false)
|
||||||
|
this.addEventListener('drop', this._boundOnDrop, false)
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback() {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
this.removeEventListener('dragstart', this._boundOnDragStart, false)
|
||||||
|
this.removeEventListener('dragenter', this._boundOnDrag, false)
|
||||||
|
this.removeEventListener('dragover', this._boundOnDrag, false)
|
||||||
|
this.removeEventListener('dragleave', this._boundOnLeave, false)
|
||||||
|
this.removeEventListener('drop', this._boundOnDrop, false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// This event is only triggered if the dragging motion was started inside the browser window.
|
||||||
|
// If that's the case, we know that it can't be image dragged from external. In that case this event isn't triggered because the browser doesn't have focus.
|
||||||
|
_onDragStart() {
|
||||||
|
this._interDragStart = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_onDrag(e) {
|
||||||
|
if (this._interDragStart) return;
|
||||||
|
this._stopPropagation(e);
|
||||||
|
this.isDraggedOn = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_onLeave(e) {
|
||||||
|
this._stopPropagation(e);
|
||||||
|
this.isDraggedOn = false;
|
||||||
|
this._interDragStart = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
_onDrop(e) {
|
||||||
|
this._stopPropagation(e);
|
||||||
|
this._interDragStart = false;
|
||||||
|
this.isDraggedOn = false;
|
||||||
|
this.dispatchEvent(new CustomEvent('dropped', { detail: e.dataTransfer, bubbles: true, composed: true }));
|
||||||
|
}
|
||||||
|
|
||||||
|
_stopPropagation(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
122
package-lock.json
generated
Normal file
122
package-lock.json
generated
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
{
|
||||||
|
"name": "@tp/tp-dropzone",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"lockfileVersion": 2,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "@tp/tp-dropzone",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@tp/helpers": "^1.3.0",
|
||||||
|
"lit": "^2.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@lit-labs/ssr-dom-shim": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
|
||||||
|
},
|
||||||
|
"node_modules/@lit/reactive-element": {
|
||||||
|
"version": "1.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
|
||||||
|
"integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@lit-labs/ssr-dom-shim": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tp/helpers": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.3.0/helpers-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-mOAVP45kkEYXwonaOd5jkFQLX1nbeKtl8YX8FpL2ytON0cOSsh6TUAbCEcMU5xqgyD6L1ZEZNvxCjhOKOKdGyA==",
|
||||||
|
"license": "Apache-2.0"
|
||||||
|
},
|
||||||
|
"node_modules/@types/trusted-types": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
|
||||||
|
"integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
|
||||||
|
},
|
||||||
|
"node_modules/lit": {
|
||||||
|
"version": "2.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
|
||||||
|
"integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@lit/reactive-element": "^1.6.0",
|
||||||
|
"lit-element": "^3.3.0",
|
||||||
|
"lit-html": "^2.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/lit-element": {
|
||||||
|
"version": "3.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
|
||||||
|
"integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@lit-labs/ssr-dom-shim": "^1.1.0",
|
||||||
|
"@lit/reactive-element": "^1.3.0",
|
||||||
|
"lit-html": "^2.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/lit-html": {
|
||||||
|
"version": "2.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
|
||||||
|
"integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/trusted-types": "^2.0.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@lit-labs/ssr-dom-shim": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
|
||||||
|
},
|
||||||
|
"@lit/reactive-element": {
|
||||||
|
"version": "1.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
|
||||||
|
"integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
|
||||||
|
"requires": {
|
||||||
|
"@lit-labs/ssr-dom-shim": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@tp/helpers": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/1.3.0/helpers-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-mOAVP45kkEYXwonaOd5jkFQLX1nbeKtl8YX8FpL2ytON0cOSsh6TUAbCEcMU5xqgyD6L1ZEZNvxCjhOKOKdGyA=="
|
||||||
|
},
|
||||||
|
"@types/trusted-types": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
|
||||||
|
"integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
|
||||||
|
},
|
||||||
|
"lit": {
|
||||||
|
"version": "2.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
|
||||||
|
"integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
|
||||||
|
"requires": {
|
||||||
|
"@lit/reactive-element": "^1.6.0",
|
||||||
|
"lit-element": "^3.3.0",
|
||||||
|
"lit-html": "^2.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lit-element": {
|
||||||
|
"version": "3.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
|
||||||
|
"integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
|
||||||
|
"requires": {
|
||||||
|
"@lit-labs/ssr-dom-shim": "^1.1.0",
|
||||||
|
"@lit/reactive-element": "^1.3.0",
|
||||||
|
"lit-html": "^2.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lit-html": {
|
||||||
|
"version": "2.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
|
||||||
|
"integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
|
||||||
|
"requires": {
|
||||||
|
"@types/trusted-types": "^2.0.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,18 +1,19 @@
|
|||||||
{
|
{
|
||||||
"name": "@tp/tp-element",
|
"name": "@tp/tp-dropzone",
|
||||||
"version": "0.0.1",
|
"version": "1.0.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "tp-element.js",
|
"main": "tp-dropzone.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://gitea.codeblob.work/tp-elements/tp-element.git"
|
"url": "https://gitea.codeblob.work/tp-dropzones/tp-dropzone.git"
|
||||||
},
|
},
|
||||||
"author": "trading_peter",
|
"author": "trading_peter",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tp/helpers": "^1.3.0",
|
||||||
"lit": "^2.2.0"
|
"lit": "^2.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
59
tp-dropzone.js
Normal file
59
tp-dropzone.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
/**
|
||||||
|
@license
|
||||||
|
Copyright (c) 2022 trading_peter
|
||||||
|
This program is available under Apache License Version 2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { dropzoneMixin } from './dropzone-mixin';
|
||||||
|
import { upload } from '@tp/helpers/upload-files.js';
|
||||||
|
import { LitElement, html, css } from 'lit';
|
||||||
|
|
||||||
|
class TpDropzone extends upload(dropzoneMixin(LitElement)) {
|
||||||
|
static get styles() {
|
||||||
|
return [
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: dashed 2px #000000;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([isdraggedon]) {
|
||||||
|
color: #ffffff;
|
||||||
|
border: dashed 2px #000000;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<slot></slot>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
url: { type: String },
|
||||||
|
isDraggedOn: { type: Boolean, reflect: true },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async upload(dt) {
|
||||||
|
let files = dt.files;
|
||||||
|
if (files.length > 0) {
|
||||||
|
const params = { url: this.url, data: null };
|
||||||
|
document.dispatchEvent(new CustomEvent('before-upload', { detail: params, bubbles: true, composed: true }));
|
||||||
|
this.uploadFiles(params.url, files, params.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_upload(dt) {
|
||||||
|
return this.upload(dt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('tp-dropzone', TpDropzone);
|
||||||
@ -1,35 +0,0 @@
|
|||||||
/**
|
|
||||||
@license
|
|
||||||
Copyright (c) 2022 trading_peter
|
|
||||||
This program is available under Apache License Version 2.0
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { LitElement, html, css } from 'lit';
|
|
||||||
|
|
||||||
class TpElement extends LitElement {
|
|
||||||
static get styles() {
|
|
||||||
return [
|
|
||||||
css`
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { } = this;
|
|
||||||
|
|
||||||
return html`
|
|
||||||
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return { };
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
window.customElements.define('tp-element', TpElement);
|
|
||||||
Loading…
Reference in New Issue
Block a user