| Current Path : /var/www/homesaver/www/bitrix/js/ui/uploader/tile-widget/src/mixins/ |
| Current File : /var/www/homesaver/www/bitrix/js/ui/uploader/tile-widget/src/mixins/drag-over-mixin.js |
import { Event } from 'main.core';
import { hasDataTransferOnlyFiles } from 'ui.uploader.core';
/**
* @memberof BX.UI.Uploader
*/
export const DragOverMixin = {
directives: {
drop: {
beforeMount(el, binding, vnode): void
{
if (binding.value === false)
{
return;
}
function addClass(): void
{
binding.instance.dragOver = true;
el.classList.add('--drag-over');
}
function removeClass(): void
{
binding.instance.dragOver = false;
el.classList.remove('--drag-over');
}
let lastEnterTarget = null;
Event.bind(el, 'dragenter', (event: DragEvent): void => {
hasDataTransferOnlyFiles(event.dataTransfer, false)
.then((success): void => {
if (success)
{
event.preventDefault();
event.stopPropagation();
lastEnterTarget = event.target;
addClass();
}
})
.catch(() => {
// no-op
})
;
});
Event.bind(el, 'dragleave', (event: DragEvent): void => {
event.preventDefault();
event.stopPropagation();
if (lastEnterTarget === event.target)
{
removeClass();
}
});
Event.bind(el, 'drop', (event: DragEvent): void => {
removeClass();
});
},
unmounted(el, binding, vnode)
{
if (binding.value === false)
{
return;
}
binding.instance.dragOver = false;
Event.unbindAll(el, 'dragenter');
Event.unbindAll(el, 'dragleave');
Event.unbindAll(el, 'drop');
},
},
},
data()
{
return {
dragOver: false,
};
},
};