diff --git a/assets/js/edit.js b/assets/js/edit.js index 77cbe78..859a77d 100644 --- a/assets/js/edit.js +++ b/assets/js/edit.js @@ -235,7 +235,8 @@ function showBoxOptions() { $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')); + var a = $('#BgcolorCode').val(extractColor($title, 'bg')); + console.log(a) $('#colorCodeTitle').val(extractColor($title, 'text')); $('#borderColorBox').val(extractColor(currentElement, 'border')) } @@ -269,16 +270,18 @@ function updateColorPicker(event, type) { if (isValidHex) { textColor.val(textCodeColor.val()); element.css('color', textCodeColor.val()); - } else { - alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733)."); } } 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 { - alert("Vui lòng nhập mã màu hợp lệ (ví dụ: #FF5733)."); + } + } 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()); } } } @@ -287,7 +290,7 @@ function syncColorInputs(event, type) { const inputColorText = $('#colorCodeTitle'); let inputBg = ''; let Bg = ''; - if (currentElement.data('type') === 'title') { + if (currentElement.data('type') === 'title' || currentElement.data('type') === 'box') { inputBg = $('#BgcolorCode'); bg = $(currentElement).find('.title'); } else { @@ -295,7 +298,7 @@ function syncColorInputs(event, type) { bg = $(currentElement); } - if (type == 'text') { + if (type == 'text' || currentElement.data('type') === 'box') { inputColorText.val($(event.target).val()); } else { inputBg.val($(event.target).val()); @@ -322,6 +325,87 @@ function updateBorder(type, key, 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() { diff --git a/home.html b/home.html index 3abce7e..0006dbc 100644 --- a/home.html +++ b/home.html @@ -28,10 +28,13 @@
-
+
+
@@ -730,11 +733,12 @@
Màu nền:
- - +
@@ -749,7 +753,7 @@
Màu sắc đường viền: + id="borderColorBox" class="h-[33px]">
@@ -875,10 +879,9 @@
- + onchange="syncColorInputs(event,'box')"> +
@@ -1063,9 +1066,8 @@ - +
@@ -1168,20 +1170,90 @@