`;
// ======= // 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('');
$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 = `
Image
Tên ảnh
Ảnh
Width
px
Height
px
`;
$('#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('');
$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 = `
Link
Thao tác
`;
}
var html = `
Tiêu đề
${nodeNameHtml}
`
$('#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 = `
Typography
Font family
Font weight
Font size
px
Line height
px
Text align
Text decoration
`;
const Color = `
Color
Background color
Color
`;
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(`
`;
row.append(html);
})
}
/**
* Panel: Cài đặt vòng quay
*/
function Panel_edit_wheel() {
html = `
Rotation settings
${Panel_build_wheel_list()}
`;
$('#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(`
+ Rotation ${couter+=1}
Images
Tên giải thưởng
Xác xuất trúng
Thứ tự
`)
})
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 = `
+ Rotation ${order}
Images
Tên giải thưởng
Xác xuất trúng
Thứ tự
`;
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(`
${title}
`)
})
$('#js-toolbar-right').html(`
Hiển thị bảng
${html.join('')}
`)
}
/**
* 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,
}
})();
