+ 
+ 
-
Quý khách vui lòng làm theo các
bước sau đây.
@@ -648,9 +540,7 @@ ml-[32px]">
100);
});
-
-// Chuyển đổi chế độ chỉnh sửa
+/**
+ * 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 ? ' Thoát chỉnh sửa' : ' 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
+/**
+ * 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;
+ 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ử
+/**
+ * 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');
- const $title = currentElement.find('.title');
-
if (elementType === 'box') {
showBoxOptions();
- } else if (elementType === 'title') {
- showTextOptions($title);
- } else if (elementType === 'background') {
+ }
+ else if (elementType === 'title') {
+ showTextOptions(currentElement.find('.title'));
+ }
+ else if (elementType === 'background') {
showBgOptions();
- } else if (elementType === 'image') {
+ }
+ 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();
- reader.onload = function () {
- currentElement.find('img').attr('src', reader.result);
- };
- reader.readAsDataURL(file);
-}
-
-// Áp dụng các thay đổi
-function applyChanges() {
- if (!currentElement) return;
- const elementType = currentElement.data('type');
-
- if (elementType === 'title') {
- updateTextStyles();
- } else if (elementType === 'image') {
- updateImage();
- } else if (elementType === 'background') {
- updateBgStyles();
- }
-
- 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('.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', $elements.imageURLInput.val() || $img.attr('src'));
-}
-
-// Cập nhật background
-function updateBgStyles() {
- 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];
- }
-}
-
-
+// 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) {
- $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 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 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();
+ // 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();
- const $title = currentElement.find('.title');
- $('#BackgroundColor').val(extractColor(currentElement, 'bg'));
- $('#InputCodeBox').val(extractColor(currentElement, 'bg'));
- $('#changeInputBox').val(extractColor(currentElement, 'bg'));
+ $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'));
- var a = $('#BgcolorCode').val(extractColor($title, 'bg'));
- console.log(a)
+ $('#BgcolorCode').val(extractColor($title, 'bg'));
$('#colorCodeTitle').val(extractColor($title, 'text'));
- $('#borderColorBox').val(extractColor(currentElement, 'border'))
}
-
-
+/**
+ * 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) {
- // Tạo regex để tìm các lớp màu (chẳng hạn như text-[#FF5733])
+ var _a;
const regex = new RegExp(`${type}-\\[([#0-9A-Fa-f]+)\\]`);
-
- // 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
+ const match = (_a = $element.attr('class')) === null || _a === void 0 ? void 0 : _a.match(regex);
return match ? match[1] : '#000000';
}
-
-function updateColorPicker(event, type) {
- const textColor = $("#textColor");
- const textCodeColor = $("#colorCodeTitle");
- const BgColor = $("#textBackground");
- let element = '';
- if (currentElement.data('type') === 'title') {
- element = currentElement.find('.title');
-
- } else {
- element = currentElement;
- }
-
- if (type === 'text') {
- const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test(textCodeColor.val());
- if (isValidHex) {
- textColor.val(textCodeColor.val());
- element.css('color', textCodeColor.val());
- }
- } else if (type === 'background') {
- const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val());
- if (isValidHex) {
- BgColor.val($(event.target).val());
- element.css('background', $(event.target).val());
- }
- } else if (type === 'box') {
- const isValidHex = /^#([0-9A-F]{3}){1,2}$/i.test($(event.target).val());
- if (isValidHex) {
- BgColor.val($(event.target).val());
- element.find('.title').css('background', $(event.target).val());
- }
+/**
+ * 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++;
}
-
-function syncColorInputs(event, type) {
- const inputColorText = $('#colorCodeTitle');
- let inputBg = '';
- let Bg = '';
- if (currentElement.data('type') === 'title' || currentElement.data('type') === 'box') {
- inputBg = $('#BgcolorCode');
- bg = $(currentElement).find('.title');
- } else {
- inputBg = $('#InputCodeBg');
- bg = $(currentElement);
- }
-
- if (type == 'text' || currentElement.data('type') === 'box') {
- inputColorText.val($(event.target).val());
- } else {
- inputBg.val($(event.target).val());
- bg.css('background', $(event.target).val());
- }
-
-}
-
-function updateBorder(type, key, value) {
- let element = '';
- if (key == 'background') {
- element = currentElement;
- } else if (key == 'text') {
- element = currentElement.find('.title');
- }
-
- if (type == 'border-width') {
- element.css('border-width', value + 'px');
- } else if (type == 'border-color') {
- element.css('border-color', value);
- } else if (type == 'border-style') {
- element.css('border-style', value);
- }
-}
-
-
-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 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;
- }
-}
-
-// hủy chỉnh sửa
-function cancelEdit() {
- $elements.tabBar.hide();
-}
\ No newline at end of file
+// (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ề.
diff --git a/assets/js/edit.ts b/assets/js/edit.ts
new file mode 100644
index 0000000..d80ebf1
--- /dev/null
+++ b/assets/js/edit.ts
@@ -0,0 +1,240 @@
+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 | 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;
+ tabBar: JQuery;
+ textOptions: JQuery;
+ imageOptions: JQuery;
+ boxOptions: JQuery;
+ bgOptions: JQuery;
+ textColorInput: JQuery;
+ textBackgroundInput: JQuery;
+ textContentInput: JQuery;
+ imageURLInput: JQuery;
+ imageUploadInput: JQuery;
+ logoSizeInput: JQuery;
+ sizeValueSpan: JQuery;
+ lineHeightInput: JQuery;
+}
+
+// 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 ? ' Thoát chỉnh sửa' : ' 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): 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, 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): 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
+ const $title: JQuery = 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') ?? '');
+}
+
diff --git a/detail-auction-1.html b/detail-auction-1.html
new file mode 100644
index 0000000..3a9552b
--- /dev/null
+++ b/detail-auction-1.html
@@ -0,0 +1,383 @@
+
+
+
+
+
+
+ Đấu giá
+
+
+
+
+
+
+
+ Đấu giá
+
+
+
+
+
+
+
+ Đấu giá
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ Laptop Acer Aspire 7 A715-76-53PJ
+ NH.QGESV.007 (Intel
+ Core
+ i5-12450H | Đen)
+
+
+
+
+
+ 125.000.000
+ VNĐ
+
+
+
+
+ Diễn biến đấu giá
+
+
+
+
+
+
+
+
+
+
+ 1
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+
+ 
+
+
+ Thời gian còn lại +
+
+
+
+
+
+
+
+ 00
+ 30
+ 00
+
+
+ 200
+
+
+
+ Chọn đấu ngay
+ +
+ Hoặc
+
+
+
+ Nhập giá đấu của
+ bạn
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/detail-auction-2.html b/detail-auction-2.html
new file mode 100644
index 0000000..2444638
--- /dev/null
+++ b/detail-auction-2.html
@@ -0,0 +1,243 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Câu + hỏi + thường gặp +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ Chính sách giao hàng
+
+ Nhận hàng & thanh toán tại nhà
+
+
+
+ 
+
+
+
+ Đổi mới 15 ngày đầu
+
+ Áp dụng với sản phẩm laptop
+
+
+
+ 
+
+
+
+ Thanh toán tiện lợi
+
+ Trả tiền mặt, CK, trả góp 0%
+
+
+
+ 
+
+
+
+ Hỗ trợ nhiệt tình
+
+ Tư vấn, giải pháp mọi thắc mắc
+
+ 
+
+
+
+ Công ty cổ phần thương mại máy tính an phát
+
+
+ Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày + 11/10/2019
+Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành + phố Hà nội, Việt + Nam
+Điện thoại: 19000323 Email: Giang@anphat.com.vn
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/detail-auction.html b/detail-auction.html
new file mode 100644
index 0000000..3515f0b
--- /dev/null
+++ b/detail-auction.html
@@ -0,0 +1,379 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Laptop Acer Aspire 7 A715-76-53PJ
+ NH.QGESV.007 (Intel
+ Core
+ i5-12450H | Đen)
+
+
+
+
+
+ 125.000.000
+ VNĐ
+
+
+
+
+
+
+ Thời gian còn lại +
+
+
+
+
+
+
+
+ 00
+ 30
+ 00
+
+
+ 200
+
+
+
+ Nhập giá đấu của
+ bạn
+
+
+
+
+ Diễn biến đấu giá
+
+
+ Chọn đấu ngay
+ +
+
+
+
+
+
+
+
+
+ 1
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Laptop Acer Aspire 7 A715-76-53PJ
+ NH.QGESV.007 (Intel
+ Core
+ i5-12450H | Đen)
+
+
+
+
+
+ 125.000.000
+ VNĐ
+
+
+
+
+ Diễn biến đấu giá
+
+
+ Chọn đấu ngay
+ +
+
+
+
+
+
+
+
+
+ 1
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+ 2
+
+ 00:30:11
+
+
+
+
+
+
+
+
+
+ Thời gian còn lại +
+
+
+
+
+
+
+
+ 00
+ 30
+ 00
+
+
+ 200
+
+
+
+ Nhập giá đấu của
+ bạn
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/detail.html b/detail.html
index 8da0be9..3b0d3d6 100644
--- a/detail.html
+++ b/detail.html
@@ -178,170 +178,98 @@ ml-[32px]">
Tham gia đấu giá
-
-
+
+
+
+
+
+ Câu + hỏi + thường gặp +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Chính sách giao hàng
+
+ Nhận hàng & thanh toán tại nhà
+
+
+
+
+
+
+
+ Đổi mới 15 ngày đầu
+
+ Áp dụng với sản phẩm laptop
+
+
+
+
+
+
+
+ Thanh toán tiện lợi
+
+ Trả tiền mặt, CK, trả góp 0%
+
+
+
+
+
+
+
+ Hỗ trợ nhiệt tình
+
+ Tư vấn, giải pháp mọi thắc mắc
+
+
+
+
+
+ Công ty cổ phần thương mại máy tính an phát
+
+
+ Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày + 11/10/2019
+Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành + phố Hà nội, Việt + Nam
+Điện thoại: 19000323 Email: Giang@anphat.com.vn
+
+
+
-
-
-
-
- 125.000.000
- VNĐ
-
-
-
-
-
-
-
-
-
- 1
-
- 00:30:11
-
-
-
-
-
- 2
-
- 00:30:11
-
-
-
-
-
- 2
-
- 00:30:11
-
-
-
-
-
- 2
-
- 00:30:11
-
-
-
-
-
- 2
-
- 00:30:11
-
-
-
-
-
- 2
-
- 00:30:11
-
-
- Nhập giá đấu của
- bạn
-
-
- Chọn nhanh gợi ý -
-
-
- 125.3 tr
-
-
- 125.6 tr
-
-
- 125.9 tr
-
-
- 126 tr
-
-
- 126 tr
-
-
- 126 tr
-
-
- 126 tr
-
-
- 126 tr
-
-
- 126 tr
-
-
- 126 tr
-
-
- 126 tr
-
-
-
-
-
-
-
-
-
-
+
+
+ Thông + tin sản + phẩm
+
+ Trọn vẹn hiệu năng
+ và thiết kế đẳng cấp
+ cùng
+
+ Xem
+ thêm mô tả
+
+
+ Trọn vẹn hiệu năng
+ và thiết kế đẳng cấp
+ cùng
Laptop Acer Aspire 7 2023 A715-76G-59MW!
+ Nếu bạn đam mê chơi game và đang tìm kiếm một chiếc laptop + mạnh mẽ, thời thượng để + thỏa mãn niềm đam mê, thì đừng bỏ qua Acer Aspire 7 2023 + A715-76G-59MW - một sản phẩm thuộc + dòng gaming đẳng cấp từ nhà Acer, hứa hẹn mang đến cho bạn sự hài lòng tối đa trong + phân khúc này. Với gam màu + đen sang trọng, máy có trọng lượng nhẹ khoảng 2,1kg, thuận tiện di chuyển đến bất kỳ + nơi nào bạn muốn. +
+
Hãy cùng khám phá những đặc điểm nổi bật của Acer + Aspire 7 2023 A715-76G-59MW + (NH.QMYSV.001) để hiểu tại sao nó là lựa chọn hoàn hảo cho bạn: +
+Thiết kế tinh + tế và kích thước vừa + vặn
+Acer Aspire 7 2023 A715-76G-59MW được + thiết kế với phong cách trung + tính, tinh tế, thích hợp cho học tập và công việc, nhưng không hề giảm đi sức mạnh + của một laptop gaming. Với bộ + vi xử lý Intel® Core™ thế hệ 12 và card đồ họa rời GeForce RTX 2050, màn hình IPS + FHD 144Hz và hai quạt tản + nhiệt, laptop mang đến khả năng làm mát tốt nhất trong phân khúc phổ thông. +
+
Màn hình chất lượng + cao
+Chiếc laptop này trang bị màn hình lớn 15.6 inch với viền + siêu mỏng, mang lại trải + nghiệm hình ảnh tuyệt vời khi xem phim và chơi game. Độ phân giải Full HD + (1920x1080), tần số quét 144Hz cùng + màn hình IPS giúp hình ảnh sắc nét, sống động, và hạn chế ánh sáng xanh gây mỏi + mắt.
+Hiệu năng mạnh + mẽ
+Với bộ xử lý Intel Core i5-12450H, laptop mang đến hiệu + năng vượt trội và cảm giác + trải nghiệm mượt mà, không giật lag. RAM 8GB DDR4 3200MHz cho phép đa nhiệm mượt mà + và dễ dàng nâng cấp lên đến + 32GB. Ổ cứng SSD 512GB NVMe PCIe giúp khởi động và mở ứng dụng nhanh chóng. +
+
Bàn phím và + Touchpad tiện ích
+Bàn phím Full Size với cụm phím số giúp bạn dễ dàng làm + việc và gõ phím. Touchpad lướt + khá nhạy và êm, tạo cảm giác thoải mái khi sử dụng.
+Chuẩn kết nối đa + dạng
+Acer Aspire 7 2023 A715-76G-59MW được + trang bị đầy đủ các cổng kết + nối, đáp ứng mọi nhu cầu công việc, học tập và giải trí của bạn.
+Chinh phục thế giới gaming và trải nghiệm công việc hiệu + quả cùng Laptop Acer + Aspire 7 2023 A715-76G-59MW! Hãy đến An Phát Computer ngay + hôm nay để sở hữu sản phẩm này + và khám phá thế giới ảo tuyệt vời với độ trơn mượt và hiệu năng đỉnh cao!
+
@@ -557,49 +485,13 @@ ml-[32px]">
-
-
-
-
-
-
+
+
+
+
Các phiên đấu giá trước
@@ -664,7 +554,7 @@ ml-[32px]">
class="item-tab w-[calc(100%_/_3_-5px)] mr-[5px] text-center text-[14px] text-white h-[34px] leading-[34px]">30
ngày
- | Tên người thắng | Giác thắng cuộc | @@ -787,6 +677,688 @@ ml-[32px]">
|---|
+
+
+
+
+ Thông số kỹ thuật
+
+
+
+
+
+
+
+ Xem
+ thêm thông số kỹ thuật
+ | Hãng sản xuất | ++ Laptop + Acer + | +
| Tên sản phẩm + | ++ Laptop Gaming Acer Aspire 7 A715 76G 59MW - + NH.QMYSV.001 + | +
| Dòng + Laptop | ++ Laptop | Laptop + Gaming | Laptop + Acer Aspire | Laptop Đồ Họa + | +
|
+ Bộ vi xử lý + |
+ |
|
+ Công + nghệ CPU + |
+
+ Intel + Core i5-12450H + + |
+
|
+ Số + nhân + |
+ + 8 + | +
|
+ Số + luồng + |
+
+ 12 + + |
+
|
+ Tốc + độ CPU + |
+ + 3.3GHz + | +
|
+ Tốc + độ tối đa + |
+ + 4.4GHz + | +
|
+ Bộ + nhớ + đệm + |
+
+
+
+ 12MB
+
+ |
+
|
+ Bộ nhớ trong + (RAM) + + |
+ |
|
+ RAM + + |
+
+ 8GB + khe rời + |
+
|
+ Loại + RAM + |
+
+ DDR4 + + |
+
|
+ Tốc + độ Bus RAM + |
+ + 3200Mhz + | +
|
+ Số + khe cắm + |
+ + 2 + khe + | +
|
+ Hỗ + trợ RAM tối đa + |
+ + Nâng + cấp + tối đa 32GB + | +
|
+ Ổ cứng + + |
+ |
|
+ Dung + lượng + |
+
+ 512GB + PCIe NVMe SSD cắm + sẵn + |
+
|
+ Tốc + độ vòng + quay + |
+
+ + + |
+
|
+ Khe cắm SSD mở + rộng + + |
+
+ 2 + slot, support M.2 2280 + PCIe 4.0x4 + |
+
|
+ Ổ đĩa quang + (ODD) + |
+
+ Không + có + |
+
|
+ Màn + hình + |
+ |
|
+ Kích + thước màn + hình + |
+
+ 15.6 + inch + |
+
|
+ Độ + phân + giải + |
+
+ FHD(1920 + x + 1080) + |
+
|
+ Tần + số + quét + |
+ + 144Hz + | +
|
+ Công + nghệ màn + hình + |
+ + IPS, + 144Hz, Slim Bezel, + Acer ComfyView™ + | +
|
+ Đồ Họa + (VGA) + + |
+ |
|
+ Card + màn + hình + |
+
+ NVIDIA® + GeForce RTX™ 2050 + 4GB GDDR6 + Intel UHD Graphics + |
+
|
+ Kết nối + (Network) + |
+ |
|
+ Wireless + + |
+
+ 802.11 + a/b/g/n/ac/ax + wireless LAN + |
+
|
+ LAN + + |
+
+ 1 + x + Ethernet (RJ-45) + port + |
+
|
+ Bluetooth + + |
+
+ Bluetooth® 5.2 + + |
+
|
+ Bàn phím , + Chuột + |
+ |
|
+ Kiểu + bàn + phím + |
+
+ + + |
+
|
+ Chuột + + |
+
+ Cảm + ứng đa + điểm + |
+
|
+ Giao tiếp mở + rộng + |
+ |
|
+ Kết + nối + USB + |
+
+
+
+
+ |
+
|
+ Kết + nối + HDMI/VGA + |
+
+ 1xHDMI® + 2.0 port with HDCP + support + |
+
|
+ Tai + nghe + |
+
+ 1x3.5
+ mm
+ headphone/speaker jack, supporting headsets with
+ built-in |
+
|
+ Camera + + |
+
+ Video
+ conferencing |
+
|
+ Card + mở + rộng + |
+
+ - + + |
+
|
+ LOA + |
+
+ 2 + Loa + + |
+
|
+ Kiểu Pin + |
+
+ 3-cell, + 50Wh + |
+
|
+ Sạc pin + |
+
+ Đi + kèm + + |
+
|
+ Hệ điều hành (bản quyền) đi + kèm + + |
+
+ Windows + 11 Home + |
+
|
+ Kích thước (Dài x Rộng x + Cao) + |
+
+
+
+ 362.3
+ (W) x 237.4 (D) x
+ 19.9 (H) mm
+ |
+
|
+ Trọng Lượng + |
+
+ 2.1kg + |
+
|
+ Màu sắc + |
+
+ Đen + + |
+
|
+ Xuất Xứ + |
+
+ Trung + Quốc + |
+