125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
"use strict";
|
|
|
|
/**
|
|
* contented_SupportsDrop returns whether drag-and-drop is supported by this
|
|
* browser.
|
|
*
|
|
* @return bool
|
|
*/
|
|
function contented_SupportsDrop() {
|
|
return ('ondrop' in window && 'FormData' in window && 'FileReader' in window);
|
|
}
|
|
|
|
/**
|
|
* contented_EnableDrop enables drag-and-drop upload on a DOM element.
|
|
* The class "is-dragover" will be toggled on the target element.
|
|
*
|
|
* @param DOMElement element Drop target
|
|
* @param string baseURL Base URL of the contented server
|
|
* @param Function onUploaded Called with a property object for every uploaded file
|
|
*/
|
|
function contented_EnableDrop(element, baseURL, onUploaded) {
|
|
|
|
// <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" />
|
|
|
|
// Create a new div for ourselves on top of the existing area
|
|
$.get(baseURL + "/about", function(ret) {
|
|
$("title").text( ret.AppTitle );
|
|
|
|
var extraText = "";
|
|
if (ret.MaxUploadBytes > 0) {
|
|
extraText = " (max " + Math.floor(ret.MaxUploadBytes / (1024*1024)) + " MiB)";
|
|
}
|
|
|
|
$.get(baseURL + "/widget.html", function(widgetHtml) {
|
|
|
|
var $f = $("<div>").html(widgetHtml);
|
|
$f.find(".contented-extratext").text(extraText);
|
|
|
|
$f.find(".contented-upload-type").click(function() {
|
|
$f.find(".contented-upload-type").removeClass("contented-upload-type-active");
|
|
$(this).addClass("contented-upload-type-active");
|
|
|
|
$f.find(".contented-upload-if").removeClass("contented-active");
|
|
$f.find(".contented-if-" + $(this).attr('data-upload-type')).addClass("contented-active");
|
|
});
|
|
|
|
var $element = $(element);
|
|
var offset = $element.offset();
|
|
|
|
$f.css({
|
|
'position': 'absolute',
|
|
'left': offset.left + "px",
|
|
'top': offset.top + "px",
|
|
'width': $element.width() + "px",
|
|
'min-width': $element.width() + "px",
|
|
'max-width': $element.width() + "px",
|
|
'height': $element.height() + "px",
|
|
'min-height': $element.height() + "px",
|
|
'max-height': $element.height() + "px"
|
|
});
|
|
|
|
$("body").append($f);
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
var onLoad = function() {
|
|
var form = document.getElementById("form");
|
|
var input = document.getElementById("form-upload");
|
|
var label = document.getElementById("form-label");
|
|
|
|
var makeCaptionText = function( files ) {
|
|
return files.length > 1 ? ( input.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', files.length ) : files[ 0 ].name;
|
|
};
|
|
|
|
var refreshCaption = function() {
|
|
onStateChange( makeCaptionText( input.files ) );
|
|
};
|
|
input.addEventListener('change', refreshCaption);
|
|
|
|
//
|
|
document.getElementById("classic-uploader").addEventListener("click", function() {
|
|
form.classList.remove("supports-drag");
|
|
});
|
|
|
|
if (contented_SupportsDrop()) {
|
|
|
|
// Handle CSS
|
|
|
|
form.classList.add('supports-drag');
|
|
|
|
var handleDragState = function(event_name, classEnabled) {
|
|
form.addEventListener(event_name, function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (classEnabled) {
|
|
form.classList.add( 'is-dragover' );
|
|
} else {
|
|
form.classList.remove( 'is-dragover' );
|
|
}
|
|
});
|
|
}
|
|
|
|
handleDragState('dragover', true);
|
|
handleDragState('dragenter', true);
|
|
handleDragState('dragleave', false);
|
|
handleDragState('dragend', false);
|
|
handleDragState('drop', false);
|
|
|
|
// Handle uploads
|
|
|
|
form.addEventListener('drop', function(e) {
|
|
input.files = e.dataTransfer.files; // the files that were dropped
|
|
refreshCaption();
|
|
form.submit();
|
|
});
|
|
}
|
|
|
|
};
|