const isWatched = document.querySelector('#isWatched').cahecked;films = films.filter(film => film.id !== filmId);
localStorage.setItem('films', JSON.stringify(films));edit: 'Редактировать',
delete: 'Удалить'const form = document.querySelector('#film-form');
const tbody = document.querySelector('#film-tbody');
function getFilms() {
return JSON.parse(localStorage.getItem('films')) || [];
}
function setFilms(films) {
localStorage.setItem('films', JSON.stringify(films));
}
function renderTable() {
const films = getFilms();
tbody.innerHTML = '';
films.forEach(film => {
const row = document.createElement('tr');
row.dataset.id = film.id;
row.innerHTML = `
<td>${film.title}</td>
<td>${film.genre}</td>
<td>${film.releaseYear}</td>
<td>${film.isWatched ? "Да" : "Нет"}</td>
<td>
<button class="edit">Редактировать</button>
<button class="delete">Удалить</button>
</td>
`;
tbody.appendChild(row);
});
}
function addFilmToLocalStorage(film) {
const films = getFilms();
film.id = Date.now();
films.push(film);
setFilms(films);
renderTable();
}
function handleFormSubmit(e) {
e.preventDefault();
const title = document.querySelector('#title').value;
const genre = document.querySelector('#genre').value;
const releaseYear = document.querySelector('#releaseYear').value;
const isWatched = document.querySelector('#isWatched').checked;
addFilmToLocalStorage({ title, genre, releaseYear, isWatched });
form.reset();
}
tbody.addEventListener('click', e => {
const target = e.target;
if (target.classList.contains('delete')) {
const row = target.closest('tr');
const id = Number(row.dataset.id);
let films = getFilms();
films = films.filter(f => f.id !== id);
setFilms(films);
renderTable();
}
});
form.addEventListener('submit', handleFormSubmit);
renderTable();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);
}
}
}