up

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;

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 () {
-
+    $(".mode-edit").toggleClass('fixed', $(window).scrollTop() > 100);
-    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 ? '<i class="fas fa-sign-out-alt"></i> Thoát chỉnh sửa' : '<i class="far fa-edit"></i> Chỉnh sửa');
-    $tabBar.hide();
 });
 
-$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 ? '<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 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') {
+    } else if (elementType === 'background') {
-        updateBgStyles()
+        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');
+    const $title = currentElement.find('.title');
-    $title.text($textContentInput.val());
+    $title.text($elements.textContentInput.val());
-    updateClass($title, 'text', $textColorInput.val());
+    updateElementColor('text', $elements.textColorInput.val());
-    updateClass($title, 'bg', $textBackgroundInput.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());
+    updateElementColor('bg', $elements.textBackgroundInput.val());
-    updateClass(currentElement, 'bg', $('#InputCodeBg').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) {
+function showTextOptions($title) {
-    if (!currentElement) return;
+    $elements.textOptions.show();  // Hiển thị các tùy chọn văn bản
-    updateClass(currentElement.find('h2'), 'text', color);
+    $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;
+function showBgOptions() {
-    updateClass(currentElement.find('h2'), 'bg', color);
+    $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}]`;
+function showImageOptions() {
-    const regex = new RegExp(`^${type}-\\[#[0-9A-Fa-f]{3,6}\\]$`);
+    $elements.textOptions.hide();  // Ẩn các tùy chọn văn bản
-    $element.attr('class', function (i, c) {
+    $elements.boxOptions.hide();   // Ẩn các tùy chọn hộp
-        return c.split(' ').filter(cls => !regex.test(cls)).concat(className).join(' ');
+    $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) {
+    // Tìm kiếm lớp màu trong các lớp của phần tử
-    let $title = '';
+    const match = $element.attr('class').match(regex);
-    if (currentElement.data('type') === 'title' || currentElement.data('type') == 'box') {
+
-        $title = currentElement.find('.title');
+    // 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
-    } else {
+    return match ? match[1] : '#000000';
-        $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;
-    }
 }
 
 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
+// hủy chỉnh sửa
-    if (currentStateIndex < historyStates.length - 1) {
+function cancelEdit() {
-        historyStates = historyStates.slice(0, currentStateIndex + 1);
+    $elements.tabBar.hide();
-    }
+}
-
-    // 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];
-    }
-}