tieptk/auction_program
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Tieptk
2024-11-13 16:20:20 +07:00
parent 253958c7b8
commit 906627003d
2 changed files with 179 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
assets/js/edit.js
View File

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

102
home.html
View File

@@ -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')"
placeholder="Nhập mã màu" class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
<input type="text" value="#000000" id="InputCodeBox"
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')">
<input type="text" id="BgcolorCode" value="#000000"
onchange="updateColorPicker(event,'background')" placeholder="Nhập mã màu"
class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
onchange="syncColorInputs(event,'box')">
<input type="text" id="BgcolorCode" value="#000000" onchange="updateColorPicker(event,'box')"
placeholder="Nhập mã màu" 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"
onchange="updateColorPicker(event,'background')" placeholder="Nhập mã màu"
class="w-[100px] h-[30px] border-[1px] p-[0_5px] rounded-[5px]">
<input type="text" id="BgcolorCode" value="#000000" onchange="updateColorPicker(event,'box')"
placeholder="Nhập mã màu" 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>
<img src="" id="imageURL" alt="">
<label>Chỉnh sửa ảnh</label>
<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>
<!-- 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>