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

added drag over affect

Browse source
This commit is contained in:
bill bittner 2017-10-11 13:33:56 -07:00
parent 4224bc265a
commit 29560163b7
3 changed files with 23 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
public/assets/css/general.css
View file

@ -405,13 +405,20 @@ table {
.dropzone {
border: 2px dashed lightgrey;
text-align: center;
background-color: white;
}
.dropzone:hover {
border: 2px dashed #1e90ff;
background-color: lightgrey;
cursor: pointer;
}
.dropzone--drag-over {
background-color: lightgrey;
border: 2px dashed #1e90ff;
}
#primary-dropzone-wrapper, #publish-form-wrapper {
height: 100%;
}

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

@ -38,3 +38,13 @@ function dragend_handler(event) {
event.dataTransfer.clearData();
}
}
function dragenter_handler(event) {
console.log('drag enter', event);
document.getElementById(event.target.id).setAttribute('class', 'dropzone dropzone--drag-over');
}
function dragexit_handler(event) {
console.log('drag exit', event);
document.getElementById(event.target.id).setAttribute('class', 'dropzone');
}

11
views/index.handlebars
View file

@ -1,14 +1,14 @@
<div class="row row--full-height">
<form>
<input class="input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
</form>
<div id="primary-dropzone-wrapper">
<div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
<div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
<div id="primary-dropzone-instructions">
<div class="row">
<p>Drag & drop image or video here</p>
<p>OR</p>
<form>
<label class="input-file-label">CHOOSE FILE</label>
<input class="input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
</form>
</div>
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
</div>
@ -28,10 +28,7 @@
<div class="row">
<p>Drag & drop image or video here</p>
<p>OR</p>
<form>
<label class="input-file-label">CHOOSE FILE</label>
</form>
</div>
</div>