From f7e997f9a69992d90605d170c8e2a3df262c582d Mon Sep 17 00:00:00 2001 From: vkrm Date: Wed, 12 Jun 2019 12:01:42 +0530 Subject: [PATCH] WIP: Fixes bs-custom-file-input UI filename issue as per: https://github.com/bootstrap-ruby/bootstrap_form/issues/528 --- app/assets/javascripts/application.js | 2 + app/assets/javascripts/bs-file-input-init.js | 3 + .../admin/facility_groups/upload.html.erb | 6 - .../javascripts/bs-custom-file-input.js | 166 ++++++++++++++++++ 4 files changed, 171 insertions(+), 6 deletions(-) create mode 100644 app/assets/javascripts/bs-file-input-init.js create mode 100644 vendor/assets/javascripts/bs-custom-file-input.js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index b47b5b194b..8297c8fce9 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -14,4 +14,6 @@ //= require jquery3 //= require popper //= require bootstrap-sprockets +//= require bs-custom-file-input.js +//= require bs-file-input-init.js //= require_tree . \ No newline at end of file diff --git a/app/assets/javascripts/bs-file-input-init.js b/app/assets/javascripts/bs-file-input-init.js new file mode 100644 index 0000000000..b196af6290 --- /dev/null +++ b/app/assets/javascripts/bs-file-input-init.js @@ -0,0 +1,3 @@ +$(document).ready(function () { + bsCustomFileInput.init() +}) \ No newline at end of file diff --git a/app/views/admin/facility_groups/upload.html.erb b/app/views/admin/facility_groups/upload.html.erb index e4a06b60a6..29d735f52e 100644 --- a/app/views/admin/facility_groups/upload.html.erb +++ b/app/views/admin/facility_groups/upload.html.erb @@ -1,12 +1,6 @@

Upload Facilities

Upload a filled in csv file in this format to bulk create facilities - <%= bootstrap_form_tag(url: '/admin/facility_groups/upload' , multipart: true) do |f| %> <%= f.file_field :facilities_csv %> <%= f.primary 'Upload' %> diff --git a/vendor/assets/javascripts/bs-custom-file-input.js b/vendor/assets/javascripts/bs-custom-file-input.js new file mode 100644 index 0000000000..50b76dd20e --- /dev/null +++ b/vendor/assets/javascripts/bs-custom-file-input.js @@ -0,0 +1,166 @@ +/*! + * bsCustomFileInput v1.3.2 (https://github.com/Johann-S/bs-custom-file-input) + * Copyright 2018 - 2019 Johann-S + * Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE) + */ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global || self, global.bsCustomFileInput = factory()); +}(this, function () { 'use strict'; + + var Selector = { + CUSTOMFILE: '.custom-file input[type="file"]', + CUSTOMFILELABEL: '.custom-file-label', + FORM: 'form', + INPUT: 'input' + }; + + var textNodeType = 3; + + var getDefaultText = function getDefaultText(input) { + var defaultText = ''; + var label = input.parentNode.querySelector(Selector.CUSTOMFILELABEL); + + if (label) { + defaultText = label.innerHTML; + } + + return defaultText; + }; + + var findFirstChildNode = function findFirstChildNode(element) { + if (element.childNodes.length > 0) { + var childNodes = [].slice.call(element.childNodes); + + for (var i = 0; i < childNodes.length; i++) { + var node = childNodes[i]; + + if (node.nodeType !== textNodeType) { + return node; + } + } + } + + return element; + }; + + var restoreDefaultText = function restoreDefaultText(input) { + var defaultText = input.bsCustomFileInput.defaultText; + var label = input.parentNode.querySelector(Selector.CUSTOMFILELABEL); + + if (label) { + var element = findFirstChildNode(label); + element.innerHTML = defaultText; + } + }; + + var fileApi = !!window.File; + var FAKE_PATH = 'fakepath'; + var FAKE_PATH_SEPARATOR = '\\'; + + var getSelectedFiles = function getSelectedFiles(input) { + if (input.hasAttribute('multiple') && fileApi) { + return [].slice.call(input.files).map(function (file) { + return file.name; + }).join(', '); + } + + if (input.value.indexOf(FAKE_PATH) !== -1) { + var splittedValue = input.value.split(FAKE_PATH_SEPARATOR); + return splittedValue[splittedValue.length - 1]; + } + + return input.value; + }; + + function handleInputChange() { + var label = this.parentNode.querySelector(Selector.CUSTOMFILELABEL); + + if (label) { + var element = findFirstChildNode(label); + var inputValue = getSelectedFiles(this); + + if (inputValue.length) { + element.innerHTML = inputValue; + } else { + restoreDefaultText(this); + } + } + } + + function handleFormReset() { + var customFileList = [].slice.call(this.querySelectorAll(Selector.INPUT)).filter(function (input) { + return !!input.bsCustomFileInput; + }); + + for (var i = 0, len = customFileList.length; i < len; i++) { + restoreDefaultText(customFileList[i]); + } + } + + var customProperty = 'bsCustomFileInput'; + var Event = { + FORMRESET: 'reset', + INPUTCHANGE: 'change' + }; + var bsCustomFileInput = { + init: function init(inputSelector, formSelector) { + if (inputSelector === void 0) { + inputSelector = Selector.CUSTOMFILE; + } + + if (formSelector === void 0) { + formSelector = Selector.FORM; + } + + var customFileInputList = [].slice.call(document.querySelectorAll(inputSelector)); + var formList = [].slice.call(document.querySelectorAll(formSelector)); + + for (var i = 0, len = customFileInputList.length; i < len; i++) { + var input = customFileInputList[i]; + Object.defineProperty(input, customProperty, { + value: { + defaultText: getDefaultText(input) + }, + writable: true + }); + handleInputChange.call(input); + input.addEventListener(Event.INPUTCHANGE, handleInputChange); + } + + for (var _i = 0, _len = formList.length; _i < _len; _i++) { + formList[_i].addEventListener(Event.FORMRESET, handleFormReset); + + Object.defineProperty(formList[_i], customProperty, { + value: true, + writable: true + }); + } + }, + destroy: function destroy() { + var formList = [].slice.call(document.querySelectorAll(Selector.FORM)).filter(function (form) { + return !!form.bsCustomFileInput; + }); + var customFileInputList = [].slice.call(document.querySelectorAll(Selector.INPUT)).filter(function (input) { + return !!input.bsCustomFileInput; + }); + + for (var i = 0, len = customFileInputList.length; i < len; i++) { + var input = customFileInputList[i]; + restoreDefaultText(input); + input[customProperty] = undefined; + input.removeEventListener(Event.INPUTCHANGE, handleInputChange); + } + + for (var _i2 = 0, _len2 = formList.length; _i2 < _len2; _i2++) { + formList[_i2].removeEventListener(Event.FORMRESET, handleFormReset); + + formList[_i2][customProperty] = undefined; + } + } + }; + + return bsCustomFileInput; + +}));