128 lines
3.9 KiB
JavaScript
128 lines
3.9 KiB
JavaScript
|
/*!
|
||
|
|
* JavaScript Custom Forms : File Module
|
||
|
|
*
|
||
|
|
* Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf
|
||
|
|
* Released under the MIT license (LICENSE.txt)
|
||
|
|
*
|
||
|
|
* Version: 1.2.1
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function(jcf) {
|
||
|
|
|
||
|
|
jcf.addModule(function($) {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
return {
|
||
|
|
name: 'File',
|
||
|
|
selector: 'input[type="file"]',
|
||
|
|
options: {
|
||
|
|
fakeStructure: '<span class="jcf-file"><span class="jcf-upload-button"><span class="jcf-button-content"></span></span><span class="jcf-fake-input"></span></span>',
|
||
|
|
buttonText: 'Choose file',
|
||
|
|
placeholderText: 'No file chosen',
|
||
|
|
realElementClass: 'jcf-real-element',
|
||
|
|
extensionPrefixClass: 'jcf-extension-',
|
||
|
|
selectedFileBlock: '.jcf-fake-input',
|
||
|
|
buttonTextBlock: '.jcf-button-content'
|
||
|
|
},
|
||
|
|
matchElement: function(element) {
|
||
|
|
return element.is('input[type="file"]');
|
||
|
|
},
|
||
|
|
init: function() {
|
||
|
|
this.initStructure();
|
||
|
|
this.attachEvents();
|
||
|
|
this.refresh();
|
||
|
|
},
|
||
|
|
initStructure: function() {
|
||
|
|
this.doc = $(document);
|
||
|
|
this.realElement = $(this.options.element).addClass(this.options.realElementClass);
|
||
|
|
this.fakeElement = $(this.options.fakeStructure).insertBefore(this.realElement);
|
||
|
|
this.fileNameBlock = this.fakeElement.find(this.options.selectedFileBlock);
|
||
|
|
this.buttonTextBlock = this.fakeElement.find(this.options.buttonTextBlock).text(this.options.buttonText);
|
||
|
|
|
||
|
|
this.realElement.appendTo(this.fakeElement).css({
|
||
|
|
position: 'absolute',
|
||
|
|
opacity: 0
|
||
|
|
});
|
||
|
|
},
|
||
|
|
attachEvents: function() {
|
||
|
|
this.realElement.on({
|
||
|
|
'jcf-pointerdown': this.onPress,
|
||
|
|
change: this.onChange,
|
||
|
|
focus: this.onFocus
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onChange: function() {
|
||
|
|
this.refresh();
|
||
|
|
},
|
||
|
|
onFocus: function() {
|
||
|
|
this.fakeElement.addClass(this.options.focusClass);
|
||
|
|
this.realElement.on('blur', this.onBlur);
|
||
|
|
},
|
||
|
|
onBlur: function() {
|
||
|
|
this.fakeElement.removeClass(this.options.focusClass);
|
||
|
|
this.realElement.off('blur', this.onBlur);
|
||
|
|
},
|
||
|
|
onPress: function() {
|
||
|
|
this.fakeElement.addClass(this.options.pressedClass);
|
||
|
|
this.doc.on('jcf-pointerup', this.onRelease);
|
||
|
|
},
|
||
|
|
onRelease: function() {
|
||
|
|
this.fakeElement.removeClass(this.options.pressedClass);
|
||
|
|
this.doc.off('jcf-pointerup', this.onRelease);
|
||
|
|
},
|
||
|
|
getFileName: function() {
|
||
|
|
var resultFileName = '',
|
||
|
|
files = this.realElement.prop('files');
|
||
|
|
|
||
|
|
if (files && files.length) {
|
||
|
|
$.each(files, function(index, file) {
|
||
|
|
resultFileName += (index > 0 ? ', ' : '') + file.name;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
resultFileName = this.realElement.val().replace(/^[\s\S]*(?:\\|\/)([\s\S^\\\/]*)$/g, '$1');
|
||
|
|
}
|
||
|
|
|
||
|
|
return resultFileName;
|
||
|
|
},
|
||
|
|
getFileExtension: function() {
|
||
|
|
var fileName = this.realElement.val();
|
||
|
|
return fileName.lastIndexOf('.') < 0 ? '' : fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
|
||
|
|
},
|
||
|
|
updateExtensionClass: function() {
|
||
|
|
var currentExtension = this.getFileExtension(),
|
||
|
|
currentClassList = this.fakeElement.prop('className'),
|
||
|
|
cleanedClassList = currentClassList.replace(new RegExp('(\\s|^)' + this.options.extensionPrefixClass + '[^ ]+','gi'), '');
|
||
|
|
|
||
|
|
this.fakeElement.prop('className', cleanedClassList);
|
||
|
|
if (currentExtension) {
|
||
|
|
this.fakeElement.addClass(this.options.extensionPrefixClass + currentExtension);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
refresh: function() {
|
||
|
|
var selectedFileName = this.getFileName() || this.options.placeholderText;
|
||
|
|
this.fakeElement.toggleClass(this.options.disabledClass, this.realElement.is(':disabled'));
|
||
|
|
this.fileNameBlock.text(selectedFileName);
|
||
|
|
this.updateExtensionClass();
|
||
|
|
},
|
||
|
|
destroy: function() {
|
||
|
|
// reset styles and restore element position
|
||
|
|
this.realElement.insertBefore(this.fakeElement).removeClass(this.options.realElementClass).css({
|
||
|
|
position: '',
|
||
|
|
opacity: ''
|
||
|
|
});
|
||
|
|
this.fakeElement.remove();
|
||
|
|
|
||
|
|
// remove event handlers
|
||
|
|
this.realElement.off({
|
||
|
|
'jcf-pointerdown': this.onPress,
|
||
|
|
change: this.onChange,
|
||
|
|
focus: this.onFocus,
|
||
|
|
blur: this.onBlur
|
||
|
|
});
|
||
|
|
this.doc.off('jcf-pointerup', this.onRelease);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
}(jcf));
|