241 lines
10 KiB
TypeScript
241 lines
10 KiB
TypeScript
|
import $ from 'jquery';
|
||
|
|
|
||
|
|
|
||
|
|
// 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: string[] = []; // Lưu trữ lịch sử HTML của trang
|
||
|
|
let currentStateIndex: number = -1; // Chỉ số trạng thái hiện tại trong lịch sử
|
||
|
|
let currentElement: JQuery<HTMLElement> | null = null; // Phần tử hiện đang chỉnh sửa
|
||
|
|
let isEditMode: boolean = false; // Xác định chế độ chỉnh sửa có được bật không
|
||
|
|
|
||
|
|
|
||
|
|
// Định nghĩa kiểu dữ liệu cho phần tử giao diện
|
||
|
|
interface Elements {
|
||
|
|
toggleEditModeButton: JQuery<HTMLElement>;
|
||
|
|
tabBar: JQuery<HTMLElement>;
|
||
|
|
textOptions: JQuery<HTMLElement>;
|
||
|
|
imageOptions: JQuery<HTMLElement>;
|
||
|
|
boxOptions: JQuery<HTMLElement>;
|
||
|
|
bgOptions: JQuery<HTMLElement>;
|
||
|
|
textColorInput: JQuery<HTMLInputElement>;
|
||
|
|
textBackgroundInput: JQuery<HTMLInputElement>;
|
||
|
|
textContentInput: JQuery<HTMLInputElement>;
|
||
|
|
imageURLInput: JQuery<HTMLInputElement>;
|
||
|
|
imageUploadInput: JQuery<HTMLInputElement>;
|
||
|
|
logoSizeInput: JQuery<HTMLInputElement>;
|
||
|
|
sizeValueSpan: JQuery<HTMLElement>;
|
||
|
|
lineHeightInput: JQuery<HTMLInputElement>;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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: 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((): void => {
|
||
|
|
const scrollTop: number = $(window).scrollTop() ?? 0;
|
||
|
|
$(".mode-edit").toggleClass('fixed', 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: 'text' | 'bg', color: string): void {
|
||
|
|
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: JQuery.ChangeEvent): void {
|
||
|
|
const file = (event.target as HTMLInputElement).files?.[0];
|
||
|
|
if (!file) return;
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = function () {
|
||
|
|
currentElement?.find('img').attr('src', reader.result as string);
|
||
|
|
};
|
||
|
|
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: JQuery.ClickEvent, button: HTMLElement): void {
|
||
|
|
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(): void {
|
||
|
|
if (!currentElement) return;
|
||
|
|
const elementType = currentElement.data('type') as string;
|
||
|
|
if (elementType === 'box') {
|
||
|
|
showBoxOptions(currentElement);
|
||
|
|
} 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: JQuery<HTMLElement>): void {
|
||
|
|
// 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: JQuery<HTMLElement>, type: 'text' | 'bg'): string {
|
||
|
|
const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
|
||
|
|
const match = $element.attr('class')?.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(): void {
|
||
|
|
const currentHTML = document.documentElement.innerHTML;
|
||
|
|
if (currentStateIndex < historyStates.length - 1) {
|
||
|
|
historyStates = historyStates.slice(0, currentStateIndex + 1);
|
||
|
|
}
|
||
|
|
historyStates.push(currentHTML);
|
||
|
|
currentStateIndex++;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// hàm xử lý chỉnh sửa box
|
||
|
|
function showBoxOptions(currentElement: JQuery<HTMLElement>): void {
|
||
|
|
// Đảm bảo $elements có kiểu chính xác
|
||
|
|
// .show() và .hide() trả về đối tượng jQuery, nên không cần lưu giá trị trả về
|
||
|
|
$elements.boxOptions.show();
|
||
|
|
$elements.textOptions.hide();
|
||
|
|
$elements.imageOptions.hide();
|
||
|
|
|
||
|
|
// Lấy phần tử có class 'title' từ currentElement, với kiểu JQuery<HTMLElement>
|
||
|
|
const $title: JQuery<HTMLElement> = currentElement.find('.title');
|
||
|
|
|
||
|
|
// Sử dụng phương thức extractColor để lấy màu nền, và gán giá trị vào các input
|
||
|
|
// Giả sử extractColor trả về kiểu string hoặc null
|
||
|
|
$('#BackgroundColor').val(extractColor(currentElement, 'bg') ?? ''); // Gán giá trị mặc định nếu null
|
||
|
|
$('#InputCodeBox').val(extractColor(currentElement, 'bg') ?? '');
|
||
|
|
$('#changeInputBox').val(extractColor(currentElement, 'bg') ?? '');
|
||
|
|
|
||
|
|
// Lấy và gán giá trị text của title vào input textContentInput
|
||
|
|
// .text() trả về string
|
||
|
|
$elements.textContentInput.val($title.text().trim());
|
||
|
|
|
||
|
|
// Lấy màu sắc văn bản từ title và gán vào các input tương ứng
|
||
|
|
$elements.textColorInput.val(extractColor($title, 'text') ?? '');
|
||
|
|
$elements.textBackgroundInput.val(extractColor($title, 'bg') ?? '');
|
||
|
|
|
||
|
|
// Lấy chiều cao dòng (line-height) của title, và ép kiểu sang float
|
||
|
|
$elements.lineHeightInput.val(parseFloat($title.css('line-height') ?? '0'));
|
||
|
|
|
||
|
|
// Lấy kích thước font của title, ép kiểu sang float
|
||
|
|
$('#fontSize').val(parseFloat($title.css('font-size') ?? '0'));
|
||
|
|
|
||
|
|
// Lấy font-family của title và gán vào input fontFamily
|
||
|
|
$('#fontFamily').val($title.css('font-family') ?? '');
|
||
|
|
|
||
|
|
// Gán màu nền của title vào input BgcolorCode
|
||
|
|
const a: string | undefined = $('#BgcolorCode').val(extractColor($title, 'bg') ?? '') as string;
|
||
|
|
console.log(a); // In ra giá trị lấy từ extractColor
|
||
|
|
|
||
|
|
// Gán màu sắc của title vào input colorCodeTitle
|
||
|
|
$('#colorCodeTitle').val(extractColor($title, 'text') ?? '');
|
||
|
|
|
||
|
|
// Gán màu biên của currentElement vào input borderColorBox
|
||
|
|
$('#borderColorBox').val(extractColor(currentElement, 'border') ?? '');
|
||
|
|
}
|
||
|
|
|