gistfile1.js

function extend(destination, source) {
    for (var k in source) {
        if (source.hasOwnProperty(k)) {
            destination[k] = source[k];
        }
    }
    return destination;
}

function getFileServicesHost() {
    var currentHost = document.location.hostname;
    var port = document.location.port;
    var hostArray = currentHost.split('.');
    if (hostArray.length >= 2) {
        currentHost = 'files.' + hostArray[hostArray.length - 2] + '.' + hostArray[hostArray.length - 1];
    }
    return '//' + currentHost + (port !== 80 && port !== 443 ? ':' + port : '');
}

function guidIsEmpty(guid) {
    return (guid == '00000000-0000-0000-0000-000000000000');
}

var plUploader = function (options, control, fileUploadedCallback) {
    var fileList = control.find('.fsFileList').first();
    var uploader = new plupload.Uploader({
        runtimes: 'html5,flash,silverlight,html4',
        browse_button: control.find('.fsUploadButton')[0],
        container: control.find('.fsPluploadWrapper')[0],
        max_file_size: options.maxFileSize,
        multi_selection: false,
        unique_names: true,
        url: getFileServicesHost() + '/upload/' + (options.fileKey && !(guidIsEmpty(options.fileKey)) ? options.fileKey : options.fileIdentifier),
        flash_swf_url: getFileServicesHost() + '/Includes/Javascript/Moxie.swf',
        silverlight_xap_url: getFileServicesHost() + '/Includes/Javascript/Moxie.xap',
        filters: options.filters
    });
    uploader.init();
    uploader.bind('FilesAdded', function (up, files) {
        fileList.html('');
        fileList.show();
        $.each(files, function (x, file) {
            fileList.html('<div id=\'' + file.id + '\'>' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>');
        });
        uploader.start();
        up.refresh();
    });
    uploader.bind('UploadProgress', function (up, file) {
        $('#' + file.id + " b").html(file.percent + '%');
    });
    uploader.bind('Error', function (up) {
        fileList.html('<div>An error has occurred</div>');
        up.refresh();
    });
    uploader.bind('FileUploaded', function (up, file) {
        $('#' + file.id + " b").html('Saving');
        $.getJSON(getFileServicesHost() + '/metadata/' + (options.fileKey && !(guidIsEmpty(options.fileKey)) ? options.fileKey : options.fileIdentifier))
            .done(fileUploadedCallback);
        up.refresh();
    });
};

var imageControlBaseObject = {

    fileEditorModal: $('.RegMaxFileServicesImageEditor').first(),
    fileEditorModalBody: $('.RegMaxFileServicesImageEditor').find('.fsImageEditorOuterWrapper').first(),
    fileEditorWrapper: $('.RegMaxFileServicesImageEditor').find('.fsFileImageEditorWrapper').first(),
    fileEditor: $('.RegMaxFileServicesImageEditor').find('.fsFileImageEditor').first(),
    rotateLeft: $('.RegMaxFileServicesImageEditor').find('.fsRotateImageLeft').first(),
    rotateRight: $('.RegMaxFileServicesImageEditor').find('.fsRotateImageRight').first(),
    options: {},
    aspectRatio: "",
    isCropped: false,
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0,
    setModalShowEvent: function (control) {
        control.find('.fsImageEditorHref')
            .on('click', function () {
                this.fileEditorWrapper.hide();
                this.fileEditorModal.on('shown.bs.modal', this.setImageLoadEvent);
                this.fileEditorModal.on('hidden.bs.modal', this.modalCloseAndCleanup);
            });
    },
    setImageParameters: function (result) {
        this.aspectRatio = this.aspectRatio ? this.aspectRatio : result.aspectRatio;
        this.isCropped = this.isCropped ? this.isCropped : (result.isCropped ? result.isCropped : false);
        this.x1 = result.cropX;
        this.y1 = result.cropY;
        this.x2 = result.cropX + result.cropWidth;
        this.y2 = result.cropY + result.cropHeight;
    },
    loadImageCropper: function () {
        this.fileEditorWrapper
            .show()
            .promise()
            .done(function () {
                var imgAreaSelectConfig = {
                    aspectRatio: '' + this.options.aspectRatio + '',
                    handles: true,
                    minWidth: this.options.minWidth,
                    minHeight: this.options.minHeight,
                    parent: '.fsFileEditorDialog'
                };
                if (isCropped) { // Image has already been cropped, so we need to set the selection area
                    imgAreaSelectConfig.x1 = this.x1;
                    imgAreaSelectConfig.y1 = this.y1;
                    imgAreaSelectConfig.x2 = this.x2;
                    imgAreaSelectConfig.y2 = this.y2;
                }
                this.fileEditor.imgAreaSelect(imgAreaSelectConfig);
                this.setSaveCropSelectionEvent();
            });
    },
    modalCloseAndCleanup: function () {
        this.fileEditorModal.modal('hide');
        this.fileEditor.imgAreaSelect({ remove: true });
        $('#fileEditorModalSaveButton').off('click');
        this.fileEditorModal.off('shown.bs.modal');
        this.fileEditorModal.off('hidden.bs.modal');
        this.rotateLeft.off('click');
        this.rotateRight.off('click');
    },
    setImageSource: function () {
        var filePreviewUrl = getFileServicesHost() + '/fetch/' + this.options.fileKey + '/preview?nocache=' + (new Date().getTime());
        var image = $('<img />');
        this.fileEditorWrapper.html(image);
        image.on('load', this.loadImageCropper);
        image.attr('class', 'fsImageEditor');
        image.attr('src', filePreviewUrl);
    },
    resetImages: function (result) {
        this.fileEditor.imgAreaSelect({ remove: true });
        this.setImageParameters(result);
        this.setImageSource();
        setThumbnailImageSource();
    },
    setImageLoadEvent: function () {
        this.setImageSource();
        this.rotateLeft
            .on('click', function () {
                $.get(getFileServicesHost() + '/rotate/' + this.options.fileKey + '/degrees270')
                    .done(function (result) {
                        this.resetImages(result);
                    });
                return false;
            });
        this.rotateRight
            .on('click', function () {
                $.get(getFileServicesHost() + '/rotate/' + this.options.fileKey + '/degrees90')
                    .done(function (result) {
                        this.resetImages(result);
                    });
                return false;
            });
    },
    setSaveCropSelectionEvent: function () {
        $('#fileEditorModalSaveButton')
            .on('click', function () {
                var imageCropper = this.fileEditor.imgAreaSelect({
                    instance: true
                });
                var croppedImageSelection = imageCropper.getSelection();
                $.get(getFileServicesHost() + '/crop/' + this.options.fileKey + '/?x=' + croppedImageSelection.x1 + '&y=' + croppedImageSelection.y1 + '&width=' + croppedImageSelection.width + '&height=' + croppedImageSelection.height)
                    .done(function () {
                        this.isCropped = true;
                        this.setImageParameters(croppedImageSelection);
                        this.modalCloseAndCleanup();
                        setThumbnailImageSource();
                    });
            });
    }
};

var RegMaxUploadControlBase = {
    fileUploadedCallback: function (result) {
        if (typeof setImageParameters == 'function') {
            setImageParameters(result);
        }
        setThumbnailImageSource();
        setClearFileEvent();
        $('#' + file.id + " b").html('Saved');
        fullDownloadLink.show();
        control.data('fileKey', result.key);
        clearButton.prop('disabled', false);
        fileList.hide();
    },
    setThumbnailImageSource: function (pageLoad) {
        var fileAvailable = true;
        var errorStatus = '';
        var imgSrc = '';
        var thumbnailUrl = '';
        $.get(getFileServicesHost() + '/status/' + fileKey + '/available')
            .fail(function (xhr) {
                fileAvailable = false;
                errorStatus = xhr.status;
            })
            .always(function () {
                if (fileAvailable) {
                    switch (options.uploadType) {
                        case 'image':
                            thumbnailUrl = getFileServicesHost() + '/fetch/' + fileKey + '/croppedthumbnail?nocache' + (new Date().getTime());
                            if (pageLoad) {
                                imgSrc = '<img src=\'' + getFileServicesHost() + '/Includes/Images/tiny.gif\' data-src=\'' + thumbnailUrl + '\' class=\'fsThumbnailImage\' alt=\'Preview Image\' />';
                            } else {
                                imgSrc = '<img src=\'' + thumbnailUrl + '\' class=\'fsThumbnailImage\' alt=\'Preview Image\' />';
                            }
                            if (!$.browser.mobile) {
                                imgSrc = '<a href=\'.RegMaxFileServicesImageEditor\' data-toggle=\'modal\' class=\'fsImageEditorHref\'>' + imgSrc + '</a>';
                            }
                            break;

                        case 'pdf':
                            thumbnailUrl = getFileServicesHost() + '/Includes/pdf.gif';
                            imgSrc = '<a href=\'' + getFileServicesHost() + '/fetch/' + fileKey + '\' class=\'fsImageEditorHref\'><img src=\'' + thumbnailUrl + '\' alt=\'PDF Download\' /></a>';
                            break;

                        case 'zip':
                            thumbnailUrl = getFileServicesHost() + '/Includes/zip.gif';
                            imgSrc = '<a href=\'' + getFileServicesHost() + '/fetch/' + fileKey + '\' class=\'fsImageEditorHref\'><img src=\'' + thumbnailUrl + '\' alt=\'Zip Download\' /></a>';
                            break;
                    }
                } else {
                    if (errorStatus == '401') {
                        imgSrc = '<i class=\'fa fa-lock fa-5x\'></i>';
                    } else if (errorStatus == '404') {
                        imgSrc = '<i class=\'fa fa-question-circle fa-5x\'></i>';
                    } else {
                        imgSrc = '<i class=\'fa fa-exclamation-triangle fa-5x\'></i>';
                    }
                }
                fileElement
                    .css('opacity', '0')
                    .html(imgSrc)
                    .promise()
                    .done(function () {
                        if (pageLoad) {
                            control.find('.fsThumbnailImage')
                                .jail({
                                    effect: 'fadeIn'
                                });
                        }
                        $(this)
                            .animate(
                            { opacity: 1 },
                            { queue: false, duration: 250 }
                        );
                    });
            });
    },
    setClearFileEvent: function () {
        clearButton.on('click', function () {
            if (confirm('Are you sure you want to delete this file?')) {
                $.post(getFileServicesHost() + '/status/' + fileKey + '/delete')
                    .done(function () {
                        clearButton.prop('disabled', true);
                        fileElement.html('');
                        fileList.html('');
                        clearButton.off('click');
                        fullDownloadLink.hide();
                    });
            }
        });
    },
    init: function (control) {
        console.log('init');
        var uploader = new plUploader(options.uploader, control, fileUploadedCallback);
        setThumbnailImageSource(true);
        if (fileKey && !(guidIsEmpty(fileKey))) {
            setClearFileEvent();
        }
    }
};

(function ($) {

    $.fn.RegMaxFileServicesImageControl = function () {
        if (!this.hasClass('RegMaxFileServicesUploadControl')) {
            console.log('jumping ship...');
            return this;
        }
        var control = this;
        var fileIdentifier = this.data('fileidentifier');
        var fileKey = this.data('filekey');
        var fileElement = this.find('.fsFile').first();
        var fileList = this.find('.fsFileList').first();
        var clearButton = this.find('.fsClearButton').first();
        var fullDownloadLink = this.find('.fsFullFileDownload').first();
        var options = {
            "aspectRatio": "1:1",
            "minWidth": 100,
            "minHeight": 100,
            "uploadType": "image",
            "uploader": {
                "fileIdentifier": fileIdentifier,
                "fileKey": fileKey,
                "filters": [
                    {
                        "title": "Image files",
                        "extensions": "gif,jpg,jpeg,png,tiff"
                    }
                ],
                "maxFileSize": "10mb"
            }
        };
        extend(this[0], RegMaxUploadControlBase);
        extend(this[0], imageControlBaseObject);
        console.log(this);
        this.init(this);
        return this;
    };
    $.fn.RegMaxFileServicesPdfControl = function () {
        var fileIdentifier = this.data('fileidentifier');
        var fileKey = this.data('filekey');
        var options = {
            uploader: {
                "fileIdentifier": fileIdentifier,
                "fileKey": fileKey,
                "filters": [
                    {
                        "title": "PDF files",
                        "extensions": "pdf"
                    }
                ],
                "maxFileSize": "10mb",
                "uploadType": "pdf"
            }
        };
        return this.RegMaxUploadControl(options);
    };
    $.fn.RegMaxFileServicesZipControl = function () {
        var fileIdentifier = this.data('fileidentifier');
        var fileKey = this.data('filekey');
        var options = {
            uploader: {
                "fileIdentifier": fileIdentifier,
                "fileKey": fileKey,
                "filters": [
                    {
                        "title": "Zip files",
                        "extensions": "zip"
                    }
                ],
                "maxFileSize": "100mb",
                "uploadType": "zip"
            }
        };
        return this.RegMaxUploadControl(options);
    };

})(jQuery);