const scroll = new HorizontalScroll('#scrollContainer1', {
scrollStep: 400, // шаг в пикселях
scrollBehavior: 'smooth' // плавная прокрутка
});
class HorizontalScroll {
constructor(container, options = {}) {
this.container = typeof container === 'string'
? document.querySelector(container)
: container;
this.options = {
scrollStep: 300,
scrollBehavior: 'smooth',
...options
};
this.content = this.container.querySelector('.scroll-content'); // если нужно, чтобы вы передавали классы, можно сделать в виде опшинов и объект со значением.
this.leftArrow = this.container.querySelector('.scroll-arrow.left');
this.rightArrow = this.container.querySelector('.scroll-arrow.right');
this.isInViewport = false; //переменная, которая как раз смотрит и говорит, есть ли скроллы в зоне видимости или нет
this.observer = null; // обсервер, если вам нужен
this.init();
}
init() {
// Инициализация Intersection Observer
this.initObserver(); // метод, логику думаю можно описать
// Обновление состояния стрелок
this.updateArrows();
// Обработка изменения размера окна
window.addEventListener('resize', () => this.updateArrows());
// Обработка скролла контента
this.content.addEventListener('scroll', () => this.updateArrows());
}
}
}data() {
return {
activeItems: [],
lastClickedId: null
}
},
methods: {
click(items, buttonId) {
const itemsArray = Array.isArray(items) ? items : [items];
// Если кликаем второй раз по той же кнопке
if (this.lastClickedId === buttonId) {
this.activeItems = [];
this.lastClickedId = null;
} else {
this.activeItems = itemsArray;
this.lastClickedId = buttonId;
}
this.applyStyles();
},
applyStyles() {
for (let node in this.nodes) {
this.nodes[node].style.opacity = this.activeItems.includes(node) ? 1 : 0.3;
}
}
}
В коде при событии клик, передавай и id @click="click(button.items, button.id)" - который как раз является индексом// В дочернем компоненте - передаем все файлы сразу
attachThumbnail: function (e, curObj) {
e.target.closest('.area-upload').classList.remove('drag-file');
e.target.closest('.area-upload').style.display = 'flex';
let files = e.target.files || e.dataTransfer.files;
let allowFiles = this.validateFiles(e, files, curObj);
this.$emit('attachThumbnail', curObj, Array.from(allowFiles));
},
// В родительском компоненте - обрабатываем последовательно
async attachThumbnail(curObj, files) {
let index = this.formData.materialFiles.findIndex(item => item.lang === curObj.lang);
for (let i = 0; i < files.length; i++) {
let file = files[i];
let filePosition = this.formData.materialFiles[index].files.restFiles.length;
console.log('Array length ' + filePosition);
try {
const response = await this.uploadFile(curObj, file, 'rest', filePosition);
const data = await response.json();
console.log('append file');
this.formData.materialFiles[index].files.restFiles.push({
name: data.fileName,
id: data.id
});
} catch (error) {
console.log(error);
}
}
}Пример определения
function getMousePosition(evt) {
const CTM = svg.getScreenCTM();
return {
x: (evt.clientX - CTM.e) / CTM.a,
y: (evt.clientY - CTM.f) / CTM.d
};
}