159 lines
7.4 KiB
JavaScript
159 lines
7.4 KiB
JavaScript
"use strict";
|
|
// Khai báo các biến trạng thái chính để quản lý lịch sử các trạng thái giao diện
|
|
let historyStates = []; // Lưu trữ lịch sử HTML của trang
|
|
let currentStateIndex = -1; // Chỉ số trạng thái hiện tại trong lịch sử
|
|
let currentElement = null; // Phần tử hiện đang chỉnh sửa
|
|
let isEditMode = false; // Xác định chế độ chỉnh sửa có được bật không
|
|
// Các phần tử giao diện được chọn từ DOM, chứa các thành phần tương tác trong giao diện chỉnh sửa
|
|
const $elements = {
|
|
// Nút để bật hoặc tắt chế độ chỉnh sửa
|
|
toggleEditModeButton: $('#toggleEditMode'),
|
|
// Thanh công cụ hiển thị các tùy chọn khi chỉnh sửa phần tử
|
|
tabBar: $('#tabBar'),
|
|
// Phần tùy chọn cho chỉnh sửa văn bản, bao gồm các thiết lập màu, nội dung và khoảng cách dòng
|
|
textOptions: $('#textOptions'),
|
|
// Phần tùy chọn cho chỉnh sửa ảnh, bao gồm URL ảnh và kích thước
|
|
imageOptions: $('#imageOptions'),
|
|
// Phần tùy chọn cho chỉnh sửa hộp (box), có thể dùng để thay đổi kích thước hoặc màu nền
|
|
boxOptions: $('#BoxOptions'),
|
|
// Phần tùy chọn cho chỉnh sửa nền, cho phép thiết lập màu nền
|
|
bgOptions: $('#bgOptions'),
|
|
// Trường nhập liệu cho màu chữ, cho phép người dùng chọn màu chữ của tiêu đề hoặc văn bản
|
|
textColorInput: $('#textColor'),
|
|
// Trường nhập liệu cho màu nền của văn bản, cho phép người dùng thay đổi màu nền của tiêu đề
|
|
textBackgroundInput: $('#textBackground'),
|
|
// Trường nhập liệu cho nội dung văn bản, dùng để chỉnh sửa nội dung của tiêu đề
|
|
textContentInput: $('#textContent'),
|
|
// Trường nhập liệu URL của ảnh, cho phép người dùng nhập URL để thay đổi ảnh
|
|
imageURLInput: $('#imageURL'),
|
|
// Trường tải lên ảnh, cho phép người dùng tải ảnh trực tiếp từ máy tính
|
|
imageUploadInput: $('#imageUpload'),
|
|
// Trường nhập liệu cho kích thước logo, dùng để điều chỉnh kích thước ảnh hoặc logo
|
|
logoSizeInput: $('#logoSize'),
|
|
// Hiển thị giá trị kích thước hiện tại của ảnh, được cập nhật khi thay đổi kích thước logo
|
|
sizeValueSpan: $('#sizeValue'),
|
|
// Trường nhập liệu khoảng cách dòng, giúp người dùng điều chỉnh khoảng cách dòng của văn bản
|
|
lineHeightInput: $('#lineHeight')
|
|
};
|
|
// Lắng nghe sự kiện scroll để chuyển chế độ cố định cho thanh công cụ khi cuộn xuống
|
|
$(window).scroll(function () {
|
|
$(".mode-edit").toggleClass('fixed', $(window).scrollTop() > 100);
|
|
});
|
|
/**
|
|
* Bật/tắt chế độ chỉnh sửa.
|
|
* Khi bật, các phần tử sẽ có thể chỉnh sửa, và ngược lại.
|
|
*/
|
|
$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 của phần tử hiện tại.
|
|
* @param type - Loại màu sắc cần thay đổi ('text' hoặc 'bg').
|
|
* @param color - Mã màu cần áp dụng 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 ? c.split(' ').filter(cls => !cls.startsWith(type)).concat(className).join(' ') : className;
|
|
});
|
|
}
|
|
/**
|
|
* Xử lý tải ảnh lên và gán ảnh mới cho phần tử.
|
|
* @param event - Sự kiện thay đổi từ ô tải ảnh lên.
|
|
*/
|
|
function handleImageUpload(event) {
|
|
var _a;
|
|
const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
|
|
if (!file)
|
|
return;
|
|
const reader = new FileReader();
|
|
reader.onload = function () {
|
|
currentElement === null || currentElement === void 0 ? void 0 : currentElement.find('img').attr('src', reader.result);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
/**
|
|
* Bắt đầu chế độ chỉnh sửa cho phần tử được chọn.
|
|
* @param event - Sự kiện click để bắt đầu chỉnh sửa.
|
|
* @param button - Nút bấm để kích hoạt chỉnh sửa phần tử.
|
|
*/
|
|
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 phần tử đang chỉnh sửa dựa trên loại của nó.
|
|
*/
|
|
function setupOptions() {
|
|
if (!currentElement)
|
|
return;
|
|
const elementType = currentElement.data('type');
|
|
if (elementType === 'box') {
|
|
showBoxOptions();
|
|
}
|
|
else if (elementType === 'title') {
|
|
showTextOptions(currentElement.find('.title'));
|
|
}
|
|
else if (elementType === 'background') {
|
|
showBgOptions();
|
|
}
|
|
else if (elementType === 'image') {
|
|
showImageOptions();
|
|
}
|
|
}
|
|
// Các hàm hiển thị và xử lý tùy chọn (showTextOptions, showBgOptions, showImageOptions, showBoxOptions)
|
|
// Thêm vào TypeScript, định nghĩa tham số và chú thích
|
|
/**
|
|
* Hiển thị các tùy chọn văn bản cho phần tử tiêu đề.
|
|
* @param $title - Phần tử tiêu đề hiện tại.
|
|
*/
|
|
function showTextOptions($title) {
|
|
// Hiển thị các tùy chọn và thiết lập giá trị hiện tại cho ô input
|
|
$elements.textOptions.show();
|
|
$elements.boxOptions.hide();
|
|
$elements.imageOptions.hide();
|
|
$elements.bgOptions.hide();
|
|
$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'));
|
|
}
|
|
/**
|
|
* Trích xuất mã màu từ lớp CSS của phần tử.
|
|
* @param $element - Phần tử để lấy mã màu.
|
|
* @param type - Loại mã màu ('text' hoặc 'bg').
|
|
* @returns Mã màu đã được trích xuất hoặc '#000000' nếu không có.
|
|
*/
|
|
function extractColor($element, type) {
|
|
var _a;
|
|
const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
|
|
const match = (_a = $element.attr('class')) === null || _a === void 0 ? void 0 : _a.match(regex);
|
|
return match ? match[1] : '#000000';
|
|
}
|
|
/**
|
|
* Lưu trạng thái hiện tại vào lịch sử trạng thái.
|
|
*/
|
|
function saveCurrentState() {
|
|
const currentHTML = document.documentElement.innerHTML;
|
|
if (currentStateIndex < historyStates.length - 1) {
|
|
historyStates = historyStates.slice(0, currentStateIndex + 1);
|
|
}
|
|
historyStates.push(currentHTML);
|
|
currentStateIndex++;
|
|
}
|
|
// (Các hàm khác tương tự như goBack, applyChanges, updateLineHeight, ...)
|
|
// Đảm bảo mỗi hàm có chú thích chi tiết về chức năng, tham số và kiểu trả về.
|