contented/static/sdk.js

;"use strict";

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

    /**
     * contented_SupportsDrop returns whether drag-and-drop is supported by this
     * browser.
     *
     * @return bool
     */
    var contented_SupportsDrop = function() {
        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
     * @param Function   onClose       Called when the widget should be destroyed
     */
    var contented_EnableDrop = function(element, baseURL, onUploaded, onClose) {
        onUploaded = onUploaded || function(){};
        onClose = onClose || function(){};

        // <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);

                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 (!contented_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('drag', function(e) {
                    input.files = event.originalEvent.dataTransfer.files;
                    refreshCaption();
                    setType("progress");

                    // Ajax uploader
                    // TODO
                    form.submit();
                });

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

        // Handle uploads
        
        form.addEventListener('drop', function(e) {
            
        });
            
    };
    */

    return {
        'supportsDrop': contented_SupportsDrop,
        'enableDrop': contented_EnableDrop
    };

})(jQuery);