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