contented/static/sdk.js

195 lines
7.0 KiB
JavaScript
Raw Normal View History

2017-10-08 01:15:16 +00:00
;
var contented = (function ($, currentScriptPath) {
2017-10-08 00:45:55 +00:00
"use strict";
2017-10-08 01:10:47 +00:00
var baseURL = currentScriptPath.replace('sdk.js', '');
2017-10-08 01:49:00 +00:00
var formatBytes = function(bytes) {
// FIXME
return Math.floor(bytes / (1024 * 1024)) + " MiB";
};
2017-10-08 00:45:55 +00:00
/**
* contented_SupportsDrop returns whether drag-and-drop is supported by this
* browser.
*
* @return bool
*/
2017-10-08 01:15:16 +00:00
var contented_SupportsDrop = function () {
2017-10-08 00:45:55 +00:00
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.
*
2017-10-08 01:10:47 +00:00
* @param any element Drop target (string selector / DOMElement / jQuery)
2017-10-08 00:45:55 +00:00
* @param Function onUploaded Called with a property object for every uploaded file
* @param Function onClose Called when the widget should be destroyed
*/
2017-10-08 01:15:16 +00:00
var contented_EnableDrop = function (elementSelector, onUploaded, onClose) {
onUploaded = onUploaded || function () { };
onClose = onClose || function () { };
2017-10-08 00:45:55 +00:00
2017-10-08 01:10:47 +00:00
if ($(elementSelector).length != 1) {
return; // should only find one element
}
var element = $(elementSelector)[0];
2017-10-08 00:45:55 +00:00
// <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" />
// Create a new div for ourselves on top of the existing area
2017-10-08 01:15:16 +00:00
$.get(baseURL + "about", function (ret) {
$("title").text(ret.AppTitle);
2017-10-08 00:45:55 +00:00
var extraText = "";
if (ret.MaxUploadBytes > 0) {
2017-10-08 01:49:00 +00:00
extraText = " (max " + formatBytes(ret.MaxUploadBytes) + ")";
2017-10-08 00:45:55 +00:00
}
2017-10-08 01:15:16 +00:00
$.get(baseURL + "widget.html", function (widgetHtml) {
2017-10-08 00:45:55 +00:00
var $f = $("<div>").html(widgetHtml);
$f.find(".contented-extratext").text(extraText);
2017-10-08 01:15:16 +00:00
var ourClose = function () {
2017-10-08 00:45:55 +00:00
$f.remove(); // remove from dom
onClose(); // upstream close
};
2017-10-08 01:15:16 +00:00
$f.find(".contented-close").click(function () {
2017-10-08 00:45:55 +00:00
ourClose();
})
2017-10-08 01:15:16 +00:00
var setType = function (type) {
2017-10-08 00:45:55 +00:00
$f.find(".contented-upload-type").removeClass("contented-upload-type-active");
$f.find(".contented-upload-type[data-upload-type=" + type + "]").addClass("contented-upload-type-active");
$f.find(".contented-upload-if").removeClass("contented-active");
$f.find(".contented-if-" + type).addClass("contented-active");
};
2017-10-08 01:15:16 +00:00
$f.find(".contented-upload-type").click(function () {
setType($(this).attr('data-upload-type'));
2017-10-08 00:45:55 +00:00
});
if (!contented_SupportsDrop()) {
// switch default
setType('file');
}
//
var $element = $(element);
var offset = $element.offset();
2017-10-08 01:15:16 +00:00
2017-10-08 00:45:55 +00:00
$f.css({
'position': 'absolute',
2017-10-08 01:15:16 +00:00
'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"
2017-10-08 00:45:55 +00:00
});
2017-10-08 01:15:16 +00:00
$f.find('.contented').on('dragover dragenter', function (e) {
2017-10-08 00:45:55 +00:00
e.preventDefault();
e.stopPropagation();
$(this).addClass('is-dragging');
});
2017-10-08 01:15:16 +00:00
$f.find('.contented').on('dragleave dragend', function (e) {
2017-10-08 00:45:55 +00:00
e.preventDefault();
e.stopPropagation();
$(this).removeClass('is-dragging');
});
2017-10-08 01:49:00 +00:00
$f.find('.contented').on('drop', function (e) {
2017-10-08 01:15:16 +00:00
e.preventDefault();
e.stopPropagation();
2017-10-08 01:49:00 +00:00
handleUploadFrom(e.originalEvent.dataTransfer.files);
2017-10-08 01:15:16 +00:00
});
$("body").append($f);
2017-10-08 01:49:00 +00:00
var setProgressCaption = function(message) {
$f.find(".contented-if-progress label").text(message);
};
var setProgressPercentage = function(frc) {
$f.find(".contented-progress-element").css('width', (frc * 100) + "%");
};
2017-10-08 01:15:16 +00:00
var handleUploadFrom = function (files) {
2017-10-08 01:49:00 +00:00
setProgressCaption("Uploading, please wait...");
setProgressPercentage(0);
2017-10-08 00:45:55 +00:00
setType("progress");
// Ajax uploader
2017-10-08 01:49:00 +00:00
var ajaxData = new FormData();
for (var i = 0; i < files.length; ++i) {
ajaxData.append("f", files[i]);
}
// ajax request
$.ajax({
url: baseURL + "upload",
type: "POST",
data: ajaxData,
dataType: 'json', // response type
cache: false,
contentType: false,
processData: false,
beforeSend: function (xhr) {
xhr.on('progress', function (ev) {
if (ev.lengthComputable) {
setProgressCaption("Uploaded " + formatBytes(evt.loaded) + " of " + formatBytes(evt.total) + "...");
setProgressPercentage(evt.loaded / evt.total);
}
});
},
complete: function () {
setProgressCaption("Upload complete.");
setProgressPercentage(1);
},
success: function (data) {
onUploaded(data);
ourClose();
},
error: function () {
setProgressCaption("Upload failed.");
}
});
2017-10-08 00:45:55 +00:00
2017-10-08 01:15:16 +00:00
}
});
2017-10-08 00:45:55 +00:00
});
}
2017-10-08 01:10:57 +00:00
//
2017-10-08 00:45:55 +00:00
return {
'supportsDrop': contented_SupportsDrop,
2017-10-08 01:10:47 +00:00
'init': contented_EnableDrop
2017-10-08 00:45:55 +00:00
};
2017-10-08 01:10:47 +00:00
})(
jQuery,
2017-10-08 01:15:16 +00:00
(function () {
"use strict";
2017-10-08 01:10:47 +00:00
// Determine current script path
// @ref https://stackoverflow.com/a/26023176
2017-10-08 01:15:16 +00:00
var scripts = document.querySelectorAll('script[src]');
var currentScript = scripts[scripts.length - 1].src;
var currentScriptChunks = currentScript.split('/');
var currentScriptFile = currentScriptChunks[currentScriptChunks.length - 1];
return currentScript.replace(currentScriptFile, '');
2017-10-08 01:10:47 +00:00
})()
);