112 lines
2.9 KiB
JavaScript
112 lines
2.9 KiB
JavaScript
/**
|
|
* File Upload wrapper.
|
|
*
|
|
* @author Htmlstream
|
|
* @version 1.0
|
|
*
|
|
*/
|
|
;(function ($) {
|
|
'use strict';
|
|
|
|
$.HSCore.components.HSFileUpload = {
|
|
/**
|
|
*
|
|
*
|
|
* @var Object _baseConfig
|
|
*/
|
|
_baseConfig: {},
|
|
|
|
/**
|
|
*
|
|
*
|
|
* @var jQuery pageCollection
|
|
*/
|
|
pageCollection: $(),
|
|
|
|
/**
|
|
* Initialization of File Upload wrapper.
|
|
*
|
|
* @param String selector (optional)
|
|
* @param Object config (optional)
|
|
*
|
|
* @return jQuery pageCollection - collection of initialized items.
|
|
*/
|
|
|
|
init: function (selector, config) {
|
|
|
|
this.collection = selector && $(selector).length ? $(selector) : $();
|
|
if (!$(selector).length) return;
|
|
|
|
this.config = config && $.isPlainObject(config) ?
|
|
$.extend({}, this._baseConfig, config) : this._baseConfig;
|
|
|
|
this.config.itemSelector = selector;
|
|
|
|
this.initFileUpload();
|
|
|
|
return this.pageCollection;
|
|
|
|
},
|
|
|
|
initFileUpload: function () {
|
|
//Variables
|
|
var $self = this,
|
|
collection = $self.pageCollection;
|
|
|
|
//Actions
|
|
this.collection.each(function (i, el) {
|
|
//Variables
|
|
var $this = $(el),
|
|
$helper = $('<input id="hsFile" type="file" name="hs-file" style="display: none;">').insertBefore($this),
|
|
$dataCollection = $('<input id="hsDataCollection" type="hidden" name="hs-data-collection">').insertBefore($this),
|
|
elementClasses = $this.data('element-classes'),
|
|
iconClasses = $this.data('icon-classes'),
|
|
textClasses = $this.data('text-classes'),
|
|
removeBtnClasses = $this.data('remove-btn-classes'),
|
|
dataArray = [];
|
|
|
|
$this.on('click', function () {
|
|
$($helper).trigger('click');
|
|
});
|
|
|
|
$helper.on('change', function () {
|
|
var thisVal = $(this).val(),
|
|
formatedVal = thisVal.replace(/.+[\\\/]/, ''),
|
|
template = $('<div id="hsFileItem' + i + '" class="js-file-item ' + elementClasses + '">' +
|
|
'<i class="' + iconClasses + '"></i>' +
|
|
'<span class="' + textClasses + '">' + formatedVal + '</span>' +
|
|
'<i class="js-remove-file ' + removeBtnClasses + '" data-value="' + thisVal + '"></i>' +
|
|
'</div>');
|
|
|
|
dataArray.push({
|
|
"file": thisVal
|
|
});
|
|
|
|
$dataCollection.val(JSON.stringify(dataArray));
|
|
|
|
template.insertAfter($(this));
|
|
});
|
|
|
|
$('body').on('click', '.js-remove-file', function () {
|
|
var val = $(this).data('value');
|
|
|
|
dataArray = dataArray.filter(function(el) {
|
|
return el.file !== val;
|
|
});
|
|
|
|
$(this).parent().remove();
|
|
|
|
$dataCollection.val(JSON.stringify(dataArray));
|
|
|
|
if(!dataArray.length) {
|
|
$helper.val('');
|
|
}
|
|
});
|
|
|
|
//Actions
|
|
collection = collection.add($this);
|
|
});
|
|
}
|
|
};
|
|
})(jQuery);
|