smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Refactor: Show rename icon on hover instead of click on name

Browse Source 
Changed category rename behavior - clicking name now expands/collapses,
pencil icon appears on hover for renaming.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andrey Smakotin
2025-11-24 01:00:51 +03:00
parent 6517643e0d
commit 03990292a5
3 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
myproject/products/static/products/js/catalog.js
View File

@@ -13,8 +13,8 @@ document.addEventListener('DOMContentLoaded', function() {
// ========================================
document.querySelectorAll('.category-header').forEach(header => {
header.addEventListener('click', function(e) {
// Игнорируем клик по редактируемому полю
if (e.target.classList.contains('category-name-editable') ||
// Игнорируем клик по кнопке переименования и полю ввода
if (e.target.classList.contains('category-rename-btn') ||
e.target.classList.contains('category-name-input')) {
return;
}
@@ -120,17 +120,20 @@ document.addEventListener('DOMContentLoaded', function() {
}
// ========================================
// Inline-редактирование названий категорий
// Inline-редактирование названий категорий (через иконку карандаша)
// ========================================
document.querySelectorAll('.category-name-editable').forEach(nameSpan => {
nameSpan.addEventListener('click', function(e) {
document.querySelectorAll('.category-rename-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
// Уже редактируется?
if (this.querySelector('input')) return;
const categoryId = this.dataset.categoryId;
const currentName = this.textContent.trim();
const header = this.closest('.category-header');
const nameSpan = header.querySelector('.category-name');
// Уже редактируется?
if (nameSpan.querySelector('input')) return;
const currentName = nameSpan.textContent.trim();
// Создаем input
const input = document.createElement('input');
@@ -140,9 +143,9 @@ document.addEventListener('DOMContentLoaded', function() {
input.style.cssText = 'width: 100%; border: 1px solid #0d6efd; border-radius: 3px; padding: 2px 6px; font-size: inherit; outline: none;';
// Сохраняем оригинальный текст
this.dataset.originalName = currentName;
this.textContent = '';
this.appendChild(input);
nameSpan.dataset.originalName = currentName;
nameSpan.textContent = '';
nameSpan.appendChild(input);
input.focus();
input.select();
@@ -156,7 +159,7 @@ document.addEventListener('DOMContentLoaded', function() {
return;
}
if (newName === this.dataset.originalName) {
if (newName === nameSpan.dataset.originalName) {
// Название не изменилось
cancelEdit();
return;
@@ -180,7 +183,7 @@ document.addEventListener('DOMContentLoaded', function() {
if (data.success) {
// Успешно сохранено
this.textContent = data.name;
nameSpan.textContent = data.name;
} else {
// Ошибка
alert(data.error || 'Ошибка при сохранении');
@@ -195,7 +198,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Функция отмены
const cancelEdit = () => {
this.textContent = this.dataset.originalName;
nameSpan.textContent = nameSpan.dataset.originalName;
};
// Enter - сохранить