LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

fixed drag and drop on asset preview

Browse source
This commit is contained in:
bill bittner 2017-10-26 16:08:38 -07:00
parent 021e98c654
commit 00878cd665
2 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
public/assets/js/dropzoneFunctions.js
View file

@ -1,19 +1,8 @@
function showInstructions () {
document.getElementById('preview-dropzone-instructions').setAttribute('class', 'flex-container flex-container--column flex-container--justify-center position-absolute');
document.getElementById('asset-preview').style.opacity = 0.2;
}
function hideInstructions () {
document.getElementById('preview-dropzone-instructions').setAttribute('class', 'hidden');
document.getElementById('asset-preview').style.opacity = 1;
}
function triggerFileChooser(fileInputId, event) {
document.getElementById(fileInputId).click();
}
function drop_handler(event) {
dragexit_handler(event)
event.preventDefault();
// if dropped items aren't files, reject them
var dt = event.dataTransfer;
@ -26,10 +15,12 @@ function drop_handler(event) {
}
function dragover_handler(event) {
console.log('dragover');
event.preventDefault();
}
function dragend_handler(event) {
console.log('dragend');
var dt = event.dataTransfer;
if (dt.items) {
for (var i = 0; i < dt.items.length; i++) {
@ -53,4 +44,15 @@ function dragexit_handler(event) {
thisDropzone.setAttribute('class', 'dropzone row row--tall row--margined row--padded flex-container flex-container--column flex-container--justify-center');
thisDropzone.firstElementChild.setAttribute('class', '');
thisDropzone.lastElementChild.setAttribute('class', 'hidden');
}
}
function preview_onmouseenter_handler () {
document.getElementById('asset-preview-dropzone-instructions').setAttribute('class', 'flex-container flex-container--column flex-container--justify-center position-absolute');
document.getElementById('asset-preview').style.opacity = 0.2;
}
function preview_onmouseleave_handler () {
document.getElementById('asset-preview-dropzone-instructions').setAttribute('class', 'hidden');
document.getElementById('asset-preview').style.opacity = 1;
}

6
views/index.handlebars
View file

@ -22,13 +22,13 @@
<div class="column column--5 column--sml-10" >
<!-- preview -->
<div class="row row--padded">
<div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onmouseenter="showInstructions()" onmouseleave="hideInstructions()" onclick="triggerFileChooser('siofu_input', event)">
<div id="asset-preview-target"></div>
<div id="preview-dropzone-instructions" class="hidden">
<div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="preview_onmouseenter_handler()" ondragleave="preview_onmouseleave_handler()" onmouseenter="preview_onmouseenter_handler()" onmouseleave="preview_onmouseleave_handler()" onclick="triggerFileChooser('siofu_input', event)">
<div id="asset-preview-dropzone-instructions" class="hidden">
<p>Drag & drop image or video here</p>
<p class="fine-print">OR</p>
<p class="blue-underlined-pointer">CHOOSE FILE</p>
</div>
<div id="asset-preview-target"></div>
</div>
</div>
</div><div class="column column--5 column--sml-10 align-content-top">