@blinkk/selective-edit
Version:
Selective structured text editor.
110 lines • 3.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DroppableUi = exports.DroppableMixin = void 0;
const index_1 = require("./index");
const listeners_1 = require("../utility/listeners");
const uuid_1 = require("./uuid");
const dom_1 = require("../utility/dom");
function DroppableMixin(Base) {
return class DroppableClass extends Base {
get droppableUi() {
if (!this._droppableUi) {
this._droppableUi = new DroppableUi();
}
return this._droppableUi;
}
set droppableUi(value) {
this._droppableUi = value;
}
};
}
exports.DroppableMixin = DroppableMixin;
class DroppableUi extends (0, uuid_1.UuidMixin)(index_1.Base) {
constructor() {
super();
this.listeners = new listeners_1.Listeners();
this.validTypes = [];
}
findDropTarget(evt) {
const target = (0, dom_1.findParentByClassname)(evt.target, 'selective__droppable__target');
if (!target) {
return null;
}
// Only allow dragging when the data transfer contains files.
if (evt.dataTransfer?.types.includes('Files')) {
evt.preventDefault();
evt.stopPropagation();
return target;
}
return null;
}
handleDragEnter(evt) {
const target = this.findDropTarget(evt);
if (!target) {
return;
}
// Show that the element is hovering.
target.classList.add('selective__droppable--hover');
}
handleDragLeave(evt) {
const target = this.findDropTarget(evt);
if (!target) {
return;
}
// Make sure that the event target comes from the main element.
if (target !== evt.target) {
return;
}
// No longer hovering.
target.classList.remove('selective__droppable--hover');
}
handleDragOver(evt) {
// Find the target and prevent the defaults if needed.
this.findDropTarget(evt);
}
handleDrop(evt) {
const target = this.findDropTarget(evt);
if (!target) {
return;
}
// No longer hovering.
target.classList.remove('selective__droppable--hover');
const files = [];
if (evt.dataTransfer?.items) {
// Use DataTransferItemList interface to access the files.
for (const item of evt.dataTransfer.items) {
if (item.kind !== 'file') {
// Skip non-file items.
continue;
}
const file = item.getAsFile();
if (file && this.isFileValid(file)) {
files.push(file);
}
}
}
else {
// Use DataTransfer interface to access the files.
for (const file of evt.dataTransfer?.files || []) {
if (this.isFileValid(file)) {
files.push(file);
}
}
}
if (!files.length) {
// No valid files. No need to trigger the files.
return;
}
// Trigger with dropped files.
this.listeners.trigger('files', files);
}
isFileValid(file) {
// Check the file against a list of valid file types.
if (this.validTypes.length && !this.validTypes.includes(file.type)) {
return false;
}
return true;
}
}
exports.DroppableUi = DroppableUi;
//# sourceMappingURL=droppable.js.map