forked from Dgors03/Answer_Templates
remove adding template
This commit is contained in:
@@ -17,7 +17,6 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="name fs-4 fw-lighter font-monospace">Твои шаблоны</h1>
|
||||
<button class="template-add btn btn-primary" type="button"><i class="fa-duotone fa-plus"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="templates" id="template-list">
|
||||
|
||||
@@ -182,142 +182,6 @@ function copyToClipboard(text) {
|
||||
});
|
||||
};
|
||||
|
||||
const templatesEl = document.querySelector('.templates');
|
||||
const addBtn = document.querySelector('.template-add');
|
||||
const editExisted = document.querySelector('template-edit-existed');
|
||||
|
||||
function createTemplate(title, RUText, ENText) {
|
||||
const templateId = Date.now();
|
||||
const templateEl = document.createElement('span');
|
||||
templateEl.setAttribute('data-template-id', templateId);
|
||||
templateEl.classList.add('template');
|
||||
templateEl.innerHTML = `
|
||||
<span id="template-title" class="font-monospace">${title}</span>
|
||||
<div class="bigFormochka">
|
||||
<div class="formochka">
|
||||
<input id="template-title-input" class="hidden form-control-sm"></input>
|
||||
<textarea id="template-textareaRU" class="hidden form-control-lg border-2" rows="1" cols="30.5">${RUText}</textarea>
|
||||
<textarea id="template-textareaEN" class="hidden form-control-lg border-2" rows="1" cols="30.5">${ENText}</textarea>
|
||||
</div>
|
||||
<span class="buttonsLong">
|
||||
<span class="btn btn-light" data-ru-text="${RUText}" id="template-ru-text">RU</span>
|
||||
<span class="btn btn-light" data-en-text="${ENText}" id="template-en-text">ENG</span>
|
||||
<button class="template-edit btn"><i class="fa-solid fa-pen-to-square"></i></button>
|
||||
<button class="template-delete btn"><i class="fa-solid fa-trash"></i></button>
|
||||
</span>
|
||||
</span>
|
||||
</div> `
|
||||
|
||||
const editBtn = templateEl.querySelector('.template-edit');
|
||||
const deleteBtn = templateEl.querySelector('.template-delete');
|
||||
const titleEl = templateEl.querySelector('#template-title');
|
||||
const textRUEl = templateEl.querySelector('#template-ru-text');
|
||||
const textENEl = templateEl.querySelector('#template-en-text');
|
||||
const titleInputEl = templateEl.querySelector('#template-title-input');
|
||||
const textRUInputEl = templateEl.querySelector('#template-textareaRU');
|
||||
const textENInputEl = templateEl.querySelector('#template-textareaEN');
|
||||
|
||||
editBtn.addEventListener('click', (e) => {
|
||||
titleEl.classList.toggle('hidden');
|
||||
textRUEl.classList.toggle('hidden');
|
||||
textENEl.classList.toggle('hidden');
|
||||
|
||||
titleInputEl.classList.toggle('hidden');
|
||||
textRUInputEl.classList.toggle('hidden');
|
||||
textENInputEl.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
deleteBtn.addEventListener('click', (e) => {
|
||||
const templates = JSON.parse(localStorage.getItem('templates')) || [];
|
||||
const templateIndex = templates.findIndex(template => template.title === titleEl.innerText);
|
||||
if (templateIndex !== -1) {
|
||||
templates.splice(templateIndex, 1);
|
||||
localStorage.setItem('templates', JSON.stringify(templates));
|
||||
}
|
||||
templateEl.remove();
|
||||
});
|
||||
|
||||
titleInputEl.addEventListener('change', (e) => {
|
||||
titleEl.innerText = e.target.value;
|
||||
navigator.clipboard.writeText(titleEl);
|
||||
updateTemplateInLocalStorage(title, 'title', e.target.value);
|
||||
});
|
||||
|
||||
textRUInputEl.addEventListener('change', (e) => {
|
||||
textRUEl.dataset.ruText = e.target.value;
|
||||
navigator.clipboard.writeText(textRUEl);
|
||||
updateTemplateInLocalStorage(title, 'RUText', e.target.value);
|
||||
});
|
||||
|
||||
textENInputEl.addEventListener('change', (e) => {
|
||||
textENEl.dataset.enText = e.target.value;
|
||||
navigator.clipboard.writeText(textRUEl);
|
||||
updateTemplateInLocalStorage(title, 'ENText', e.target.value);
|
||||
});
|
||||
|
||||
textRUEl.addEventListener('click', (e) => {
|
||||
navigator.clipboard.writeText(e.target.dataset.ruText)
|
||||
.then(() => {
|
||||
console.log('Текст RU скопирован в буфер обмена');
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Не удалось скопировать текст RU: ', err);
|
||||
});
|
||||
});
|
||||
|
||||
textENEl.addEventListener('click', (e) => {
|
||||
navigator.clipboard.writeText(e.target.dataset.enText)
|
||||
.then(() => {
|
||||
console.log('Текст EN скопирован в буфер обмена');
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Не удалось скопировать текст EN: ', err);
|
||||
});
|
||||
});
|
||||
|
||||
return templateEl;
|
||||
};
|
||||
|
||||
function saveTemplateToLocalStorage(title, RUText, ENText) {
|
||||
const template = {
|
||||
title: title,
|
||||
RUText: RUText,
|
||||
ENText: ENText
|
||||
};
|
||||
const templates = JSON.parse(localStorage.getItem('templates')) || [];
|
||||
templates.push(template);
|
||||
localStorage.setItem('templates', JSON.stringify(templates));
|
||||
};
|
||||
|
||||
function updateTemplateInLocalStorage(title, key, value) {
|
||||
const templates = JSON.parse(localStorage.getItem('templates')) || [];
|
||||
const templateIndex = templates.findIndex(template => template.title === title);
|
||||
|
||||
if (templateIndex !== -1) {
|
||||
templates[templateIndex][key] = value;
|
||||
localStorage.setItem('templates', JSON.stringify(templates));
|
||||
};
|
||||
};
|
||||
|
||||
addBtn.addEventListener('click', (e) => {
|
||||
const title = "Title";
|
||||
const RUText = "RUText";
|
||||
const ENText = "ENText";
|
||||
|
||||
const el = createTemplate(title, RUText, ENText);
|
||||
templatesEl.appendChild(el);
|
||||
saveTemplateToLocalStorage(title, RUText, ENText);
|
||||
});
|
||||
|
||||
window.onload = function () {
|
||||
const templates = JSON.parse(localStorage.getItem('templates')) || [];
|
||||
templates.forEach(template => {
|
||||
const el = createTemplate(template.title, template.RUText, template.ENText);
|
||||
templatesEl.appendChild(el);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const themeIcon = document.getElementById('theme-icon');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user