ducdt/edit_template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
21527bd8b5994485e1136289475ad2fecd47510f
edit_template/js/hura_edit.js

1254 lines
71 KiB
JavaScript
Raw Normal View History

15/01/2024
2024-01-15 15:54:17 +07:00
// ============ Temmplate ============
const Hura_panel_top = `
<div class="hura-toolbar-top" id="js-toolbar-top">
<div class="hura-toolbar-holder">
<a href="javascript:void(0)" onclick="new Hura_Panel().setDevice('calc(100% - 320px)')" title="PC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M22 0H2C0.895833 0 0 1.00781 0 2.25V17.25C0 18.4922 0.895833 19.5 2 19.5H10L9.33333 21.75H6.33333C5.77917 21.75 5.33333 22.2516 5.33333 22.875C5.33333 23.4984 5.77917 24 6.33333 24H17.6667C18.2208 24 18.6667 23.4984 18.6667 22.875C18.6667 22.2516 18.2208 21.75 17.6667 21.75H14.6667L14 19.5H22C23.1042 19.5 24 18.4922 24 17.25V2.25C24 1.00781 23.1042 0 22 0ZM21.3333 16.5H2.66667V3H21.3333V16.5Z" fill="#CBCBCB"/></svg>
</a>
<a href="javascript:void(0)" onclick="new Hura_Panel().setDevice(720)" title="Tablet">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24" fill="none"><path d="M19.0476 0H2.28571C1.02381 0 0 1.00781 0 2.25V21.75C0 22.9922 1.02381 24 2.28571 24H19.0476C20.3095 24 21.3333 22.9922 21.3333 21.75V2.25C21.3333 1.00781 20.3095 0 19.0476 0ZM10.6667 22.5C9.82381 22.5 9.14286 21.8297 9.14286 21C9.14286 20.1703 9.82381 19.5 10.6667 19.5C11.5095 19.5 12.1905 20.1703 12.1905 21C12.1905 21.8297 11.5095 22.5 10.6667 22.5ZM19.0476 17.4375C19.0476 17.7469 18.7905 18 18.4762 18H2.85714C2.54286 18 2.28571 17.7469 2.28571 17.4375V2.8125C2.28571 2.50312 2.54286 2.25 2.85714 2.25H18.4762C18.7905 2.25 19.0476 2.50312 19.0476 2.8125V17.4375Z" fill="#CBCBCB"/></svg>
</a>
<a href="javascript:void(0)" onclick="new Hura_Panel().setDevice(320)" title="Mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24" fill="none"><path d="M13.056 0H2.304C1.032 0 0 1.00781 0 2.25V21.75C0 22.9922 1.032 24 2.304 24H13.056C14.328 24 15.36 22.9922 15.36 21.75V2.25C15.36 1.00781 14.328 0 13.056 0ZM7.68 22.5C6.8304 22.5 6.144 21.8297 6.144 21C6.144 20.1703 6.8304 19.5 7.68 19.5C8.5296 19.5 9.216 20.1703 9.216 21C9.216 21.8297 8.5296 22.5 7.68 22.5ZM13.056 17.4375C13.056 17.7469 12.7968 18 12.48 18H2.88C2.5632 18 2.304 17.7469 2.304 17.4375V2.8125C2.304 2.50312 2.5632 2.25 2.88 2.25H12.48C12.7968 2.25 13.056 2.50312 13.056 2.8125V17.4375Z" fill="#CBCBCB"/></svg>
</a>
<a href="javascript:void(0)" onclick="new Hura_Panel().preview('preview', this)" title="Xem trước giao diện" id="js-panel-preview">
<svg fill="#CBCBCB" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve"><path id="XMLID_1239_" d="M91.3,43.8C90.6,42.8,74.4,19,46,19C17.6,19,1.4,42.8,0.7,43.8c-0.9,1.3-0.9,3.1,0,4.5 C1.4,49.2,17.6,73,46,73c28.4,0,44.6-23.8,45.3-24.8C92.2,46.9,92.2,45.1,91.3,43.8z M46,65C26.7,65,13.5,51.4,9,46 c4.5-5.5,17.6-19,37-19c19.3,0,32.5,13.6,37,19C78.4,51.5,65.3,65,46,65z M48.3,29.6c-4.4-0.6-8.7,0.5-12.3,3.2c0,0,0,0,0,0 c-7.3,5.5-8.8,15.9-3.3,23.2c2.7,3.6,6.5,5.8,10.9,6.5c0.8,0.1,1.6,0.2,2.3,0.2c3.6,0,7-1.2,9.9-3.3c7.3-5.5,8.8-15.9,3.3-23.2 C56.6,32.5,52.7,30.2,48.3,29.6z M52.3,54.5c-2.2,1.7-5,2.4-7.8,2c-2.8-0.4-5.3-1.9-7-4.1C34.1,47.7,35,41,39.7,37.5 c2.2-1.7,5-2.4,7.8-2c2.8,0.4,5.3,1.9,7,4.1C57.9,44.3,57,51,52.3,54.5z M51.9,40c0.8,0.7,1.2,1.8,1.2,2.8c0,1-0.4,2.1-1.2,2.8 c-0.7,0.7-1.8,1.2-2.8,1.2c-1.1,0-2.1-0.4-2.8-1.2c-0.8-0.8-1.2-1.8-1.2-2.8c0-1.1,0.4-2.1,1.2-2.8c0.7-0.8,1.8-1.2,2.8-1.2 C50.2,38.9,51.2,39.3,51.9,40z"/></svg>
</a>
<a href="javascript:void(0)" onclick="new Hura_Panel().preview('back', this)" title="Quay lại" id="js-panel-back" style="display: none">
<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" fill="white" fill-opacity="0.01"/>
<path d="M9.85786 18C6.23858 21 4 24 4 24C4 24 12.9543 36 24 36C25.3699 36 26.7076 35.8154 28 35.4921M20.0318 12.5C21.3144 12.1816 22.6414 12 24 12C35.0457 12 44 24 44 24C44 24 41.7614 27 38.1421 30" stroke="#CBCBCB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.3142 20.6213C19.4981 21.5112 19 22.6974 19 24C19 26.7614 21.2386 29 24 29C25.3627 29 26.5981 28.4548 27.5 27.5707" stroke="#CBCBCB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42 42L6 6" stroke="#CBCBCB" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
<a href="javascript:void(0)" class="hura-btn-tab">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.2338 1.75641C13.6653 -0.585469 10.3347 -0.585469 9.76617 1.75641C9.39891 3.26923 7.66567 3.98716 6.33624 3.17713C4.27827 1.92318 1.92318 4.27827 3.17713 6.33624C3.98716 7.66567 3.26923 9.39889 1.75641 9.76617C-0.585469 10.3347 -0.585469 13.6653 1.75641 14.2338C3.26923 14.6011 3.98716 16.3344 3.17713 17.6637C1.92318 19.7217 4.27827 22.0768 6.33625 20.8228C7.66567 20.0128 9.39891 20.7307 9.76617 22.2436C10.3347 24.5854 13.6653 24.5854 14.2338 22.2436C14.6011 20.7307 16.3344 20.0128 17.6637 20.8228C19.7217 22.0768 22.0768 19.7217 20.8228 17.6637C20.0128 16.3344 20.7307 14.6011 22.2436 14.2338C24.5854 13.6653 24.5854 10.3347 22.2436 9.76617C20.7307 9.39889 20.0128 7.66567 20.8228 6.33624C22.0768 4.27827 19.7217 1.92318 17.6637 3.17713C16.3344 3.98716 14.6011 3.26923 14.2338 1.75641ZM12 16.5C14.4853 16.5 16.5 14.4853 16.5 12C16.5 9.51472 14.4853 7.5 12 7.5C9.51472 7.5 7.5 9.51472 7.5 12C7.5 14.4853 9.51472 16.5 12 16.5Z" fill="#4AC9FF"/></svg>
</a>
</div>
`;
const Hura_panel_right = `
<div class="hura-toolbar-right">
<div id="js-edit-extend"></div>
<div id="js-toolbar-right"></div>
<div id="js-hura-style-holder"></div>
</div>
`;
const Hura_toolbar_list = `
<div class="hura-toolbar-list" id="js-hura-toolbar-list">
<a href="javascript:void(0)" class="js-hura-toolbar-item" data-toolbar-type="image" title="Thay ảnh" id="js-btn-edit-image">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3662 1.6338C13.006 1.27358 12.4219 1.27358 12.0617 1.6338L12.0616 1.63382L5.37433 8.32113V9.62567H6.67887L13.3662 2.93837L13.3662 2.93835C13.7265 2.57811 13.7264 1.99407 13.3662 1.63384L13.3662 1.6338ZM14.3304 0.669565C13.4377 -0.223194 11.9901 -0.223188 11.0974 0.669583C11.0974 0.669588 11.0974 0.669594 11.0974 0.669599L4.21039 7.5566C4.08253 7.68446 4.0107 7.85789 4.0107 8.03872V10.3075C4.0107 10.684 4.31596 10.9893 4.69251 10.9893H6.96128C7.14211 10.9893 7.31554 10.9175 7.4434 10.7896L14.3304 3.90262C14.3304 3.90262 14.3304 3.90261 14.3304 3.90261C15.2232 3.00984 15.2232 1.56237 14.3304 0.669599C14.3304 0.669587 14.3304 0.669576 14.3304 0.669565ZM0 3.89037C0 2.6278 1.02352 1.60428 2.2861 1.60428H6.29679C6.67335 1.60428 6.97861 1.90954 6.97861 2.28609C6.97861 2.66265 6.67335 2.96791 6.29679 2.96791H2.2861C1.77664 2.96791 1.36364 3.38091 1.36364 3.89037V12.7139C1.36364 13.2234 1.77663 13.6364 2.2861 13.6364H11.1096C11.6191 13.6364 12.0321 13.2234 12.0321 12.7139V8.70321C12.0321 8.32665 12.3373 8.02139 12.7139 8.02139C13.0905 8.02139 13.3957 8.32665 13.3957 8.70321V12.7139C13.3957 13.9765 12.3722 15 11.1096 15H2.2861C1.02353 15 0 13.9765 0 12.7139V3.89037Z" fill="white"/></svg>
</a>
<a href="javascript:void(0)" class="js-hura-toolbar-item" data-toolbar-type="wheel" title="Sửa giải thưởng" id="js-btn-edit-wheel">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3662 1.6338C13.006 1.27358 12.4219 1.27358 12.0617 1.6338L12.0616 1.63382L5.37433 8.32113V9.62567H6.67887L13.3662 2.93837L13.3662 2.93835C13.7265 2.57811 13.7264 1.99407 13.3662 1.63384L13.3662 1.6338ZM14.3304 0.669565C13.4377 -0.223194 11.9901 -0.223188 11.0974 0.669583C11.0974 0.669588 11.0974 0.669594 11.0974 0.669599L4.21039 7.5566C4.08253 7.68446 4.0107 7.85789 4.0107 8.03872V10.3075C4.0107 10.684 4.31596 10.9893 4.69251 10.9893H6.96128C7.14211 10.9893 7.31554 10.9175 7.4434 10.7896L14.3304 3.90262C14.3304 3.90262 14.3304 3.90261 14.3304 3.90261C15.2232 3.00984 15.2232 1.56237 14.3304 0.669599C14.3304 0.669587 14.3304 0.669576 14.3304 0.669565ZM0 3.89037C0 2.6278 1.02352 1.60428 2.2861 1.60428H6.29679C6.67335 1.60428 6.97861 1.90954 6.97861 2.28609C6.97861 2.66265 6.67335 2.96791 6.29679 2.96791H2.2861C1.77664 2.96791 1.36364 3.38091 1.36364 3.89037V12.7139C1.36364 13.2234 1.77663 13.6364 2.2861 13.6364H11.1096C11.6191 13.6364 12.0321 13.2234 12.0321 12.7139V8.70321C12.0321 8.32665 12.3373 8.02139 12.7139 8.02139C13.0905 8.02139 13.3957 8.32665 13.3957 8.70321V12.7139C13.3957 13.9765 12.3722 15 11.1096 15H2.2861C1.02353 15 0 13.9765 0 12.7139V3.89037Z" fill="white"/></svg>
</a>
<a href="javascript:void(0)" class="js-hura-toolbar-item" data-toolbar-type="duplicate" title="Nhân bản" id="js-btn-edit-duplicate">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22727 1.36364C4.76704 1.36364 4.39394 1.73673 4.39394 2.19697V9.77273C4.39394 10.233 4.76703 10.6061 5.22727 10.6061H11.2879C11.7481 10.6061 12.1212 10.233 12.1212 9.77273V4.78349C12.1212 4.76349 12.1133 4.74419 12.099 4.72993C12.099 4.72992 12.099 4.72994 12.099 4.72993L8.75493 1.38582C8.74079 1.37168 8.72148 1.36364 8.70136 1.36364H5.22727ZM3.0303 2.19697C3.0303 0.983616 4.01392 0 5.22727 0H8.70136C9.08305 0 9.44922 0.151615 9.71917 0.421587C9.71915 0.421575 9.71918 0.4216 9.71917 0.421587L13.0633 3.76569C13.3331 4.03557 13.4848 4.40168 13.4848 4.78349V9.77273C13.4848 10.9861 12.5013 11.9697 11.2879 11.9697H10.4545V12.803C10.4545 14.0164 9.47095 15 8.25758 15H2.19697C0.983623 15 0 14.0164 0 12.803V5.22727C0 4.01392 0.983616 3.0303 2.19697 3.0303H3.0303V2.19697ZM3.0303 4.39394H2.19697C1.73673 4.39394 1.36364 4.76704 1.36364 5.22727V12.803C1.36364 13.2633 1.73673 13.6364 2.19697 13.6364H8.25758C8.71784 13.6364 9.09091 13.2633 9.09091 12.803V11.9697H5.22727C4.01393 11.9697 3.0303 10.9861 3.0303 9.77273V4.39394Z" fill="white"/></svg>
</a>
<a href="javascript:void(0)" class="js-hura-toolbar-item" data-toolbar-type="delede" title="Xóa">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.625 0C5.2699 0 4.94528 0.200625 4.78647 0.518241L4.1081 1.875H0.9375C0.419737 1.875 0 2.29474 0 2.8125C0 3.33026 0.419737 3.75 0.9375 3.75V13.125C0.9375 14.1606 1.77697 15 2.8125 15H10.3125C11.3481 15 12.1875 14.1606 12.1875 13.125V3.75C12.7053 3.75 13.125 3.33026 13.125 2.8125C13.125 2.29474 12.7053 1.875 12.1875 1.875H9.01687L8.3385 0.518241C8.17969 0.200625 7.85512 0 7.5 0H5.625ZM3.75 5.625C3.75 5.10724 4.16974 4.6875 4.6875 4.6875C5.20526 4.6875 5.625 5.10724 5.625 5.625V11.25C5.625 11.7678 5.20526 12.1875 4.6875 12.1875C4.16974 12.1875 3.75 11.7678 3.75 11.25V5.625ZM8.4375 4.6875C7.91972 4.6875 7.5 5.10724 7.5 5.625V11.25C7.5 11.7678 7.91972 12.1875 8.4375 12.1875C8.95528 12.1875 9.375 11.7678 9.375 11.25V5.625C9.375 5.10724 8.95528 4.6875 8.4375 4.6875Z" fill="white"/></svg>
</a>
</div>
`;
const Hura_edit_wheel = `
<div class="hura-edit-popup-container">
<div class="hura-edit-popup-group">
<div class="hura-popup-title">
<b>Cài đặt vòng quay</b>
<a href="javascript:void(0)" onclick="$('.hura-edit-popup-container').remove()">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z" fill="#0F0F0F"/></svg>
</a>
</div>
<div class="hura-edit-content">
<table>
<thead>
<tr>
<td>STT</td>
<td>Ảnh</td>
<td>Mã giải thưởng</td>
<td>Tên</td>
<td>Xác xuất trúng</td>
<td>Thứ tự</td>
<td>Hành động</td>
</tr>
</thead>
<tbody id="js-edit-wheel-holder"> {{html_list}} </tbody>
</table>
</div>
<div class="hura-popup-btn">
<a href="javascript:void(0)" id="js-wheel-add-row">[+] Thêm mới</a>
<a href="javascript:void(0)">Update</a>
</div>
</div>
<div class="hura-popup-bg" onclick="$('.hura-edit-popup-container').remove()"></div>
</div>
`;
// ======= // Temmplate =======
const HURA_TARGET = '.js-hura-edit'; // class bọc ngoài cùng các vị trí edit
const IFRAME = '#js-hura-iframe'; // id iframe
const $doc = $(IFRAME).contents();
const Hura_Edit = (function (){
/**
* Cài đặt panel, chạy các thao tác trong thẻ iframe
*/
function install() {
new Hura_Panel().createPanel();
Iframe.init();
}
/**
* Các thao tác trong thẻ Ifrane
*/
const Iframe = (function (){
/*** Gọi chạy*/
function init(){
iframe_Setup();
iframe_EditOptions();
}
/**
* Set up iframe
* Thêm file style.css, jquery sort
* Thêm khu chứa popup wheel, input file,... trong thẻ id="js-extend-holder"
* Kiểm tra click ngoài thẻ được edit sẽ hiển thị style của body
* Tạo Id cho từng thẻ html "iframe_createID()" (những thẻ đã có id sẽ được bỏ qua)
*/
function iframe_Setup() {
$doc.find('head').append(`
\x3Clink rel="stylesheet" href="css/style.css"/>
\x3Cscript src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"> \x3C/script>
`);
$doc.find('body')
.attr('id','js-hura-edit-container')
.append('<div id="js-extend-holder"></div>');
$doc.find('body').click(function(e){
var targ = $doc.find(HURA_TARGET);
targ2 = $doc.find('#js-edit-file');
targ3 = $doc.find('#js-extend-holder');
if (!targ.is(e.target) && targ.has(e.target).length === 0 &&
!targ2.is(e.target) && targ2.has(e.target).length === 0 &&
!targ3.is(e.target) && targ3.has(e.target).length === 0
){
$doc.find('body *').removeClass('hura-selected');
$doc.find('.hura-toolbar-list').remove();
$('#js-toolbar-right, #js-edit-extend').html('')
Style.getBodyStyle($doc.find('body')); // Lấy style của thẻ body trong iframe
}
});
$doc.find('a').click(function(e){
e.preventDefault();
})
iframe_createID();
setTimeout(function() {
$doc.find('.js-hura-drag').sortable(); // drag & drop
}, 500);
}
/**
* Các thao tác click, double click đung để edit trong thẻ iframe
*/
function iframe_EditOptions() {
// Click
$doc.find(HURA_TARGET).click(function(e){
$('#js-edit-extend').html('');
var type = $(this).attr('data-hura-type');
var node = e.target;
$doc.find('body *').removeClass('hura-selected');
$doc.find('.hura-toolbar-list').remove();
if($(node).hasClass('hura-selected') == false){
switch(type) {
// === File
case 'file':
$(Hura_toolbar_list).insertBefore(node);
Edit.panelGetImage(node)
$doc.find('#js-btn-edit-wheel').remove(); // remove button
break;
// === Text
case 'text':
$doc.find(node).prepend(Hura_toolbar_list);
Edit.editText(this);
break;
// === Wheel
case 'wheel':
$(Hura_toolbar_list).insertBefore(node);
HuraMiniGame.Panel_edit_wheel();
$doc.find('#js-btn-edit-image, #js-btn-edit-duplicate').remove(); // remove button
break;
// === Reward
case 'reward':
HuraMiniGame.reward();
break;
}
check_Toolbar_Offset();
Edit.toolbar_options();
$doc.find(node).addClass('hura-selected');
}
if(type != 'file' && type != 'wheel'){
var targetId = '#' + $doc.find('.hura-selected').attr('id');
Style.getBodyStyle($doc.find(targetId));
}
})
/*/ Double Click */
$doc.find(HURA_TARGET).dblclick(function() {
var type = $(this).attr('data-hura-type');
switch(type) {
// === Image / banner
case 'file':
Edit.previewImage(this);
break;
// === Wheel
case 'wheel':
HuraMiniGame.Edit_wheel_popup();
break;
}
});
}
/**
* Kiểm tra vị trí để set top cho toolbar
*/
function check_Toolbar_Offset() {
$doc.find(HURA_TARGET).each(function(){
var top = $(this).offset().top;
if(top < 70) {
$(this).find('.hura-toolbar-list').css('top', '100%')
} else if(top > window.innerHeight - 60) {
$(this).find('.hura-toolbar-list').css('top', '-30px')
}
});
}
/* Tạo id cho mỗi thẻ thml */
function iframe_createID() {
var counter = 0;
$doc.find('body *').each(function(){
var id = $(this).attr('id');
if (id === undefined || id.includes('hura-element-')){
$(this).attr('id', 'hura-element-' + counter++);
}
})
}
return {
init,
iframe_EditOptions
}
})();
/**
* Chỉnh sửa
*/
const Edit = (function (){
/**
* Click các tính năng trong toolbar sẽ lấy type để chạy các thao tác tương ứng
* Thay ảnh, Nhân bản, Xóa, Thay thông tin vòng quay,...
*/
function toolbar_options() {
$doc.find('.js-hura-toolbar-item').click(function(){
var type = $(this).attr('data-toolbar-type');
switch(type) {
case 'image':
previewImage(this)
break;
case 'duplicate':
duplicate(this)
break;
case 'delede':
delete_item(this);
break;
case 'wheel':
HuraMiniGame.Edit_wheel_popup();
break;
}
})
}
/***=== Thay ảnh panel ===***/
function panelGetImage(target) {
var image = $(target).attr('src');
alt = $(target).attr('alt');
width = $(target).css('width');
height = $(target).css('height');
targetId = ($(target).attr('id') != undefined) ? $(target).attr('id') : '';
html = `
<details class="hura-sectors-container" open>
<summary class="hura-sectors-title">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6" fill="none"><path d="M4.00078 6C3.83058 5.99914 3.66272 5.96041 3.50935 5.88661C3.35599 5.81281 3.22098 5.7058 3.11411 5.57333L0.307445 2.17333C0.143441 1.96865 0.0402359 1.722 0.00958995 1.46151C-0.021056 1.20102 0.0220901 0.937162 0.134112 0.7C0.224965 0.493884 0.373227 0.318276 0.561191 0.194148C0.749155 0.0700212 0.968876 0.00262204 1.19411 0H6.80744C7.03268 0.00262204 7.2524 0.0700212 7.44037 0.194148C7.62833 0.318276 7.77659 0.493884 7.86744 0.7C7.97947 0.937162 8.02261 1.20102 7.99197 1.46151C7.96132 1.722 7.85812 1.96865 7.69411 2.17333L4.88744 5.57333C4.78058 5.7058 4.64557 5.81281 4.4922 5.88661C4.33884 5.96041 4.17097 5.99914 4.00078 6Z" fill="#7D8FB1"/> </svg>
<p> Image </p>
</summary>
<div class="hura-properties-list">
<div class="hura-style-item" style="width: 100%">
<p class="hura-style-title">Tên ảnh</p>
<div class="hura-text-align">
<input type="text" value="${alt}" class="js-hura-edit-text" data-type="alt" data-id="${targetId}">
</div>
</div>
<div class="hura-style-item" style="width: 100%">
<p class="hura-style-title">Ảnh</p>
<div style="display: flex;align-items:center;justify-content:space-between">
<img src="${image}" width="136" id="js-panel-image">
<button class="hura-button" data-id="${targetId}" id="js-panel-change-image">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="15" viewBox="0 0 19 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.02044 6.81726C9.397 6.81726 9.70226 7.12252 9.70226 7.49908V14.3182C9.70226 14.6947 9.397 15 9.02044 15C8.64388 15 8.33862 14.6947 8.33862 14.3182V7.49908C8.33862 7.12252 8.64388 6.81726 9.02044 6.81726Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.49497 0.0045727C7.51356 -0.0329564 8.52741 0.160917 9.46029 0.571616C10.3932 0.982316 11.2208 1.59916 11.881 2.37576C12.4257 3.01648 12.8446 3.75219 13.1179 4.54421H13.5664C14.5596 4.54487 15.5247 4.87624 16.3086 5.48603C17.0925 6.09583 17.651 6.94932 17.896 7.91179C18.141 8.87426 18.0584 9.89091 17.6614 10.8013C17.2645 11.7116 16.5756 12.4639 15.7036 12.9393C15.373 13.1195 14.9589 12.9976 14.7786 12.667C14.5984 12.3364 14.7203 11.9222 15.0509 11.742C15.6569 11.4116 16.1356 10.8889 16.4115 10.2562C16.6874 9.62354 16.7447 8.91702 16.5745 8.24815C16.4042 7.57927 16.0161 6.98614 15.4713 6.56237C14.9265 6.13859 14.2561 5.9083 13.5659 5.90785H12.6117C12.3009 5.90785 12.0294 5.69762 11.9516 5.39669C11.7481 4.60941 11.3687 3.87852 10.842 3.25896C10.3154 2.63941 9.65508 2.14731 8.91085 1.81966C8.16661 1.49201 7.35779 1.33734 6.54518 1.36728C5.73256 1.39722 4.93731 1.61099 4.21921 1.99252C3.5011 2.37404 2.87883 2.9134 2.39918 3.57003C1.91953 4.22667 1.59497 4.98349 1.44992 5.78362C1.30487 6.58374 1.34308 7.40633 1.5617 8.18956C1.78032 8.97278 2.17365 9.69625 2.71212 10.3056C2.96148 10.5878 2.93488 11.0186 2.65271 11.268C2.37054 11.5173 1.93966 11.4907 1.69031 11.2086C1.01534 10.4448 0.522309 9.53793 0.248273 8.55617C-0.0257621 7.57441 -0.0736691 6.5433 0.108154 5.54037C0.289978 4.53743 0.6968 3.58876 1.29804 2.76568C1.89927 1.9426 2.67928 1.26653 3.57941 0.788292C4.47954 0.310057 5.47637 0.0421019 6.49497 0.0045727Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.53828 7.01696C8.80454 6.75069 9.23625 6.75069 9.50251 7.01696L12.5332 10.0477C12.7995 10.3139 12.7995 10.7456 12.5332 11.0119C12.267 11.2782 11.8353 11.2782 11.569 11.0119L9.02039 8.46332L6.4718 11.0119C6.20553 11.2782 5.77383 11.2782 5.50756 11.0119C5.24129 10.7456 5.24129 10.3139 5.50756 10.0477L8.53828 7.01696Z" fill="white"/></svg>
<span>Upload</span>
</button>
</div>
</div>
<div class="hura-style-item">
<p class="hura-style-title">Width</p>
<div class="hura-input-number">
<input type="number" value="${parseInt(width)}" min="0" class="js-hura-edit-select" data-type="width" data-id="${targetId}"/>
<span>px</span>
</div>
</div>
<div class="hura-style-item">
<p class="hura-style-title">Height</p>
<div class="hura-input-number">
<input type="number" value="${parseInt(height)}" min="0" class="js-hura-edit-select" data-type="height" data-id="${targetId}"/>
<span>px</span>
</div>
</div>
</div>
</details>
`;
$('#js-edit-extend').html(html);
$('#js-toolbar-right, #js-hura-style-holder').html('');
edit_listener_content();
changeImageFromPanel()
}
// Hiển thị cửa sổ cho phép chọn ảnh
function changeImageFromPanel() {
$('#js-panel-change-image').click(function(){
var targetId = $(this).attr('data-id');
creatNewImage(targetId)
})
}
/***=== Thay ảnh ===***/
function previewImage(holder) {
var target = $(holder).parents().find('.hura-selected');
if ($(holder).hasClass('js-hura-edit') == false){
target = $(holder).parents('.js-hura-edit').find('.hura-selected');
}
var targetId = target.attr('id');
if (targetId == undefined) return false;
creatNewImage(targetId);
}
/***=== Tạo ảnh mới ===***/
function creatNewImage(holder) {
$doc.find('#js-extend-holder').append('<input type="file" id="js-edit-file" name="image" accept="image/*" style="display: none;"/>');
$doc.find('#js-edit-file').click().attr('disabled','disabled');
$doc.find('#js-edit-file').on('change', function(e){
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = readerEvent => {
$doc.find('#' + holder).attr('src', readerEvent.target.result);
$('#js-panel-image').attr('src', readerEvent.target.result);
}
$doc.find('body *').removeClass('hura-selected');
$doc.find('#js-edit-file, #js-hura-toolbar-list').remove();
})
}
/***=== Nhân bản ===***/
function duplicate(target) {
var $row = $doc.find(target).parents('.js-hura-edit');
holder = $row.find('.hura-selected')
content = $(holder).prop('outerHTML');
$doc.find('#js-hura-toolbar-list').remove();
if (content != undefined) {
var newElement = $(holder).prop('outerHTML');
newElementId = $(newElement).attr('id') + '-clone';
$($row).append($(newElement).attr('id', newElementId));
} else {
$($row).append($row.html());
}
}
/***=== Xóa ===***/
function delete_item(target) {
$doc.find(target).parents().find('.hura-selected').remove();
$doc.find('#js-hura-toolbar-list').remove();
}
/***=== Sửa text ===***/
function editText(holder) {
$doc.find('#js-btn-edit-image, #js-btn-edit-wheel').remove(); // remove button image
$(holder).attr('contenteditable','true');
$(holder).on("click", function (e) {
var node = e.target;
hura_id = $(node).attr('id');
if(hura_id) {
Panel_edit_table(node, hura_id);
}
})
}
/**
* Panel: Tạo bảng cho phép sửa text, link,..
*/
function Panel_edit_table(target, hura_id) {
var $node = $(target);
var title = $node.text().trim();
var nodeNameHtml = '';
if ($node[0].nodeName == 'A') {
nodeNameHtml = `
<tr>
<td>Link</td>
<td>
<input type="text" class="js-hura-edit-text" data-type="url" data-id="${hura_id}" value="${$node.attr('href')}">
</td>
</tr>
<tr>
<td>Thao tác</td>
<td>
<select class="js-hura-edit-select" data-type="target" data-id="${hura_id}">
<option value="_blank"> Cửa sổ mới </option>
<option value=""> Mặc định </option>
</select>
</td>
</tr>
`;
}
var html = `
<div class="hura-toolbar-table">
<table>
<tr>
<td>Tiêu đề</td>
<td>
<input type="text" class="js-hura-edit-text" data-type="title" data-id="${hura_id}" value="${title}" >
</td>
</tr>
${nodeNameHtml}
</table>
</div>
`
$('#js-toolbar-right').html(html);
edit_listener_content();
}
/**
* Panel: Sửa text, link sẽ lấy các thông tin: type, id tag được chọn, nội dung mới
*/
function edit_listener_content() {
// On Keyup
$('.js-hura-edit-text').on('keyup', function(){
var type = $(this).attr('data-type');
id = $(this).attr('data-id');
newContent = $(this).val();
replace_new_content(newContent, type , id)
})
// On Change
$('.js-hura-edit-select').on('change', function(){
var type = $(this).attr('data-type');
id = $(this).attr('data-id');
newContent = $(this).val();
replace_new_content(newContent, type , id)
})
}
/**
* Thay nội dung mới được cập nhật vào iframe
*/
function replace_new_content(newContent, type , target_id) {
$doc.find('body *').each(function(){
var hura_id = $(this).attr('id');
if(hura_id === target_id) {
switch(type) {
case 'title':
$(this).html(newContent)
break;
case 'url':
$(this).attr('href', newContent)
break;
case 'target':
$(this).attr('target', newContent)
break;
case 'alt':
$(this).attr('alt', newContent)
break;
case 'width':
$(this).css('width', newContent).css('max-width', newContent)
break;
case 'height':
$(this).css('height', newContent).css('max-height', newContent)
break;
}
}
})
}
// Sửa text
return {
toolbar_options,
panelGetImage,
previewImage ,
duplicate ,
delete_item,
editText ,
}
})();
/**
* Panel Right: Style thẻ được chọn edit
* Nếu click ra ngoài vùng được edit sẽ hiển thị style của thẻ body
*/
const Style = (function (){
function getBodyStyle(target) {
var targetId = ($(target).attr('id') != undefined) ? '#' + $(target).attr('id') : '';
fontSize = (typeof($(target).css('font-size')) != 'undefined') ? parseInt($(target).css('font-size')) : '';
lineHeight = (typeof($(target).css('line-height')) != 'undefined') ? parseInt($(target).css('line-height')) : '';
const Typography = `
<details class="hura-sectors-container" open>
<summary class="hura-sectors-title">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6" fill="none"><path d="M4.00078 6C3.83058 5.99914 3.66272 5.96041 3.50935 5.88661C3.35599 5.81281 3.22098 5.7058 3.11411 5.57333L0.307445 2.17333C0.143441 1.96865 0.0402359 1.722 0.00958995 1.46151C-0.021056 1.20102 0.0220901 0.937162 0.134112 0.7C0.224965 0.493884 0.373227 0.318276 0.561191 0.194148C0.749155 0.0700212 0.968876 0.00262204 1.19411 0H6.80744C7.03268 0.00262204 7.2524 0.0700212 7.44037 0.194148C7.62833 0.318276 7.77659 0.493884 7.86744 0.7C7.97947 0.937162 8.02261 1.20102 7.99197 1.46151C7.96132 1.722 7.85812 1.96865 7.69411 2.17333L4.88744 5.57333C4.78058 5.7058 4.64557 5.81281 4.4922 5.88661C4.33884 5.96041 4.17097 5.99914 4.00078 6Z" fill="#7D8FB1"/> </svg>
<p> Typography </p>
</summary>
<div class="hura-properties-list">
<div class="hura-style-item">
<p class="hura-style-title">Font family</p>
<select onchange="Hura_Edit.Style.changeStyle('${targetId}', 'font-family', this.value)">
<option value=""> Chọn </option>
<option value="Inter,sans-serif"> Inter </option>
<option value="Roboto,sans-serif"> Roboto </option>
<option value='-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'> Arial </option>
</select>
</div>
<div class="hura-style-item">
<p class="hura-style-title">Font weight</p>
<select onchange="Hura_Edit.Style.changeStyle('${targetId}', 'font-weight', this.value)">
<option value=""> Chọn </option>
<option value="400"> Normal </option>
<option value="500"> Semi-Bold </option>
<option value="600"> Bold </option>
<option value="800"> Bolder </option>
<option value="900"> Black </option>
</select>
</div>
<div class="hura-style-item">
<p class="hura-style-title">Font size</p>
<div class="hura-input-number">
<input type="number" value="${fontSize}" min="0"
onchange="Hura_Edit.Style.changeStyle('${targetId}', 'font-size', this.value + 'px')"/>
<span>px</span>
</div>
</div>
<div class="hura-style-item">
<p class="hura-style-title">Line height</p>
<div class="hura-input-number">
<input type="number" value="${lineHeight}" min="0"
onchange="Hura_Edit.Style.changeStyle('${targetId}', 'line-height', this.value + 'px')"/>
<span>px</span>
</div>
</div>
<div class="hura-style-item" style="width: 100%">
<p class="hura-style-title">Text align</p>
<div class="hura-text-align">
<label title="Căn trái">
<input type="radio" name="text_align" value="left" checked onchange="Hura_Edit.Style.changeStyle('${targetId}', 'text-align', this.value)"/>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18" fill="none"><path d="M0 0H19.0588V2.11765H0V0ZM0 15.8824H14.8235V18H0V15.8824ZM0 10.5882H19.0588V12.7059H0V10.5882ZM0 5.29412H14.8235V7.41177H0V5.29412Z" fill="white"/></svg>
</label>
<label title="Căn giữa">
<input type="radio" name="text_align" value="center" onchange="Hura_Edit.Style.changeStyle('${targetId}', 'text-align', this.value)"/>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18" fill="none"><path d="M0 0H19.0588V2.11765H0V0ZM2.11765 15.8824H16.9412V18H2.11765V15.8824ZM0 10.5882H19.0588V12.7059H0V10.5882ZM2.11765 5.29412H16.9412V7.41177H2.11765V5.29412Z" fill="white"/></svg>
</label>
<label title="Căn phải">
<input type="radio" name="text_align" value="right" onchange="Hura_Edit.Style.changeStyle('${targetId}', 'text-align', this.value)"/>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18" fill="none"><path d="M0 0H19.0588V2.11765H0V0ZM4.23529 15.8824H19.0588V18H4.23529V15.8824ZM0 10.5882H19.0588V12.7059H0V10.5882ZM4.23529 5.29412H19.0588V7.41177H4.23529V5.29412Z" fill="white"/></svg>
</label>
<label title="Căn đều hai bên">
<input type="radio" name="text_align" value="justify" onchange="Hura_Edit.Style.changeStyle('${targetId}', 'text-align', this.value)"/>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18" fill="none"><path d="M0 0H19.0588V2.11765H0V0ZM0 15.8824H19.0588V18H0V15.8824ZM0 10.5882H19.0588V12.7059H0V10.5882ZM0 5.29412H19.0588V7.41177H0V5.29412Z" fill="white"/></svg>
</label>
</div>
</div>
<div class="hura-style-item" style="width: 100%">
<p class="hura-style-title">Text decoration</p>
<div class="hura-text-align">
<button onclick="Hura_Edit.Style.changeStyleClass('remove', '${targetId}', '');" title="Xóa">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z" fill="#0F0F0F"/></svg>
</button>
<button onclick="Hura_Edit.Style.changeStyleClass('', '${targetId}', 'hura-style-italic'); $(this).toggleClass('current')" title="Chữ nghiêng">
<i>I</i>
</button>
<button onclick="Hura_Edit.Style.changeStyleClass('', '${targetId}', 'hura-style-under'); $(this).toggleClass('current')" title="Gạch chân">
<u>U</u>
</button>
<button onclick="Hura_Edit.Style.changeStyleClass('', '${targetId}', 'hura-style-line-through'); $(this).toggleClass('current')" title="Gạch ngang">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="15" viewBox="0 0 17 15" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.49999C0 7.12344 0.30526 6.81818 0.681818 6.81818H15.6818C16.0584 6.81818 16.3636 7.12344 16.3636 7.49999C16.3636 7.87655 16.0584 8.18181 15.6818 8.18181H0.681818C0.30526 8.18181 0 7.87655 0 7.49999Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.18176 1.36364C5.75114 1.36364 4.35505 2.73678 4.35505 4.09091V4.09886L4.35501 4.09886C4.35316 4.25702 4.37677 4.41443 4.42494 4.56509C4.53962 4.92376 4.34182 5.30748 3.98315 5.42216C3.62448 5.53683 3.24075 5.33903 3.12608 4.98036C3.03378 4.69167 2.98832 4.39006 2.99142 4.087C2.99396 1.67618 5.34686 0 8.18176 0C10.3898 0 12.2552 0.987291 13.0144 2.55846C13.1782 2.89751 13.0362 3.30518 12.6972 3.46901C12.3581 3.63285 11.9504 3.49081 11.7866 3.15176C11.3186 2.18316 10.0306 1.36364 8.18176 1.36364Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.41365 7.30908C8.51909 6.94758 8.89761 6.74001 9.25911 6.84544C10.2861 7.14498 11.3604 7.51656 12.1812 8.11747C13.0403 8.74642 13.6364 9.6404 13.6364 10.9091C13.6364 12.1284 12.9428 13.1674 11.9519 13.8749C10.9597 14.5832 9.62435 15 8.18184 15C6.73933 15 5.40394 14.5832 4.41174 13.8749C3.42087 13.1674 2.72729 12.1284 2.72729 10.9091C2.72729 10.5325 3.03256 10.2273 3.40911 10.2273C3.78567 10.2273 4.09093 10.5325 4.09093 10.9091C4.09093 11.5733 4.46696 12.2388 5.20407 12.765C5.93986 13.2903 6.99082 13.6363 8.18184 13.6363C9.37285 13.6363 10.4238 13.2903 11.1596 12.765C11.8967 12.2388 12.2727 11.5733 12.2727 10.9091C12.2727 10.1493 11.9484 9.63708 11.3756 9.21773C10.7646 8.77035 9.89575 8.45158 8.87729 8.15453C8.51579 8.0491 8.30822 7.67057 8.41365 7.30908Z" fill="white"/> </svg>
</button>
</div>
</div>
</div>
</details>
`;
const Color = `
<details class="hura-sectors-container" open>
<summary class="hura-sectors-title">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6" fill="none"><path d="M4.00078 6C3.83058 5.99914 3.66272 5.96041 3.50935 5.88661C3.35599 5.81281 3.22098 5.7058 3.11411 5.57333L0.307445 2.17333C0.143441 1.96865 0.0402359 1.722 0.00958995 1.46151C-0.021056 1.20102 0.0220901 0.937162 0.134112 0.7C0.224965 0.493884 0.373227 0.318276 0.561191 0.194148C0.749155 0.0700212 0.968876 0.00262204 1.19411 0H6.80744C7.03268 0.00262204 7.2524 0.0700212 7.44037 0.194148C7.62833 0.318276 7.77659 0.493884 7.86744 0.7C7.97947 0.937162 8.02261 1.20102 7.99197 1.46151C7.96132 1.722 7.85812 1.96865 7.69411 2.17333L4.88744 5.57333C4.78058 5.7058 4.64557 5.81281 4.4922 5.88661C4.33884 5.96041 4.17097 5.99914 4.00078 6Z" fill="#7D8FB1"/> </svg>
<p> Color </p>
</summary>
<div class="hura-properties-list">
<div class="hura-style-item" style="width: 100%">
<p class="hura-style-title">Background color</p>
<div class="hura-color-holder">
<input data-jscolor="{format: 'hex'}" value="${$(target).css('background-color')}"
onchange="Hura_Edit.Style.changeStyle('${targetId}', 'background-color', $(this).attr('data-current-color'))"
</div>
</div>
<div class="hura-style-item" style="width: 100%">
<p class="hura-style-title">Color</p>
<div class="hura-color-holder">
<input data-jscolor="{format: 'hex'}" value="${$(target).css('color')}"
onchange="Hura_Edit.Style.changeStyle('${targetId}', 'color', $(this).attr('data-current-color'))"
</div>
</div>
</div>
</details>
`;
var html = [Typography, Color];
$('#js-hura-style-holder').html(html.join(''));
jscolor.install(); // Gọi chạy màu sắc
}
/**
* Đổi style
*/
function changeStyle(holder, attr, attriValue) {
var target = (holder != '') ? holder : 'body';
$doc.find(target).css(attr, attriValue)
}
/**
* Thêm các class để hiển thị text: In nghiêng, gạch chân, gạch ngang
*/
function changeStyleClass(type, target, className) {
if (type === 'remove') {
$doc.find('body ' + target).removeClass('hura-style-italic hura-style-under hura-style-line-through');
$('.hura-text-align button').removeClass('current');
} else {
$doc.find('body ' + target).toggleClass(className);
}
}
return {
getBodyStyle,
changeStyle,
changeStyleClass,
}
})();
return {
install : install,
Edit: Edit,
Style: Style,
Iframe: Iframe
}
})();
/**
* Panel Top, Right
* Xem thiết bị, Xem trước giao diện
*/
const Hura_Panel = class {
// Tạo panel
createPanel() {
$('body').addClass('hura-edit-body');
$(Hura_panel_top).insertBefore(IFRAME);
$(Hura_panel_right).insertAfter(IFRAME);
Hura_Edit.Style.getBodyStyle($doc.find('body')); // Lấy style của thẻ body trong iframe
Hura_Edit.Iframe.iframe_EditOptions();
}
// Xem thiết bị
setDevice(resolution) {
$(IFRAME).css('width', resolution)
}
// Xem trước giao diện
preview(action, target) {
$(target).hide();
if(action === 'preview'){
$('body').addClass('hura-show-preview');
$('#js-panel-back').show();
} else {
$('body').removeClass('hura-show-preview');
$('#js-panel-preview').show();
}
}
}
// ======= MiniGame =======
const HuraMiniGame = (function(){
/**
* Dữ liệu vòng quay
*/
let wheel_data = [
{
"id": "twruISIx3F",
"reward_id": "RQtAG7",
"title": "Voucher 200K",
"image": "https:\/\/aman.gleecdn.com\/file\/1\/zm\/ZmJDHQ4Q1sUlzIi.png",
"ordering": 8
},
{
"id": "b0en2jf9ur",
"reward_id": "GAXkB1",
"title": "Ch\u0103n l\u00f4ng c\u1eebu",
"image": "https:\/\/aman.gleecdn.com\/file\/1\/h0\/H0uc5uErNolAps8.png",
"ordering": 7
},
{
"id": "zQz9FHxIIc",
"reward_id": "6rUSQZ",
"title": "G\u1ed1i cao su Kim C\u01b0\u01a1ng",
"image": "https:\/\/aman.gleecdn.com\/file\/1\/em\/eMERdR8MvEGipt3.png",
"ordering": 6
},
{
"id": "qbMXCxn3Mt",
"reward_id": "",
"title": "Ch\u00fac b\u1ea1n may m\u1eafn l\u1ea7n sau",
"image": "https:\/\/aman.gleecdn.com\/file\/1\/ga\/gA6oSly9NqUM7lq.png",
"ordering": 5
},
{
"id": "lJjUsSGxvo",
"reward_id": "Ho7qny",
"title": "M\u0169 b\u1ea3o hi\u1ec3m \u0110\u1ec7m Xanh",
"image": "https:\/\/aman.gleecdn.com\/file\/1\/xo\/XopNVK8hFV8HtXB.png",
"ordering": 4
},
{
"id": "VsIJUBKJrd",
"reward_id": "yh1H8M",
"title": "Ru\u1ed9t g\u1ed1i \u00e9p Olympia",
"image": "https:\/\/aman.gleecdn.com\/file\/1\/so\/SoykG6czOKW38RW.png",
"ordering": 3
},
{
"id": "YqWPqbYtDP",
"reward_id": "FQiltX",
"title": "Voucher 100K",
"image": "https:\/\/aman.gleecdn.com\/file\/1\/x9\/X9PgGP3t0cRMnys.png",
"ordering": 2
},
{
"id": "fUkBY0kkuw",
"reward_id": "U01BQ1",
"title": "\u0110\u1ec7m b\u00f4ng \u00e9p Nanomax",
"image": "https:\/\/aman.gleecdn.com\/file\/1\/yr\/YrlRIw17XCN0ZUw.png",
"ordering": 1
}
]
/**
* Iframe: Popup Cài đặt vòng quay
*/
function Edit_wheel_popup() {
var html_list = [];
wheel_data.forEach(function(item, index){
html_list.push(`
<tr id="js-wheel-row-${item.id}">
<td>${index+1}</td>
<td>
<img src="${item.image}">
<a href="javascript:void(0)" style="color: #2989F9;">Chọn</a>
</td>
<td>
<select>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
</td>
<td>
<input type="text" value="${item.title}" placeholder="Tên"/>
</td>
<td>
<input type="text" value="5" placeholder="Xác xuất trúng"/>
</td>
<td>
<input type="text" value="${item.ordering}" placeholder="Thứ tự"/>
</td>
<td>
<a href="${item.image}" target="_blank" title="Xem ảnh" style="margin-right: 10px">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="15" viewBox="0 0 19 15" fill="none">
<path d="M9.01583 0C13.5092 0 17.2475 3.23333 18.0317 7.5C17.2483 11.7667 13.5092 15 9.01583 15C4.5225 15 0.784167 11.7667 0 7.5C0.783333 3.23333 4.5225 0 9.01583 0ZM9.01583 13.3333C10.7154 13.333 12.3645 12.7557 13.6932 11.696C15.0219 10.6363 15.9516 9.15689 16.33 7.5C15.9502 5.84442 15.0199 4.36667 13.6914 3.30835C12.3628 2.25004 10.7144 1.67377 9.01583 1.67377C7.31725 1.67377 5.66891 2.25004 4.34031 3.30835C3.01172 4.36667 2.08147 5.84442 1.70167 7.5C2.08008 9.15689 3.00973 10.6363 4.33845 11.696C5.66718 12.7557 7.31628 13.333 9.01583 13.3333ZM9.01583 11.25C8.02127 11.25 7.06745 10.8549 6.36418 10.1516C5.66092 9.44839 5.26583 8.49456 5.26583 7.5C5.26583 6.50544 5.66092 5.55161 6.36418 4.84835C7.06745 4.14509 8.02127 3.75 9.01583 3.75C10.0104 3.75 10.9642 4.14509 11.6675 4.84835C12.3707 5.55161 12.7658 6.50544 12.7658 7.5C12.7658 8.49456 12.3707 9.44839 11.6675 10.1516C10.9642 10.8549 10.0104 11.25 9.01583 11.25ZM9.01583 9.58333C9.56837 9.58333 10.0983 9.36384 10.489 8.97314C10.8797 8.58244 11.0992 8.05253 11.0992 7.5C11.0992 6.94747 10.8797 6.41756 10.489 6.02686C10.0983 5.63616 9.56837 5.41667 9.01583 5.41667C8.4633 5.41667 7.9334 5.63616 7.54269 6.02686C7.15199 6.41756 6.9325 6.94747 6.9325 7.5C6.9325 8.05253 7.15199 8.58244 7.54269 8.97314C7.9334 9.36384 8.4633 9.58333 9.01583 9.58333Z" fill="#2989F9"/>
</svg>
</a>
<a href="javascript:$('#js-wheel-row-${item.id}').remove()" title="Xóa">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.625 0C5.2699 0 4.94528 0.200625 4.78647 0.518241L4.1081 1.875H0.9375C0.419737 1.875 0 2.29474 0 2.8125C0 3.33026 0.419737 3.75 0.9375 3.75V13.125C0.9375 14.1606 1.77697 15 2.8125 15H10.3125C11.3481 15 12.1875 14.1606 12.1875 13.125V3.75C12.7053 3.75 13.125 3.33026 13.125 2.8125C13.125 2.29474 12.7053 1.875 12.1875 1.875H9.01687L8.3385 0.518241C8.17969 0.200625 7.85512 0 7.5 0H5.625ZM3.75 5.625C3.75 5.10724 4.16974 4.6875 4.6875 4.6875C5.20526 4.6875 5.625 5.10724 5.625 5.625V11.25C5.625 11.7678 5.20526 12.1875 4.6875 12.1875C4.16974 12.1875 3.75 11.7678 3.75 11.25V5.625ZM8.4375 4.6875C7.91972 4.6875 7.5 5.10724 7.5 5.625V11.25C7.5 11.7678 7.91972 12.1875 8.4375 12.1875C8.95528 12.1875 9.375 11.7678 9.375 11.25V5.625C9.375 5.10724 8.95528 4.6875 8.4375 4.6875Z" fill="#2989F9"/>
</svg>
</a>
</td>
</tr>
`)
})
$doc.find('#js-extend-holder').html(translateTemplate({
html_list : html_list.join(''),
}, Hura_edit_wheel ));
add_new_row();
}
/**
* Iframe: Popup Cài đặt vòng quay => Thêm hàng mới
*/
function add_new_row() {
$doc.find('#js-wheel-add-row').click(function(){
var row = $doc.find('#js-edit-wheel-holder');
order = row.find('tr').length + 1;
var html = `
<tr id="js-wheel-row-${order}">
<td>${order}</td>
<td>
<a href="javascript:void(0)" style="color: #2989F9;">Chọn</a>
</td>
<td>
<select>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
</td>
<td>
<input type="text" value="" placeholder="Tên"/>
</td>
<td>
<input type="text" value="0" placeholder="Xác xuất trúng"/>
</td>
<td>
<input type="text" value="0" placeholder="Thứ tự"/>
</td>
<td>
<a href="javascript:$('#js-wheel-row-${order}').remove()" title="Xóa">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.625 0C5.2699 0 4.94528 0.200625 4.78647 0.518241L4.1081 1.875H0.9375C0.419737 1.875 0 2.29474 0 2.8125C0 3.33026 0.419737 3.75 0.9375 3.75V13.125C0.9375 14.1606 1.77697 15 2.8125 15H10.3125C11.3481 15 12.1875 14.1606 12.1875 13.125V3.75C12.7053 3.75 13.125 3.33026 13.125 2.8125C13.125 2.29474 12.7053 1.875 12.1875 1.875H9.01687L8.3385 0.518241C8.17969 0.200625 7.85512 0 7.5 0H5.625ZM3.75 5.625C3.75 5.10724 4.16974 4.6875 4.6875 4.6875C5.20526 4.6875 5.625 5.10724 5.625 5.625V11.25C5.625 11.7678 5.20526 12.1875 4.6875 12.1875C4.16974 12.1875 3.75 11.7678 3.75 11.25V5.625ZM8.4375 4.6875C7.91972 4.6875 7.5 5.10724 7.5 5.625V11.25C7.5 11.7678 7.91972 12.1875 8.4375 12.1875C8.95528 12.1875 9.375 11.7678 9.375 11.25V5.625C9.375 5.10724 8.95528 4.6875 8.4375 4.6875Z" fill="#2989F9"/>
</svg>
</a>
</td>
</tr>
`;
row.append(html);
})
}
/**
* Panel: Cài đặt vòng quay
*/
function Panel_edit_wheel() {
html = `
<details class="hura-sectors-container" open>
<summary class="hura-sectors-title">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6" fill="none"><path d="M4.00078 6C3.83058 5.99914 3.66272 5.96041 3.50935 5.88661C3.35599 5.81281 3.22098 5.7058 3.11411 5.57333L0.307445 2.17333C0.143441 1.96865 0.0402359 1.722 0.00958995 1.46151C-0.021056 1.20102 0.0220901 0.937162 0.134112 0.7C0.224965 0.493884 0.373227 0.318276 0.561191 0.194148C0.749155 0.0700212 0.968876 0.00262204 1.19411 0H6.80744C7.03268 0.00262204 7.2524 0.0700212 7.44037 0.194148C7.62833 0.318276 7.77659 0.493884 7.86744 0.7C7.97947 0.937162 8.02261 1.20102 7.99197 1.46151C7.96132 1.722 7.85812 1.96865 7.69411 2.17333L4.88744 5.57333C4.78058 5.7058 4.64557 5.81281 4.4922 5.88661C4.33884 5.96041 4.17097 5.99914 4.00078 6Z" fill="#7D8FB1"/> </svg>
<p> Rotation settings </p>
</summary>
<div class="hura-rotation-list" id="js-hura-rotation-list"> ${Panel_build_wheel_list()}</div>
<div class="hura-rotation-button">
<button id="js-hura-rotation-add-row">[+] Thêm mới</button>
</div>
</details>
`;
$('#js-edit-extend').html(html);
$('#js-toolbar-right, #js-hura-style-holder').html('');
Panel_wheel_add_row(); // thêm mới
}
/**
* Panel: Cài đặt vòng quay => Xây html danh sách giải thưởng từ dữ liệu
*/
function Panel_build_wheel_list() {
var html = [];
couter = 0;
wheel_data.forEach(function(item){
html.push(`
<details class="hura-rotation" id="js-reward-${item.reward_id}">
<summary>
<p> + Rotation ${couter+=1} </p>
<a href="javascript:void(0)">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.24264 0.757411C9.71128 1.22605 9.71127 1.98584 9.24264 2.45447L6.69706 5.00005L9.24264 7.54564C9.71128 8.01428 9.71127 8.77407 9.24264 9.24269C8.774 9.71133 8.01423 9.71133 7.54558 9.24269L5 6.69711L2.45442 9.24269C1.98577 9.71133 1.226 9.71133 0.757359 9.24269C0.288726 8.77406 0.288717 8.01428 0.757359 7.54564L3.30294 5.00005L0.757359 2.45447C0.288734 1.98584 0.288717 1.22605 0.757359 0.757411C1.22599 0.288778 1.98579 0.288786 2.45442 0.757411L5 3.303L7.54558 0.757411C8.01421 0.288786 8.77401 0.288778 9.24264 0.757411Z" fill="#3B517B"/></svg>
</a>
</summary>
<div class="hura-rotation-detail">
<div class="hura-rotation-box">
<p>Images</p>
<img src="${item.image}" width="50">
<button class="hura-button">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="15" viewBox="0 0 19 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.02044 6.81726C9.397 6.81726 9.70226 7.12252 9.70226 7.49908V14.3182C9.70226 14.6947 9.397 15 9.02044 15C8.64388 15 8.33862 14.6947 8.33862 14.3182V7.49908C8.33862 7.12252 8.64388 6.81726 9.02044 6.81726Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.49497 0.0045727C7.51356 -0.0329564 8.52741 0.160917 9.46029 0.571616C10.3932 0.982316 11.2208 1.59916 11.881 2.37576C12.4257 3.01648 12.8446 3.75219 13.1179 4.54421H13.5664C14.5596 4.54487 15.5247 4.87624 16.3086 5.48603C17.0925 6.09583 17.651 6.94932 17.896 7.91179C18.141 8.87426 18.0584 9.89091 17.6614 10.8013C17.2645 11.7116 16.5756 12.4639 15.7036 12.9393C15.373 13.1195 14.9589 12.9976 14.7786 12.667C14.5984 12.3364 14.7203 11.9222 15.0509 11.742C15.6569 11.4116 16.1356 10.8889 16.4115 10.2562C16.6874 9.62354 16.7447 8.91702 16.5745 8.24815C16.4042 7.57927 16.0161 6.98614 15.4713 6.56237C14.9265 6.13859 14.2561 5.9083 13.5659 5.90785H12.6117C12.3009 5.90785 12.0294 5.69762 11.9516 5.39669C11.7481 4.60941 11.3687 3.87852 10.842 3.25896C10.3154 2.63941 9.65508 2.14731 8.91085 1.81966C8.16661 1.49201 7.35779 1.33734 6.54518 1.36728C5.73256 1.39722 4.93731 1.61099 4.21921 1.99252C3.5011 2.37404 2.87883 2.9134 2.39918 3.57003C1.91953 4.22667 1.59497 4.98349 1.44992 5.78362C1.30487 6.58374 1.34308 7.40633 1.5617 8.18956C1.78032 8.97278 2.17365 9.69625 2.71212 10.3056C2.96148 10.5878 2.93488 11.0186 2.65271 11.268C2.37054 11.5173 1.93966 11.4907 1.69031 11.2086C1.01534 10.4448 0.522309 9.53793 0.248273 8.55617C-0.0257621 7.57441 -0.0736691 6.5433 0.108154 5.54037C0.289978 4.53743 0.6968 3.58876 1.29804 2.76568C1.89927 1.9426 2.67928 1.26653 3.57941 0.788292C4.47954 0.310057 5.47637 0.0421019 6.49497 0.0045727Z" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.53828 7.01696C8.80454 6.75069 9.23625 6.75069 9.50251 7.01696L12.5332 10.0477C12.7995 10.3139 12.7995 10.7456 12.5332 11.0119C12.267 11.2782 11.8353 11.2782 11.569 11.0119L9.02039 8.46332L6.4718 11.0119C6.20553 11.2782 5.77383 11.2782 5.50756 11.0119C5.24129 10.7456 5.24129 10.3139 5.50756 10.0477L8.53828 7.01696Z" fill="white"></path></svg>
<span>Upload</span>
</button>
</div>
<div class="hura-style-item" style="width: 100%">
<p class="hura-style-title">Tên giải thưởng</p>
<div class="hura-text-align">
<input type="text" placeholder="Tên giải thưởng" value="${item.title}">
</div>
</div>
<div class="hura-rotation-box">
<div class="hura-style-item">
<p class="hura-style-title">Xác xuất trúng</p>
<input type="number" value="5" min="0" max="100">
</div>
<div class="hura-style-item">
<p class="hura-style-title">Thứ tự</p>
<input type="number" value="${item.ordering}" min="0">
</div>
</div>
</div>
</details>
`)
})
return html.join('')
}
/**
* Panel: Cài đặt vòng quay => Thêm hàng mới
*/
function Panel_wheel_add_row() {
$('#js-hura-rotation-add-row').click(function(){
var row = $('#js-hura-rotation-list');
order = row.find('.hura-rotation').length + 1;
html = `
<details class="hura-rotation">
<summary>
<p> + Rotation ${order} </p>
<a href="javascript:void(0)">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.24264 0.757411C9.71128 1.22605 9.71127 1.98584 9.24264 2.45447L6.69706 5.00005L9.24264 7.54564C9.71128 8.01428 9.71127 8.77407 9.24264 9.24269C8.774 9.71133 8.01423 9.71133 7.54558 9.24269L5 6.69711L2.45442 9.24269C1.98577 9.71133 1.226 9.71133 0.757359 9.24269C0.288726 8.77406 0.288717 8.01428 0.757359 7.54564L3.30294 5.00005L0.757359 2.45447C0.288734 1.98584 0.288717 1.22605 0.757359 0.757411C1.22599 0.288778 1.98579 0.288786 2.45442 0.757411L5 3.303L7.54558 0.757411C8.01421 0.288786 8.77401 0.288778 9.24264 0.757411Z" fill="#3B517B"/></svg>
</a>
</summary>
<div class="hura-rotation-detail">
<div class="hura-rotation-box">
<p>Images</p>
<img src="../images/no_image.jpg" width="50">
<button class="hura-button">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="15" viewBox="0 0 19 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.02044 6.81726C9.397 6.81726 9.70226 7.12252 9.70226 7.49908V14.3182C9.70226 14.6947 9.397 15 9.02044 15C8.64388 15 8.33862 14.6947 8.33862 14.3182V7.49908C8.33862 7.12252 8.64388 6.81726 9.02044 6.81726Z" fill="white"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.49497 0.0045727C7.51356 -0.0329564 8.52741 0.160917 9.46029 0.571616C10.3932 0.982316 11.2208 1.59916 11.881 2.37576C12.4257 3.01648 12.8446 3.75219 13.1179 4.54421H13.5664C14.5596 4.54487 15.5247 4.87624 16.3086 5.48603C17.0925 6.09583 17.651 6.94932 17.896 7.91179C18.141 8.87426 18.0584 9.89091 17.6614 10.8013C17.2645 11.7116 16.5756 12.4639 15.7036 12.9393C15.373 13.1195 14.9589 12.9976 14.7786 12.667C14.5984 12.3364 14.7203 11.9222 15.0509 11.742C15.6569 11.4116 16.1356 10.8889 16.4115 10.2562C16.6874 9.62354 16.7447 8.91702 16.5745 8.24815C16.4042 7.57927 16.0161 6.98614 15.4713 6.56237C14.9265 6.13859 14.2561 5.9083 13.5659 5.90785H12.6117C12.3009 5.90785 12.0294 5.69762 11.9516 5.39669C11.7481 4.60941 11.3687 3.87852 10.842 3.25896C10.3154 2.63941 9.65508 2.14731 8.91085 1.81966C8.16661 1.49201 7.35779 1.33734 6.54518 1.36728C5.73256 1.39722 4.93731 1.61099 4.21921 1.99252C3.5011 2.37404 2.87883 2.9134 2.39918 3.57003C1.91953 4.22667 1.59497 4.98349 1.44992 5.78362C1.30487 6.58374 1.34308 7.40633 1.5617 8.18956C1.78032 8.97278 2.17365 9.69625 2.71212 10.3056C2.96148 10.5878 2.93488 11.0186 2.65271 11.268C2.37054 11.5173 1.93966 11.4907 1.69031 11.2086C1.01534 10.4448 0.522309 9.53793 0.248273 8.55617C-0.0257621 7.57441 -0.0736691 6.5433 0.108154 5.54037C0.289978 4.53743 0.6968 3.58876 1.29804 2.76568C1.89927 1.9426 2.67928 1.26653 3.57941 0.788292C4.47954 0.310057 5.47637 0.0421019 6.49497 0.0045727Z" fill="white"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.53828 7.01696C8.80454 6.75069 9.23625 6.75069 9.50251 7.01696L12.5332 10.0477C12.7995 10.3139 12.7995 10.7456 12.5332 11.0119C12.267 11.2782 11.8353 11.2782 11.569 11.0119L9.02039 8.46332L6.4718 11.0119C6.20553 11.2782 5.77383 11.2782 5.50756 11.0119C5.24129 10.7456 5.24129 10.3139 5.50756 10.0477L8.53828 7.01696Z" fill="white"></path></svg>
<span>Upload</span>
</button>
</div>
<div class="hura-style-item" style="width: 100%">
<p class="hura-style-title">Tên giải thưởng</p>
<div class="hura-text-align">
<input type="text" placeholder="Tên giải thưởng">
</div>
</div>
<div class="hura-rotation-box">
<div class="hura-style-item">
<p class="hura-style-title">Xác xuất trúng</p>
<input type="number" value="0" min="0" max="100">
</div>
<div class="hura-style-item">
<p class="hura-style-title">Thứ tự</p>
<input type="number" value="0" min="0">
</div>
</div>
</div>
</details>
`;
row.append(html);
})
}
/**
* Panel: Danh sách trúng thưởng => Tạo tiêu đề: STT, Tên khách hàng, Giải thưởng, Thời gian trúng ,....
*/
function reward() {
var html = [];
$doc.find('#js-recent-winners thead tr *').each(function(item, index){
var title = $(this).text().trim();
var counter = item+1;
html.push(`
<a href="javascript:void(0)" class="current" onclick="HuraMiniGame.rewardTable(${counter}, this)">${title}</a>
`)
})
$('#js-toolbar-right').html(`
<div class="hura-panel-options">
<p class="hura-group-title">Hiển thị bảng</p>
<div class="hura-option-list" id="js-hura-tbl-option">
${html.join('')}
</div>
</div>
`)
}
/**
* Panel: DANH SÁCH TRÚNG THƯỞNG => Click sẽ ẩn/hiện các cột thông tin người trúng thưởng
*/
function rewardTable(count, target) {
$doc.find(`#js-recent-winners td:nth-child(${count}), #js-recent-winners th:nth-child(${count})`).toggleClass('hura-hide');
$(target).toggleClass('current')
}
// Function Hỗ trợ khác
function translateTemplate(key_value, tpl){
var translated_tpl = tpl;
for(var key in key_value){
if(key_value.hasOwnProperty(key)){
translated_tpl = translated_tpl.replace(new RegExp("{{"+key+"}}","g"), key_value[key]);
}
}
return translated_tpl;
}
return {
Edit_wheel_popup,
Panel_edit_wheel,
reward,
rewardTable,
}
})();
Reference in New Issue Copy Permalink