diff --git a/assets/css/style-global.css b/assets/css/style-global.css
index 4cfb0c1..e587f2d 100644
--- a/assets/css/style-global.css
+++ b/assets/css/style-global.css
@@ -707,6 +707,20 @@ table {
background-color: #218838;
}
+.cancel-button {
+ background-color: rgba(255, 0, 0, 0.951);
+ color: white;
+ padding: 5px 10px;
+ border-radius: 3px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ margin-left: 10px;
+}
+
+.cancel-button:hover {
+ background-color: rgba(255, 0, 0, 0.951);
+}
+
.edit-position.active {
border: 1px solid #2578e7;
background: #2578e7;
diff --git a/assets/js/edit.js b/assets/js/edit.js
index 664e916..77cbe78 100644
--- a/assets/js/edit.js
+++ b/assets/js/edit.js
@@ -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 ? ' Thoát chỉnh sửa' : ' 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 ? ' 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
+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();
+}
\ No newline at end of file