contented/static/sdk.js

;
var contented = (function ($, currentScriptPath) {
    "use strict";

    var baseURL = currentScriptPath.replace('sdk.js', '');

    var formatBytes = function(bytes) {
        if (bytes < 1024) {
            return bytes + " B";
        } else if (bytes < (1024*1024)) {
            return (bytes / 1024).toFixed(1) + " KiB";
        } else if (bytes < (1024*1024*1024)) {
            return (bytes / (1024*1024)).toFixed(1) + " MiB";
        } else {
            return (bytes / (1024*1024*1024)).toFixed(1) + " GiB";
        }
    };

    /**
     * supportsDrop returns whether drag-and-drop is supported by this browser.
     *
     * @return bool
     */
    var supportsDrop = function () {
        return ('ondrop' in window && 'FormData' in window && 'FileReader' in window);
    }

    /**
     * initArea shows the contented upload widget over the top of a target DOM element.
     *
     * @param any        element       Drop target (string selector / DOMElement / jQuery)
     * @param Function   onUploaded    Called with an array of upload IDs
     * @param Function   onClose       Called when the widget is being destroyed
     */
    var initArea = function (elementSelector, onUploaded, onClose) {
        onUploaded = onUploaded || function () { };
        onClose = onClose || function () { };

        if ($(elementSelector).length != 1) {
            return; // should only find one element
        }
        var element = $(elementSelector)[0];

        // <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) {
            
            var extraText = "";
            if (ret.MaxUploadBytes > 0) {
                extraText = " (max " + formatBytes(ret.MaxUploadBytes) + ")";
            }

            $.get(baseURL + "widget.html", function (widgetHtml) {

                var $f = $("<div>").html(widgetHtml);
                $f.find(".contented-extratext").text(extraText);

                var ourClose = function () {
                    $f.remove(); // remove from dom
                    onClose(); // upstream close
                };
                $f.find(".contented-close").click(function () {
                    ourClose();
                })

                var setType = function (type) {
                    $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");
                };

                $f.find(".contented-upload-type").click(function () {
                    setType($(this).attr('data-upload-type'));
                });

                if (!supportsDrop()) {
                    // switch default
                    setType('file');
                }

                //

                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"
                });

                $f.find('.contented').on('dragover dragenter', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).addClass('is-dragging');
                });

                $f.find('.contented').on('dragleave dragend', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).removeClass('is-dragging');
                });

                $f.find('.contented').on('drop', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    handleUploadFrom(e.originalEvent.dataTransfer.files);
                });

                $f.find('.contented-file-upload').on('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    handleUploadFrom($(".contented-file-selector")[0].files);
                });

                $f.find('.contented-paste-upload').on('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    var blob = new Blob([$(".contented-if-paste textarea").val()], {type : 'text/plain'});
                    handleUploadFrom([blob]);
                });

                $("body").append($f);

                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) + "%");
                };

                var handleUploadFrom = function (files) {

                    setProgressCaption("Uploading, please wait...");
                    setProgressPercentage(0);
                    setType("progress");

                    $f.find(".contented-upload-type-selector").hide();
                    $f.find(".contented").removeClass('is-dragging');

                    // Ajax uploader
                    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,
                        xhr: function() {
                            var xhr = $.ajaxSettings.xhr();
                            xhr.upload.addEventListener(
                                'progress',
                                function(ev) {
                                    console.log([ev.lengthComputable, ev.loaded, ev.total]);
                                    if (ev.lengthComputable) {
                                        setProgressCaption("Uploading (" + formatBytes(ev.loaded) + " / " + formatBytes(ev.total) + ")...");
                                        setProgressPercentage(ev.total == 0 ? 0 : ev.loaded / ev.total);
                                    }
                                },
                                false
                            );
                            return xhr;
                        },
                        complete: function () {
                            setProgressCaption("Upload complete.");
                            setProgressPercentage(1);
                        },
                        success: function (data) {
                            onUploaded(data);
                            ourClose();
                        },
                        error: function () {
                            setProgressCaption("Upload failed.");
                        }
                    });

                }

            });

        });

    }

    //
    return {
        'supportsDrop': supportsDrop,
        'init': initArea
    };

})(
    jQuery,
    (function () {
        "use strict";

        // Determine current script path
        // @ref https://stackoverflow.com/a/26023176
        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, '');
    })()
);