wmdeit_kaform/addons/upload/kube.upload.js

520 lines
14 KiB
JavaScript
Raw Normal View History

2020-02-20 13:45:47 +00:00
(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);