570 lines
No EOL
22 KiB
JavaScript
570 lines
No EOL
22 KiB
JavaScript
jQuery(document).ready(function ($) {
|
|
'use strict';
|
|
|
|
let previewContent = $('.viwec-email-preview-content');
|
|
|
|
ViWec.Builder.init();
|
|
|
|
$('.viwec-show-sub-actions').on('click', function () {
|
|
$('.viwec-actions-back').slideToggle();
|
|
});
|
|
|
|
$('.viwec-order-id-test').on('change', function () {
|
|
viWecChange = true;
|
|
});
|
|
|
|
if (viWecShortcodeListValue) {
|
|
let title = $('#title[name=post_title]'), titlePos,
|
|
viWecQuickSC = $('.viwec-subject-quick-shortcode');
|
|
|
|
title.on('focusout', function () {
|
|
titlePos = this.selectionStart;
|
|
});
|
|
|
|
viWecQuickSC.append('<ul>' + viWecShortcodeListValue + '</ul>');
|
|
viWecQuickSC.on('click', '.dashicons-menu', function () {
|
|
viWecQuickSC.find('ul').toggle('fast');
|
|
});
|
|
|
|
viWecQuickSC.on('click', 'li', function () {
|
|
let currentText = title.val(),
|
|
sc = $(this).text(), newText;
|
|
|
|
if (titlePos) {
|
|
let before = currentText.substr(0, titlePos);
|
|
let after = currentText.substr(titlePos + 1);
|
|
newText = before + sc + after;
|
|
} else {
|
|
newText = currentText + sc;
|
|
}
|
|
|
|
title.val(newText).focus();
|
|
$('#title-prompt-text').addClass('screen-reader-text');
|
|
viWecQuickSC.find('ul').toggle('fast');
|
|
});
|
|
}
|
|
|
|
//Rebuild viewer from db
|
|
|
|
const viWecAttributeGroup = (key) => {
|
|
if (['padding-left', 'padding-right', 'padding-top', 'padding-bottom'].includes(key)) {
|
|
key = 'padding';
|
|
}
|
|
|
|
if (['border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'].includes(key)) {
|
|
key = 'border-radius';
|
|
}
|
|
|
|
// if (['border-top-width', 'border-left-width', 'border-bottom-width', 'border-right-width'].includes(key)) {
|
|
// key = 'border-width';
|
|
// }
|
|
|
|
return key;
|
|
};
|
|
|
|
const viWecFixColor = (string) => {
|
|
if (string) {
|
|
let patern = /rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?\)/i;
|
|
let rgb = string.match(patern);
|
|
if (rgb) {
|
|
let hex = viWecRgb2hex(rgb[0]);
|
|
string = string.replace(patern, hex);
|
|
}
|
|
let pattern000 = /rgba?[\s+]?\([\s+]?(0)[\s+]?,[\s+]?(0)[\s+]?,[\s+]?(0)[\s+]?,[\s+]?(0)[\s+]?\)/i;
|
|
let rgba000 = string.match(pattern000);
|
|
if (rgba000) {
|
|
string = 'transparent';
|
|
}
|
|
string = string.replace(/"/gi, "");
|
|
return string;
|
|
}
|
|
return '';
|
|
};
|
|
|
|
const viWecGetElCss = (element, type) => {
|
|
let component = ViWec.Components._components[type],
|
|
properties = component.properties,
|
|
content = {}, attrs = {}, childStyle = {}, style = {};
|
|
|
|
style['width'] = $(element).css('width');
|
|
|
|
for (let i in properties) {
|
|
if (properties[i].htmlAttr) {
|
|
let _element = properties[i].target ? $(element).find(properties[i].target) : $(element);
|
|
let _key = viWecAttributeGroup(properties[i].key);
|
|
|
|
switch (properties[i].htmlAttr) {
|
|
case 'innerHTML':
|
|
content[_key] = _element.html();
|
|
break;
|
|
|
|
case 'style':
|
|
let css;
|
|
css = ViWec.StyleManager.getStyle(_element, properties[i], _key); //_element.css(_key)
|
|
if (css) style[_key] = viWecFixColor(css);
|
|
|
|
break;
|
|
|
|
case 'childStyle':
|
|
if (!childStyle[properties[i].target]) childStyle[properties[i].target] = {};
|
|
let childCss = ViWec.StyleManager.getStyle(_element, properties[i], _key);
|
|
|
|
if (childCss) childStyle[properties[i].target][_key] = viWecFixColor(childCss);
|
|
|
|
break;
|
|
|
|
default :
|
|
let attr = _element.attr(properties[i].htmlAttr),
|
|
defaultValue = properties[i].default ? properties[i].default : '';
|
|
attr = attr ? attr : defaultValue;
|
|
attrs[_key] = attr;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return {type: type, style: style, content: content, attrs: attrs, childStyle: childStyle};
|
|
};
|
|
|
|
const viWecGetRowCss = (element, type) => {
|
|
|
|
let component = ViWec.Components._components[type],
|
|
properties = component ? component.properties : '',
|
|
style = {};
|
|
|
|
if (properties) {
|
|
for (let i in properties) {
|
|
if (properties[i].htmlAttr) {
|
|
let _key = viWecAttributeGroup(properties[i].key);
|
|
// let css = element.css(_key);
|
|
let el = (element.get(0)), css;
|
|
|
|
if (el.style && el.style.length > 0 && el.style[_key])//check inline
|
|
css = el.style[_key];
|
|
else if (el.currentStyle) //check defined css
|
|
css = el.currentStyle[_key];
|
|
else if (window.getComputedStyle) {
|
|
css = document.defaultView.getDefaultComputedStyle ?
|
|
document.defaultView.getDefaultComputedStyle(el, null).getPropertyValue(_key) :
|
|
window.getComputedStyle(el, null).getPropertyValue(_key);
|
|
}
|
|
|
|
if (css) style[_key] = viWecFixColor(css);
|
|
|
|
}
|
|
}
|
|
style['width'] = element.css('width')
|
|
}
|
|
return style;
|
|
};
|
|
|
|
const getEmailStructure = () => {
|
|
let dataArray = {}, container = $('#viwec-email-editor-wrapper');
|
|
|
|
dataArray['style_container'] = {
|
|
'background-color': viWecFixColor(container.css('background-color')),
|
|
'background-image': container.css('background-image')
|
|
};
|
|
dataArray['rows'] = {};
|
|
|
|
$(viWecEditorArea).find('.viwec-layout-row').each(function (rowIndex, row) { //loop rows
|
|
//get row style
|
|
let type = $(row).attr('data-type'), dataCols = $(row).attr('data-cols'),
|
|
rowOuterStyle = viWecGetRowCss($(row), type);
|
|
|
|
dataArray['rows'][rowIndex] = {props: {style_outer: rowOuterStyle, type: type, dataCols: dataCols}, cols: {}}; //style_inner: rowInnerStyle,
|
|
|
|
//get columns
|
|
let col = $(row).find('.viwec-column-sortable');
|
|
if (col.length) {
|
|
col.each(function (colIndex, col) { //loop cols
|
|
// let colStyle = viWecFixColor($(col).attr('style'));
|
|
let colStyle = viWecGetRowCss($(col), 'layout/grid1cols');
|
|
dataArray['rows'][rowIndex]['cols'][colIndex] = {props: {style: colStyle}, elements: {}};
|
|
|
|
//get elements
|
|
let elements = $(col).find('.viwec-element');
|
|
if (elements.length) {
|
|
elements.each(function (elIndex, element) {
|
|
let type = $(element).data('type');
|
|
dataArray['rows'][rowIndex]['cols'][colIndex]['elements'][elIndex] = viWecGetElCss(element, type);
|
|
})
|
|
}
|
|
})
|
|
}
|
|
});
|
|
// console.log(dataArray);
|
|
// debugger
|
|
return JSON.stringify(dataArray);
|
|
};
|
|
|
|
$('#save-post').on('click', function () {
|
|
$("input[name=post_status]").val('draft');
|
|
});
|
|
|
|
$('form').on('submit', function (e) {
|
|
$(window).unbind('beforeunload');
|
|
$("<input/>").attr({type: 'hidden', name: 'viwec_email_structure', value: getEmailStructure()}).appendTo("form#post");
|
|
return true;
|
|
});
|
|
|
|
function viWecPreview() {
|
|
let data = {
|
|
action: 'viwec_preview_template',
|
|
nonce: viWecParams.nonce,
|
|
data: getEmailStructure(),
|
|
order_id: $('.viwec-order-id-test').val(),
|
|
direction: $('.viwec-settings-direction').val(),
|
|
custom_css: $('#viwec-custom-css textarea').val(),
|
|
email_type: $('.viwec-set-email-type').val()
|
|
},
|
|
button = $(this),
|
|
modal = $('.vi-ui.modal');
|
|
|
|
if (viWecChange === false) {
|
|
modal.modal('show');
|
|
if (button.hasClass('mobile')) {
|
|
previewContent.addClass('viwec-mobile-preview');
|
|
}
|
|
if (button.hasClass('desktop')) {
|
|
previewContent.removeClass('viwec-mobile-preview');
|
|
}
|
|
} else {
|
|
$.ajax({
|
|
url: viWecParams.ajaxUrl,
|
|
type: 'post',
|
|
data: data,
|
|
beforeSend: function () {
|
|
button.addClass('loading').unbind();
|
|
},
|
|
success: function (res) {
|
|
if (res) {
|
|
modal.find('.viwec-email-preview-content').html(res);
|
|
modal.modal('show');
|
|
|
|
$('.viwec-email-preview-content a').on('click', function (e) {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
});
|
|
}
|
|
},
|
|
error: function (res) {
|
|
console.log(res);
|
|
},
|
|
complete: function () {
|
|
button.removeClass('loading');
|
|
button.bind('click', viWecPreview);
|
|
viWecChange = false;
|
|
if (button.hasClass('mobile')) {
|
|
previewContent.addClass('viwec-mobile-preview');
|
|
}
|
|
if (button.hasClass('desktop')) {
|
|
previewContent.removeClass('viwec-mobile-preview');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
$('.viwec-preview-email-btn').on('click', viWecPreview);
|
|
|
|
function viWecSendTestEmail() {
|
|
let button = $('.viwec-send-test-email-btn');
|
|
let email = $('.viwec-to-email').val();
|
|
|
|
if (!email) {
|
|
alert('Please input your email');
|
|
$('.vi-ui.modal').modal('hide');
|
|
return;
|
|
}
|
|
|
|
let data = {
|
|
action: 'viwec_send_test_email',
|
|
nonce: viWecParams.nonce,
|
|
data: getEmailStructure(),
|
|
order_id: $('.viwec-order-id-test').val(),
|
|
email: email,
|
|
direction: $('.viwec-settings-direction').val(),
|
|
custom_css: $('#viwec-custom-css textarea').val(),
|
|
email_type: $('.viwec-set-email-type').val()
|
|
};
|
|
$.ajax({
|
|
url: viWecParams.ajaxUrl,
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: data,
|
|
beforeSend: function () {
|
|
button.addClass('loading').unbind();
|
|
},
|
|
success: function (res) {
|
|
let color = res.success ? '#00DA00' : 'red';
|
|
viWecNoticeBox(res.data, color);
|
|
},
|
|
complete: function () {
|
|
button.removeClass('loading').bind('click', viWecSendTestEmail);
|
|
$('.vi-ui.modal').modal('hide');
|
|
}
|
|
});
|
|
}
|
|
|
|
$('.viwec-send-test-email-btn').on('click', viWecSendTestEmail);
|
|
|
|
$('.viwec-mobile-view').on('click', function () {
|
|
previewContent.addClass('viwec-mobile-preview');
|
|
});
|
|
|
|
$('.viwec-pc-view').on('click', function () {
|
|
previewContent.removeClass('viwec-mobile-preview');
|
|
});
|
|
|
|
ViWec.viWecDrawTemplate = (viWecTemplate) => {
|
|
if (!viWecTemplate) {
|
|
return;
|
|
}
|
|
$(viWecEditorArea).empty();
|
|
|
|
$('#viwec-email-editor-wrapper').css(viWecTemplate['style_container']);
|
|
|
|
for (let rowIndex in viWecTemplate['rows']) {
|
|
if ($.isEmptyObject(viWecTemplate['rows'][rowIndex]['cols'])) continue;
|
|
|
|
let row = $(viWecTmpl('viwec-block', {
|
|
type: viWecTemplate['rows'][rowIndex].props.type,
|
|
colsQty: viWecTemplate['rows'][rowIndex].props.dataCols
|
|
}));
|
|
row.find('.viwec-layout-row').css(viWecTemplate['rows'][rowIndex].props.style_outer);
|
|
|
|
row.find('.viwec-column').each(function (colIndex) {
|
|
let col = $(this);
|
|
if (!$.isEmptyObject(viWecTemplate['rows'][rowIndex]['cols'][colIndex].elements)) {
|
|
col.removeClass('viwec-column-placeholder')
|
|
}
|
|
|
|
col.find('.viwec-column-sortable').css(viWecTemplate['rows'][rowIndex]['cols'][colIndex].props.style);
|
|
|
|
for (let elIndex in viWecTemplate['rows'][rowIndex]['cols'][colIndex]['elements']) {
|
|
let el = viWecTemplate['rows'][rowIndex]['cols'][colIndex]['elements'][elIndex],
|
|
type = el.type, style = el.style, content = el.content,
|
|
attrs = el.attrs.length !== 0 ? el.attrs : {}, childStyle = el.childStyle;
|
|
|
|
let component = ViWec.Components._components[type];
|
|
|
|
if (typeof component === 'undefined') continue;
|
|
|
|
let properties = component.properties,
|
|
element = $(`<div class="viwec-element" data-type="${type}"></div>`).append(component.html);
|
|
|
|
for (let i in properties) {
|
|
if (properties[i].htmlAttr && properties[i].visible !== false) {
|
|
let _element = properties[i].target ? element.find(properties[i].target) : element;
|
|
switch (properties[i].htmlAttr) {
|
|
case 'innerHTML':
|
|
if (properties[i].renderShortcode) {
|
|
let clone = _element.clone();
|
|
clone = clone.removeClass().html(ViWec.viWecReplaceShortcode(content[properties[i].key])).addClass('viwec-text-view');
|
|
_element.html(content[properties[i].key]).hide();
|
|
_element.after(clone);
|
|
} else {
|
|
_element.html(content[properties[i].key]);
|
|
}
|
|
if (typeof properties[i].onChange === 'function') {
|
|
properties[i].onChange(_element, content[properties[i].key]);
|
|
}
|
|
break;
|
|
case 'style':
|
|
if (style) _element.css(style);
|
|
break;
|
|
case 'childStyle':
|
|
if (childStyle[properties[i].target]) _element.css(childStyle[properties[i].target]);
|
|
break;
|
|
default:
|
|
_element.attr(properties[i].htmlAttr, attrs[properties[i].key]);
|
|
if (typeof properties[i].onChange === 'function') {
|
|
let viewValue = ViWec.viWecReplaceShortcode(attrs[properties[i].key]);
|
|
properties[i].onChange(_element, attrs[properties[i].key], viewValue);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
element.handleElement();
|
|
col.find('.viwec-column-sortable').append(element);
|
|
}
|
|
|
|
col.handleColumn();
|
|
col.find('.viwec-column-sortable').columnSortAble();
|
|
row.find('.viwec-flex').append(col);
|
|
});
|
|
|
|
row.handleRow();
|
|
|
|
row.appendTo(viWecEditorArea);
|
|
}
|
|
};
|
|
|
|
if (typeof viWecLoadTemplate !== 'undefined') {
|
|
let viWecTemplate = JSON.parse(viWecLoadTemplate);
|
|
ViWec.viWecDrawTemplate(viWecTemplate);
|
|
}
|
|
|
|
$('.viwec-export-data').on('click', function () {
|
|
let data = getEmailStructure();
|
|
let regex = new RegExp(viWecParams.siteUrl, 'g');
|
|
data = data.replace(regex, '{_site_url}');
|
|
$('#viwec-exim-data').val(data);
|
|
});
|
|
|
|
$('.viwec-import-data').on('click', function () {
|
|
let data = $('#viwec-exim-data').val();
|
|
data = data.replace(/{_site_url}/g, viWecParams.siteUrl);
|
|
if (data) {
|
|
ViWec.viWecDrawTemplate(JSON.parse(data));
|
|
}
|
|
});
|
|
|
|
$('.viwec-copy-data').on('click', function () {
|
|
$('#viwec-exim-data').select();
|
|
document.execCommand("copy");
|
|
});
|
|
|
|
$('#viwec-element-search input.viwec-search').on('keyup', function () {
|
|
let keyword = $(this).val().toUpperCase(), li = $('#viwec-components-list li');
|
|
for (let i = 0; i < li.length; i++) {
|
|
let a = $(li[i]).find('.viwec-ctrl-title');
|
|
let txtValue = a.text();
|
|
if (txtValue.toUpperCase().indexOf(keyword) > -1) {
|
|
$(li[i]).show();
|
|
} else {
|
|
$(li[i]).hide();
|
|
}
|
|
}
|
|
});
|
|
|
|
const runApp = {
|
|
init() {
|
|
let emailTypeSelect = $('.viwec-set-email-type');
|
|
this.setupPage();
|
|
this.setupPreviewModal();
|
|
this.emailTypeChange();
|
|
this.hideRules(emailTypeSelect.val());
|
|
this.hideElements(emailTypeSelect.val());
|
|
this.addNewTemplate();
|
|
this.direction();
|
|
},
|
|
|
|
setupPage() {
|
|
$(window).bind('beforeunload');
|
|
|
|
//Toggle admin menu
|
|
if ($(document).width() <= 1400) {
|
|
$('body').addClass('folded');
|
|
}
|
|
|
|
//Remove metabox handle
|
|
$('.hndle').removeClass('hndle');
|
|
|
|
//Block enter key
|
|
$('form').bind('keypress', function (e) {
|
|
if (e.keyCode === 13) {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
}
|
|
});
|
|
|
|
//Hide quick shortcode
|
|
$(document).on('click', function (e) {
|
|
if (!$(e.target).is('.viwec-quick-shortcode-list') && !$(e.target).is('.dashicons.dashicons-menu')) {
|
|
$('.viwec-quick-shortcode-list').hide();
|
|
$('.viwec-subject-quick-shortcode ul').hide();
|
|
}
|
|
});
|
|
|
|
//Init select2 to rule
|
|
$('.viwec-select2').select2({placeholder: $(this).attr('data-placeholder')});
|
|
|
|
//Init control panel tab
|
|
$(`#viwec-control-panel .menu .item`).tab();
|
|
|
|
$('.viwec-toggle-admin-bar').on('click', function () {
|
|
let _this = $(this);
|
|
_this.toggleClass('dashicons-arrow-left dashicons-arrow-right', 1000);
|
|
$('body.wp-admin').toggleClass('viwec-admin-bar-hidden', 1000);
|
|
|
|
$.ajax({
|
|
url: ajaxurl,
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: {action: 'viwec_change_admin_bar_stt'},
|
|
});
|
|
});
|
|
|
|
$('.viwec-quick-add-layout-btn').on('click', function () {
|
|
$('.viwec-layout-list').toggle();
|
|
});
|
|
},
|
|
|
|
setupPreviewModal() {
|
|
//Block links
|
|
$('body').on('click', '.viwec-email-preview a, #viwec-email-editor-wrapper a', function (e) {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
});
|
|
},
|
|
|
|
addNewTemplate() {
|
|
if (typeof viWecParams.addNew !== 'undefined') {
|
|
let id = viWecParams.addNew.type || '', style = viWecParams.addNew.style || '';
|
|
if (id && style) {
|
|
viWecFunctions.doChangeSampleTemplate(id, style);
|
|
}
|
|
|
|
$('.viwec-samples-type').val(id).trigger('change');
|
|
$('.viwec-samples-style').val(style).trigger('change');
|
|
|
|
delete viWecParams.addNew;
|
|
}
|
|
},
|
|
|
|
emailTypeChange() {
|
|
// $('select.viwec-input[name=viwec_settings_type]').on('change', function () {
|
|
// let couponOptions = $('.wacv-abandoned-cart-coupon');
|
|
// $(this).val() === 'abandoned_cart' ? couponOptions.show() : couponOptions.hide();
|
|
// });
|
|
|
|
$('.viwec-set-email-type').on('change', function () {
|
|
let emailType = $(this).val();
|
|
runApp.hideRules(emailType);
|
|
runApp.hideElements(emailType);
|
|
});
|
|
},
|
|
|
|
hideRules(type) {
|
|
// Pro
|
|
},
|
|
|
|
hideElements(type) {
|
|
let args = viWecParams.accept_elements || '';
|
|
let list = args[type] || '';
|
|
|
|
if (!list) {
|
|
$('#viwec-components-list .viwec-control-btn').parent().removeClass('viwec-hidden');
|
|
} else {
|
|
$('#viwec-components-list .viwec-control-btn').parent().addClass('viwec-hidden');
|
|
|
|
for (let el of list) {
|
|
$(`#viwec-components-list .viwec-control-btn[data-type='${el}']`).parent().removeClass('viwec-hidden');
|
|
}
|
|
}
|
|
},
|
|
direction() {
|
|
$('.viwec-settings-direction').on('change', function () {
|
|
let dir = $(this).val();
|
|
let editor = $('#viwec-email-editor-content');
|
|
editor.removeClass('viwec-direction-rtl viwec-direction-ltr');
|
|
editor.addClass('viwec-direction-' + dir);
|
|
});
|
|
}
|
|
};
|
|
|
|
runApp.init();
|
|
}); |