From 253958c7b8a2e7f4c662854728c257204a6289e9 Mon Sep 17 00:00:00 2001 From: Tieptk Date: Wed, 13 Nov 2024 15:55:05 +0700 Subject: [PATCH] up --- assets/css/style-global.css | 14 ++ assets/js/edit.js | 458 +++++++++++++++++------------------- 2 files changed, 225 insertions(+), 247 deletions(-) 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