Вот код
document.addEventListener('DOMContentLoaded', function () {
const feelContainer = document.querySelector('.feel');
const showContainer = document.querySelector('.show');
// Функция загрузки данных из JSON файла
fetch('data/data.json')
.then(response => response.json())
.then(data => {
// Создаем блоки на основе данных
data.forEach(item => {
const feelBlock = createFeelBlock(item);
feelContainer.appendChild(feelBlock);
});
loadState();
})
.catch(error => console.error('Ошибка при загрузке данных:', error));
function createFeelBlock(item) {
const feelBlock = document.createElement('div');
feelBlock.classList.add('feel-block');
feelBlock.id = item['feel-id'];
// Добавляем структуру блока
feelBlock.innerHTML = `
<div class="feel-header">
<div class="feel-title">${item['feel-title']}</div>
<div class="feel-panel">
<div class="up-arrow"></div>
<div class="down-arrow"></div>
<div class="hide-show"></div>
<div class="clearing"></div>
<div class="flip"></div>
<div class="right-left-arrow"></div>
</div>
</div>
<div class="definition-example">
<div class="definition-example-sample">
<div class="feel-definition-sample">
<p>Определение</p>
<p>${item['feel-definition']}</p>
</div>
<div class="feel-examples-sample">
<p>Примеры</p>
${item['feel-examples']}
</div>
</div>
<div class="definition-example-your-text" style="display: none;">
<div class="feel-definition-your-text">
<textarea rows="1" placeholder="Напиши небольшое определение" class="textarea"></textarea>
</div>
<div class="feel-examples-your-text">
<textarea rows="1" placeholder="Приведи короткие примеры" class="textarea"></textarea>
</div>
</div>
</div>
`;
addEventListeners(feelBlock);
return feelBlock;
}
function addEventListeners(block) {
const upArrow = block.querySelector('.up-arrow');
const downArrow = block.querySelector('.down-arrow');
const hideShow = block.querySelector('.hide-show');
const clearing = block.querySelector('.clearing');
const flip = block.querySelector('.flip');
const rightLeftArrow = block.querySelector('.right-left-arrow');
const definitionExample = block.querySelector('.definition-example');
const sampleText = block.querySelector('.definition-example-sample');
const yourText = block.querySelector('.definition-example-your-text');
const definitionTextarea = block.querySelector('.feel-definition-your-text .textarea');
const examplesTextarea = block.querySelector('.feel-examples-your-text .textarea');
// Сохранение текста при вводе
definitionTextarea.addEventListener('input', saveText);
examplesTextarea.addEventListener('input', saveText);
function saveText() {
const id = block.id;
const data = {
definition: definitionTextarea.value,
examples: examplesTextarea.value
};
localStorage.setItem(`feel-text-${id}`, JSON.stringify(data));
}
// Загрузка сохраненного текста
const savedData = JSON.parse(localStorage.getItem(`feel-text-${block.id}`));
if (savedData) {
definitionTextarea.value = savedData.definition;
examplesTextarea.value = savedData.examples;
}
// Перемещение блока вверх
upArrow.addEventListener('click', function () {
const prevBlock = block.previousElementSibling;
if (prevBlock && prevBlock.classList.contains('feel-block')) {
feelContainer.insertBefore(block, prevBlock);
saveOrder();
}
});
// Перемещение блока вниз
downArrow.addEventListener('click', function () {
const nextBlock = block.nextElementSibling;
if (nextBlock && nextBlock.classList.contains('feel-block')) {
feelContainer.insertBefore(nextBlock, block);
saveOrder();
}
});
// Скрытие/отображение definition-example
hideShow.addEventListener('click', function () {
if (definitionExample.style.display === 'none') {
definitionExample.style.display = '';
} else {
definitionExample.style.display = 'none';
}
saveVisibility(block.id, definitionExample.style.display !== 'none');
});
// Очистка введенного текста
clearing.addEventListener('click', function () {
definitionTextarea.value = '';
examplesTextarea.value = '';
localStorage.removeItem(`feel-text-${block.id}`);
});
// Flip card эффект
flip.addEventListener('click', function () {
if (sampleText.style.display === 'none') {
sampleText.style.display = '';
yourText.style.display = 'none';
} else {
sampleText.style.display = 'none';
yourText.style.display = '';
}
saveFlipState(block.id, sampleText.style.display !== 'none');
});
// Перемещение блока между feel и show
rightLeftArrow.addEventListener('click', function () {
if (block.parentElement === feelContainer) {
showContainer.appendChild(block);
} else {
feelContainer.appendChild(block);
}
saveLocation(block.id, block.parentElement.classList.contains('feel') ? 'feel' : 'show');
});
// Загрузка состояний при инициализации
loadBlockState(block);
}
// Сохранение порядка блоков
function saveOrder() {
const ids = Array.from(feelContainer.querySelectorAll('.feel-block')).map(block => block.id);
localStorage.setItem('feel-order', JSON.stringify(ids));
}
// Сохранение видимости блока
function saveVisibility(id, isVisible) {
const visibility = JSON.parse(localStorage.getItem('feel-visibility')) || {};
visibility[id] = isVisible;
localStorage.setItem('feel-visibility', JSON.stringify(visibility));
}
// Сохранение состояния flip
function saveFlipState(id, isSampleVisible) {
const flipState = JSON.parse(localStorage.getItem('feel-flip')) || {};
flipState[id] = isSampleVisible;
localStorage.setItem('feel-flip', JSON.stringify(flipState));
}
// Сохранение местоположения блока
function saveLocation(id, location) {
const locations = JSON.parse(localStorage.getItem('feel-location')) || {};
locations[id] = location;
localStorage.setItem('feel-location', JSON.stringify(locations));
}
// Загрузка состояния блоков
function loadState() {
// Восстановление порядка блоков
const order = JSON.parse(localStorage.getItem('feel-order'));
if (order) {
order.forEach(id => {
const block = document.getElementById(id);
if (block) {
feelContainer.appendChild(block);
}
});
}
// Восстановление местоположения блоков
const locations = JSON.parse(localStorage.getItem('feel-location'));
if (locations) {
Object.keys(locations).forEach(id => {
const block = document.getElementById(id);
if (block) {
if (locations[id] === 'show') {
showContainer.appendChild(block);
} else {
feelContainer.appendChild(block);
}
}
});
}
}
// Загрузка состояния конкретного блока
function loadBlockState(block) {
const id = block.id;
// Видимость definition-example
const visibility = JSON.parse(localStorage.getItem('feel-visibility')) || {};
if (visibility[id] === false) {
block.querySelector('.definition-example').style.display = 'none';
}
// Состояние flip
const flipState = JSON.parse(localStorage.getItem('feel-flip')) || {};
if (flipState[id] === false) {
block.querySelector('.definition-example-sample').style.display = 'none';
block.querySelector('.definition-example-your-text').style.display = '';
}
}
});
