wmdeit_kaform/addons/upload/kube.upload.js

(function($K)
{
    $K.add('module', 'upload', {
        init: function(app, context)
        {
            this.app = app;
            this.utils = app.utils;
            this.animate = app.animate;
            this.response = app.response;
            this.progress = app.progress;

            // defaults
            var defaults = {
                size: 120, // pixels
                url: false,
                urlRemove: false,
                param: false,
                type: false, // image, file
                multiple: false,
                placeholder: 'Drop files here or click to upload',
                progress: false,
                target: false,
                append: false
            };

            // context
            this.context = context;
            this.params = context.getParams(defaults);
            this.$element = context.getElement();
            this.$target = context.getTarget();

            // local
            this.statusMap = ['hover', 'error', 'success', 'drop'];

        },
        // public
        start: function()
        {
            this._buildBox();
            this._buildInput();
            this._buildCount();
            this._buildType();
            this._buildPlaceholder();
            this._buildSize();
            this._buildMultiple();
            this._buildItems();
            this._buildEvents();

    	},
    	stop: function()
    	{
        	this.$box.remove();
            this.$element.off('.kube.upload');
    	},

    	// private
    	_buildBox: function()
    	{
            if (this.params.type === 'image')
            {
                this.$box = this.$element.find('.upload-item');
            }
            else
            {
                this.$box = this.$element;
            }
    	},
    	_buildInput: function()
    	{
        	this.$input = $K.dom('<input>');
        	this.$input.attr('type', 'file');
        	this.$input.attr('name', this._getParamName());
        	this.$input.hide();

        	this.$element.before(this.$input);
    	},
    	_buildCount: function()
    	{
        	this.$inputCount = $K.dom('<input>');
        	this.$inputCount.attr('type', 'hidden');
        	this.$inputCount.attr('name', this._getParamName() + '-count');
        	this.$inputCount.val(0);

        	this.$element.before(this.$inputCount);
    	},
    	_buildType: function()
    	{
        	this.isBox = this.$element.hasClass('upload');
    	},
    	_buildPlaceholder: function()
    	{
        	if (this.isBox)
        	{
            	var $placeholder = $K.dom('<span>');
            	$placeholder.addClass('upload-placeholder');
            	$placeholder.html(this.params.placeholder);

            	this.$element.append($placeholder);
        	}
    	},
    	_buildSize: function()
    	{
        	if (this.isBox)
        	{
            	this.$box.css({
                	height: this.params.size + 'px'
                });
            }
            else if (this.params.type === 'image')
            {
                this.$box.css({
                    width: this.params.size + 'px',
                    height: this.params.size + 'px'
                });
            }
    	},
    	_buildMultiple: function()
    	{
            this.isMultiple = this.params.multiple;
            if (this.isMultiple)
            {
                this.$input.attr('multiple', 'true');
            }
    	},
        _buildItems: function()
        {
            if (!this.params.type) return;

            var isFile = (this.params.type === 'file');
            var $target = (isFile) ? this.$target : this.$element;
            var fn = (isFile) ? '_removeFile' : '_removeImage';

            var $closes = $target.find('.close');
            $closes.on('click', this[fn].bind(this));

            if (!isFile)
            {
                $closes.closest('.upload-item').addClass('is-uploaded');
            }

            this.$inputCount.val($closes.length);
        },
        _buildEvents: function()
        {
            this.$input.on('change.redactor.upload', this._change.bind(this));
            this.$box.on('click.redactor.upload', this._click.bind(this));
            this.$box.on('drop.redactor.upload', this._drop.bind(this));
            this.$box.on('dragover.redactor.upload', this._dragover.bind(this));
            this.$box.on('dragleave.redactor.upload', this._dragleave.bind(this));
        },


        // Events
        _click: function(e)
        {
            e.preventDefault();

            var $el = $K.dom(e.target);
            if ($el.hasClass('close')) return;

            this.$input.click();
        },
        _change: function(e)
        {
            this.app.broadcast('upload.start', this);
            this._send(e, this.$input.get().files);
        },
        _drop: function(e)
        {
            e.preventDefault();

            this._clearStatuses();
            this._setStatus('drop');

            this.app.broadcast('upload.start', this);
            this._send(e);
        },
        _dragover: function(e)
        {
            e.preventDefault();
            this._setStatus('hover');

            return false;
        },
        _dragleave: function(e)
        {
            e.preventDefault();
            this._removeStatus('hover');

            return false;
        },

        // Count
        _upCount: function()
        {
            var val = this.$inputCount.val();
            val++;

            this.$inputCount.val(val);
        },
        _downCount: function()
        {
            var val = this.$inputCount.val();
            val--;
            val = (val < 0) ? 0 : val;

            this.$inputCount.val(val);
        },
        _clearCount: function()
        {
            this.$inputCount.val(0);
        },

        // Name
        _getParamName: function()
        {
            return (this.params.param) ? this.params.param : 'file';
        },
        _getHiddenName: function()
        {
            var name = this._getParamName();
            return (this.isMultiple) ? name + '-uploaded[]' : name + '-uploaded';
        },

        // Status
        _clearStatuses: function()
        {
            this.$box.removeClass('is-upload-' + this.statusMap.join(' is-upload-'));
        },
        _setStatus: function(status)
        {
            this.$box.addClass('is-upload-' + status);
        },
        _removeStatus: function(status)
        {
            this.$box.removeClass('is-upload-' + status);
        },


        // Target
        _clearTarget: function()
        {
            var $items = this.$target.find('.upload-item');
            $items.each(function(node)
            {
                var $node = $K.dom(node);
                this._removeFileRequest($node.attr('data-id'));
            }.bind(this));

            this._clearCount();
            this.$target.html('');
        },
        _clearBox: function()
        {
            var $items = this.$target.find('.upload-item');
            $items.each(function(node)
            {
                var $node = $K.dom(node);
                this._removeFileRequest($node.attr('data-id'));
            }.bind(this));

            this._clearCount();
            this.$target.html('');
        },


        // Remove
        _removeFile: function(e)
        {
        	e.preventDefault();

        	var $el = $K.dom(e.target);
        	var $item = $el.closest('.upload-item');
        	var id = $item.attr('data-id');

            this.animate.run($item, 'fadeOut', function()
        	{
            	$item.remove();
            	this._downCount();
                this._removeFileRequest(id);

                // clear target
                if (this.$target.find('.upload-item').length === 0)
                {
                    this.$target.html('');
                }

        	}.bind(this))
        },
        _removeImage: function(e)
        {
        	e.preventDefault();

        	var $el = $K.dom(e.target);
        	var $item = $el.closest('.upload-item');
        	var id = $item.attr('data-id');


        	if (this.isMultiple)
        	{
                this.animate.run($item, 'fadeOut', function()
            	{
                	$item.remove();
                	this._downCount();
                    this._removeFileRequest(id);

            	}.bind(this))
        	}
        	else
        	{
            	var $img = $item.find('img');

            	$el.hide();
                this.animate.run($img, 'fadeOut', function()
            	{
                	this.$box.html('');
                	this.$box.removeClass('is-uploaded');
                	this._clearCount();
                    this._removeFileRequest(id);

            	}.bind(this))
        	}
        },
        _removeFileRequest: function(id)
        {
            if (this.params.urlRemove)
        	{
                $K.ajax.post({
                    url: this.params.urlRemove,
                    data: { id: id }
                });
            }
        },


        // Send
        _send: function(e, files)
        {
            e = e.originalEvent || e;

            files = (files) ? files : e.dataTransfer.files;

            var data = new FormData();
            var name = this._getParamName();

            data = this._buildData(name, files, data);

            if (this.params.append)
            {
			    data = this.utils.extendData(data, this.params.append);
            }

            this._sendData(data, files, e);
        },
        _sendData: function(data, files, e)
        {
            if (this.params.progress) this.progress.show();

            $K.ajax.post({
                url: this.params.url,
                data: data,
                before: function(xhr)
                {
                    return this.app.broadcast('upload.beforeSend', this, xhr);

                }.bind(this),
                success: function(response)
                {
                    this._complete(response, e);
                }.bind(this)
            });
        },
        _buildData: function(name, files, data)
        {
            for (var i = 0; i < files.length; i++)
            {
                data.append(name + '[]', files[i]);
            }

            return data;
        },
        _complete: function (response, e)
        {
            this._clearStatuses();

            if (this.params.progress) this.progress.hide();

            // error
            var json = (Array.isArray(response)) ? response[0] : response;

            if (typeof json.type !== 'undefined' && json.type === 'error')
            {
                this._setStatus('error');
                this.response.parse(response);
                this.app.broadcast('upload.error', this, response);
            }
            // complete
            else
            {
                this._setStatus('success');

                switch (this.params.type)
                {
                    case 'image':
                        this._completeBoxImage(response);
                        break;
                    case 'file':
                        this._completeBoxFile(response);
                        break;
                    default:
                        this._completeBoxUpload(response);
                }

                this.app.broadcast('upload.complete', this, response);
                setTimeout(this._clearStatuses.bind(this), 500);
            }
        },
        _completeBoxUpload: function(response)
        {
            this.response.parse(response);
        },
        _completeBoxImage: function(response)
        {
            for (var key in response)
            {
                // img
                var $img = $K.dom('<img>');
                $img.attr('src', response[key].url);

                // close
                var $close = $K.dom('<span>');
                $close.addClass('close');
                $close.on('click', this._removeImage.bind(this));

                // hidden
                var $hidden = $K.dom('<input>');
                $hidden.attr('type', 'hidden');
                $hidden.attr('name', this._getHiddenName());
                $hidden.val(response[key].id);

                // item
                var $item = $K.dom('<div>');
                $item.addClass('upload-item is-uploaded');
                $item.attr('data-id', response[key].id);

                if (this.isMultiple)
                {
                    // append
                    $item.append($close);
                    $item.append($img);
                    $item.append($hidden);

                    this.$box.last().before($item);
                }
                // single
                else
                {
                    var $lastImg = this.$box.find('img');
                    if ($lastImg.length !== 0)
                    {
                        this._removeFileRequest(this.$box.attr('data-id'));
                    }

                    this.$box.html('');
                    this.$box.attr('data-id', response[key].id);
                    this.$box.append($close);
                    this.$box.append($img);
                    this.$box.append($hidden);

                    return;
                }
            }
        },
        _completeBoxFile: function(response)
        {
            if (!this.isMultiple) this._clearTarget();

            for (var key in response)
            {
                // item
                var $item = $K.dom('<div>');
                $item.addClass('upload-item');
                $item.attr('data-id', response[key].id);

                // file
                var $file = $K.dom('<span>');
                $file.html(response[key].name);

                // close
                var $close = $K.dom('<span>');
                $close.addClass('close');
                $close.on('click', this._removeFile.bind(this));

                // hidden
                var $hidden = $K.dom('<input>');
                $hidden.attr('type', 'hidden');
                $hidden.attr('name', this._getHiddenName());
                $hidden.val(response[key].id);

                // size
                if (typeof response[key].size !== 'undefined')
                {
                    var $size = $K.dom('<em>');
                    $size.html(response[key].size);

                    $file.append($size);
                }

                // append
                $item.append($close);
                $item.append($file);
                $item.append($hidden);

                // target
                this.$target.append($item);
                this._upCount();
            }
        }
    });
})(Kube);