up

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() {

home.html

@@ -28,10 +28,13 @@
     <div class="header bg-[#166dd8] p-[6px_0]  editable-element" data-type="background">
         <div class="container">
             <div class="header-main flex items-center justify-between">
-                <div class="header-left">
+                <div class="header-left editable-element" data-type="image">
                     <a href="/" class="logo">
                         <img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
                     </a>
+                    <button class="edit-button" onclick="startEditing(event, this)" style="right: -100%;top: 0;"><i
+                            class="far fa-edit"></i>
+                        Sửa</button>
                 </div>
                 <div class="header-right flex items-center">
                     <a href="" class="item flex items-center">
@@ -730,11 +733,12 @@
             <div class="item">
                 <b class="mb-[3px] block">Màu nền:</b>
                 <div class="flex items-center">
-                    <input type="color" id="changeInputBg"
+                    <input type="color" id="changeInputBox"
                         class="w-[40px] h-[33px] mr-[5px] p-[0] outline-none border-[0]"
                         onchange="syncColorInputs(event,'background')">
-                    <input type="text" value="#000000" id="InputCodeBg" onchange="updateColorPicker(event,'background')"
+                    <input type="text" value="#000000" id="InputCodeBox"
-                        placeholder="Nhập mã màu" class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
+                        onchange="updateColorPicker(event,'background')" placeholder="Nhập mã màu"
+                        class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
                 </div>
                 <div class="item mb-[15px]">
                     <!-- Các tùy chọn chỉnh sửa border -->
@@ -749,7 +753,7 @@
                     <div class="flex items-center mb-[10px]">
                         <b class="mr-[10px]">Màu sắc đường viền:</b>
                         <input type="color" onchange="updateBorder('border-color','background', this.value)"
-                            id="borderColorBg" class="h-[33px]">
+                            id="borderColorBox" class="h-[33px]">
                     </div>
 
                     <!-- Các tùy chọn chỉnh sửa kiểu border -->
@@ -875,10 +879,9 @@
                     <div class="flex items-center">
                         <input type="color" id="textBackground"
                             class="w-[40px] h-[33px] mr-[5px] p-[0] outline-none border-[0]"
-                            onchange="syncColorInputs(event,'background')">
+                            onchange="syncColorInputs(event,'box')">
-                        <input type="text" id="BgcolorCode" value="#000000"
+                        <input type="text" id="BgcolorCode" value="#000000" onchange="updateColorPicker(event,'box')"
-                            onchange="updateColorPicker(event,'background')" placeholder="Nhập mã màu"
+                            placeholder="Nhập mã màu" class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
-                            class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
                     </div>
 
                 </div>
@@ -1063,9 +1066,8 @@
                         <input type="color" id="textBackground"
                             class="w-[40px] h-[33px] mr-[5px] p-[0] outline-none border-[0]"
                             onchange="syncColorInputs(event,'background')">
-                        <input type="text" id="BgcolorCode" value="#000000"
+                        <input type="text" id="BgcolorCode" value="#000000" onchange="updateColorPicker(event,'box')"
-                            onchange="updateColorPicker(event,'background')" placeholder="Nhập mã màu"
+                            placeholder="Nhập mã màu" class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
-                            class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
                     </div>
 
                 </div>
@@ -1168,20 +1170,90 @@
             </div>
         </div>
         <div id="imageOptions" class="tab-item hidden">
-            <label>Image URL:</label>
+            <label>Chỉnh sửa ảnh</label>
-            <img src="" id="imageURL" alt="">
+            <img src="" id="imageURL" alt="" class="w-[100px] h-[70px] m-[10px_0] object-contain">
             <div class="item flex mt-2 space-x-2">
                 <input type="file" id="imageUpload" accept="image/*">
             </div>
-            <div class="item flex items-center">
+            <div class="item flex items-center m-[10px_0]">
                 <label for="logoSize" class="block w-[30%]">Kích thước logo:</label>
                 <input type="range" id="logoSize" min="50" max="300" value="150" class="w-[60%]">
                 <span id="sizeValue" class="w-[10px] ml-[10px]">150px</span>
             </div>
         </div>
+        <div id="bgOptions" class="tab-item hidden">
+            <b class="block mb-[10px]">Tùy chỉnh màu nền Khối</b>
+            <div class="item">
+                <b class="mb-[3px] block">Màu nền:</b>
+                <div class="flex items-center">
+                    <input type="color" id="changeInputBg"
+                        class="w-[40px] h-[33px] mr-[5px] p-[0] outline-none border-[0]"
+                        onchange="syncColorInputs(event,'background')">
+                    <input type="text" value="#000000" id="InputCodeBg" onchange="updateColorPicker(event,'background')"
+                        placeholder="Nhập mã màu" class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
+                </div>
+                <div class="item mb-[15px]">
+                    <!-- Các tùy chọn chỉnh sửa border -->
+                    <div class="flex items-center mb-[10px]">
+                        <b class="mr-[10px]">Chiều rộng đường viền:</b>
+                        <input type="number" min="1" step="1"
+                            onchange="updateBorder('border-width','background', this.value)" placeholder="px"
+                            class="border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px] w-[70px] h-[33px]">
+                    </div>
 
+                    <!-- Chọn màu sắc của viền -->
+                    <div class="flex items-center mb-[10px]">
+                        <b class="mr-[10px]">Màu sắc đường viền:</b>
+                        <input type="color" onchange="updateBorder('border-color','background', this.value)"
+                            id="borderColorBg" class="h-[33px]">
+                    </div>
 
-        <button class="apply-button" onclick="applyChanges()">Lưu lại</button>
+                    <!-- Các tùy chọn chỉnh sửa kiểu border -->
+                    <div class="flex items-center mb-[10px]">
+                        <b class="mr-[10px]">Kiểu đường viền: </b>
+                        <select onchange="updateBorder('border-style','background', this.value)"
+                            class="border-[1px] border-[#dddddd] rounded-[5px] h-[33px]">
+                            <option value="solid">Solid</option>
+                            <option value="dashed">Dashed</option>
+                            <option value="dotted">Dotted</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="item mb-[15px]">
+                    <b class="block mb-[10px]">Tùy chỉnh Bo góc</b>
+                    <div class="flex flex-wrap">
+                        <div class="flex items-center w-[50%] mb-[10px]">
+                            <i class="fas fa-border-style mr-[10px] text-[20px]"></i>
+                            <input type="number" min="0" max="50" step="1"
+                                onkeyup="updateBoderRadius('top-left','background', this.value)" placeholder="px"
+                                class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                        </div>
+                        <div class="flex items-center w-[50%] mb-[10px]">
+                            <i class="fas fa-border-style rotate-[90deg] mr-[10px] text-[20px]"></i>
+                            <input type="number" min="0" max="50" step="1"
+                                onkeyup="updateBoderRadius('top-right','background', this.value)" placeholder="px"
+                                class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                        </div>
+                        <div class="flex items-center w-[50%] mb-[10px]">
+                            <i class="fas fa-border-style rotate-[-90deg] mr-[10px] text-[20px]"></i>
+                            <input type="number" min="0" max="50" step="1"
+                                onkeyup="updateBoderRadius('bottom-left','background', this.value)" placeholder="px"
+                                class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                        </div>
+                        <div class="flex items-center w-[50%] mb-[10px]">
+                            <i class="fas fa-border-style rotate-[-180deg] mr-[10px] text-[20px]"></i>
+                            <input type="number" min="0" max="50" step="1"
+                                onkeyup="updateBoderRadius('bottom-right','background', this.value)" placeholder="px"
+                                class="h-[33px] border-[1px] border-[#dddddd] rounded-[5px] p-[0_10px]">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div>
+            <button class="apply-button" onclick="applyChanges()">Lưu lại</button>
+            <button class="cancel-button" onclick="cancelEdit()">Hủy</button>
+        </div>
     </div>
 </body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>