Main functions

This commit is contained in:
2025-10-26 14:44:10 +09:00
parent 6ff35e26f4
commit 291fc63a4c
901 changed files with 79783 additions and 201383 deletions

View File

@@ -11,7 +11,7 @@
<p class="mt-1 text-sm text-gray-500">Заполните информацию о проекте для добавления в портфолио</p>
</div>
<div class="flex space-x-3">
<button type="button" onclick="saveDraft()" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<button type="button" data-action="save-draft" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="fas fa-save mr-2"></i>
Сохранить черновик
</button>
@@ -152,7 +152,7 @@
Подробное описание проекта *
</label>
<div id="descriptionEditor" class="min-h-40 border border-gray-300 rounded-lg"></div>
<textarea name="description" id="description" style="display: none;" required></textarea>
<textarea name="description" id="description" style="display: none;"></textarea>
<p class="mt-2 text-sm text-gray-500">Опишите задачи, решения и результаты проекта</p>
</div>
@@ -166,8 +166,9 @@
placeholder="Введите технологию и нажмите Enter"
class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<div class="absolute right-2 top-2">
<button type="button" onclick="addTechnology()" class="text-blue-600 hover:text-blue-800">
<i class="fas fa-plus"></i>
<button type="button" data-action="add-technology" class="text-blue-600 hover:text-blue-800">
<i class="fas fa-plus mr-1"></i>
Добавить
</button>
</div>
</div>
@@ -180,7 +181,7 @@
<div class="flex flex-wrap gap-2">
<% const popularTechs = ['React', 'Vue.js', 'Node.js', 'Express.js', 'MongoDB', 'PostgreSQL', 'MySQL', 'JavaScript', 'TypeScript', 'HTML5', 'CSS3', 'Tailwind CSS', 'Bootstrap', 'Webpack', 'Docker', 'Git', 'AWS', 'Figma', 'Photoshop']; %>
<% popularTechs.forEach(tech => { %>
<button type="button" onclick="addTechnologyFromList('<%= tech %>')"
<button type="button" data-action="add-technology-from-list" data-tech="<%= tech %>"
class="px-2 py-1 text-xs border border-gray-300 rounded-md text-gray-600 hover:bg-gray-100">
<%= tech %>
</button>
@@ -229,9 +230,9 @@
<div id="imagePreviewContainer" style="display: none;">
<div class="flex items-center justify-between mb-4">
<h5 class="text-sm font-medium text-gray-900">Загруженные изображения</h5>
<button type="button" onclick="clearAllImages()" class="text-red-600 hover:text-red-800 text-sm">
<button type="button" data-action="clear-all-images" class="text-red-600 hover:text-red-800 text-sm">
<i class="fas fa-trash mr-1"></i>
Удалить все
Очистить все
</button>
</div>
<div id="imagePreview" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"></div>
@@ -303,7 +304,7 @@
<!-- Submit Buttons -->
<div class="flex justify-between items-center pt-6 border-t border-gray-200">
<div class="flex space-x-3">
<button type="button" onclick="previewProject()" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
<button type="button" data-action="preview-project" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
<i class="fas fa-eye mr-2"></i>
Предпросмотр
</button>
@@ -313,7 +314,7 @@
<a href="/admin/portfolio" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
Отмена
</a>
<button type="button" onclick="saveDraft()" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
<button type="button" data-action="save-draft" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
<i class="fas fa-save mr-2"></i>
Сохранить как черновик
</button>
@@ -342,6 +343,7 @@ document.addEventListener('DOMContentLoaded', function() {
initializeTechnologyInput();
initializeFormValidation();
setupCharacterCounters();
initializeEventListeners();
});
// Initialize Rich Text Editor
@@ -412,7 +414,7 @@ function updateTechnologiesList() {
container.innerHTML = selectedTechnologies.map((tech, index) => `
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
${tech}
<button type="button" onclick="removeTechnology(${index})" class="ml-2 text-blue-600 hover:text-blue-800">
<button type="button" data-action="remove-technology" data-index="${index}" class="ml-2 text-blue-600 hover:text-blue-800">
<i class="fas fa-times"></i>
</button>
</span>
@@ -517,9 +519,9 @@ function updateImagePreview() {
</div>
${index === 0 ? '<div class="absolute top-2 left-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">Главное</div>' : ''}
<div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity space-x-1">
${index > 0 ? '<button type="button" onclick="moveImage(' + index + ', -1)" class="bg-white text-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-xs shadow hover:bg-gray-50" title="Переместить влево"><i class="fas fa-chevron-left"></i></button>' : ''}
${index < uploadedImages.length - 1 ? '<button type="button" onclick="moveImage(' + index + ', 1)" class="bg-white text-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-xs shadow hover:bg-gray-50" title="Переместить вправо"><i class="fas fa-chevron-right"></i></button>' : ''}
<button type="button" onclick="removeImage(${index})" class="bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs shadow hover:bg-red-700" title="Удалить">
${index > 0 ? '<button type="button" data-action="move-image" data-index="' + index + '" data-direction="-1" class="bg-white text-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-xs shadow hover:bg-gray-50" title="Переместить влево"><i class="fas fa-chevron-left"></i></button>' : ''}
${index < uploadedImages.length - 1 ? '<button type="button" data-action="move-image" data-index="' + index + '" data-direction="1" class="bg-white text-gray-600 rounded-full w-6 h-6 flex items-center justify-center text-xs shadow hover:bg-gray-50" title="Переместить вправо"><i class="fas fa-chevron-right"></i></button>' : ''}
<button type="button" data-action="remove-image" data-index="${index}" class="bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs shadow hover:bg-red-700" title="Удалить">
<i class="fas fa-times"></i>
</button>
</div>
@@ -773,4 +775,46 @@ function showNotification(message, type = 'info') {
}, 300);
}, 5000);
}
// Initialize event listeners for data-action buttons
function initializeEventListeners() {
document.addEventListener('click', function(e) {
const action = e.target.closest('[data-action]')?.dataset.action;
if (!action) return;
e.preventDefault();
switch(action) {
case 'save-draft':
saveDraft();
break;
case 'preview-project':
previewProject();
break;
case 'add-technology':
addTechnology();
break;
case 'remove-technology':
const techIndex = parseInt(e.target.closest('[data-index]').dataset.index);
removeTechnology(techIndex);
break;
case 'clear-all-images':
clearAllImages();
break;
case 'move-image':
const moveIndex = parseInt(e.target.closest('[data-index]').dataset.index);
const direction = parseInt(e.target.closest('[data-direction]').dataset.direction);
moveImage(moveIndex, direction);
break;
case 'remove-image':
const removeIndex = parseInt(e.target.closest('[data-index]').dataset.index);
removeImage(removeIndex);
break;
case 'add-technology-from-list':
const techName = e.target.closest('[data-tech]').dataset.tech;
addTechnologyFromList(techName);
break;
}
});
}
</script>