Main functions
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user