tieptk/auction_program
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Tieptk
2024-11-13 15:55:05 +07:00
parent 472cb2535c
commit 253958c7b8
2 changed files with 225 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

458
assets/js/edit.js
View File

@@ -1,44 +1,108 @@
let historyStates = [];
let currentStateIndex = -1;
const $toggleEditModeButton = $('#toggleEditMode');
const $tabBar = $('#tabBar');
const $textOptions = $('#textOptions');
const $imageOptions = $('#imageOptions');
const $BoxOptions = $('#BoxOptions');
const $textColorInput = $('#textColor');
const $textBackgroundInput = $('#textBackground');
const $textContentInput = $('#textContent');
const $imageURLInput = $('#imageURL');
const $imageUploadInput = $('#imageUpload');
const $logoSizeInput = $('#logoSize');
const $sizeValueSpan = $('#sizeValue');
const $lineHeightInput = $('#lineHeight');
let currentElement = null;
let isEditMode = false;
// Các phần tử DOM cần thiết
const $elements = {
toggleEditModeButton: $('#toggleEditMode'),
tabBar: $('#tabBar'),
textOptions: $('#textOptions'),
imageOptions: $('#imageOptions'),
boxOptions: $('#BoxOptions'),
bgOptions: $('#bgOptions'),
textColorInput: $('#textColor'),
textBackgroundInput: $('#textBackground'),
textContentInput: $('#textContent'),
imageURLInput: $('#imageURL'),
imageUploadInput: $('#imageUpload'),
logoSizeInput: $('#logoSize'),
sizeValueSpan: $('#sizeValue'),
lineHeightInput: $('#lineHeight')
};
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$(".mode-edit").addClass('fixed');
}
else {
$(".mode-edit").removeClass('fixed');
}
})
$toggleEditModeButton.on('click', function () {
isEditMode = !isEditMode;
$('.editable-element').toggleClass('editable', isEditMode);
$toggleEditModeButton.html(isEditMode ? '<i class="fas fa-sign-out-alt"></i> Thoát chỉnh sửa' : '<i class="far fa-edit"></i> Chỉnh sửa');
$tabBar.hide();
$(".mode-edit").toggleClass('fixed', $(window).scrollTop() > 100);
});
$imageUploadInput.on('change', function (event) {
// Chuyển đổi chế độ chỉnh sửa
$elements.toggleEditModeButton.on('click', function () {
isEditMode = !isEditMode;
$('.editable-element').toggleClass('editable', isEditMode);
$elements.toggleEditModeButton.html(isEditMode ? '<i class="fas fa-sign-out-alt"></i> Thoát chỉnh sửa' : '<i class="far fa-edit"></i> Chỉnh sửa');
$elements.tabBar.hide();
});
// Cập nhật màu sắc và ảnh
$elements.textColorInput.on('input', function () {
updateElementColor('text', $(this).val());
});
$elements.textBackgroundInput.on('input', function () {
updateElementColor('bg', $(this).val());
});
$elements.logoSizeInput.on('input', function () {
updateLogoSize($(this).val());
});
$elements.lineHeightInput.on('input', function () {
updateLineHeight($(this).val());
});
$elements.imageUploadInput.on('change', function (event) {
handleImageUpload(event);
});
// Hàm bắt đầu chỉnh sửa
function startEditing(event, button) {
if (!isEditMode) return;
event.stopPropagation();
currentElement = $(button).closest('.editable-element');
$elements.tabBar.show();
setupOptions();
}
// Thiết lập các tùy chọn cho các phần tử
function setupOptions() {
const elementType = currentElement.data('type');
const $title = currentElement.find('.title');
if (elementType === 'box') {
showBoxOptions();
} else if (elementType === 'title') {
showTextOptions($title);
} else if (elementType === 'background') {
showBgOptions();
} else if (elementType === 'image') {
showImageOptions();
}
}
// Cập nhật màu sắc cho phần tử
function updateElementColor(type, color) {
if (!currentElement) return;
const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`;
currentElement.find('.title').attr('class', function (i, c) {
return c.split(' ').filter(cls => !cls.startsWith(type)).concat(className).join(' ');
});
}
// Cập nhật kích thước logo
function updateLogoSize(size) {
$elements.sizeValueSpan.text(`${size}px`);
currentElement.find('img').css('width', `${size}px`);
}
// Cập nhật chiều cao dòng cho phần tử tiêu đề
function updateLineHeight(height) {
if (currentElement && currentElement.data('type') === 'title') {
currentElement.find('.title').css('line-height', `${height}px`);
}
}
// Xử lý tải ảnh lên
function handleImageUpload(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
@@ -46,178 +110,146 @@ $imageUploadInput.on('change', function (event) {
currentElement.find('img').attr('src', reader.result);
};
reader.readAsDataURL(file);
});
$textColorInput.on('input', function (e) {
updateTextColor($(this).val());
});
$textBackgroundInput.on('input', function (e) {
updateBackgroundColor($(this).val());
});
$logoSizeInput.on('input', function () {
$sizeValueSpan.text(`${$logoSizeInput.val()}px`);
currentElement.find('img').css('width', `${$logoSizeInput.val()}px`);
});
$lineHeightInput.on('input', function () {
if (currentElement && currentElement.data('type') === 'title') {
currentElement.find('.title').css('line-height', `${$lineHeightInput.val()}px`);
}
});
function startEditing(event, button) {
if (!isEditMode) return;
event.stopPropagation();
currentElement = $(button).closest('.editable-element');
$tabBar.show();
setupOptions();
}
function setupOptions() {
if (currentElement.data('type') === 'box') {
$BoxOptions.show();
$textOptions.hide();
$imageOptions.hide();
const $title = currentElement.find('.title');
$('#BackgroundColor').val(extractColor(currentElement, 'bg'));
$('#InputCodeBg').val(extractColor(currentElement, 'bg'));
$('#changeInputBg').val(extractColor(currentElement, 'bg'));
$textContentInput.val($title.text().trim());
$textColorInput.val(extractColor($title, 'text'));
$textBackgroundInput.val(extractColor($title, 'bg'));
$lineHeightInput.val(parseFloat($title.css('line-height')));
$('#fontSize').val(parseFloat($title.css('font-size')));
$('#fontFamily').val($title.css('font-family'));
$('#BgcolorCode').val(extractColor($title, 'bg'));
$('#colorCodeTitle').val(extractColor($title, 'text'));
$('#borderColorBg').val(extractColor(currentElement, 'border'))
} else if (currentElement.data('type') === 'title') {
$textOptions.show();
$BoxOptions.hide();
$imageOptions.hide();
const $title = currentElement.find('.title');
$textContentInput.val($title.text().trim());
$textColorInput.val(extractColor($title, 'text'));
$textBackgroundInput.val(extractColor($title, 'bg'));
$lineHeightInput.val(parseFloat($title.css('line-height')));
$('#fontSize').val(parseFloat($title.css('font-size')));
$('#fontFamily').val($title.css('font-family'));
$('#BgcolorCode').val(extractColor($title, 'bg'));
$('#colorCodeTitle').val(extractColor($title, 'text'));
$('#borderColorBg').val(extractColor($title, 'bg'))
} else if (currentElement.data('type') === 'background') {
} else {
$imageOptions.show();
$textOptions.hide();
$BoxOptions.hide();
const $img = currentElement.find('img');
$imageURLInput.attr('src', $img.attr('src'));
$imageUploadInput.val('');
const $logoImage = currentElement.find('img');
$logoSizeInput.val($logoImage.width());
$sizeValueSpan.text(`${$logoImage.width()}px`);
}
}
// Áp dụng các thay đổi
function applyChanges() {
if (!currentElement) return;
if (currentElement.data('type') === 'title') {
const elementType = currentElement.data('type');
if (elementType === 'title') {
updateTextStyles();
} else if (currentElement.data('type') === 'image') {
} else if (elementType === 'image') {
updateImage();
} else if (currentElement.data('type') === 'background') {
updateBgStyles()
} else if (elementType === 'background') {
updateBgStyles();
}
saveCurrentState()
$tabBar.hide();
saveCurrentState();
$elements.tabBar.hide();
}
// Cập nhật các thuộc tính kiểu chữ cho tiêu đề
function updateTextStyles() {
const $title = currentElement.find('h2');
$title.text($textContentInput.val());
updateClass($title, 'text', $textColorInput.val());
updateClass($title, 'bg', $textBackgroundInput.val());
const $title = currentElement.find('.title');
$title.text($elements.textContentInput.val());
updateElementColor('text', $elements.textColorInput.val());
updateElementColor('bg', $elements.textBackgroundInput.val());
}
// Cập nhật ảnh
function updateImage() {
const $img = currentElement.find('img');
$img.attr('src', $imageURLInput.val() || $img.attr('src'));
$img.attr('src', $elements.imageURLInput.val() || $img.attr('src'));
}
// Cập nhật background
function updateBgStyles() {
updateClass(currentElement, 'bg', $('#changeInputBg').val());
updateClass(currentElement, 'bg', $('#InputCodeBg').val());
updateElementColor('bg', $elements.textBackgroundInput.val());
}
// Lưu trạng thái hiện tại của trang
function saveCurrentState() {
const currentHTML = document.documentElement.innerHTML;
if (currentStateIndex < historyStates.length - 1) {
historyStates = historyStates.slice(0, currentStateIndex + 1);
}
historyStates.push(currentHTML);
currentStateIndex++;
}
// Quay lại trạng thái trước đó
function goBack() {
if (currentStateIndex > 0) {
currentStateIndex--;
document.documentElement.innerHTML = historyStates[currentStateIndex];
}
}
// Tiến về trạng thái sau
function goForward() {
if (currentStateIndex < historyStates.length - 1) {
currentStateIndex++;
document.documentElement.innerHTML = historyStates[currentStateIndex];
}
}
function updateTextColor(color) {
if (!currentElement) return;
updateClass(currentElement.find('h2'), 'text', color);
function showTextOptions($title) {
$elements.textOptions.show(); // Hiển thị các tùy chọn văn bản
$elements.boxOptions.hide(); // Ẩn các tùy chọn hộp
$elements.imageOptions.hide(); // Ẩn các tùy chọn hình ảnh
$elements.bgOptions.hide(); // Ẩn các tùy chọn nền
// Điền các giá trị vào các ô input
$elements.textContentInput.val($title.text().trim()); // Điền nội dung văn bản
$elements.textColorInput.val(extractColor($title, 'text')); // Điền màu chữ
$elements.textBackgroundInput.val(extractColor($title, 'bg')); // Điền màu nền
$elements.lineHeightInput.val(parseFloat($title.css('line-height'))); // Điền chiều cao dòng
$('#fontSize').val(parseFloat($title.css('font-size'))); // Điền cỡ chữ
$('#fontFamily').val($title.css('font-family')); // Điền font chữ
$('#BgcolorCode').val(extractColor($title, 'bg')); // Điền màu nền vào ô input
$('#colorCodeTitle').val(extractColor($title, 'text')); // Điền mã màu chữ vào ô input
}
function updateBackgroundColor(color) {
if (!currentElement) return;
updateClass(currentElement.find('h2'), 'bg', color);
function showBgOptions() {
$elements.textOptions.hide(); // Ẩn các tùy chọn văn bản
$elements.boxOptions.hide(); // Ẩn các tùy chọn hộp
$elements.imageOptions.hide(); // Ẩn các tùy chọn hình ảnh
$elements.bgOptions.show(); // Hiển thị các tùy chọn nền
const bgColor = extractColor(currentElement, 'bg'); // Trích xuất màu nền hiện tại
$('#changeInputBg').val(bgColor); // Điền vào ô input thay đổi màu nền
$('#InputCodeBg').val(bgColor); // Điền vào ô input màu nền
$('#borderColorBg').val(extractColor(currentElement, 'border'))
}
function updateClass($element, type, color) {
const className = type === 'text' ? `text-[${color}]` : `bg-[${color}]`;
const regex = new RegExp(`^${type}-\\[#[0-9A-Fa-f]{3,6}\\]$`);
$element.attr('class', function (i, c) {
return c.split(' ').filter(cls => !regex.test(cls)).concat(className).join(' ');
});
function showImageOptions() {
$elements.textOptions.hide(); // Ẩn các tùy chọn văn bản
$elements.boxOptions.hide(); // Ẩn các tùy chọn hộp
$elements.bgOptions.hide(); // Ẩn các tùy chọn nền
$elements.imageOptions.show(); // Hiển thị các tùy chọn hình ảnh
const $img = currentElement.find('img'); // Lấy phần tử hình ảnh
$elements.imageURLInput.attr('src', $img.attr('src')); // Điền URL của hình ảnh vào ô input
$elements.imageUploadInput.val(''); // Xóa giá trị của ô input tải ảnh lên
$elements.logoSizeInput.val($img.width()); // Điền kích thước logo vào ô input
$elements.sizeValueSpan.text(`${$img.width()}px`); // Hiển thị kích thước logo
}
function showBoxOptions() {
$elements.boxOptions.show();
$elements.textOptions.hide();
$elements.imageOptions.hide();
const $title = currentElement.find('.title');
$('#BackgroundColor').val(extractColor(currentElement, 'bg'));
$('#InputCodeBox').val(extractColor(currentElement, 'bg'));
$('#changeInputBox').val(extractColor(currentElement, 'bg'));
$elements.textContentInput.val($title.text().trim());
$elements.textColorInput.val(extractColor($title, 'text'));
$elements.textBackgroundInput.val(extractColor($title, 'bg'));
$elements.lineHeightInput.val(parseFloat($title.css('line-height')));
$('#fontSize').val(parseFloat($title.css('font-size')));
$('#fontFamily').val($title.css('font-family'));
$('#BgcolorCode').val(extractColor($title, 'bg'));
$('#colorCodeTitle').val(extractColor($title, 'text'));
$('#borderColorBox').val(extractColor(currentElement, 'border'))
}
function extractColor($element, type) {
// Tạo regex để tìm các lớp màu (chẳng hạn như text-[#FF5733])
const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
const match = $element.attr('class').match(regex);
return match ? match[1] : '#000000';
}
function formatText(command, value) {
let $title = '';
if (currentElement.data('type') === 'title' || currentElement.data('type') == 'box') {
$title = currentElement.find('.title');
} else {
$title = currentElement;
}
switch (command) {
case 'size':
$title.css('font-size', `${value}px`);
break;
case 'bold':
$title.toggleClass('font-bold');
break;
case 'italic':
$title.toggleClass('italic');
break;
case 'underline':
$title.toggleClass('underline');
break;
case 'line-through':
$title.toggleClass('line-through');
break;
case 'justifyLeft':
$title.removeClass('text-center text-right text-justify').addClass('text-left');
break;
case 'justifyCenter':
$title.removeClass('text-left text-right text-justify').addClass('text-center');
break;
case 'justifyRight':
$title.removeClass('text-left text-center text-justify').addClass('text-right');
break;
case 'justifyFull':
$title.removeClass('text-left text-center text-right').addClass('text-justify');
break;
}
// Tìm kiếm lớp màu trong các lớp của phần tử
const match = $element.attr('class').match(regex);
// Nếu tìm thấy lớp phù hợp, trả về màu sắc, nếu không trả về màu mặc định là #000000
return match ? match[1] : '#000000';
}
function updateColorPicker(event, type) {
@@ -272,51 +304,6 @@ function syncColorInputs(event, type) {
}
function updatePosition(event, action) {
$('.edit-position').removeClass('active')
$(event.target).addClass('active');
console.log(action)
if (action == 'left') {
currentElement.find('.title').css({ 'margin': 'auto auto auto 0', 'justify-content': 'start' });
} else if (action == 'center') {
currentElement.find('.title').css({ 'margin': '0 auto', 'justify-content': 'center' });
} else if (action == 'right') {
console.log('aaa', currentElement)
currentElement.find('.title').css({ 'margin': 'auto 0 auto auto', 'justify-content': 'end' });
}
}
function updateSizeBox(type, value) {
if (type == 'width') {
currentElement.find('.title').css('width', value + 'px')
} else if (type == 'height') {
currentElement.find('.title').css('height', value + 'px')
}
}
function updateBoderRadius(type, key, value) {
let element = '';
if (key == 'background') {
element = currentElement;
} else if (key == 'text') {
element = currentElement.find('.title');
}
if (type == 'top-left') {
element.css('border-top-left-radius', value + 'px');
} else if (type == 'top-right') {
element.css('border-top-right-radius', value + 'px');
} else if (type == 'bottom-left') {
element.css('border-bottom-left-radius', value + 'px');
} else if (type == 'bottom-right') {
element.css('border-bottom-right-radius', value + 'px');
}
}
function updateBorder(type, key, value) {
let element = '';
if (key == 'background') {
@@ -335,31 +322,8 @@ function updateBorder(type, key, value) {
}
function saveCurrentState() {
// Lưu HTML hiện tại của giao diện
const currentHTML = document.documentElement.innerHTML;
// Nếu không ở cuối mảng (khi đã dùng nút back hoặc forward), loại bỏ các trạng thái phía sau
if (currentStateIndex < historyStates.length - 1) {
historyStates = historyStates.slice(0, currentStateIndex + 1);
}
// Lưu trạng thái mới và cập nhật chỉ số trạng thái hiện tại
historyStates.push(currentHTML);
currentStateIndex++;
}
function goBack() {
if (currentStateIndex > 0) {
currentStateIndex--;
document.documentElement.innerHTML = historyStates[currentStateIndex];
}
}
function goForward() {
if (currentStateIndex < historyStates.length - 1) {
currentStateIndex++;
document.documentElement.innerHTML = historyStates[currentStateIndex];
}
}
// hủy chỉnh sửa
function cancelEdit() {
$elements.tabBar.hide();
}