auction_program/assets/js/edit.js

"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ề.