Skip to content

E
ecouniversal
Commit 64e9ffb3 authored by Babin Egor's avatar Babin Egor
Browse files
Options

Merge branch 'dima' into 'master' 

update field-file.js

See merge request !1
parents 98cb5521 d7752024
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 112 deletions
package.json
View file @ 64e9ffb3
...@@ -92,10 +92,5 @@ ...@@ -92,10 +92,5 @@
"vee-validate": "^3.0.3", "vee-validate": "^3.0.3",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-the-mask": "^0.11.1" "vue-the-mask": "^0.11.1"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
} }
} }
src/blocks/field-file/field-file.js
View file @ 64e9ffb3
...@@ -6,118 +6,125 @@ const $ = require('jquery'); ...@@ -6,118 +6,125 @@ const $ = require('jquery');
ready(function(){ ready(function(){
// Объект для хранения файлов const forms = document.querySelectorAll('form');
const Store = { forms.forEach(form => {
files: {},
inputs: {} // Объект для хранения файлов
}; const Store = {
let fileItems = document.querySelectorAll( '.file-simple-js' ); files: {},
inputs: {}
Array.prototype.forEach.call( fileItems, function( item ) { };
let itemName = item.getAttribute('name'); let fileItems = form.querySelectorAll( '.file-simple-js' );
// Для каждого блока fild-file создаем свой объект
// с именем свойства = атрибуту name у инпута, Array.prototype.forEach.call( fileItems, function( item ) {
// и значением- массивом с файлами
Store.files[itemName] = []; let itemName = item.getAttribute('name');
Store.inputs[itemName] = []; // Для каждого блока fild-file создаем свой объект
let parent = item.closest('.field-file'); // с именем свойства = атрибуту name у инпута,
let itemsWrap = parent.querySelector('.field-file__items'); // и значением- массивом с файлами
Store.files[itemName] = [];
let existingFiles = parent.querySelectorAll('.field-file__item-wrap'); Store.inputs[itemName] = [];
if (existingFiles.length > 0){ let parent = item.closest('.field-file');
let itemsWrap = parent.querySelector('.field-file__items');
existingFiles.forEach(file => { let existingFiles = itemsWrap.querySelectorAll('.field-file__item-wrap');
let thisFile = new File([''], file.querySelector('.field-file__item-name').innerText); if (existingFiles.length > 0){
Store.files[itemName].push(thisFile);
Store.inputs[itemName].push(null); existingFiles.forEach(file => {
})
} let thisFile = new File([''], file.querySelector('.field-file__item-name').innerText);
Store.files[itemName].push(thisFile);
function addFiles(files, input) { Store.inputs[itemName].push(null);
// добавляем файлы в общую кучу })
Store.files[itemName] = Store.files[itemName].concat(files); }
Store.inputs[itemName] = Store.inputs[itemName].concat(input);
parent.dispatchEvent(new CustomEvent('fileSetChanged',{ function addFiles(files, input) {
detail: {} // добавляем файлы в общую кучу
})) Store.files[itemName] = Store.files[itemName].concat(files);
} Store.inputs[itemName] = Store.inputs[itemName].concat(input);
parent.dispatchEvent(new CustomEvent('fileSetChanged',{
// удалить файл из хранилища, например по индексу в массиве detail: {}
function removeFile(index) { }))
// удаляем файл по индексу }
Store.files[itemName].splice(index, 1);
Store.inputs[itemName].splice(index, 1); // удалить файл из хранилища, например по индексу в массиве
parent.dispatchEvent(new CustomEvent('fileSetChanged',{ function removeFile(index) {
detail: {} // удаляем файл по индексу
})) Store.files[itemName].splice(index, 1);
} Store.inputs[itemName].splice(index, 1);
parent.dispatchEvent(new CustomEvent('fileSetChanged',{
// Событие change, выбор файла detail: {}
item.addEventListener('change', (e) => { }))
// если не выбрали файл и нажали отмену, то ничего не делать
if (!e.target.files.length) {
return;
}
const files = Object.keys(e.target.files).map((i) => e.target.files[i]);
addFiles(files, item.cloneNode(true));
// очищаем input, т.к. файлы мы сохранили
e.target.value = '';
})
// Обработчик удаления файла
// на кнопке должен быть класс ".file-remove-js"
document.addEventListener('click', (e)=>{
let removeBtn = e.target.closest('.file-remove-js')
if (!removeBtn) {
return;
} }
// let inputWrap = closest(removeBtn, '.field-file__input-wrap') // Событие change, выбор файла
// inputWrap.remove(); item.addEventListener('change', (e) => {
let btnParent = removeBtn.closest('.field-file__item-wrap'); // если не выбрали файл и нажали отмену, то ничего не делать
let fileWraps = parent.querySelectorAll('.field-file__item-wrap') if (!e.target.files.length) {
return;
fileWraps.forEach((item, index) => { }
if (item === btnParent) { const files = Object.keys(e.target.files).map((i) => e.target.files[i]);
removeFile(index); addFiles(files, item.cloneNode(true));
// очищаем input, т.к. файлы мы сохранили
e.target.value = '';
})
// Обработчик удаления файла
// на кнопке должен быть класс ".file-remove-js"
document.addEventListener('click', (e)=>{
let removeBtn = e.target.closest('.file-remove-js')
if (!removeBtn) {
return;
} }
});
}) // let inputWrap = closest(removeBtn, '.field-file__input-wrap')
// inputWrap.remove();
parent.addEventListener('fileSetChanged', (e) => { let btnParent = removeBtn.closest('.field-file__item-wrap');
itemsWrap.innerHTML = ''; let fileWraps = parent.querySelectorAll('.field-file__item-wrap')
let fileWrap = '';
fileWraps.forEach((item, index) => {
Store.files[itemName].forEach(item => { if (item === btnParent) {
console.log(item); removeFile(index);
fileWrap += ` }
<div class="field-file__item-wrap"> });
<input type="hidden" value="${item.name}" name="ownfile[]"> })
<div class="field-file__item-remove">
<div class="remove remove_bordered file-remove-js"></div> parent.addEventListener('fileSetChanged', (e) => {
</div> itemsWrap.innerHTML = '';
<div class="field-file__item-name"> let fileWrap = '';
${item.name}
Store.files[itemName].forEach(item => {
fileWrap += `
<div class="field-file__item-wrap">
<input type="hidden" value="${item.name}" name="ownfile[]">
<div class="field-file__item-remove">
<div class="remove remove_bordered file-remove-js" onclick='removeFile(this)'></div>
</div>
<div class="field-file__item-name">
${item.name}
</div>
</div> </div>
</div> `;
`; });
}); itemsWrap.insertAdjacentHTML('afterbegin', fileWrap);
itemsWrap.insertAdjacentHTML('afterbegin', fileWrap);
let i = 0; let i = 0;
Store.inputs[itemName].forEach(item => { Store.inputs[itemName].forEach(item => {
if (item){ if (item){
item.removeAttribute('id');
item.setAttribute('name', 'docs1_' + i);
itemsWrap.querySelectorAll('.field-file__item-wrap')[i].insertAdjacentElement('afterbegin', item);
}
i++;
});
})
});
})
item.removeAttribute('id');
item.setAttribute('name', 'docs1_' + i);
itemsWrap.querySelectorAll('.field-file__item-wrap')[i].insertAdjacentElement('afterbegin', item);
}
i++;
});
})
});
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment