/*! * 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: '', 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));