').append(val);
var selContent = selfEle.html();
var selfFC = selfEle[0].firstChild;
var emptyContent = false;
if(selfFC == null || pagelayer_empty(selContent)){
selContent = '
';
emptyContent = true;
}else if(selfFC.nodeType == Node.TEXT_NODE){
selContent = '
'+selContent+'
';
}else if(selfEle.text() == '' && selfEle.find('br').length < 1){
selContent = '
';
emptyContent = true;
}else if(selfEle.text().trim() == ''){
selContent = selContent.replace(/\s+/, "\u00A0");
emptyContent = true;
}
range.deleteContents();
if( jQuery(startContainer).is(':first-child') && jQuery(startContainer).is(':empty') ){
jQuery(startContainer).html('
');
}else if( jQuery(startContainer).is(':empty') ){
jQuery(startContainer).remove();
}
// If editor is empty
if( editable.is(':empty') ){
editable.html('
');
}
editable.trigger('input');
editable.blur();
// Create and add text widget
var ele;
if(emptyContent){
ele = addTitle(jEle.parent());
}else{
var id = pagelayer_copy_element(jEle);
ele = pagelayer_ele_by_id(id);
}
ele.click();
var editorArea = ele.find('[pagelayer-editable]');
editorArea.html(selContent);
editorArea.find('p:empty').remove();
editorArea.focus().trigger('input');
}
// ctrl+s handle
if(event.keyCode == 83 && event.ctrlKey){
event.preventDefault();
pagelayer.$$('.pagelayer-iframe-top-bar').find('.pagelayer-update-button').click();
}
// ctrl+d handle
if(event.keyCode == 68 && event.ctrlKey){
// If we have an active element
if( pagelayer_active.el && pagelayer_active.el.id ){
event.preventDefault();
pagelayer_copy_element('[pagelayer-id='+pagelayer_active.el.id+']');
}
}
// Delete handler for text widget
if(event.keyCode == 46 && editable.length > 0){
var jEle = tEle.closest('.pagelayer-ele-wrap');
var tag = pagelayer_tag(jEle);
var next = jEle.next();
var pTag = pagelayer_tag(next);
var selection = window.getSelection();
var orgRange = selection.getRangeAt(0);
var cloneRange = orgRange.cloneRange();
if((tag != 'pl_text' && tag != 'pl_heading') || next.length < 1 || pTag != tag || !cloneRange.collapsed ){
return;
}
var currentOffset = pagelayer_getCaretCharacterOffsetWithin(editable[0]);
cloneRange.selectNodeContents(editable[0]);
var caretOffset = cloneRange.toString().length;
if(currentOffset != caretOffset){
return;
}
var nextHtml = next.find('[pagelayer-editable="text"]').html();
editable.append(nextHtml);
pagelayer_delete_element(next.children('.pagelayer-ele'));
}
// Backspace handler
if(event.keyCode == 8 && editable.length > 0){
var jEle = tEle.closest('.pagelayer-ele-wrap');
var tag = pagelayer_tag(jEle);
var prev = jEle.prev();
if((tag != 'pl_text' && tag != 'pl_heading') || prev.length < 1){
return;
}
var pTag = pagelayer_tag(prev);
var selection = window.getSelection();
if (selection == null || selection.rangeCount <= 0) return null;
var range1 = selection.getRangeAt(0);
if(pTag != tag || range1.startOffset != 0){
return;
}
var prevArea = prev.find('[pagelayer-editable="text"]');
if( pagelayer_getCaretCharacterOffsetWithin(editable[0]) != 0 || prevArea.length < 1){
return;
}
//event.preventDefault();
var html = editable.html();
editable.blur();
prev.children('.pagelayer-ele').click();
prevArea.click();
var newSel = window.getSelection();
var newRange = newSel.getRangeAt(0);
var lastChild = jQuery(prevArea[0].lastChild);
prevArea.append(html);
prevArea.trigger('input');
if(lastChild.length > 0){
if(lastChild[0].nextSibling != null){
newRange.setStart(lastChild[0].nextSibling, 0);
}else{
newRange.setStartAfter(lastChild[0]);
}
}
newRange.collapse(true);
newSel.removeAllRanges();
newSel.addRange(newRange);
pagelayer_delete_element(jEle.children('.pagelayer-ele'));
}
if(tooltip.is(':visible')){
// Select previous widget in widget tooltip
if(event.key == 'ArrowUp' || event.key == 'ArrowLeft' || (event.key == 'Tab' && event.shiftKey)){
event.preventDefault();
var current = tooltip.find('.pagelayer-list-widget-active:visible'),
prev = current.prevAll('.pagelayer-shortcode-holder:visible');
if(event.key == 'ArrowUp'){
var _prev = prev,
cOffset = current.offset();
findNext = false;
var searchNext = function(nEle){
var nOffset = nEle.offset();
var nBottom = nOffset.top + nEle.height();
if(nBottom > cOffset.top){
return true;
}
prev = nEle;
findNext = true;
// Current element left set +20 to manager previous scale (css) element on hover
if(cOffset.left + 20 >= nOffset.left){
return false;
}
return true;
}
_prev.each(function(){
return searchNext(jQuery(this));
});
if(!findNext){
var gNext = current.parent().prevAll('.pagelayer-widget-group:visible').first();
_prev = gNext.children('.pagelayer-shortcode-holder:visible');
jQuery(_prev.get().reverse()).each(function(){
return searchNext(jQuery(this));
});
}
}
if(prev.length < 1){
prev = current.parent().prevAll('.pagelayer-widget-group:visible').first().find('.pagelayer-shortcode-holder:visible').last();
}
if(prev.length < 1){
return;
}
prev.first().trigger('widget_active');
}
// Select next widget in widget tooltip
if(event.key == 'ArrowDown' || event.key == 'ArrowRight' || (event.key == 'Tab' && !event.shiftKey)){
event.preventDefault();
var current = tooltip.find('.pagelayer-list-widget-active:visible');
next = current.nextAll('.pagelayer-shortcode-holder:visible');
if(event.key == 'ArrowDown'){
var _next = next,
cOffset = current.offset(),
findNext = false;
var searchNext = function(nEle){
var nOffset = nEle.offset();
var cBottom = cOffset.top + current.height();
if(cBottom > nOffset.top){
return true;
}
next = nEle;
findNext = true;
// Current element left set -20 to manager next scale (css) element on hover
if(cOffset.left - 20 <= nOffset.left){
return false;
}
return true;
}
_next.each(function(){
return searchNext(jQuery(this));
});
if(!findNext){
var gNext = current.parent().nextAll('.pagelayer-widget-group:visible').first();
_next = gNext.children('.pagelayer-shortcode-holder:visible');
_next.each(function(){
return searchNext(jQuery(this));
});
}
}
if(next.length < 1){
next = current.parent().nextAll('.pagelayer-widget-group:visible').first().find('.pagelayer-shortcode-holder:visible');
}
if(next.length < 1){
return;
}
next.first().trigger('widget_active');
}
}
// Is this in the editable area ?
if (tEle.is('input, textarea') || editable.length > 0) {
return;
}
// Delete
if(event.keyCode == 46){
pagelayer_delete_element('[pagelayer-active]');
}
// ctrl+z handle
if(event.keyCode == 90 && event.ctrlKey){
pagelayer_do_history('undo');
}
// ctrl+y handle
if(event.keyCode == 89 && event.ctrlKey){
pagelayer_do_history('redo');
}
});
// Handle Copy of content
jQuery(document).on('copy', function(copyEvent){
// Is Selected string?
var selectedText = "";
if (window.getSelection){ // all modern browsers and IE9+
selectedText = window.getSelection().toString();
}
if(selectedText.length > 0){
return;
}
if(pagelayer_active.el && pagelayer_active.el.id){
copyEvent.preventDefault();
// Save the active element id
pagelayer_copy_select("[pagelayer-id='"+pagelayer_active.el.id+"']", copyEvent);
}
});
// This is for preload clipboard data
// Content can be copied from outside
var pagelayerIsParentBlured = true;
jQuery(window).on('focus', function(e){
if(pagelayerIsParentBlured){
pagelayer_copy_from_clipboard();
}
pagelayerIsParentBlured = true;
});
jQuery(window.parent).on('focus', function(){
pagelayerIsParentBlured = false;
});
// Handle Paste in the editor
jQuery(document).on('paste', function(pasteEvent){
var pEle_target = jQuery((pasteEvent.originalEvent || pasteEvent).target);
var tag = pagelayer_tag(pEle_target.closest('[pagelayer-id]'));
var clipboardData = (pasteEvent.originalEvent || pasteEvent).clipboardData;
var items = clipboardData.items;
var pagelayer_ajax_func = {};
var contenteditable = false;
var pasteWidget = false;
if( pEle_target.closest('[contenteditable="true"]').length > 0 || pEle_target.is('input, textarea') ){
pEle_target = pEle_target.closest('[contenteditable="true"], input, textarea');
contenteditable = true;
}
if( items.length < 1 || (items.length == 1 && pagelayer_empty(clipboardData.getData(items[0].type))) ){
pasteWidget = true;
}
// This function for ajax before send call back
pagelayer_ajax_func['beforeSend'] = function(xhr){
// If target is not content editable
if( pagelayer_empty(contenteditable) ){
// If we dont have an active element then return false and stop ajax
if( !(pagelayer_active.el && pagelayer_active.el.id) ){
pagelayer_show_msg(pagelayer_l('active_ele_paste_msg'));
return false;
}
pagelayer.copy_selected = jQuery('
');
// Is it to be pastable
if(!pagelayer_can_copy_to('[pagelayer-id="'+pagelayer_active.el.id+'"]')){
pagelayer.copy_selected = '';
return false;
}
}
pEle_target.css({'opacity': '0.33' , 'transition' : '0.1s'});
}
// This function for ajax success call back
pagelayer_ajax_func['success'] = function(obj){
// Successfully Uploaded
if(obj['success']){
// For content editable e.g. Rich Text
if( !pagelayer_empty(contenteditable) ){
document.execCommand('insertImage', false, obj['data']['url']);
// For our widgets
}else{
if(pagelayer_empty(pagelayer_active.el) || pagelayer_empty(pagelayer_active.el.id)){
pagelayer_show_msg('active_ele_paste_msg');
return;
}
var fTo = pagelayer_can_copy_to('[pagelayer-id="'+pagelayer_active.el.id+'"]');
// We need to empty pagelayer.copy_selected
pagelayer.copy_selected = '';
var pasteAfter = function(){
// Prevent to add action history
pagelayer.history_action = false;
// Create image html
var html = pagelayer_create_sc('pl_image');
pagelayer_set_atts(html, 'id', obj['data']['id']);
pagelayer_set_tmp_atts(html, 'id-url', obj['data']['url']);
// Allow to add action history
pagelayer.history_action = true;
// Copy the element
var id = pagelayer_copy_element(html, fTo);
jQuery('[pagelayer-id="'+id+'"]').click();
};
var replaceURL = function(){
// Finding widget image setting using id of jEle. Finding image editor setting from all of the other settings.
var row = pagelayer.$$('[pagelayer-element-id='+pagelayer_active.el.id+']').find('.pagelayer-elp-image').eq(0).parent().parent();
row.find('.pagelayer-elp-image').css('background-image', 'url(\''+obj['data']['url']+'\')');
// To remove past temp attr so that they are not involve in future temp values
var cname = row.attr('pagelayer-elp-name');
var old = _pagelayer_img_tmp_atts(row);
delete old[cname+'-url'];
for(var x in obj['data']['sizes']){
_pagelayer_set_tmp_atts(row, x+'-url', obj['data']['sizes'][x]['url']);
delete old[cname+'-'+x+'-url'];
}
for(var x in old){
_pagelayer_set_tmp_atts(row, x+'-url', '');
}
// Save and render
_pagelayer_set_tmp_atts(row, 'url', obj['data']['url']);
_pagelayer_set_atts(row, obj['data']['id']);
};
// Image paste confirmation.
if(!pagelayer_empty(pagelayer_active.el.tag) && pagelayer_active.el.tag == 'pl_image'){
pagelayer_confirmation_box(pagelayer_l('img_paste_conf'), replaceURL, pasteAfter, pagelayer_l('replace_img'), pagelayer_l('paste_after'));
}else{
pasteAfter();
}
}
// Some error occured
}else{
pagelayer_show_msg(obj['data']['message'], 'error', 10000);
}
}
// This function for ajax complete call back
pagelayer_ajax_func['complete'] = function(xhr){
//console.log(xhr);
pEle_target.css({'opacity': '1' , 'transition' : '0.1s'});
}
var findImg = pagelayer_editable_paste_handler(pasteEvent, pagelayer_ajax_func);
if(pagelayer_empty(findImg) || pasteWidget){
// Check the active element
if(pagelayer_active.el && pagelayer_active.el.id && pagelayer_active.el.tag != 'pl_post_props'){
const text = clipboardData.getData('text');
var pEle = jQuery(text);
var getData = true;
if(pEle.length > 0 && !pagelayer_empty(pagelayer_tag(pEle)) ){
// Cache pEle to make contextmenu paste faster
pagelayer.copy_selected = pEle;
getData = false;
// Is it to be pastable
if(pagelayer_can_copy_to('[pagelayer-id="'+pagelayer_active.el.id+'"]')){
pasteEvent.preventDefault();
var jEle = jQuery("[pagelayer-id='"+pagelayer_active.el.id+"']");
// Check if the any element is copied
pagelayer_paste_element(jEle, false);
}
}
}else{
pagelayer_show_msg(pagelayer_l('no_active_ele_paste'));
}
}
});
// Delete an element as per the selector
function pagelayer_delete_element(selector){
var jEle = jQuery(selector);
var nearBy = jEle;
// Anything found ?
if(jEle.length > 0){
var id = pagelayer_assign_id(jEle);
var sc = pagelayer_tag(jEle);
// Is there a wrap
var wrap = jQuery('[pagelayer-wrap-id="'+id+'"]');
var par = wrap.parent();
// Save this element in history action
if(pagelayer.history_action){
var cEle = pagelayer_near_by_ele(id, sc);
nearBy = jQuery(cEle.cEle);
// To save in history, we need to save only element not the wraps as we call setup if we redo or undo
jEle.find('style').remove();
jEle.find('.pagelayer-ele-overlay').remove();
// Unwrap the wraps
jEle.find('.pagelayer-ele').each(function (){
var ele = jQuery(this);
if(ele.parent().is('.pagelayer-ele-wrap')){
ele.unwrap();
}
});
pagelayer_history_action_push({
'title' : pagelayer_shortcodes[sc]['name'],
'action' : 'Deleted',
'pl_id' : id,
'html' : jEle[0].outerHTML,
'cEle' : cEle
});
}
wrap.remove();
pagelayer_empty_col(par);
if( (pagelayer_active.el && pagelayer_active.el.id == id) ||
(pagelayer_active.el && pagelayer_active.el.id && jQuery('[pagelayer-id="'+pagelayer_active.el.id+'"]').length < 1)){
pagelayer.$$('.pagelayer-elpd-close').click();
}
}
// Do Pagelayer dirty
pagelayer_do_dirty(nearBy);
};
// Select an element
function pagelayer_copy_select(selector, copyEvent = false){
var sEle = jQuery(selector);
if(sEle.length < 1){
pagelayer_show_msg( pagelayer_l('invalid_copy_ele_msg'));
return;
}
var tag = pagelayer_tag(sEle);
if(
pagelayer_empty(tag) ||
pagelayer_empty(pagelayer_shortcodes[tag]) ||
!pagelayer_empty(pagelayer_shortcodes[tag]['not_visible'])
){
pagelayer_show_msg( pagelayer_l('invalid_copy_ele_msg'));
return;
}
var eHtml = sEle[0].outerHTML;
pagelayer.copy_selected = eHtml;
// To hide Cliboard warning while pasting
pagelayerClipboardReadable = true;
if(copyEvent){
// set clipbord data
(copyEvent.originalEvent || copyEvent).clipboardData.setData('text/plain', eHtml);
pagelayer_show_msg(pagelayer_l('copied_msg'));
return;
}
// Copy element to clipboard
pagelayer_copy_ele_to_clipboard(eHtml);
}
// Select an element
function pagelayer_copy_ele_to_clipboard(eHtml){
var fallbackCopy = function(text){
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = "fixed"; // avoid scrolling
textarea.style.opacity = 0;
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
document.execCommand('copy');
pagelayer_show_msg( pagelayer_l('copied_msg'));
}catch(err){
//console.error("Copy failed", err);
pagelayer_show_msg( pagelayer_l('Copy failed'));
}
document.body.removeChild(textarea);
}
// Modern clipboard API
if(navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(eHtml).then(() => {
pagelayer_show_msg( pagelayer_l('copied_msg'));
}).catch(() => {
fallbackCopy(eHtml);
});
}else{
fallbackCopy(eHtml);
}
}
function pagelayer_can_copy_to(to){
var jEle = jQuery(pagelayer.copy_selected);
var tEle = jQuery(to);
var eTag = pagelayer_tag(jEle);
var tTag = pagelayer_tag(tEle);
//console.log(eTag+' - '+tTag);
// Invalid HTML copied
if(pagelayer_empty(eTag)){
return false;
}
// Final to
var fTo;
// Selected element is a Row, can go only after a row
if(eTag == 'pl_row'){
fTo = tEle.closest('.pagelayer-ele.pagelayer-row');
if(fTo.length != 1) return false;
return fTo;
}
// Selected element is a Column, can go only after a col
if(eTag == 'pl_col'){
fTo = tEle.closest('.pagelayer-ele.pagelayer-col');
if(fTo.length != 1) return false;
return fTo;
}
// Is the TARGET a row or column when the selected item is a element
if(tTag == 'pl_row' || tTag == 'pl_col'){
return false;
}
return tEle;
}
// Select an element
function pagelayer_paste_element(to, syncClipboard = true){
// Wait for clipboard sync
// This is for context paste
if(syncClipboard){
if(pagelayerClipboardLoading){
setTimeout(function(){
pagelayer_paste_element(to);
}, 200);
return false;
}
// There may be some problems reading the clipboard
if(pagelayerClipboardReadable !== true){
pagelayer_show_msg('If the paste is not done correctly then use Ctrl+V', 'warning');
}
}
var fTo = pagelayer_can_copy_to(to);
// Is it a valid to
if(!fTo){
return false;
}
if(!pagelayer_empty(pagelayer.copy_selected)){
pagelayer_copy_element(pagelayer.copy_selected, fTo);
return true;
}
pagelayer_show_msg(pagelayer_l('no_copied'));
return false;
}
var pagelayerClipboardLoading = false;
var pagelayerClipboardReadable = true;
// If copy_selected is empty then copy data from localStorage
async function pagelayer_copy_from_clipboard(){
if(pagelayerClipboardLoading){
return;
}
if (navigator.clipboard && window.isSecureContext) {
try {
pagelayerClipboardLoading = true;
const text = await navigator.clipboard.readText();
var pEle = jQuery(text);
if(pEle.length > 0 && !pagelayer_empty(pagelayer_tag(pEle)) ){
pagelayer.copy_selected = pEle;
}
pagelayerClipboardLoading = false;
pagelayerClipboardReadable = true;
} catch (err) {
pagelayerClipboardLoading = false;
pagelayerClipboardReadable = 'Clipboard readText failed';
//console.warn("Clipboard readText failed", err);
}
} else {
pagelayerClipboardReadable = 'Clipboard API not available or insecure context.';
// console.warn("Clipboard API not available or insecure context.");
}
}
// Copy an element
// Note : insertAfter should always be an pagelayer-ele
function pagelayer_copy_element(selector, insertAfter){
var src = jQuery(selector);
var tag = pagelayer_tag(src);
insertAfter = insertAfter || src;
insertAfter = insertAfter.parent();
var jEle = pagelayer_element_unsetup(src);
// Give it an ID
var id = pagelayer_assign_id(jEle);
jQuery(insertAfter).after(jEle);
pagelayer_element_setup('[pagelayer-id='+id+'], [pagelayer-id='+id+'] .pagelayer-ele', true);
if(pagelayer_is_group(tag)){
pagelayer_sc_render(jEle);
}
// Save this element in history action
if(pagelayer.history_action){
var cEle = pagelayer_near_by_ele(id, tag);
pagelayer_history_action_push({
'title' : pagelayer_shortcodes[tag]['name'],
'action' : 'Copied',
'pl_id' : id,
'html' : jEle[0].outerHTML,
'cEle' : cEle
});
}
//If column then renumber columns
if(tag == 'pl_col'){
var row = src.parent().closest('.pagelayer-row');
pagelayer_renumber_col(row);
}
pagelayer_do_dirty(jEle);
return id;
};
// Traversing up one step an element
function pagelayer_move_element_up(selector){
var src = jQuery(selector);
var srcParent = src.parent();
var srcParentPrev = srcParent.prev('.pagelayer-wrap-row, .pagelayer-wrap-inner-row, .pagelayer-wrap-ele');
if(srcParentPrev.length<=0){
return;
}
var srcTopValue = srcParent.offset().top;
if(srcParentPrev.hasClass('pagelayer-wrap-ele')){
var animUpCalc = srcTopValue-srcParentPrev.offset().top;
srcParent.animate({top:-animUpCalc}, 200, function(){
srcParent.css('top', '');
srcParentPrev.css('top', '');
srcParentPrev.before(srcParent.detach());
});
srcParentPrev.animate({top:(srcParent.height()+srcParentPrev.height())-animUpCalc}, 200, function(){
srcParentPrev.css('top', '');
});
// Traverse window scroll with the element
jQuery('html, body').animate({scrollTop:('-='+(srcTopValue-(srcParentPrev.offset().top)))},200);
}else{
srcParentPrev.before(srcParent.detach());
// Traverse window scroll with the element
jQuery('html, body').animate({scrollTop:('-='+(srcTopValue-(src.parent().offset().top)))},200);
}
pagelayer_do_dirty(src);
}
// Traversing down one step an element
function pagelayer_move_element_down(selector){
var src = jQuery(selector);
var srcParent = src.parent();
var srcParentNext = srcParent.next('.pagelayer-wrap-row, .pagelayer-wrap-inner-row, .pagelayer-wrap-ele');
if(srcParentNext.length<=0){
return;
}
var srcTopValue = srcParent.offset().top;
if(srcParentNext.hasClass('pagelayer-wrap-ele')){
var animDownCalc = srcParentNext.offset().top-srcTopValue;
srcParent.animate({top:(animDownCalc-(srcParent.height()-srcParentNext.height()))}, 200, function(){
srcParent.css('top', '');
srcParentNext.css('top', '');
srcParentNext.after(srcParent.detach());
});
srcParentNext.animate({top:-animDownCalc}, 200, function(){
srcParentNext.css('top', '');
});
// Traverse window scroll with the element
jQuery('html, body').animate({scrollTop:('+='+(animDownCalc-(srcParent.height()-srcParentNext.height())))},200);
}else{
srcParentNext.after(srcParent.detach());
// Traverse window scroll with the element
jQuery('html, body').animate({scrollTop:('+='+((src.parent().offset().top)-srcTopValue))},200);
}
pagelayer_do_dirty(src);
}
// Save sections as template
function pagelayer_ajax_save_template(data, ajax_call_back = ''){
if(pagelayer_empty(data)){
return;
}
//save global sections and widgets
jQuery.ajax({
type: "POST",
url: pagelayer_ajax_url+'&action=pagelayer_save_templ_content&postID='+pagelayer_postID,
data: {
pagelayer_nonce: pagelayer_ajax_nonce,
global_widgets : data
},
success: function(response, status, xhr){
//alert(data);
var obj = jQuery.parseJSON(response);
if(!pagelayer_empty(ajax_call_back) || typeof ajax_call_back == 'function'){
ajax_call_back(obj);
}
},
error: function(errorThrown){
console.log(errorThrown);
}
});
}
// Get global id of the element
function pagelayer_get_global_id(jEle){
return pagelayer_get_att(jEle, 'global_id');
}
// Set element as a global widget
function pagelayer_set_ele_global(jEle, post_id){
// Add attribute for global ID
jEle.attr('pagelayer-global-id', post_id);
pagelayer.history_action = false;
pagelayer_set_atts(jEle, 'global_id', post_id);
pagelayer.history_action = true;
return jEle;
}
// Save widgets as a global widget
function pagelayer_save_sections(sel, section = 'section'){
var jEle = jQuery(sel);
var pagelayer_ajax_func = {};
var label = 'Please enter the title';
var content = pagelayer_generate_sc(jEle, true);
var data = {};// create array for template data
data[0] = {};
switch(section){
case 'global_widget' :
var title = prompt(label, 'Global Widget');
if (title == null) return;
// Save the widget data in global widget array
if(pagelayer_empty(pagelayer_global_widgets)){
pagelayer_global_widgets = {};
}
break;
case'global_section' :
var title = prompt(label, 'Global Section');
if (title == null) return;
break;
case 'section':
var title = prompt(label, 'Section');
if (title == null) return;
break;
}
// Add Data
data[0]['title'] = title;
data[0]['post_type'] = 'pagelayer-template';
data[0]['type'] = section;
data[0]['content'] = content.replace(/pagelayer-id="(.*?)"/g, ""); // Need to remove pagelayer id,
data[0]['content'] = pagelayer_Base64.encode(data[0]['content']);
// This function for ajax success call back of global widget
pagelayer_ajax_func['global_widget'] = function(obj){
if(pagelayer_empty(obj['success'])){
return;
}
for(var post_id in obj['success']){
pagelayer_set_ele_global(jEle, post_id);
// Add global
jData = {};
jData['post_id'] = post_id;
jData['title'] = title; // TODO : create modal to input title
jData['$'] = jEle;
jData['is_dirty'] = true;
// Add the array in global widgets array
pagelayer_global_widgets[post_id] = jData;
pagelayer.$$('.pagelayer-elpd-close').click();
pagelayer.$$('.pagelayer-widget-tab').click();
break;
}
}
// This function for ajax success call back of global sections
pagelayer_ajax_func['global_section'] = function(obj){
// TODO: For global Sections
//console.log(obj);
}
// This function for ajax success call back of section s
pagelayer_ajax_func['section'] = function(obj){
//console.log(obj);
}
pagelayer_ajax_save_template(data, pagelayer_ajax_func[section]);
}
// Genrate sc for global widgets
function pagelayer_generate_sc_global_widget(){
var global_widgets = {};
// Create shortcode for all the global widgets
for(var y in pagelayer_global_widgets){
var cWidget = pagelayer_global_widgets[y];
// If is_dirty empty then continue the loop
if(pagelayer_empty(cWidget['is_dirty'])){
continue;
}
global_widgets[y] = {};
global_widgets[y]['title'] = cWidget['title'];
global_widgets[y]['post_id'] = pagelayer_empty(cWidget['post_id']) ? 0 : cWidget['post_id'];
global_widgets[y]['post_type'] = 'pagelayer-template';
global_widgets[y]['type'] = 'global_widget';
var content = pagelayer_generate_sc(jQuery(cWidget.$), true);
var tag = pagelayer_tag(jQuery(cWidget.$));
// IF is group then need to remove pagelayer id,
if(!pagelayer_empty(tag) && pagelayer_is_group(tag)){
content = content.replace(/pagelayer-id="(.*?)"/g, "");
}
global_widgets[y]['content'] = pagelayer_Base64.encode(content);
pagelayer_global_widgets[y]['is_dirty'] = false;
}
return global_widgets;
}
var pagelayer_set_global_timmer = {};
// If you edit one Global widget it should be copied to other instances of the same global widget
function pagelayer_setup_global_widgets(id, jEle){
if(pagelayer_empty(id) || pagelayer_empty(pagelayer_global_widgets[id])){
return;
}
var elData = pagelayer_global_widgets[id];
clearTimeout(pagelayer_set_global_timmer);
pagelayer_set_global_timmer = setTimeout(function(){
// Set attrs for all the global widgets
jQuery(pagelayer_editable+' [pagelayer-global-id='+ id +']').each(function(){
var cEle = jQuery(this);
var cEleID = pagelayer_id(cEle);
if( jEle.length > 0 && jEle.is(cEle)){
return true;
}
pagelayer.history_action = false;
pagelayer.global_render = false;
// Get HTML form global array
var html = pagelayer_element_unsetup(elData.$, cEleID);
if(cEle.parent().is('.pagelayer-ele-wrap')){
cEle.parent().children('.pagelayer-ele-overlay').remove();
cEle.unwrap();
}
cEle[0].outerHTML = html[0].outerHTML;
pagelayer_element_setup('[pagelayer-id='+cEleID+'], [pagelayer-id='+cEleID+'] .pagelayer-ele');
pagelayer_sc_render(jQuery('[pagelayer-id="'+cEleID+'"]'));
pagelayer.history_action = true;
pagelayer.global_render = true;
});
}, 3000);
}
// Language key
function pagelayer_l(k){
if(k in pagelayer_lang){
return pagelayer_lang[k];
}
return k;
}
// Get props based on the tag
function pagelayer_get_props(jEle){
var props = pagelayer_shortcodes[pagelayer_tag(jEle)];
return props;
}
// Get all props based on the tag but in a single structure
function pagelayer_make_props_ref(){
// Loop through pagelayer_shortcodes
for(var tag in pagelayer_shortcodes){
var all_props = pagelayer_shortcodes[tag];
pagelayer.props_ref[tag] = {};
// Loop through all props
for(var i in pagelayer_tabs){
var tab = pagelayer_tabs[i];
for(var section in all_props[tab]){
var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];
// In case of widgets its possible !
if(pagelayer_empty(props)){
continue;
}
for(var x in props){
// Create an easy REFERENCE for access
pagelayer.props_ref[tag][x] = props[x];
// Screen option REFERENCE is also needed for lookup
if('screen' in props[x]){
pagelayer.props_ref[tag][x+'_tablet'] = props[x];
pagelayer.props_ref[tag][x+'_mobile'] = props[x];
}
}
}
}
}
}
// Set the given jELE as active
function pagelayer_set_active(jEle){
// Make all other element as inactive
jQuery('[pagelayer-active]').each(function(){
var $j = jQuery(this);
$j.removeAttr('pagelayer-active');
});
jEle.attr('pagelayer-active', 1);
// Add and remove the class
jQuery('.pagelayer-active').removeClass('pagelayer-active');
jEle.parent().children('.pagelayer-ele-overlay').addClass('pagelayer-active');
}
function pagelayer_sc(sc){
return sc.replace('pl_', '');
};
// Create a HTML dom element of the Short code
// Return the jEle
function pagelayer_create_sc(sc){
var html;
var _sc = pagelayer_sc(sc);
var func = window['pagelayer_create_sc_'+sc];
// Generate the HTML
if(typeof func == 'function'){
html = window['pagelayer_create_sc_'+sc]();
}else{
html = '
';
}
html = jQuery(html);
// Add the tag
html.attr('pagelayer-tag', sc);
// Give it an ID
id = pagelayer_assign_id(html);
// Try to set the default values over 5 loops
pagelayer_set_default_atts(html, 5);
return html;
};
// Returns a list of default attributes to set as per the current selection
function pagelayer_set_default_atts(jEle, set){
set = set || 0;
var hasSet = false;
for(var i = 1; i <= set;i++){
//console.log('[pagelayer_set_default_atts] Loop :'+i);
//console.log(jEle);
// Get existing data
var el = pagelayer_data(jEle, true);
// If it is the last loop and we are greater than 1
if(i > 1 && i == set){
console.log('[pagelayer_default_atts] Still vars to set. Please check your shortcode params !');
}
// We are supposed to set !
if('set' in el && !pagelayer_empty(el.set)){
pagelayer_set_atts(jEle, el.set);
hasSet = true;
}else{
break;
}
}
return hasSet;
}
// Returns the tag
function pagelayer_tag(jEle){
// It could be the wrap
if(jEle.hasClass('pagelayer-ele-wrap')){
return jEle.children('.pagelayer-ele').attr('pagelayer-tag');
}
// It could be the row or col holder
if(jEle.hasClass('pagelayer-row-holder') || jEle.hasClass('pagelayer-col-holder')){
return jEle.parent().attr('pagelayer-tag');
}
return jEle.attr('pagelayer-tag');
}
function pagelayer_el_data_ref(jEle){
var id = pagelayer_id(jEle);
if(!(id in pagelayer.el)){
pagelayer.el[id] = {};
}
if(typeof pagelayer.el[id] !== 'object'){
pagelayer.el[id] = {};
}
if(!('attr' in pagelayer.el[id])){
pagelayer.el[id]['attr'] = {};
}
if(Array.isArray(pagelayer.el[id]['attr'])){
pagelayer.el[id]['attr'] = {};
}
if(!('tmp' in pagelayer.el[id])){
pagelayer.el[id]['tmp'] = {};
}
if(Array.isArray(pagelayer.el[id]['tmp'])){
pagelayer.el[id]['tmp'] = {};
}
return pagelayer.el[id];
};
// Gets the data node which can be position 0 or 1
function pagelayer_el_get_data_node(jEle){
var node = jEle[0].childNodes[0];
if(node && node.nodeType === 8){
return node;
}
node = jEle[0].childNodes[1];
if(node && node.nodeType === 8){
return node;
}
return false;
}
// Get the data
function pagelayer_el_get_data(jEle){
var node = pagelayer_el_get_data_node(jEle);
if(node){
return JSON.parse(node.nodeValue);
}
return false;
};
// Add the data back again
function pagelayer_el_dump_data(jEle){
var node = pagelayer_el_get_data_node(jEle);
var d = pagelayer_serializeAttributes(pagelayer_el_data_ref(jEle));
if(node){
node.nodeValue = d;
}else{
jEle.prepend('');
}
};
// Gets a single attribute value
function pagelayer_get_att(jEle, att){
var ref_data = pagelayer_el_data_ref(jEle);
if(att in ref_data['attr']){
return ref_data['attr'][att];
}
return;
};
// Gets a single attribute value
function pagelayer_get_tmp_att(jEle, att){
var ref_data = pagelayer_el_data_ref(jEle);
if(att in ref_data['tmp']){
return ref_data['tmp'][att];
}
return;
};
// This function will just set atts and not do anything else
// Atts can be string or object. If its string, then val is needed
function pagelayer_set_atts(jEle, atts, val){
if(typeof atts == 'string'){
var tmp = {};
tmp[atts] = val;
atts = tmp;
}
if(typeof atts != 'object'){
return false;
}
var tag = pagelayer_tag(jEle);
var trigger_onchange = 0;
if(pagelayer_empty(tag)){
console.log('Set atts found no tag');
console.log(jEle);
return;
}
// All props
var all_props = pagelayer_shortcodes[tag];//console.log(tag);console.log(jEle);
var trigger_props = {};
var no_val = {};
var defaults = {};
var _props = {};
// Loop through all props
for(var i in pagelayer_tabs){
var tab = pagelayer_tabs[i];
for(var section in all_props[tab]){
var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];
for(var x in props){
if('default' in props[x]){
defaults[x] = 1;
}
// Create an easy REFERENCE for access
_props[x] = props[x];
// Screen option REFERENCE is also needed for lookup
if('screen' in _props[x]){
_props[x+'_tablet'] = props[x];
_props[x+'_mobile'] = props[x];
}
// Dont set any val, but we set temp value
if('no_val' in props[x]){
no_val[x] = 1;
}
if('req' in props[x] || 'show' in props[x]){
var show = 'req' in props[x] ? props[x]['req'] : props[x]['show'];
// We have both req and show, so lets just combine the values and then show
// NOTE : We need to make an array and not just merge the 2 as they are references
if('req' in props[x] && 'show' in props[x]){
// Add the req values
show = JSON.parse(JSON.stringify(props[x]['req']));
// Now the show values need to be looped
for(var t in props[x]['show']){
show[t] = props[x]['show'][t];
}
}
for(var showParam in show){
var val = show[showParam];
var except = showParam.substr(0, 1) == '!' ? true : false;
showParam = except ? showParam.substr(1) : showParam;
trigger_props[showParam] = 1;
}
}
}
}
}
var ref_data = pagelayer_el_data_ref(jEle);
for(var x in atts){
// Are we to trigger change
if(x in trigger_props){
trigger_onchange = 1;
}
//console.log(x+'-'+atts[x]);
// Is this a pro feature and we are not pro ? Then we dont do anything and continue !
if(!pagelayer_empty(_props[x]) && 'pro' in _props[x] && pagelayer_empty(pagelayer_pro)){
continue;
}
if(x in no_val){
pagelayer_set_tmp_atts(jEle, x, atts[x]);
continue;
}
// Record History
if(pagelayer.history_action){
var old_val = pagelayer_get_att(jEle, x) || '';
var label = x;
if(x in _props && 'label' in _props[x]){
label = _props[x]['label'];
}
pagelayer_history_action_push({
'title' : all_props['name'],
'subTitle' : label,
'action' : 'Edited',
'attrType' : 'a_attr',
'pl_id' : pagelayer_id(jEle),
'atts' : x,
'oldVal' : old_val,
'newVal' : atts[x]
});
}
// Remove the attribute if its BLANK and there is no default for it
// If there is a default, we set it to blank to keep record of the current val
if(pagelayer_length(atts[x]) < 1){
// Remove values which are not defaults
if(!(x in defaults)){
delete ref_data['attr'][x];
// Otherwise keep value set for avoiding resetting
}else{
ref_data['attr'][x] = atts[x];
}
// Remove the tmp atts anyway
pagelayer_clear_tmp_atts(jEle, x);
// Set the value
}else{
ref_data['attr'][x] = pagelayer_trim(atts[x]);
}
// Are you the active element
if(pagelayer_is_active(jEle)){
// TODO : Record Undo and Redo
}
}
pagelayer_el_dump_data(jEle);
// Trigger the change of the parameter and show the required properties
if(trigger_onchange){
pagelayer_elpd_show_rows();
}
pagelayer_do_dirty(jEle);
};
// This function will just set atts and not do anything else
// Atts can be string or object. If its string, then val is needed
function pagelayer_set_tmp_atts(jEle, atts, val){
if(typeof atts == 'string'){
var tmp = {};
tmp[atts] = val;
atts = tmp;
}
if(typeof atts != 'object'){
return false;
}
var ref_data = pagelayer_el_data_ref(jEle);
for(var x in atts){
// Record history
if(pagelayer.history_action){
var old_val = pagelayer_get_tmp_att(jEle, x) || '';
pagelayer_history_action_push({
'title' : pagelayer_shortcodes[pagelayer_tag(jEle)]['name'],
'subTitle' : x,
'action' : 'Edited',
'attrType' : 'tmp_attr',
'pl_id' : pagelayer_id(jEle),
'atts' : x,
'oldVal' : old_val,
'newVal' : atts[x]
});
}
ref_data['tmp'][x] = atts[x];
}
pagelayer_el_dump_data(jEle);
};
// This function removes the temporary attributes of an ele
function pagelayer_clear_tmp_atts(jEle, attr){
var to_del = new Array();
var regexp = new RegExp('^'+attr+'\-', 'gi');
var ref_data = pagelayer_el_data_ref(jEle);
//console.log(to_del);
for(var n in ref_data['tmp']){
if(n.match(regexp)){
delete ref_data['tmp'][n];
}
}
}
// This function removes the temporary attributes of an ele
function pagelayer_img_tmp_atts(jEle, attr){
var found = {};
var regexp = new RegExp('^'+attr+'\-', 'gi');
var ref_data = pagelayer_el_data_ref(jEle);
for(var n in ref_data['tmp']){
if(n.match(regexp)){
found[n] = 1;
}
}
return found;
}
// Set the att and classes of an HTML which is not yet created
function pagelayer_sc_atts(classes){
var r = new Array();
return 'class="'+classes+' pagelayer-ele" '+r.join(' ');
}
// Is the jEle the active element ?
function pagelayer_is_active(jEle){
// Is this the active Element ?
if(pagelayer_empty(pagelayer_active.el) || jEle.attr('pagelayer-id') != pagelayer_active.el.id){
return false;
}
return true;
};
// Removes {{}} from the variable name
function pagelayer_var(val){
return val.substring(2, (val.length - 2));
}
// Take care of the CSS
function pagelayer_css_render(css, val, seperator){
//console.log('CSS '+css+' | '+val);
// Seperator
seperator = seperator || ',';
var replaceCss = function(rule, value, toreplace){
value = pagelayer_hex8_to_rgba(value);
// If value has css var then we remove units
if(value.match(/var\(/)){
var toreplace = toreplace.replace(/[-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
toreplace = new RegExp( toreplace+'?[^\\s|;]+', 'ig');
}
return rule.split(toreplace).join(value);
}
// Replace the val
css = replaceCss(css, val, '{{val}}');
// If there is an array
if(css.match(/val\[\d/)){
if(typeof val != 'object' || val === null){
val = String(val).split(seperator);
}
for(var i in val){
css = replaceCss(css, val[i], '{{val['+i+']}}');
}
}
//console.log('Final CSS '+css);
return css;
};
// Handle hexa to rgba and also remove alpha which is ff
function pagelayer_hex8_to_rgba(val){
val = String(val);
// If opacity is ff then discard ff
if(val.match(/^#([a-f0-9]{6})ff$/)){
return val.substr(0,7);
}
// Lets handle the RGB+opacity
if(val.match(/^#([a-f0-9]{8})$/)){
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(val);
val = 'rgba('+parseInt(result[1], 16)+', '+parseInt(result[2], 16)+', '+parseInt(result[3], 16)+', '+(parseInt(result[4], 16)/255).toFixed(2)+')';
}
return val;
};
// Replace the variables
function pagelayer_parse_el_vars(str, el){
str = str.split('{{element}}').join(el.CSS.cssSel);
str = str.split('{{wrap}}').join(el.CSS.wrap);
str = str.split('{{ele_id}}').join(el.id);
return str;
}
// Replace the variables
function pagelayer_parse_vars(str, el){
for(var x in el.tmp){
str = str.split('{{{'+x+'}}}').join(el.tmp[x]);
}
for(var x in el.atts){
str = str.split('{{'+x+'}}').join(el.atts[x]);
}
return str;
};
// Render the Element
function pagelayer_sc_render(jEle){
// We render only the active element
if(!pagelayer_is_active(jEle)){
//return false;
}
//console.log('Rendering');
// Handle the CSS part
// Get the id, tag, atts, data, etc
var el = pagelayer_data(jEle, true);
var all_props = pagelayer_shortcodes[el.tag];
var elCSS = {
classes: [],
remove_classes: [],
attr: [],
remove_attr: [],
css: [],
edit: [],
cssSel: '.p-'+el.id,
sel: '[pagelayer-id="'+el.id+'"]',
wrap: '[pagelayer-wrap-id="'+el.id+'"]'
};
// Create a reference
el.CSS = elCSS;
// Make sure if we have the class selector
el.$.addClass('p-'+el.id);
//console.log(el.atts);
for(var i in pagelayer_tabs){
var tab = pagelayer_tabs[i];
for(var section in all_props[tab]){ //console.log(tab+' '+section);
var props = section in pagelayer_shortcodes[el.tag] ? pagelayer_shortcodes[el.tag][section] : pagelayer_styles[section];//console.log(props);
// Loop the props
for(var x in props){
// pagelayer_data will return attributes even if they are BLANK e.g. attr=""
// Render doesnt consider BLANK values as values, and we are unsetting them now
// If in any situation you need to consider blank values, please handle in the JS / PHP function of the Shortcode
if(x in el.atts && pagelayer_length(el.atts[x]) < 1){
delete el.atts[x];
}
// Any editor ?
if('edit' in props[x]){
elCSS.edit.push({prop: x, sel: props[x]['edit']});
}
// Load permalink values
if(props[x]['type'] == 'link'){
if('selector' in props[x] && typeof el.atts[x] == 'object'){
var tmp = {};
// Link is required for check IF and IF-EXT in html
if(pagelayer_length(el.atts[x]['link']) < 1){
delete el.atts[x];
continue;
}
if( 'target' in el.atts[x] && !pagelayer_empty(el.atts[x]['target']) ){
tmp = {'sel': props[x]['selector'], 'val': 'target="_blank"'};
elCSS['attr'].push(tmp);
}
if( 'rel' in el.atts[x] && !pagelayer_empty(el.atts[x]['rel']) ){
tmp = {'sel': props[x]['selector'], 'val': 'rel="nofollow"'};
elCSS['attr'].push(tmp);
}
if( 'attrs' in el.atts[x] && !pagelayer_empty(el.atts[x]['attrs']) ){
var attrsVal = pagelayer_trim(el.atts[x]['attrs'].split(';'));
attrsVal.forEach(function(item, index){
var splitValue = item.split(/=(.*)/);
var attKey = pagelayer_trim(splitValue[0]);
var setAtt = '';
// Validate the attrs name
if(attKey.length < 1 || pagelayer_empty(attKey.match(/^[a-z_]+[\w:.-]*$/i))){
return;
}
if(splitValue.length < 2){
setAtt = attKey+'=""';
}else{
setAtt = attKey+'="'+splitValue[1]+'"';
}
tmp = {'sel': props[x]['selector'], 'val': setAtt};
elCSS['attr'].push(tmp);
});
}
}
}
// Do we have a addClass ?
// We are checking before the element has a value so that we can add or remove the class
if('addClass' in props[x]){
var addClasses;
// Convert the string to an array
if(typeof props[x]['addClass'] === 'string'){
addClasses = [props[x]['addClass']];
}else{
addClasses = props[x]['addClass'];
}
for(var c in addClasses){
// The selector
var tSel = jQuery.isNumeric(c) ? '' : c;
// If there is a VAL
// NOTE : Only val is allowed when there is a list
if(addClasses[c].match(/\{\{val\}\}/) && 'list' in props[x]){
for(var l in props[x]['list']){
var tmp = {'sel': tSel, 'val': addClasses[c].replace('{{val}}', l)};
if(el.atts[x] == l){
elCSS['classes'].push(tmp);
}else{
elCSS['remove_classes'].push(tmp);
}
}
}else{
var tmp = {'sel': tSel, 'val': addClasses[c].replace('{{val}}', el.atts[x])};
// If the value is there
if(x in el.atts){
elCSS['classes'].push(tmp);
}else{
elCSS['remove_classes'].push(tmp);
}
}
}
}
// Do we have a addAttr ?
// We are checking before the element has a value so that we can add or remove the attr
if('addAttr' in props[x]){
var addAttr;
// Convert the string to an array
if(typeof props[x]['addAttr'] === 'string'){
addAttr = [props[x]['addAttr']];
}else{
addAttr = props[x]['addAttr'];
}
for(var c in addAttr){
// The selector
var tSel = jQuery.isNumeric(c) ? '' : c;
var tmp = {'sel': tSel, 'val': addAttr[c]};
// If the value is there
if(x in el.atts){
elCSS['attr'].push(tmp);
}else{
elCSS['remove_attr'].push(tmp);
}
}
}
// Do we have a CSS ?
if('css' in props[x]){
var css;
// Convert the string to an array
if(typeof props[x]['css'] === 'string'){
css = [props[x]['css']];
}else{
css = props[x]['css'];
}
// Screen modes
var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'};
var desk_global = (props[x]['type'] == 'typography') ? pagelayer_is_global_typo(el.atts[x]) : '';
for(var m in modes){
var xm = x+modes[m];
// If the value is there
if(!(xm in el.atts) && pagelayer_empty(desk_global)){
continue;
}
var xm_val = el.atts[xm];
// If is global color
if(props[x]['type'] == 'color'){
xm_val = pagelayer_parse_color(el.atts[xm]);
}
// If is global font
if(props[x]['type'] == 'typography'){
xm_val = pagelayer_parse_typo(xm_val, false, desk_global, m);
}
// If there is global gradient color
if(props[x]['type'] == 'gradient'){
if(pagelayer_is_string(xm_val)){
xm_val = xm_val.split(',');
}
for(key in xm_val){
xm_val[key] = pagelayer_parse_color(xm_val[key]);
}
}
for(var c in css){
// The selector
var tSel = jQuery.isNumeric(c) ? '{{element}}' : c;
var tmp = {
sel: tSel,
val: pagelayer_css_render(css[c], xm_val, (props[x].sep || ',')),
};
// Is this a tablet
if(m == 'tablet'){
tmp.sel = '@media (max-width: '+ pagelayer_settings['tablet_breakpoint'] +'px) and (min-width: '+ (pagelayer_settings['mobile_breakpoint'] +1) +'px){'+tmp.sel;
tmp.val = tmp.val+'}';
}
// Is this a mobile mode ?
if(m == 'mobile'){
tmp.sel = '@media (max-width: '+ pagelayer_settings['mobile_breakpoint'] +'px){'+tmp.sel;
tmp.val = tmp.val+'}';
}
// Push to store
elCSS.css.push(tmp);
}
}
}
}
}
}
// If there is an HTML, then process it
if('html' in pagelayer_shortcodes[el.tag]){
// Is there a function to render ?
var fn = window['pagelayer_render_'+jEle.attr('pagelayer-tag')];
if(typeof fn == 'function'){
fn(el);
}
el.iHTML = jQuery('
'+pagelayer_shortcodes[el.tag]['html']+'
');
// Lets process the 'if-ext'
el.iHTML.find('[if-ext]').each(function (){
var $j = jQuery(this);
var reqvar = pagelayer_var($j.attr('if-ext'));
$j.removeAttr('if-ext');
// Is the element there ?
if(!(reqvar in el.atts && !pagelayer_empty(el.atts[reqvar]))){
//console.log('HERE');
$j[0].outerHTML = $j.html();
}
});
// Lets process the 'if'
el.iHTML.find('[if]').each(function (){
var $j = jQuery(this);
var reqvar = pagelayer_var($j.attr('if'));
$j.removeAttr('if');
// Is the element there ?
if(!(reqvar in el.atts && !pagelayer_empty(el.atts[reqvar]))){
//console.log('HERE');
$j.remove();
}
});
//console.log(el.atts);
// Parse the variables
var new_html = pagelayer_parse_vars(el.iHTML.html(), el);
el.iHTML.html(new_html);
// Do we have to wrap the innerHTML ?
if('holder' in pagelayer_shortcodes[el.tag]){
var hSel = pagelayer_shortcodes[el.tag]['holder'];
var holder = jEle.find(hSel).first();
// Detach the holder
holder.detach();
// Add the new HTML
el.$.html(el.iHTML.html());
// reAttach the children only
el.$.find(hSel).html(holder.children());
// No holder
}else{
//console.log(el.iHTML.html());
el.$.html(el.iHTML.html());
}
// Rows, Cols and Groups
}else{
// Is there a function to render ?
var fn = window['pagelayer_sc_render_'+jEle.attr('pagelayer-tag')];
if(typeof fn == 'function'){
fn(el);
}
}
// Is there a function to render after HTML insertion but before CSS and attr ?
var post = window['pagelayer_render_html_'+jEle.attr('pagelayer-tag')];
if(typeof post == 'function'){
post(el);
}
////////////////////////////
// Are there any edit fields ?
////////////////////////////
if(elCSS.edit.length > 0){
for(var c in elCSS.edit){
var prop = elCSS.edit[c]['prop'];
var tSel = elCSS.edit[c]['sel'];
var node = tSel.length < 1 ? jEle : jEle.find(tSel);
node.attr({'pagelayer-editable': prop, 'contenteditable' : 'true'});
}
}
////////////////////////////
// Are there any addClass ?
////////////////////////////
// If we have any classes to add
if(elCSS.classes.length > 0){
//console.log(elCSS.classes);
for(var c in elCSS.classes){
var tSel = elCSS.classes[c]['sel'].replace('{{element}}', '');
var node = tSel.length < 1 ? jEle : jEle.find(tSel);
if(!node.hasClass(elCSS.classes[c]['val'])){
node.addClass(elCSS.classes[c]['val']);
}
}
}
// If we have any classes to remove
if(elCSS.remove_classes.length > 0){
//console.log(elCSS.remove_classes);
for(var c in elCSS.remove_classes){
var tSel = elCSS.remove_classes[c]['sel'].replace('{{element}}', '');
var node = tSel.length < 1 ? jEle : jEle.find(tSel);
if(node.hasClass(elCSS.remove_classes[c]['val'])){
node.removeClass(elCSS.remove_classes[c]['val']);
}
}
}
////////////////////////////
// Are there any addAttr ?
////////////////////////////
// If we have any attributes to add
if(elCSS.attr.length > 0){
//console.log(elCSS.attr);
for(var c in elCSS.attr){
var tSel = elCSS.attr[c]['sel'].replace('{{element}}', '');
var node = tSel.length < 1 ? jEle : jEle.find(tSel);
var att = elCSS.attr[c]['val'].split(/=(.*)/);
att[1] = pagelayer_parse_vars(att[1], el);
att[1] = pagelayer_trim(att[1], '"');
// Is it the same val ?
if(!node.attr(att[0]) !== att[1]){
node.attr(att[0], att[1]);
}
}
}
// If we have any attributes to add
if(elCSS.remove_attr.length > 0){
//console.log(elCSS.remove_attr);
for(var c in elCSS.remove_attr){
var tSel = elCSS.remove_attr[c]['sel'].replace('{{element}}', '');
var node = tSel.length < 1 ? jEle : jEle.find(tSel);
var att = elCSS.remove_attr[c]['val'].split('=');
if(node.is('['+att[0]+']')){
node.removeAttr(att[0]);
}
}
}
// The style element
var style = pagelayer.$('[pagelayer-style-id='+el.id+']');
// If we have any RULES CSS, then handle it
if(elCSS.css.length > 0){
// Did we find it ?
if(style.length < 1){
jEle.prepend('');
}
// Get it again
style = pagelayer.$('[pagelayer-style-id='+el.id+']');
// Make the rules
var rules = [];
// Loop
for(var c in elCSS.css){
var tSel = pagelayer_parse_el_vars(elCSS.css[c]['sel'], el);
var rule = elCSS.css[c]['val'];
if(tSel.length > 0){
rules.push(tSel+'{'+rule+'}');
}else{
rules.push(pagelayer_parse_el_vars(rule, el));
}
}
// CSS Selector overide
if(!pagelayer_empty(all_props['overide_css_selector'])){
for(var r in rules){
var overide_css_selector = pagelayer_parse_el_vars(all_props['overide_css_selector'], el);
rules[r] = rules[r].split(el.CSS.cssSel).join(overide_css_selector);
rules[r] = rules[r].split(el.CSS.wrap).join(overide_css_selector);
}
}
// Set the style
style.html(pagelayer_parse_vars(rules.join("\n"), el));
//console.log(style);
}else{
style.remove();
}
// Is there a function to render at the end ?
var end = window['pagelayer_render_end_'+jEle.attr('pagelayer-tag')];
if(typeof end == 'function'){
end(el);
}
// If the element have any parent
var par = pagelayer_get_parent(jEle);
var eleId = el.id;
if(par){
eleId = par;
pagelayer_sc_render(pagelayer_ele_by_id(par));
}
// Render End trigger
pagelayer_trigger_action('pagelayer_sc_render_end', [el]);
var gEle = pagelayer_ele_by_id(eleId);
var gId = pagelayer_get_global_id(gEle);
pagelayer_el_dump_data(jEle);
// If global id exist then update the global array and restup the all global element
if(!pagelayer_empty(gId) && !pagelayer_empty(pagelayer.global_render)){
if(!pagelayer_empty(pagelayer_global_widgets[gId])){
pagelayer_global_widgets[gId].$ = gEle[0].outerHTML;
pagelayer_global_widgets[gId]['is_dirty'] = true;
pagelayer_setup_global_widgets(gId, pagelayer_ele_by_id(eleId), true);
}else{
pagelayer_set_atts(gEle, 'global_id', '');
}
};
};
// Is the given global color
function pagelayer_is_global_color(color){
var color_key = color.substr(0, 1) == '$' ? color.substr(1) : '';
// If global color not exist
if(!pagelayer_empty(color_key)){
if(!(color_key in pagelayer_global_colors)){
color_key = 'primary';
}
return color_key;
}
return false;
}
// Is the given global color
function pagelayer_is_global_typo(value){
var typo_key = '';
// Backward compatibility
if(pagelayer_is_string(value) && value.substr(0, 1) == '$'){
typo_key = value.substr(1);
}
if(typeof value == 'object' && 'global-font' in value){
typo_key = value['global-font'];
}
// If global color not exist
if(!pagelayer_empty(typo_key) && !(typo_key in pagelayer_global_fonts)){
typo_key = 'primary';
}
return typo_key;
}
// Parse typography and handle Backward compatibility
function pagelayer_parse_typo(value, noglobal, desk_global, mode){
noglobal = noglobal || false;
mode = mode || 'desktop';
desk_global = desk_global || '';
if(pagelayer_empty(value)){
value = {};
}
// Backward compatibility for comma seperated val
if(pagelayer_is_string(value) && value.substr(0, 1) != '$'){
return value.split(',');
}
var val = ['','','','','','','','','','',''];
var typos = ['font-family', 'font-size', 'font-style', 'font-weight', 'font-variant', 'text-decoration-line', 'text-decoration-style', 'line-height', 'text-transform', 'letter-spacing', 'word-spacing'];
var global_typo = pagelayer_is_global_typo(value);
var _desk_global = false;
if(pagelayer_empty(global_typo)){
global_typo = desk_global;
_desk_global = true;
}
// Apply global typo
for(var typo in typos){
var typoKey = typos[typo];
// Backspace compatibility for normal array
if(typeof value == 'object' && !pagelayer_empty(value[typo])){
val[typo] = value[typo];
}
if(!pagelayer_empty(value[typoKey])){
val[typo] = value[typoKey];
}
if(pagelayer_empty(global_typo) || !pagelayer_empty(val[typo]) || noglobal){
continue;
}
var globalVal = pagelayer_global_fonts[global_typo]['value'];
if( !(typoKey in globalVal) || pagelayer_empty(globalVal[typoKey]) || (typeof globalVal[typoKey] == 'object' && pagelayer_empty(globalVal[typoKey][mode])) || (typeof globalVal[typoKey] != 'object' && !pagelayer_empty(_desk_global) && mode != 'desktop') ){
continue;
}
val[typo] = 'var(--pagelayer-font-'+global_typo+'-'+typoKey+')';
}
return val;
}
// Parse color for global color
function pagelayer_parse_color(value, glob_var = true){
var is_global = pagelayer_is_global_color(value);
if(pagelayer_empty(is_global)){
return value;
}
if(pagelayer_empty(glob_var)){
return pagelayer_global_colors[is_global]['value'];
}
return 'var(--pagelayer-color-'+is_global+')';
}
// Is the given tag a group
function pagelayer_is_group(tag){
if('has_group' in pagelayer_shortcodes[tag] && !pagelayer_empty(pagelayer_shortcodes[tag]['has_group'])){
return true;
}
return false;
}
// Do action / event
function pagelayer_trigger_action(act, param = []){
jQuery(document).trigger(act, param);
}
// Perform a function on an action / event
function pagelayer_add_action(act, func){
jQuery(document).on(act, func);
}
// Create array of the contact from template params
function pagelayer_get_contact_templates(){
var contacts = jQuery(pagelayer_editable+' [pagelayer-tag=pl_contact]');
var contacts_props = {};
if(contacts.length > 0){
contacts.each(function(){
var tmp = pagelayer_data(jQuery(this));
var con_allowed = ['to_email', 'from_email', 'cont_subject', 'cont_header', 'cont_body', 'cont_use_html'];
if(pagelayer_empty(tmp.atts['contact_custom_templ'])) return true;
// Define blank array
contacts_props[tmp.id] = {};
for(var x in con_allowed){
var key = con_allowed[x];
if(!pagelayer_empty(tmp.atts[key])){
contacts_props[tmp.id][key] = tmp.atts[key];
}
}
});
}
return contacts_props;
}
// Save data or meta of the post
function pagelayer_update_post_data(){
var tag = 'pl_post_props';
var jEle = jQuery(pagelayer_editable+' [pagelayer-tag="'+tag+'"]');
if(jEle.length < 1){
return;
}
var tmp = pagelayer_data(jEle, true);
var all_props = pagelayer_shortcodes[tag];
// Loop through all props
for(var i in pagelayer_tabs){
var tab = pagelayer_tabs[i];
for(var section in all_props[tab]){
var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];
for(var x in props){
//Set pagelayer POST data to send with save ajax
if(x in tmp['atts']){
pagelayer_ajax_post_data[x] = tmp['atts'][x];
}else if(x in pagelayer_ajax_post_data){
delete pagelayer_ajax_post_data[x];
}
}
}
}
}
// Get the nav menu updated data
function pagelayer_get_nav_items(jEle, _content){
_content = _content || false;
var pagelayer_nav_items = {};
jEle.find('[pagelayer-tag="pl_nav_menu_item"]').each(function(){
var cEle = jQuery(this),
postID = pagelayer_get_att(cEle, 'ID');
if(!(postID in pagelayer_menus_items_ref)){
return;
}
var ref_data = pagelayer_menus_items_ref[postID];
if(!('pagelayer_content' in ref_data) && pagelayer_empty(ref_data['pagelayer_content'])){
ref_data['pagelayer_content'] = cEle;
}
if(!('is_dirty' in ref_data) || pagelayer_empty(ref_data['is_dirty'])){
return;
}
var content = '',
tmp = {};
tmp = Object.assign(tmp, ref_data);
pagelayer_nav_items[postID] = {};
// Update Mega menu content
if(!pagelayer_empty(_content)){
var navItem = jQuery(ref_data['pagelayer_content'])[0].outerHTML;
var _navItem = jQuery(navItem);
// If is not mega menu
if('menu_type' in tmp && tmp['menu_type'] != 'mega'){
_navItem.find('.pagelayer-menu-item-holder').empty();
}
content = pagelayer_generate_sc(_navItem, true);
content = pagelayer_Base64.encode(content);
// Send data to save
var allowed_post = ['title'];
for(var key in allowed_post){
var post_prop = allowed_post[key];
if(!(post_prop in tmp)){
continue;
}
pagelayer_nav_items[postID][post_prop] = tmp[post_prop]
}
}else{
pagelayer_nav_items[postID] = tmp;
}
// Delete the html content
delete tmp['pagelayer_content'];
pagelayer_nav_items[postID]['_pagelayer_content'] = content;
});
return pagelayer_nav_items;
}
// Save data or meta of the nav post
function pagelayer_update_nav_menu_data(){
var tag = 'pl_wp_menu';
pagelayer_ajax_post_data['pagelayer_nav_items'] = {};
jQuery(pagelayer_editable+' [pagelayer-tag="'+tag+'"]').each(function(){
var jEle = jQuery(this);
var menu_ID = pagelayer_get_att(jEle, 'nav_list');
if(!pagelayer_empty(pagelayer_ajax_post_data['pagelayer_nav_items'][menu_ID])){
return;
}
// Get the Current menu items
var items = pagelayer_get_nav_items(jEle, true);
if(pagelayer_empty(items)){
return;
}
pagelayer_ajax_post_data['pagelayer_nav_items'][menu_ID] = items;
});
}
// Save the customizer settings
function pagelayer_update_customizer_settings(){
var tag = 'pl_customizer';
var jEle = jQuery(pagelayer_editable+' [pagelayer-tag="'+tag+'"]');
if(jEle.length < 1){
return;
}
var tmp = pagelayer_data(jEle, true);
pagelayer_ajax_post_data['pagelayer_customizer_options'] = JSON.stringify(tmp['atts']);
}
// Save the post
function pagelayer_save(){
// hiding and showing loading animation
pagelayer.$$('.pagelayer-update-text').hide();
pagelayer.$$('.pagelayer-update-loader').show();
pagelayer_trigger_action('pagelayer_save');
var pagelayerajaxurl = pagelayer_ajax_url+'&action=pagelayer_save_content&postID='+pagelayer_postID;
var post = pagelayer_generate_sc(pagelayer_editable);//alert(post);return;
// Update data or meta of the post
pagelayer_update_post_data();
// Update Customizer Settings
pagelayer_update_customizer_settings();
// Update nav menu
pagelayer_update_nav_menu_data();
if(pagelayer_empty(pagelayer.post_status) && !pagelayer_empty(pagelayer_ajax_post_data['post_status'])){
pagelayer.post_status = pagelayer_ajax_post_data['post_status'];
}
// Do we have contact templates ?
var contacts_props = pagelayer_get_contact_templates();
// Do we have any global widget to save ?
var global_data = {};
if(!pagelayer_empty(pagelayer_global_widgets)){
global_data = pagelayer_generate_sc_global_widget();
}
var cancel = function(){
pagelayer.$$('.pagelayer-update-text').show();
pagelayer.$$('.pagelayer-update-loader').hide();
}
var save = function(){
var post_data = {
pagelayer_update_content : pagelayer_Base64.encode(post),
pagelayer_nonce: pagelayer_ajax_nonce,
global_widgets:
');
// Setup the grid drag
pagelayer_setup_drag();
// Set left bar draggable
pagelayer_make_leftbar_movable();
// Set to desktop
pagelayer_set_screen_mode('desktop');
// Create list of fonts
pagelayer_fonts = pagelayer_l('pl_fonts_list');
// Set up right click
pagelayer_left_click();
pagelayer_right_click();
// Setup pagelayer history handle
pagelayer_history_obj['action_data'] = [];
pagelayer_history_setup(true);
// Make a quick access of the props
pagelayer_make_props_ref();
// Post props exported defaults need to be updated
pagelayer_set_exported_defaults();
// Do any actions here
pagelayer_trigger_action('pagelayer_setup_history');
// Editor Tooltips
pagelayer_tooltip_setup();
// Load Fonts
for(var x in pagelayer_loaded_icons){
var item = pagelayer_loaded_icons[x];
jQuery.when(
pagelayer_get_stored_data(pagelayer_url+'/fonts/'+item+'.json', pagelayer_ver)
).then(function(){
pagelayer_icons[item] = JSON.parse(pagelayer_get_stored_data(pagelayer_url+'/fonts/'+item+'.json', pagelayer_ver));
});
};
// Set row-option top zero(0) of the first row
pagelayer_set_row_option_position();
// Just the txt
pagelayer.pro_txt = pagelayer_pro_txt;
// Open post props on document load
pagelayer.$$('.pagelayer-settings').click();
// Open post props and Make elements editable to edit post props data
pagelayer_setup_props_editable();
// Make elements editable
jQuery(pagelayer_editable+' [pagelayer-editable]').attr('contenteditable', 'true');
// Use text widget for search widget
pagelayer_search_widgets();
// Hide the loader
pagelayer_loader_hide();
// ON comment mode
const urlParams = new URLSearchParams(window.location.search);
pagelayer.cmode = urlParams.get('cmode');
// Start custom UX Improvements engine
setTimeout(pagelayer_ux_improvements_init, 200);
}
// Post props attribute
function pagelayer_post_props_atts(prop, val, temp){
val = val || null;
temp = temp || false;
var proEle = jQuery(pagelayer_editable+' .pagelayer-post_props.pagelayer-ele').first();
if(!pagelayer_empty(temp)){
if(val === null){
return pagelayer_get_tmp_att(proEle, prop);
}
// Set the temp property as well
pagelayer_set_tmp_atts(proEle, prop, val);
return true;
}
if(val === null){
return pagelayer_get_att(proEle, prop);
}
// Set the property as well
pagelayer_set_atts(proEle, prop, val);
return true;
}
// Open post props and Make elements editable to edit post props data
function pagelayer_setup_props_editable(){
jQuery('[pagelayer-props-editable]').each(function(){
var jEle = jQuery(this);
// Skip element under the editable area
if (jEle.closest(pagelayer_editable).length > 0) {
return;
}
var prop = jEle.attr('pagelayer-props-editable');
// Make editable
jEle.attr('contenteditable', 'true');
// Reverse setup the event
jEle.on('focus', function(){
// Set the property as well
var data = pagelayer_post_props_atts(prop);
jEle.html(data);
});
// Reverse setup the event
jEle.on('input', function(){
var val = pagelayer_trim(jEle.html());
// Set the property as well
pagelayer_post_props_atts(prop, val);
// Update the property
var input = pagelayer.$$('[pagelayer-elp-name='+prop+']').find('input,textarea,.trumbowyg-editor');
//console.log(input);
if(input.length > 0){
if(input.hasClass('trumbowyg-editor')){
input.html(val);
}else{
input.val(val);
}
}
});
});
}
// Prevent the click Insite editor
function pagelayer_prevent_click(){
jQuery(document).on('submit', function(event){
var target = jQuery(event.target);
if (target.closest(pagelayer_editable).length < 1) {
event.preventDefault();
}
});
jQuery(document).on('click', function(event){
var target = jQuery(event.target);
if (target.closest('a').length > 0 && target.closest(pagelayer_editable).length < 1) {
event.preventDefault()
}
});
}
// Removing post props options from the editor
function pagelayer_setting_post_props(){
if(pagelayer_empty(pagelayer_post_categories)){
delete pagelayer_shortcodes.pl_post_props.postCategory;
}
if(pagelayer_empty(pagelayer_post_tags)){
delete pagelayer_shortcodes.pl_post_props.postTags;
}
if(pagelayer_empty(pagelayer_shortcodes.pl_post_props.pageParent.post_parent.list)){
delete pagelayer_shortcodes.pl_post_props.pageParent;
}
if(pagelayer_post.post_type != 'post'){
delete pagelayer_shortcodes.pl_post_props.params.post_sticky;
}
if(pagelayer_empty(pagelayer_post_type_features['comments'])){
delete pagelayer_shortcodes.pl_post_props.postDiscussion.comment_status;
}
if(pagelayer_empty(pagelayer_post_type_features['trackbacks'])){
delete pagelayer_shortcodes.pl_post_props.postDiscussion.ping_status;
}
if(pagelayer_empty(pagelayer_shortcodes.pl_post_props.postDiscussion)){
delete pagelayer_shortcodes.pl_post_props.postDiscussion;
}
if(pagelayer_empty(pagelayer_post_type_features['excerpt'])){
delete pagelayer_shortcodes.pl_post_props.postExcerpt;
}
if(pagelayer_empty(pagelayer_post_type_features['thumbnail'])){
delete pagelayer_shortcodes.pl_post_props.postFeaturedImage;
}
if(pagelayer_empty(pagelayer_post_type_features['author'])){
delete pagelayer_shortcodes.pl_post_props.params.post_author;
}
}
// Set the default values of all default exported codes
function pagelayer_set_exported_defaults(){
// Set defaults for the exported variety
if(pagelayer_empty(pagelayer_default_params)){
return;
}
for(var tag in pagelayer_default_params){
for(var x in pagelayer_default_params[tag]){
if(x in pagelayer.props_ref[tag]){
pagelayer.props_ref[tag][x]['default'] = pagelayer_default_params[tag][x];
}
}
}
}
// Do pagelayer Dirty
function pagelayer_do_dirty(jEle){
pagelayer_isDirty = true;
if (!window.onbeforeunload) {
window.onbeforeunload = function(){
return true;
};
}
pagelayer_trigger_action('pagelayer_do_dirty', [jEle]);
}
function pagelayer_do_undirty(){
pagelayer_isDirty = false;
if (window.onbeforeunload) {
window.onbeforeunload = null;
}
}
// Executes when pagelayer is fully loaded
function pagelayer_loader_hide(){
var inner = pagelayer.$$('.pagelayer-percent');
inner.attr('loaded', 1);
var w = parseInt(inner.text());
var t = setInterval(function() {
w = w + 1;
inner.html(w +'%');
if (w >= 100){
clearInterval(t);
w = 0;
var loaderWrapper = pagelayer.$$('#pagelayer-loader-wrapper');
loaderWrapper.addClass('pagelayer-loaded');
loaderWrapper.animate({opacity:0}, function(){
loaderWrapper.remove();
});
}
}, 1);
pagelayer.loaded = 1;
}
// Set row-option top zero(0) of the first row
function pagelayer_set_row_option_position(){
try{
if(jQuery(pagelayer_editable).offset().top < 20){
jQuery(pagelayer_editable).addClass('pagelayer-row-option-zero');
}
}catch(e){
console.log(pagelayer_editable+" not found and hence Pagelayer wont work on this page !");
}
}
// The jQuery Object of the ELPD
var pagelayer_elpd;
// Store data values
function pagelayer_get_stored_data(url, version){
var name = 'pagelayer_'+url;
var data = {};
var force = false;
// Try to parse the data
try{
data = JSON.parse(localStorage.getItem(name));
if(data['version'] !== version){
force = true;
}
}catch(e){
force = true;
}
// Force download
if(force){
return jQuery.ajax({
url: url,
type: 'GET',
dataType: 'text',
success:function(newData){
var data = {};
data['version'] = version;
data['val'] = newData;
localStorage.setItem(name, JSON.stringify(data));
}
});
}
return data['val'];
}
function pagelayer_closest_corner(jEle){
var corners = [];
var w = jEle.outerWidth();
var h = jEle.outerHeight();
var topleft = jEle.offset();
// 0 - Top Left
corners.push(topleft);
// 1 - Top Right
corners.push({top: topleft.top, left: topleft.left+w});
// 2 - Bottom Right
corners.push({top: topleft.top+h, left: topleft.left+w});
// 3 - Bottom Left
corners.push({top: topleft.top+h, left: topleft.left});
//console.log(corners);
// Calculate the closest to the mouse
var distances = {};
for(var c in corners){
var dist = Math.hypot(pagelayer.mouse.x - corners[c].left, pagelayer.mouse.y - corners[c].top);
distances[c] = dist;
}
//console.log(distances);
var corner = Object.keys(distances).sort(function(a,b){return distances[a]-distances[b]})[0];
//console.log(corner);
return corner;
};
// Make left bar draggable
function pagelayer_make_leftbar_movable(){
var pl_iframe = pagelayer.$$('.pagelayer-iframe'),
pl_leftbar = pagelayer.$$('.pagelayer-leftbar-table');
// On mouse down in pagelayer-topbar-holder
pagelayer.$$('.pagelayer-topbar-mover').on('mousedown', function(e){
e = e || window.event;
e.preventDefault();
// Get leftbar position
var orig_eleX = pl_leftbar.offset().left;
var orig_eleY = pl_leftbar.offset().top;
// Get the mouse cursor position at startup:
var posX = e.clientX;
var posY = e.clientY;
// The variable needs to be empty.
var newMethod = '',
change = true;
var leftbar_mousemove = function(e){
e = e || window.event;
if(change){
// Add class to leftbar
pl_leftbar.addClass('pagelayer-leftbar-moving');
// Add left-right overlay
pl_iframe.before('');
pl_iframe.after('');
pagelayer.$$('body').addClass('pagelayer-overflow-hidden');
change = false;
}
// calculate the new cursor position and set the element left-top position
var top = orig_eleY + (e.clientY - posY);
var left = orig_eleX + (e.clientX - posX);
// set the element's new position:
pl_leftbar.css({'top': top +'px','left': left +'px'});
pagelayer.$$('.pagelayer-leftbar-toggle').hide();
// Make a copy of new method
var _newMethod = newMethod;
newMethod = '';
// Get near by corner
var offleft = pl_iframe.offset().left;
if(offleft + 100 > e.clientX){
newMethod = 'before';
}else if(offleft+pl_iframe.outerWidth()- 100 < e.clientX){
newMethod = 'after';
}
if(_newMethod != newMethod){
pagelayer.$$('.pagelayer-leftbar-move').css({'width' :'', 'opacity': '0.33'});
if(newMethod == 'after'){
pagelayer.$$('.pagelayer-moveto-right').animate({'width' :'60px', 'opacity': '0.66'}, 200);
pl_leftbar.addClass('pagelayer-rightbar');
}else if(newMethod == 'before'){
pagelayer.$$('.pagelayer-moveto-left').animate({'width' : '60px', 'opacity': '0.66'}, 200);
pl_leftbar.removeClass('pagelayer-rightbar');
}
}
};
var leftbar_mouseup = function(e){
// Remove events
pagelayer.gDocument.off('mousemove', leftbar_mousemove);
pagelayer.gDocument.off('mouseup', leftbar_mouseup);
// Remove class to leftbar
pagelayer.$$('.pagelayer-leftbar-move').remove();
var windowHeight = jQuery(window).height();
if(pl_leftbar.offset().top < 0){
pl_leftbar.css({'top': '10px'});
}else if( (windowHeight - e.clientY) < 10){
pl_leftbar.css({'top': ''+windowHeight - 40+'px'});
}
if( !pagelayer_empty(newMethod)){
pl_leftbar.removeClass('pagelayer-leftbar-moving');
pl_leftbar.removeAttr('style');
pagelayer.$$('.pagelayer-leftbar-toggle').show();
pagelayer.$$('body').removeClass('pagelayer-overflow-hidden');
pl_iframe[newMethod](pl_leftbar);
}
// make change true
change = true;
};
pagelayer.gDocument.on('mouseup', leftbar_mouseup);
pagelayer.gDocument.on('mousemove', leftbar_mousemove);
});
}
// Make rows and cols draggable
function pagelayer_setup_drag(){
// The object to show as drag
var shower = jQuery('.pagelayer-drag-show');
// Delete any prospect
var clear_prospect = function(){
jQuery('.pagelayer-drag-prospect').remove();
// Shows the wrap as active
jQuery('.pagelayer-drag-ele-hover').removeClass('pagelayer-drag-ele-hover');
}
// Reset the complete drag stuff
var reset_dragging = function(){
pagelayer.dragging = false;
pagelayer.drag_is_new = false;
pagelayer.drag_mouse = {x: 0, y: 0};
reset_on_drag();
}
// Reset the element on you were last
var reset_on_drag = function(){
pagelayer.drag_closest = false;
pagelayer.drag_closest_corner = null;
}
// Scroll by
var scrollPx = 7;
var scrollDist = 30;
// If we are too close too the window edge, then scroll
var handle_scroll = function(e){
var windowHeight = jQuery(window).height();
var windowWidth = jQuery(window).width();
// Are we to close to the top or bottom
if(e.clientY < scrollDist){
window.scrollBy(0, -scrollPx);
}else if((windowHeight - e.clientY) < scrollDist){
window.scrollBy(0, scrollPx);
}
// Are we to close to the top or bottom
if(e.clientX < scrollDist){
window.scrollBy(-scrollPx, 0);
}else if((windowWidth - e.clientX) < scrollDist){
window.scrollBy(scrollPx, 0);
}
}
// SET the values
reset_dragging();
var ondragover = function(e) {
//console.log(e);
pagelayer.mouse.x = parseInt(e.pageX);
pagelayer.mouse.y = parseInt(e.pageY);
//console.log(pagelayer.mouse);
// Are we dragging ?
if(pagelayer.dragging){
//console.log(e);
e.preventDefault();
//e.stopPropagation();
// The wrap of the element being dragged
var wrap = pagelayer.dragging;
// New addition
var is_new = pagelayer.drag_is_new;
var ele;
var tag = pagelayer_tag(wrap);
var id = pagelayer_id(wrap);
// If existing element then add we are dragging
if(!is_new){
// Start Dragging
if(!wrap.hasClass('pagelayer-is-dragging')){
wrap.addClass('pagelayer-is-dragging');
}
//shower.hide();
ele = document.elementFromPoint(e.clientX, e.clientY);
//console.log(ele);
// Drag the show object
//shower.show();
//var offset = {top: (e.pageY-10)+'px', left: (e.pageX-10)+'px'}
//shower.css(offset);
}else{
ele = document.elementFromPoint(e.clientX, e.clientY);
}
//console.log(e);
// Have we moved more than 5px;
var dist = Math.hypot(pagelayer.mouse.x - pagelayer.drag_mouse.x, pagelayer.mouse.y - pagelayer.drag_mouse.y);
//console.log(dist);
/*if(dist && dist < 5){
return false;
}*/
// Handle the scroll
handle_scroll(e);
// Find the closest wrap
var onWrap;
// If we are a column, we can be over another column or row
if(tag == 'pl_col'){
// Prevent column in inner-row and it's columns, if the draged column have inner-rows
if(wrap.find('.pagelayer-wrap-inner-row').length > 0){
onWrap = jQuery(ele).closest('.pagelayer-wrap-col,.pagelayer-wrap-row');
var innerRow = onWrap.closest(pagelayer_editable +' .pagelayer-wrap-inner-row');
if( onWrap.length < 1 || innerRow.length > 0){
onWrap = jQuery(innerRow).closest('.pagelayer-wrap-col,.pagelayer-wrap-row');
}
}else{
onWrap = jQuery(ele).closest('.pagelayer-wrap-col,.pagelayer-wrap-row,.pagelayer-wrap-inner-row');
}
//console.log(pagelayer_id(onWrap));
// If we are a row, we can be over another row or a column
}else if(tag == 'pl_row'){
onWrap = jQuery(ele).closest('.pagelayer-wrap-row');
//console.log(pagelayer_id(onWrap));
// For inner row we restrict to 1 level only
}else if(tag == 'pl_inner_row'){
var ele_wrap = jQuery(ele).parents('.pagelayer-wrap-col');
if(
(ele_wrap.length == 1 && !jQuery(ele).hasClass('pagelayer-wrap-col')) ||
(ele_wrap.length == 0 && jQuery(ele).hasClass('pagelayer-wrap-col'))
){
onWrap = jQuery(ele).closest('.pagelayer-wrap-ele,.pagelayer-wrap-col,.pagelayer-wrap-inner-row');
}else{
onWrap = jQuery(ele).closest('.pagelayer-wrap-inner-row');
}
// For every other element, we can be over a col or ele
}else{
onWrap = jQuery(ele).closest('.pagelayer-wrap-ele,.pagelayer-wrap-col,.pagelayer-wrap-inner-row');
// If we are inside the same widget tag
// We are allowing for now, hence the following is commented
/*var sameTag = onWrap.closest(pagelayer_editable +' [pagelayer-tag="'+tag+'"]');
if(sameTag.length > 0){
onWrap = sameTag.closest('.pagelayer-wrap-ele');
}*/
// Is prevent to go inside any widget?
if('prevent_inside' in pagelayer_shortcodes[tag] && !pagelayer_empty(pagelayer_shortcodes[tag]['prevent_inside'])){
var preTags = pagelayer_shortcodes[tag]['prevent_inside'];
var prevent_inside = false;
var preEle = onWrap;
if(typeof preTags === 'string'){
preTags = [preTags];
}
for(var toFind in preTags){
preEle = onWrap.closest(pagelayer_editable +' [pagelayer-tag="'+preTags[toFind]+'"]');
if (preEle.length > 0) {
prevent_inside = true;
break;
}
}
// If we find
if(prevent_inside){
onWrap = preEle.closest('.pagelayer-wrap-ele');
}
}
var widGroup = onWrap.closest('.pagelayer-ele-widget-group');
// If we are inside the group widget
if(widGroup.length > 0 && widGroup.closest(pagelayer_editable).length > 0){
var wGroupTag = pagelayer_tag(widGroup);
var use_inside = false;
// If defined use inside only
if('use_inside' in pagelayer_shortcodes[tag] && !pagelayer_empty(pagelayer_shortcodes[tag]['use_inside'])){
var inTags = pagelayer_shortcodes[tag]['use_inside'];
if(typeof inTags === 'string'){
inTags = [inTags];
}
for(var toFind in inTags){
if (wGroupTag == inTags[toFind]) {
use_inside = true;
}
}
}
// If we find nothing
if(!use_inside){
onWrap = widGroup.parent('.pagelayer-wrap-ele');
}
}
}
//console.log(onWrap);
// If we find nothing
if(pagelayer_empty(onWrap) || onWrap.length < 1){
clear_prospect();// Clear existing prospects
reset_on_drag();// Also reset the last on item
return false;
}
/*// If the columns more than 12 inside the row then return - As of now not enabled the below code
if(tag == 'pl_col'){
var _onTag = pagelayer_tag(onWrap);
var colEles;
// Is on col
if(_onTag == 'pl_col'){
colEles = onWrap.closest('.pagelayer-row-holder').children('.pagelayer-ele-wrap');
}else{
colEles = onWrap.find('.pagelayer-row-holder').first().children('.pagelayer-ele-wrap');
}
// If the columns more than 12
if(colEles.length >= 12){
return false;
}
}*/
// Get the ID
var onId = pagelayer_id(onWrap);
var onEle = pagelayer_ele_by_id(onId);
// Do we have a parent ?
var have_parent = function(Ele){
var pOnId = pagelayer_get_parent(Ele);
if(pagelayer_empty(pOnId) || tag == 'pl_col'){
return;
}
onId = pOnId;
onEle = pagelayer_ele_by_id(pOnId);
onWrap = pagelayer_wrap_by_id(pOnId);
have_parent(onEle);
}
// Do we have a parent ?
have_parent(onEle);
var changed = false;
// Was it the same ID like the one we were on before
if(pagelayer.drag_closest != onId){
pagelayer.drag_closest = onId;
changed = true;
}
//console.log(onId+' '+pagelayer.drag_closest)
var req_corners = {0: 'top', 1: 'top', 2: 'bottom', 3: 'bottom'};
// For columns we redefine the top and bottom
if(tag == 'pl_col'){
req_corners[1] = 'bottom';
req_corners[3] = 'top';
}
// Determine the previous and next
var next = wrap.next('.pagelayer-ele-wrap');
var prev = wrap.prev('.pagelayer-ele-wrap');
if(next.length == 1 && pagelayer_id(next) == onId){
req_corners = {0: 'bottom', 1: 'bottom', 2: 'bottom', 3: 'bottom'};
}
if(prev.length == 1 && pagelayer_id(prev) == onId){
req_corners = {0: 'top', 1: 'top', 2: 'top', 3: 'top'};
}
// Which corner are we closest to ?
var corner_num = pagelayer_closest_corner(onWrap);
var corner = req_corners[corner_num];
//console.log(corner+' != '+pagelayer.drag_closest_corner)
if(corner != pagelayer.drag_closest_corner){
pagelayer.drag_closest_corner = corner;
changed = true;
}
//console.log(changed);
// If we are on our self then clear return false and we are on hide active widget
if(onId == id || onWrap.hasClass('pagelayer-hide-active')){
clear_prospect();// Clear existing prospects
reset_on_drag();// Also reset the last on item
return false;
}
// Then lets start showing
if(changed){
// Record the mouse points
pagelayer.drag_mouse.x = parseInt(e.pageX);
pagelayer.drag_mouse.y = parseInt(e.pageY);
// Clear any existing prospect
clear_prospect();
// Add new prospect
var prospect = '';
if(corner == 'bottom'){
onWrap.append(prospect);
}else if(corner == 'top'){
onWrap.prepend(prospect);
}
prospect = jQuery('.pagelayer-drag-prospect')
var animate_props = {height: '5px'};
// For column add a special class
if(tag == 'pl_col'){
prospect.addClass('pagelayer-drag-prospect-col');
animate_props['width'] = '5px';
// Adjust the left and right
var css = {};
css[(corner == 'bottom' ? 'right' : 'left')] = '0px';
prospect.css(css);
}
// Animate the prospect
prospect.animate(animate_props, 200);
// Highlight the wrap via overlay
onWrap.children('.pagelayer-ele-overlay').addClass('pagelayer-drag-ele-hover');
}
}
}
// When mouse is pressed down
var ondragstart = function(e){
//console.log(e);
// Target
var tEle = jQuery(e.target);
var wrap = tEle.closest('.pagelayer-ele-wrap');
//console.log(jEle[0]);
// Is it an existing element ?
if(wrap.length < 1){
return false;
}
// Do we have a parent ?
var id = pagelayer_id(wrap);
var jEle = pagelayer_ele_by_id(id);
var pId = pagelayer_get_parent(jEle);
if(pId){
wrap = pagelayer_wrap_by_id(pId);
}
//e.preventDefault();
var tag = pagelayer_tag(wrap);
e.originalEvent.dataTransfer.setData('Text', 1);
var img = document.createElement('img');
img.src = shower.attr('src');
e.originalEvent.dataTransfer.setDragImage(img, 32, 32);
pagelayer.dragging = wrap;
}
// When mouse is pressed down
var ondrop = function(e){
//console.log(e);
// Stop dragging ?
if(pagelayer.dragging){
e.preventDefault();
var wrap = pagelayer.dragging;
var tag = pagelayer_tag(wrap);
var gId = wrap.attr('pagelayer-global-id');
var fromEl = wrap.parent();
var id;
// Global ID is there for sure ?
if(pagelayer_empty(gId) || pagelayer_empty(pagelayer_global_widgets[gId])){
gId = 0;
}
wrap.removeClass('pagelayer-is-dragging');
// Find any prospect
var prospect = jQuery('.pagelayer-drag-prospect');
//console.log(prospect[0]);
// It should be exactly 1
if(prospect.length == 1){
var onWrap = prospect.parent();
var onId = pagelayer_id(onWrap);
var onTag = pagelayer_tag(onWrap);
var dropped;
var corner = prospect.attr('pagelayer-corner');
var method = (corner == 'top') ? 'before' : 'after';
var before_loc; // Location before the drop
// Create the element if it needs to be created
if(pagelayer.drag_is_new){
dropped = jQuery('');
// Is there a global ID
if(!pagelayer_empty(gId)){
dropped.attr('pagelayer-global-id', gId);
}
// Move the object
}else{
// Get near by element before move
before_loc = pagelayer_near_by_ele(pagelayer_id(wrap), tag);
dropped = wrap;
dropped.detach();
}
// If I am a column or row, then I go only before or after my same type !
if((onTag == 'pl_col' || onTag == 'pl_row') && onTag == tag){
// If I am a column and I am on a row
// OR I am a normal element and I am on column
}else if((tag == 'pl_col' && (onTag == 'pl_row' || onTag == 'pl_inner_row')) || onTag == 'pl_col'){
// We need to find the holder and add the prospect there
var holder = pagelayer_shortcodes[onTag]['holder'];
onWrap = onWrap.children('.pagelayer-ele').children(holder);
method = (corner == 'top') ? 'prepend' : 'append';
}
// Attach or shift the element
onWrap[method](dropped);
//console.log(dropped);
// Trigger the onadd
if(pagelayer.drag_is_new){
id = pagelayer_onadd(dropped);
// Create Column
if((tag == 'pl_row' || tag == 'pl_inner_row') && pagelayer_empty( dropped.attr('pagelayer-global-id') )){
var col = jQuery('');
jQuery('[pagelayer-id="'+id+'"]').find('.pagelayer-row-holder').append(col);
var col_id = pagelayer_onadd(col, false);
}
// Existing elements
}else{
id = pagelayer_id(wrap);
// Save in action history
pagelayer_history_action_push({
'title' : pagelayer_shortcodes[tag]['name'],
'action' : 'Moved',
'pl_id' : id,
'before_loc' : before_loc,
'after_loc' : {'method' : method, 'cEle' : onWrap}
});
pagelayer_do_dirty(pagelayer_ele_by_id(id));
}
// Defining the variables as needed
var jEle = pagelayer_ele_by_id(id);
wrap = pagelayer_wrap_by_id(id);
var toEl = wrap.parent();
// Column number handle
if(tag == 'pl_col'){
var row_holder = jEle.parent().closest('.pagelayer-row-holder');
// Renumber the col where you are going
pagelayer_renumber_col(row_holder);
// Renumber the old columns as well
if(!pagelayer.drag_is_new){
var from_row = fromEl.closest('.pagelayer-row-holder');
pagelayer_renumber_col(from_row);
}
}
// Handle the empty col
if(tag != 'pl_col'){
pagelayer_empty_col(toEl.closest('.pagelayer-col-holder'));
if(!pagelayer.drag_is_new){
pagelayer_empty_col(fromEl.closest('.pagelayer-col-holder'));
}
}
}
// Clear prospect
clear_prospect();
}
reset_dragging();
}
// Add the events for inner content - as we are using the drag API
jQuery(document).on('dragstart', ondragstart);
jQuery(document).on('dragover', ondragover);
jQuery(document).on('drop', ondrop);
// For addition of new elements
pagelayer.$$('.pagelayer-leftbar').on('dragstart', function(e){
//console.log(e);
var tEle = jQuery(e.target);
var jEle = tEle.closest('.pagelayer-shortcode-drag');
var global_id = jEle.attr('pagelayer-global-id');
// Is it an existing element ?
if(jEle.length < 1){
return false;
}
e.originalEvent.dataTransfer.setData('tag', pagelayer_tag(jEle));
if(!pagelayer_empty(global_id)){
e.originalEvent.dataTransfer.setData( 'global_id', global_id );
}
pagelayer.dragging = jEle;
pagelayer.drag_is_new = true;
});
// Handle editable content by removing drag
var onmousedown = function(e){
var tEle = jQuery(e.originalEvent.explicitOriginalTarget);
if(tEle.closest('[pagelayer-editable]').length > 0){
//console.log('Is Editable MouseDown');
tEle.parents('[draggable]').attr('draggable', 'false');
}
}
// Handle editable content by adding drag that was removed
var onmouseup = function(e){
jQuery(document).find('[draggable=false]').attr('draggable', 'true');
}
// Handle editable contents by temprarily removing drag
jQuery(document).on('mousedown', onmousedown);
jQuery(document).on('mouseup', onmouseup);
};
// Handle empty col
// selector should be col holder
function pagelayer_empty_col(selector){
// Loop through
jQuery(selector).each(function(){
var jEle = jQuery(this);// jEle is the COL HOLDER
// Are we a col ?
if(!jEle.hasClass('pagelayer-col-holder')){
return;
}
// Column is becoming blank, so show add ele
if(jEle.children().length < 1){
//from.addClass('pagelayer-empty-col');
jEle.append('