diff --git a/README.md b/README.md index 1ab27b7..9ce961f 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# tp-element +# tp-dropzone diff --git a/dropzone-mixin.js b/dropzone-mixin.js new file mode 100644 index 0000000..bee1cce --- /dev/null +++ b/dropzone-mixin.js @@ -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(); + } + }; +}; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..6522cff --- /dev/null +++ b/package-lock.json @@ -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" + } + } + } +} diff --git a/package.json b/package.json index c39fdff..f14e48a 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,19 @@ { - "name": "@tp/tp-element", - "version": "0.0.1", + "name": "@tp/tp-dropzone", + "version": "1.0.0", "description": "", - "main": "tp-element.js", + "main": "tp-dropzone.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "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", "license": "Apache-2.0", "dependencies": { + "@tp/helpers": "^1.3.0", "lit": "^2.2.0" } } diff --git a/tp-dropzone.js b/tp-dropzone.js new file mode 100644 index 0000000..5368712 --- /dev/null +++ b/tp-dropzone.js @@ -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` + + `; + } + + 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); diff --git a/tp-element.js b/tp-element.js deleted file mode 100644 index 6a92a2f..0000000 --- a/tp-element.js +++ /dev/null @@ -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);