| Current File : //proc/self/root/var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/properties.js |
// The active pagelayer element
var pagelayer_active = {};
// List of pagelayer icons
var pagelayer_icons = {};
// The inline editor
var pagelayer_editor = {};
// The active pagelayer element
var pagelayer_active_tab = {};
// The menu items refrence
var pagelayer_menus_items_ref = {};
// Loads the Data
function pagelayer_data(jEle, clean){
var ret = new Object();
// Get the data
ret.tag = pagelayer_tag(jEle);
ret.id = pagelayer_id(jEle);
ret.$ = jEle;
var ref_data = pagelayer_el_data_ref(jEle);
// Parse the attributes
ret.atts = JSON.parse(JSON.stringify(ref_data['attr']));
ret.tmp = JSON.parse(JSON.stringify(ref_data['tmp']));
//console.log(ret.atts);
//console.log(ret.tmp);
clean = clean || false;
// Remove values which have 'req'. NOTE : 'show' ones will be allowed
if(clean){
var tag = ret.tag;
// Anything to set ?
ret.set = {};
// Function to clear any att data
var pagelayer_delete_atts = function(x){
delete ret.atts[x];
delete ret.atts[x+'_tablet'];// Any tablet and mobile values as well
delete ret.atts[x+'_mobile'];
delete ret.set[x];
}
// All props
var all_props = pagelayer_shortcodes[tag];
// Loop through all props
for(var i in pagelayer_tabs){
var tab = pagelayer_tabs[i];
section_loop1:
for(var section in all_props[tab]){
// Any section to skip by post type ?
if(!pagelayer_empty(all_props['post_type_cats'])){
for(var post_type in all_props['post_type_cats']){
if(pagelayer_post.post_type != post_type && jQuery.inArray(section, all_props['post_type_cats'][post_type]) > -1){
continue section_loop1;
}
}
}
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){
var prop = props[x];
// Any prop to skip ?
if(!pagelayer_empty(all_props['skip_props']) && jQuery.inArray(x, all_props['skip_props']) > -1){
pagelayer_delete_atts(x);
continue;
}
// Are we to set this value ?
if(!(x in ret.atts) && 'default' in prop && !pagelayer_empty(prop['default'])){
// We need to make sure its not a PRO value
if(!('pro' in prop && pagelayer_empty(pagelayer_pro))){
var tmp_val = prop['default'];
// If there is a unit and there is no unit suffix in atts value
if('units' in prop){
if(jQuery.isNumeric(tmp_val)){
tmp_val = tmp_val+prop['units'][0];
}else{
var sep = 'sep' in prop ? prop['sep'] : ',';
var tmp2 = tmp_val.split(sep);
for(var k in tmp2){
if(jQuery.isNumeric(tmp2[k])){
tmp2[k] = tmp2[k]+prop['units'][0];
}
}
tmp_val = tmp2.join(sep);
}
}
//console.log(x+' - '+tmp_val);
ret.set[x] = tmp_val;
}
}
if(!('req' in prop)){
continue;
}
//console.log('[pagelayer_data] Cleaning :'+x);
// List of considerations
var show = prop['req'];
// We will hide by default
var toShow = true;
for(var showParam in show){
var reqval = show[showParam];
var except = showParam.substr(0, 1) == '!' ? true : false;
showParam = except ? showParam.substr(1) : showParam;
var val = ret.atts[showParam] || '';
//console.log('Show '+x+' '+showParam+' '+reqval+' '+val);
// Is the value not the same, then we can show
if(except){
if(typeof reqval == 'string' && reqval == val){
toShow = false;
break;
}
// Its an array and a value is found, then dont show
if(typeof reqval != 'string' && reqval.indexOf(val) > -1){
toShow = false;
break;
}
// The value must be equal
}else{
if(typeof reqval == 'string' && reqval != val){
toShow = false;
break;
}
// Its an array and no value is found, then dont show
if(typeof reqval != 'string' && reqval.indexOf(val) === -1){
toShow = false;
break;
}
}
}
// Are we to show ?
if(!toShow){
//console.log('Delete : '+x);
pagelayer_delete_atts(x);
}
}
}
}
}
return ret;
};
// Setup the properties
function pagelayer_elpd_setup(){
// The Dialag box of the element properties
// pagelayer-ELPD - Element Properties Dialog
pagelayer_elpd_html = '<div class="pagelayer-elpd-tabs">'+
'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="settings" pagelayer-elpd-active-tab=1>Settings</div>'+
//'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="styles">Style</div>'+
'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="options">Options</div>'+
'<div class="pagelayer-advanced-props pagelayer-elpd-tab pagelayer-hidden" pagelayer-elpd-tab="advanced">Advanced</div>'+
'<div class="pagelayer-elpd-options">'+
'<i class="pli pli-clone" ></i>'+
'<i class="pli pli-trashcan" ></i>'+
'</div>'+
'</div>'+
'<div class="pagelayer-elpd-body"></div>'+
'<div class="pagelayer-elpd-holder"></div>';
// Create the dialog box
pagelayer.$$('#pagelayer-elpd').append(pagelayer_elpd_html);
pagelayer_elpd = pagelayer.$$('#pagelayer-elpd');
pagelayer.$$('.pagelayer-elpd-close').on('click', function(){
pagelayer_leftbar_tab('pagelayer-shortcodes');
pagelayer.$$('[pagelayer-widget-tab="widgets"]').click();
pagelayer.$$('.pagelayer-elpd-header').hide();
pagelayer.$$('.pagelayer-logo').show();
pagelayer.$$('.pagelayer-elpd-body').removeAttr('pagelayer-element-id').empty();
pagelayer_active = {};
});
// Copy
pagelayer.$$('.pagelayer-elpd-options>.pli-clone').on('click', function(){
pagelayer_copy_element(pagelayer_active.el.$);
});
// Delete
pagelayer.$$('.pagelayer-elpd-options>.pli-trashcan').on('click', function(){
pagelayer_delete_element(pagelayer_active.el.$);
//pagelayer.$$('.pagelayer-elpd-close').click();
});
// The advanced props
pagelayer_elpd.find('.pagelayer-advanced-props').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var propsModal = pagelayer.$$('.pagelayer-props-modal');
if(propsModal.find('.pagelayer-meta-iframe').length < 1){
propsModal.find('.pagelayer-props-wrap').append('<iframe class="pagelayer-meta-iframe" src="'+ pagelayer_post_props +'" style="display:none"></iframe>');
propsModal.find('.pagelayer-meta-iframe').load(function(){
propsModal.find('.pagelayer-props-loading-screen').hide();
propsModal.find('.pagelayer-props-modal-close').css('visibility','visible');
jQuery(this).show();
});
}
propsModal.show();
pagelayer.$$('.pagelayer-meta-iframe').contents().find('.pagelayer-tab-items[data-tab="post_props"]').click();
});
// The tabs
pagelayer_elpd.find('.pagelayer-elpd-tab').on('click', function(){
var jEle = jQuery(this);
var attr = 'pagelayer-elpd-active-tab';
var tab = jEle.attr('pagelayer-elpd-tab');
if(tab == 'advanced'){
return;
}
pagelayer_elpd.find('.pagelayer-elpd-tab').each(function(){
jQuery(this).removeAttr(attr);
});
jEle.attr(attr, 1);
// Trigger the showing of rows
pagelayer_elpd_show_rows();
});
};
// Open the properties
function pagelayer_elpd_open(jEle){
// Set pagelayer history FALSE
pagelayer.history_action = false;
// Set the position of the element and show
//pagelayer_elpd.css('left', pagelayer_elpd_pos[0]);
//pagelayer_elpd.css('top', pagelayer_elpd_pos[1]);
pagelayer_leftbar_tab('pagelayer-elpd');
pagelayer.$$('[pagelayer-elpd-tab=settings]').show();
pagelayer.$$('.pagelayer-elpd-header').show();
pagelayer.$$('.pagelayer-logo').hide();
// The property holder
var holder = pagelayer.$$('.pagelayer-elpd-body');
holder.html(' ');
var el = pagelayer_elpd_generate(jEle, holder);
// Set the active element
pagelayer_active.el = el;
// Set the header
pagelayer.$$('.pagelayer-elpd-title').html('Edit '+pagelayer_shortcodes[el.tag]['name']);
// Set pagelayer history TRUE
pagelayer.history_action = true;
// Render tooltips for the ELPD
pagelayer_tooltip_setup();
};
// Show the properties window
function pagelayer_elpd_generate(jEle, holder){
// Get the id, tag, atts, data, etc
var el = pagelayer_data(jEle);
//console.log(el);
// Is it a valid type ?
if(pagelayer_empty(pagelayer_shortcodes[el.tag])){
pagelayer_error('Could not find this shortcode : '+el.tag);
return;
}
// Set the holder
holder.attr('pagelayer-element-id', el.id);
//console.log(el.id);
var all_props = pagelayer_shortcodes[el.tag];
var sec_open_class = 'pagelayer-elpd-section-open';
for(var i in pagelayer_tabs){
var tab = pagelayer_tabs[i];
var section_close = false;// First section always open
section_loop2:
for(var section in all_props[tab]){
//console.log(tab+' '+section);
// Any section to skip by post type ?
if(!pagelayer_empty(all_props['post_type_cats'])){
for(var post_type in all_props['post_type_cats']){
if(pagelayer_post.post_type != post_type && jQuery.inArray(section, all_props['post_type_cats'][post_type]) > -1){
continue section_loop2;
}
}
}
var props = section in pagelayer_shortcodes[el.tag] ? pagelayer_shortcodes[el.tag][section] : pagelayer_styles[section];
//console.log(props);
var sec = jQuery('<div class="pagelayer-elpd-section" section="'+section+'" pagelayer-show-tab="'+tab+'">'+
'<div class="pagelayer-elpd-section-name '+sec_open_class+'"><i class="pli"></i>'+all_props[tab][section]+'</div>'+
'<div class="pagelayer-elpd-section-rows"></div>'+
'</div>');
holder.append(sec);
// The row holder
sec = sec.find('.pagelayer-elpd-section-rows');
// Close all except the first section
if(section_close){
sec.hide().prev().removeClass(sec_open_class);
}
section_close = true;
if('widget' in all_props && section == 'params'){
pagelayer_elpd_widget_settings(el, sec, true);
continue;
}
var mode = pagelayer_get_screen_mode();
// Reset / Create the cache
for(var x in props){
props[x]['c'] = new Object();
props[x]['c']['val'] = '';// Blank Val
props[x]['c']['name'] = x;// Add the Name of the row i.e. attribute of the element
var prop_name = x;
// Do we have screen ?
if('screen' in props[x] && mode != 'desktop'){
prop_name = x +'_'+mode;
}
// Set default to value of attribute if any
if(prop_name in el.atts){
props[x]['c']['val'] = el.atts[prop_name];
}
// Set element
props[x]['el'] = el;
// Any prop to skip ?
if(!pagelayer_empty(all_props['skip_props']) && jQuery.inArray(x, all_props['skip_props']) > -1){
continue;
}
// Add the row
pagelayer_elpd_row(sec, tab, section, props, x);
}
// Hide empty sections
if(sec.html().length < 1){
//console.log(section+' - '+sec.html().length);
sec.parent().remove();
}
}
}
/*// Set the default values in the PROPERTIES
var fn_load = window['pagelayer_load_elp_'+el.tag];
if(typeof fn_load == 'function'){
fn_load(el, props);
}*/
// Hide clone and delete options
if(!pagelayer_empty(all_props['hide_active']) && (pagelayer_empty(pagelayer_active.el) || pagelayer_active.el.id == el.id)){
pagelayer.$$('.pagelayer-elpd-options').addClass('pagelayer-hidden');
}else{
pagelayer.$$('.pagelayer-elpd-options').removeClass('pagelayer-hidden');
}
// Add Advanced settings options for the props
if(el.tag == 'pl_post_props'){
pagelayer.$$('.pagelayer-elpd-tab[pagelayer-elpd-tab="advanced"]').removeClass('pagelayer-hidden');
}else{
pagelayer.$$('.pagelayer-elpd-tab[pagelayer-elpd-tab="advanced"]').addClass('pagelayer-hidden');
}
// Section open close
holder.find('>.pagelayer-elpd-section>.pagelayer-elpd-section-name').on('click', function(){
var _sec = jQuery(this);
var par = _sec.parent();
pagelayer_active_tab.id = el.id;
pagelayer_active_tab.section = par.attr('section');
// Get the active tab
var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab');
// Close all but dont touch yourself
holder.children().each(function (){
var curSec = jQuery(this);
if(par.is(curSec)) return;// Skip the current option
if(curSec.attr('pagelayer-show-tab') != active_tab) return;// Skip the non active tabs as is
curSec.find('.pagelayer-elpd-section-rows').hide().prev().removeClass(sec_open_class);
});
// Now toggle your self
par.find('.pagelayer-elpd-section-rows').toggle();
if(_sec.next().is(':visible')){
_sec.addClass(sec_open_class);
}else{
_sec.removeClass(sec_open_class);
}
});
if(!pagelayer_empty(pagelayer_active_tab) && pagelayer_active_tab.id == el.id){
holder.find('>[section='+pagelayer_active_tab.section+']>.pagelayer-elpd-section-name').click();
}
// Handle the showing of rows
pagelayer_elpd_show_rows();
return el;
};
// Show a row
function pagelayer_elpd_row(holder, tab, section, props, name){
// The Prop
var prop = props[name];
//console.log(tab+' '+name+' '+prop.el.tag);
var fn = window['pagelayer_elp_'+prop['type']];
if(typeof fn == 'function'){
var row = jQuery('<div class="pagelayer-form-item" pagelayer-elp-name="'+name+'" />');
// Append the row
holder.append(row);
return pagelayer_elpd_render_row(row, prop);
}
};
// Render a row
function pagelayer_elpd_render_row(row, prop){
var fn = window['pagelayer_elp_'+prop['type']];
if('group' in prop){
row.attr('pagelayer-access-item', prop.group);
}
var fn_ui = window['pagelayer_elp_'+prop['type']+'_ui'];
// Is there a UI Handler ?
if(typeof fn_ui == 'function'){
fn_ui(row, prop);
// Use the default mechanism
}else{
// The label
pagelayer_elp_label(row, prop);
// The main property
fn(row, prop);
// Showing default button or not
if(pagelayer_properties_filter(prop['type']) && pagelayer_empty(row.find('.pagelayer-pro-req').length)){
pagelayer_show_default_button(row, prop, prop.c['val']);
}
// Is there a description ?
if(!pagelayer_empty(prop['desc'])){
pagelayer_elp_desc(row, prop['desc']);
}
}
if('script' in prop){
row.append('<script>'+prop.script+'</script>');
}
return row;
}
// Show the rows as per the active tab and also handle the rows that are supposed to be shown or not
function pagelayer_elpd_show_rows(){
//console.log('Called');
// Get the active tab
var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab');
pagelayer_elpd.find('[pagelayer-show-tab]').each(function(){
var sec = jQuery(this);
// Is it the active tab ?
if(sec.attr('pagelayer-show-tab') != active_tab){
sec.hide();
}else{
sec.show();
}
});
// Find all Elements in the Property dialog and loop
pagelayer_elpd.find('[pagelayer-element-id]').each(function(){
var holder = jQuery(this);
var id = holder.attr('pagelayer-element-id');
var jEle = pagelayer_ele_by_id(id);
var tag = pagelayer_tag(jEle);
//console.log('Main : '+id+' - '+tag);
//console.log(pagelayer_active);
// All props
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){
var prop = props[x];
// If the prop is a group, we continue
if(prop['type'] == 'group'){
continue;
}
// Find the row
var row = false;
holder.find('[pagelayer-elp-name="'+x+'"]').each(function(){
var j = jQuery(this);
var _id = j.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
//console.log(_id+' = '+id);
// Is the parent the same ?
if(_id == id){
row = j;
}
});
// Do you have a show or hide ?
if(!row){
//console.log('Not Found : '+x+' - '+id);
continue;
}
// Is the row visible ?
if(row.closest('[pagelayer-show-tab]').attr('pagelayer-show-tab') != active_tab){
row.hide();
continue;
}
// Now lets show or hide the element
if(!('req' in prop || 'show' in prop)){
row.show();
continue;
}
// List of considerations
var 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 prop && 'show' in prop){
// Add the req values
show = JSON.parse(JSON.stringify(prop['req']));
// Now the show values need to be looped
for(var t in prop['show']){
show[t] = prop['show'][t];
}
}else{
show = 'req' in prop ? prop['req'] : prop['show'];
}
// We will hide by default
var toShow = true;
for(var showParam in show){
var reqval = show[showParam];
var except = showParam.substr(0, 1) == '!' ? true : false;
showParam = except ? showParam.substr(1) : showParam;
var val = pagelayer_get_att(jEle, showParam) || '';
//console.log('Show '+x+' '+showParam+' '+reqval+' '+val);
// Is the value not the same, then we can show
if(except){
if(typeof reqval == 'string' && reqval == val){
toShow = false;
break;
}
// Its an array and a value is found, then dont show
if(typeof reqval != 'string' && reqval.indexOf(val) > -1){
toShow = false;
break;
}
// The value must be equal
}else{
if(typeof reqval == 'string' && reqval != val){
toShow = false;
break;
}
// Its an array and no value is found, then dont show
if(typeof reqval != 'string' && reqval.indexOf(val) === -1){
toShow = false;
break;
}
}
}
// Are we to show ?
if(toShow){
row.show();
}else{
row.hide();
}
}
}
}
});
};
var pagelayer_widget_timer;
var pagelayer_widget_cache = {};
// Load the widget settings
function pagelayer_elpd_widget_settings(el, sec, onfocus){
var show_form = function(html){
sec.html('<form class="pagelayer-widgets-form">'+html+'</form>');
// Handle on form data change
sec.find('form :input').on('change', function(){
//console.log('Changed !');
// Clear any previous timeout
clearTimeout(pagelayer_widget_timer);
// Set a timer for constant change
pagelayer_widget_timer = setTimeout(function(){
pagelayer_elpd_widget_settings(el, sec);
//console.log('Calling');
}, 500);
});
}
// Is it onfocus ?
onfocus = onfocus || false;
// Its an onfocus
if(onfocus && el.id in pagelayer_widget_cache){
show_form(pagelayer_widget_cache[el.id]);
return true;
}
var post = {};
post['action'] = 'pagelayer_wp_widget';
post['pagelayer_nonce'] = pagelayer_ajax_nonce;
post['tag'] = el.tag;
post['pagelayer-id'] = el.id;
// Any atts ?
if('widget_data' in el.atts){
post['widget_data'] = el.atts['widget_data'];
}
// Post any existing data
var form = sec.find('form');
// Archive widget checkbox fix
var inputCheckbox = form.find('input[type=checkbox]');
for(var i=0; i<inputCheckbox.length; i++){
if(inputCheckbox[i].value == 'on'){
form.find('input[type=checkbox]')[i].value = 1;
}
}
if(form.length > 0){
//console.log(form.serialize());
post['values'] = form.serialize();
}
jQuery.ajax({
url: pagelayer_ajax_url,
type: 'post',
data: post,
success: function(data) {
//console.log('Widget Data');console.log(data);
// Show the form
if('form' in data){
show_form(data['form']);
// Store in cache
pagelayer_widget_cache[el.id] = data['form'];
}
// Show the content
if('html' in data){
el.$.html(data['html']);
pagelayer_sc_render(el.$);// Re-Render the CSS
}
// Any set attributes ?
if('widget_data' in data){
pagelayer_set_atts(el.$, 'widget_data', JSON.stringify(data['widget_data']));
}
},
fail: function(data) {
pagelayer_show_msg('Some error occured in getting the widget data', 'error');
}
});
}
// Will set the attribute and also render
function _pagelayer_set_atts(row, val, no_default){
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
var jEle = jQuery('[pagelayer-id='+id+']');
var tag = pagelayer_tag(jEle);
var prop_name = row.attr('pagelayer-elp-name');
var prop = pagelayer.props_ref[tag][prop_name];
// Is there a unit ?
var uEle = row.find('.pagelayer-elp-units');
if(uEle.length > 0 && !pagelayer_empty(val)){
var unit = uEle.find('[selected]').html();
if(Array.isArray(val)){
for(var i in val){
if(val[i].length < 1){
continue;
}
val[i] = val[i]+unit;
}
}else{
val = val+unit;
}
}
// Are we in another mode ?
var mode = ('screen' in prop && pagelayer_get_screen_mode() != 'desktop') ? '_'+pagelayer_get_screen_mode() : '';
pagelayer_set_atts(jEle, prop_name+mode, val);
// Are we to skip setting defaults ?
no_default = no_default || false;
if(!no_default){
// We need to set defaults for dependents
var hasSet = pagelayer_set_default_atts(jEle, 5);
// We need to reopen the left panel
// Note : If two simultaneous calls are made, then this will cause problems
// Also after this is called, ROW is destroyed and no other row related stuff will work i.e. set_atts in the same calls will fail
if(hasSet){
pagelayer_elpd_open(jEle);
}
}
//console.trace();console.log('Setting Attr');
// Render
pagelayer_sc_render(jEle);
// Show default button or not
if(pagelayer_properties_filter(prop) && pagelayer_empty(row.find('.pagelayer-pro-req').length)){
pagelayer_show_default_button(row, prop, val);
}
if('onchange' in prop){
var fn = window[prop['onchange']];
if(typeof fn === 'function'){
fn(jEle, row, val);
}
}
};
// Will set the attribute but not render
function _pagelayer_set_tmp_atts(row, suffix, val){
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
var jEle = jQuery('[pagelayer-id='+id+']');
pagelayer_set_tmp_atts(jEle, row.attr('pagelayer-elp-name')+(suffix.length > 0 ? '-'+suffix : ''), val);
};
// Will clear the attribute but not render
function _pagelayer_clear_tmp_atts(row){
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
var jEle = jQuery('[pagelayer-id='+id+']');
pagelayer_clear_tmp_atts(jEle, row.attr('pagelayer-elp-name'));
};
// Get the attribute of images only
function _pagelayer_img_tmp_atts(row){
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
var jEle = jQuery('[pagelayer-id='+id+']');
return pagelayer_img_tmp_atts(jEle, row.attr('pagelayer-elp-name'));
};
// Get the tmp att
function _pagelayer_get_tmp_att(row, suffix){
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
var jEle = jQuery('[pagelayer-id='+id+']');
return pagelayer_get_tmp_att(jEle, row.attr('pagelayer-elp-name')+'-'+suffix);
};
// Create the Label
function pagelayer_elp_label(row, prop){
row.append('<div class="pagelayer-elp-label-div" type="'+prop['type']+'"><label class="pagelayer-elp-label">'+prop['label']+'</label></div>');
var label = row.children('.pagelayer-elp-label-div');
// Do we have screen ?
if('screen' in prop){
var mode = pagelayer_get_screen_mode();
var screen = '<div class="pagelayer-elp-screen">'+
'<i class="pli pli-desktop" ></i>'+
'<i class="pli pli-tablet" ></i>'+
'<i class="pli pli-mobile" ></i>'+
'<i class="pagelayer-prop-screen pli pli-'+mode+'" ></i>'+
'</div>';
label.append(screen);
// Set screen mode on change
label.find('.pli:not(.pagelayer-prop-screen)').on('click', function(){
var mode = 'desktop';
var jEle = jQuery(this);
// Tablet ?
if(jEle.hasClass('pli-tablet')){
mode = 'tablet';
}
// Mobile ?
if(jEle.hasClass('pli-mobile')){
mode = 'mobile';
}
pagelayer_set_screen_mode(mode);
label.find('.pagelayer-elp-screen .pli').removeClass('open');
});
// On change of screen handle the values
label.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){
label.find('.pagelayer-elp-screen .pli').removeClass('open');
var mode = pagelayer_get_screen_mode();
var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'};
// Get the current current new val
prop.c['val'] = pagelayer_get_att(prop.el.$, prop.c['name']+modes[mode]);
// Handle the amount
if(pagelayer_empty(prop.c['val'])){
prop.c['val'] = '';
}
// Remove the siblings
label.siblings().each(function(){
var j = jQuery(this);
if(j.hasClass('pagelayer-elp-desc')){
return;
}
j.remove();
});
// Create the vals again
var fn = window['pagelayer_elp_'+prop['type']];
// The main property
fn(row, prop);
});
label.find('.pagelayer-elp-screen .pagelayer-prop-screen').on('click', function(e){
jQuery(this).siblings().toggleClass('open');
})
}
// Do we have pro version requirement ?
if('pro' in prop && pagelayer_empty(pagelayer_pro)){
var txt = prop['pro'].length > 1 ? prop['pro'] : pagelayer.pro_txt;
var pro = jQuery('<div class="pagelayer-pro-req">Pro</div>');
pro.attr('data-tlite', txt);
label.append(pro);
}
// Do we have units ?
if('units' in prop){
var units = '';
var tmp_val = prop.c['val'];
var default_unit = 0;
// Get unit from value
if(!(pagelayer_empty(tmp_val))){
for(var i in prop['units']){
if(pagelayer_is_string(tmp_val) && tmp_val.search(prop['units'][i]) != -1){
default_unit = i;
}else if(tmp_val[0].search(prop['units'][i]) != -1 ){
default_unit = i;
}
}
}
for(var i in prop['units']){
units += '<span '+(i == default_unit ? 'selected' : '')+'>'+prop['units'][i]+'</span>';
}
label.append('<div class="pagelayer-elp-units">'+units+'</div>');
// Set unit on change
label.find('.pagelayer-elp-units span').on('click', function(){
label.find('.pagelayer-elp-units span').each(function(){
jQuery(this).removeAttr('selected');
});
jQuery(this).attr('selected', 1);
});
}
// Include default button
if(pagelayer_properties_filter(prop['type']) && pagelayer_empty(row.find('.pagelayer-pro-req').length)){
var defaultButton = '<span class="pagelayer-elp-default" title="'+pagelayer_l('back_to_default')+'" ><i class="fas fa-undo"></i></span>';
label.append(defaultButton);
label.find('.pagelayer-elp-default').on('click', function(){
prop.c['val'] = ('default' in prop) ? prop.default : '';
_pagelayer_set_atts(row, prop.c['val']);
jQuery(this).attr('data_show',false);
// Empty the row
row.html('');
// Re-render the row
pagelayer_elpd_render_row(row, prop);
});
}
};
// Create the Description
function pagelayer_elp_desc(row, label){
row.append('<div class="pagelayer-elp-desc">'+label+'</div>');
};
// The Text property
function pagelayer_elp_text(row, prop){
var div = '<div class="pagelayer-elp-text-div">'+
'<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+pagelayer_htmlEntities(prop.c['val'])+'"></input>'+
'</div>';
row.append(div);
row.find('input').on('input', function(){
_pagelayer_set_atts(row, jQuery(this).val());// Save and Render
});
};
// The Select property
function pagelayer_elp_select(row, prop){
var options = '';
var option = function(val, lang){
var selected = (val != prop.c['val']) ? '' : 'selected="selected"';
return '<option class="pagelayer-elp-select-option" value="'+val+'" '+selected+'>'+lang+'</option>';
}
for (x in prop['list']){
// Single item
if(typeof prop['list'][x] == 'string'){
options += option(x, prop['list'][x]);
// Groups
}else{
options += '<optgroup label="'+x+'">';
for(var y in prop['list'][x]){
options += option(y, prop['list'][x][y]);
}
options += '</optgroup>';
}
}
var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+
'<select class="pagelayer-elp-select pagelayer-select" name="'+prop.c['name']+'">'+options+'</select>'+
'</div>';
row.append(div);
row.find('select').on('change', function(){
var sEle = jQuery(this);
if(sEle.attr('name') == "animation"){
_pagelayer_trigger_anim(row, sEle.val());
}
_pagelayer_set_atts(row, sEle.val());// Save and Render
});
}
// The MultiSelect property
function pagelayer_elp_multiselect(row, prop){
var selection = [];
if(!pagelayer_empty(prop.c['val'])){
//selection = JSON.parse(prop.c['val']);
selection = prop.c['val'].split(',');
}
var options = '';
var option = function(val, lang){
var selected = (jQuery.inArray(val,selection) == -1 ? '' : 'selected="selected"');
return '<li class="pagelayer-elp-multiselect-option" data-val="'+val+'" '+selected+'>'+lang+'</li>';
}
var show_sel = function(val){
var sel_html = '';
jQuery.each(val, function(index, value){
sel_html += '<span class="pagelayer-elp-multiselect-selected" data-val="'+value+'">'+prop['list'][value]+' <span class="pagelayer-elp-multiselect-remove">x</span></span>';
});
return sel_html;
}
var setup_remove = function(){
row.find('.pagelayer-elp-multiselect-remove').on('click', function(){
var sVal = jQuery(this).parent().attr('data-val');
row.find('.pagelayer-elp-multiselect-option[data-val='+sVal+']').click();
});
}
for (x in prop['list']){
options += option(x, prop['list'][x]);
}
var div = '<div class="pagelayer-elp-multiselect-div pagelayer-elp-pos-rel">'+
'<div class="pagelayer-elp-multiselect">'+show_sel(selection)+'</div>'+
'<ul class="pagelayer-elp-multiselect-ul" name="'+prop.c['name']+'">'+options+'</ul>'+
'</div>';
row.append(div);
setup_remove();
row.find('.pagelayer-elp-multiselect-option').on('click', function(){
var sVal = jQuery(this).attr('data-val');
if(jQuery.inArray(sVal,selection) == -1){
selection.push(sVal);
row.find('[data-val="'+sVal+'"]').attr('selected','selected');
}else{
selection.splice(jQuery.inArray(sVal,selection),1);
row.find('[data-val="'+sVal+'"]').removeAttr('selected');
}
//_pagelayer_set_atts(row,JSON.stringify(selection));// Save and Render
_pagelayer_set_atts(row, selection.join(','));// Save and Render
row.find('.pagelayer-elp-multiselect').html(show_sel(selection));
setup_remove();
});
// Open the selector
row.find('.pagelayer-elp-multiselect').on('click', function(){
row.find('.pagelayer-elp-multiselect-ul').slideToggle(100);
});
}
function _pagelayer_trigger_anim(row, anim){
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
var classList = jQuery('[pagelayer-id='+id+']').attr('class');
classList = classList.split(/\s+/);
//console.log(classList);
var options = [];
row.find('option').each(function(){
var found = jQuery.inArray( jQuery(this).val(), classList );
if( found != -1){
//var found = jQuery(this).val();
jQuery('[pagelayer-id='+id+']').removeClass(jQuery(this).val());
//break;
}
//options.push(jQuery(this).val());
});
jQuery('[pagelayer-id='+id+']').removeClass('pagelayer-wow').addClass(anim + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
jQuery(this).removeClass(anim+ ' animated');
});
}
// The Checkbox property
function pagelayer_elp_checkbox(row, prop){
var div = '<div class="pagelayer-elp-checkbox-div">'+
'<input type="checkbox" name="'+prop.c['name']+'" class="pagelayer-elp-checkbox" />'+
'</div>';
row.append(div);
if(prop.c['val'].length > 0){
row.find('input').attr('checked', 'checked');
}else{
row.find('input').removeAttr('checked');
}
// When the change is called
row.find('input').on('change', function(){
// We set to string true or false
var val = jQuery(this).is(':checked') ? 'true' : '';
_pagelayer_set_atts(row, val);// Save and Render
});
}
// The Radio property
function pagelayer_elp_radio(row, prop){
var active = 'pagelayer-elp-radio-active';
var div = '<div class="pagelayer-elp-radio-div">';
for(var x in prop.list){
var addclass = (prop.c['val'] == x) ? active : '';
div += '<a class="pagelayer-elp-radio '+addclass+'" val="'+x+'">'+prop.list[x]+'</a>';
}
div += '</div>';
row.append(div);
row.find('.pagelayer-elp-radio').each(function(){
jQuery(this).on('click', function (){
// Remove existing active class
jQuery(this).parent().find('.'+active).removeClass(active);
// Set active
jQuery(this).addClass(active);
_pagelayer_set_atts(row, jQuery(this).attr('val'));// Save and Render
});
});
}
// The Image Property
function pagelayer_elp_image(row, prop){
var imgObj = {};
var isRetina = false;
// Is retina images options?
if('retina' in prop && !pagelayer_empty(prop['retina'])){
isRetina = true;
}
// Previously saved values
if(typeof prop.c['val'] === 'object'){
imgObj = prop.c['val'];
}else{
imgObj['img'] = prop.c['val'];
}
var tmp = prop.c['name']+'-url';
var def = pagelayer.blank_img;
// Background image URls
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : ((!pagelayer_empty(imgObj['img']) && String(imgObj['img']).search(/http(|s):\/\//i) == 0) ? imgObj['img'] : def );
// Do we have a URL set ?
var style = 'style="background-image:url(\''+src+'\')"';
var div = '<div class="pagelayer-elp-image-div">'+
'<div class="pagelayer-elp-drop-zone">'+
'<div>'+
'<i class="fas fa-upload"></i>'+
'<h4>'+pagelayer_l('drop_file')+'</h4>'+
'<div class="pagelayer-elp-img-up-progress">'+
'<div class="pagelayer-elp-img-up-bar"></div>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-image" '+style+'></div>'+
'<div class="pagelayer-elp-image-delete"><i class="pli pli-trashcan" ></i></div>';
// Retina image icon
if(isRetina){
div += '<div class="pagelayer-elp-image-retina"><i class="pli pli-eye" ></i></div>';
}
div +='</div>';
// Add retina images option
if(isRetina){
var tmp_retina = prop.c['name']+'-retina-url';
var tmp_retina_mobile = prop.c['name']+'-retina-mobile-url';
var srcRetina = (tmp_retina in prop.el.tmp) ? prop.el.tmp[tmp_retina] : (('retina' in imgObj && !pagelayer_empty(imgObj['retina']) && String(imgObj['retina']).search(/http(|s):\/\//i) == 0) ? imgObj['retina'] : def );
var srcRetinaMobile = (tmp_retina_mobile in prop.el.tmp) ? prop.el.tmp[tmp_retina_mobile] : (('retina_mobile' in imgObj && !pagelayer_empty(imgObj['retina_mobile']) && String(imgObj['retina_mobile']).search(/http(|s):\/\//i) == 0) ? imgObj['retina_mobile'] : def );
var style_retina = 'style="background-image:url(\''+srcRetina+'\')"';
var style_retina_mobile = 'style="background-image:url(\''+srcRetinaMobile+'\')"';
div +='<div class="pagelayer-elp-label-div pagelayer-retina-label" type="image" style="display:none;">'+
'<label class="pagelayer-elp-label">Select Retina Image</label>'+
'</div>'+
'<div class="pagelayer-elp-retina-image-div" style="display:none;">'+
'<div class="pagelayer-elp-drop-zone">'+
'<div>'+
'<i class="fas fa-upload"></i>'+
'<h4>'+pagelayer_l('drop_file')+'</h4>'+
'<div class="pagelayer-elp-img-up-progress">'+
'<div class="pagelayer-elp-img-up-bar"></div>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-image pagelayer-retina" '+style_retina+'></div>'+
'<div class="pagelayer-elp-retina-delete"><i class="pli pli-trashcan" ></i></div>'+
'</div>'+
'<div class="pagelayer-form-item">'+
'<div class="pagelayer-elp-label-div pagelayer-retina-label" type="image" style="display:none;">'+
'<label class="pagelayer-elp-label">Select Retina Image For Mobile</label>'+
'</div>'+
'<div class="pagelayer-elp-checkbox-div pagelayer-retina-label" style="display:none;">'+
'<input type="checkbox" name="overlay" class="pagelayer-elp-checkbox pagelayer-retina-checkbox">'+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-retina-mobile-image-div" style="display:none;">'+
'<div class="pagelayer-elp-drop-zone">'+
'<div>'+
'<i class="fas fa-upload"></i>'+
'<h4>'+pagelayer_l('drop_file')+'</h4>'+
'<div class="pagelayer-elp-img-up-progress">'+
'<div class="pagelayer-elp-img-up-bar"></div>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-image pagelayer-retina-mobile" '+style_retina_mobile+'></div>'+
'<div class="pagelayer-elp-retina-mobile-delete"><i class="pli pli-trashcan" ></i></div>'+
'</div>';
}
row.append(div);
if(def == src && jQuery.isNumeric(imgObj['img'])){
wp.media.attachment(imgObj['img']).fetch().then(function (data){
var fetch_url = wp.media.attachment(imgObj['img']).get('url')
row.find('.pagelayer-elp-image-div .pagelayer-elp-image').css('background-image', 'url(\''+fetch_url+'\')');
_pagelayer_set_tmp_atts(row, 'url', fetch_url);
}).fail(function(){
row.find('.pagelayer-elp-image-div .pagelayer-elp-image').css('background-image', 'url(\''+src+'\')')
});
}
if(isRetina){
if(def == srcRetina && 'retina' in imgObj && jQuery.isNumeric(imgObj['retina'])){
wp.media.attachment(imgObj['retina']).fetch().then(function (data){
var fetch_url = wp.media.attachment(imgObj['retina']).get('url')
row.find('.pagelayer-retina').css('background-image', 'url(\''+fetch_url+'\')');
_pagelayer_set_tmp_atts(row, 'retina-url', fetch_url);
}).fail(function(){
row.find('.pagelayer-retina').css('background-image', 'url(\''+srcRetina+'\')')
});
}
if(def == srcRetinaMobile && 'retina_mobile' in imgObj && jQuery.isNumeric(imgObj['retina_mobile'])){
wp.media.attachment(imgObj['retina_mobile']).fetch().then(function (data){
var fetch_url = wp.media.attachment(imgObj['retina_mobile']).get('url')
row.find('.pagelayer-retina-mobile').css('background-image', 'url(\''+fetch_url+'\')');
_pagelayer_set_tmp_atts(row, 'retina-mobile-url', fetch_url);
}).fail(function(){
row.find('.pagelayer-retina-mobile').css('background-image', 'url(\''+srcRetinaMobile+'\')')
});
}
}
var getImgVal = function(val){
if(typeof val === 'object' && pagelayer_length(val) == 1 && 'img' in val){
return val['img'];
}
return val;
}
// Set an Image
row.find('.pagelayer-elp-image').on('click', function(){
var button = jQuery(this);
var inRetina = button.hasClass('pagelayer-retina');
var inRetinaM = button.hasClass('pagelayer-retina-mobile');
// Load the frame
var frame = pagelayer_select_frame('image');
// On select update the stuff
frame.on({
'select': function(){
var state = frame.state();
var id = url = '';
// External URL
if('props' in state){
id = url = pagelayer_parse_theme_vars(state.props.attributes.url);
// Internal from gallery
}else{
var attachment = frame.state().get('selection').first().toJSON();
// Set the new ID and URL
id = attachment.id;
url = attachment.url;
var old = _pagelayer_img_tmp_atts(row);
//console.log(attachment);
if(inRetina){
// To remove past temp attr so that they are not involve in future temp values
delete old[prop.c['name']+'-retina-url'];
// Keep a list of all sizes
for(var x in attachment.sizes){
_pagelayer_set_tmp_atts(row, 'retina-'+x+'-url', attachment.sizes[x].url);
delete old[prop.c['name']+'-retina-'+x+'-url'];
}
for(var x in old){
// Skip for retina and with url atts
if(! x.endsWith('-url') || !x.startsWith(prop.c['name']+'-retina') || x.startsWith(prop.c['name']+'-retina-mobile')){
continue;
}
_pagelayer_set_tmp_atts(row, x, '');
}
}else if(inRetinaM){
// To remove past temp attr so that they are not involve in future temp values
delete old[prop.c['name']+'-retina-mobile-url'];
// Keep a list of all sizes
for(var x in attachment.sizes){
_pagelayer_set_tmp_atts(row, 'retina-mobile-'+x+'-url', attachment.sizes[x].url);
delete old[prop.c['name']+'-retina-mobile-'+x+'-url'];
}
for(var x in old){
// Skip for retina and with url atts
if(! x.endsWith('-url') || ! x.startsWith(prop.c['name']+'-retina-mobile')){
continue;
}
_pagelayer_set_tmp_atts(row, x, '');
}
}else{
// To remove past temp attr so that they are not involve in future temp values
delete old[prop.c['name']+'-url'];
// Keep a list of all sizes
for(var x in attachment.sizes){
_pagelayer_set_tmp_atts(row, x+'-url', attachment.sizes[x].url);
delete old[prop.c['name']+'-'+x+'-url'];
}
for(var x in old){
// Skip for retina and with url atts
if(! x.endsWith('-url') || x.startsWith(prop.c['name']+'-retina')){
continue;
}
_pagelayer_set_tmp_atts(row, x, '');
}
}
}
// Update thumbnail
button.css('background-image', 'url(\''+url+'\')');
// Save and render
_pagelayer_set_tmp_atts(row, 'no-image-set', '');
if(inRetina){
_pagelayer_set_tmp_atts(row, 'retina-url', url);
imgObj['retina'] = id;
}else if(inRetinaM){
_pagelayer_set_tmp_atts(row, 'retina-mobile-url', url);
imgObj['retina_mobile'] = id;
}else{
_pagelayer_set_tmp_atts(row, 'url', url);
imgObj['img'] = id;
}
_pagelayer_set_atts(row, getImgVal(imgObj));
},
// On open select the appropriate images in the media manager
'open': function() {
var selection = frame.state().get('selection');
var wp_id = pagelayer_get_att(prop.el.$, prop.c['name']);
if(typeof wp_id === 'object'){
if(inRetina){
wp_id = ('retina' in wp_id && !pagelayer_empty(wp_id['retina']) ? wp_id['retina'] : 0 );
}else if(inRetinaM){
wp_id = ('retina_mobile' in wp_id && !pagelayer_empty(wp_id['retina_mobile']) ? wp_id['retina_mobile'] : 0 );
}else{
wp_id = (!pagelayer_empty(wp_id['img']) ? wp_id['img'] : 0 );
}
}
selection.reset( wp_id ? [ wp.media.attachment( wp_id ) ] : [] );
}
});
frame.open(button);
return false;
});
// Finding and assigning values in the variables
var dropzoneParent = row.find('.pagelayer-elp-image-div');
var dropZone = row.find('.pagelayer-elp-drop-zone');
// Inserting values in image drag and drop function
pagelayer_img_dragAndDrop(dropzoneParent, dropZone, '', row);
row.find('.pagelayer-elp-image-retina').click(function(){
row.find('.pagelayer-retina-label').toggle();
row.find('.pagelayer-elp-retina-image-div').toggle();
var checkval = row.find('.pagelayer-retina-checkbox').is(":checked");
if(checkval == true){
row.find('.pagelayer-retina-checkbox').trigger("click");
}
});
row.find('.pagelayer-retina-checkbox').click(function(){
row.find('.pagelayer-elp-retina-mobile-image-div').toggle();
});
// Delete this
row.find('.pagelayer-elp-image-delete').on('click', function(){
// Update thumbnail
jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')');
// Set to blank and render
_pagelayer_set_atts(row, '', true);
imgObj['img'] = def;
_pagelayer_set_tmp_atts(row, 'no-image-set', 1);
_pagelayer_set_tmp_atts(row, 'url', def);
_pagelayer_set_atts(row, getImgVal(imgObj));
});
row.find('.pagelayer-elp-retina-delete').on('click', function(){
// Update thumbnail
jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')');
delete imgObj['retina'];
_pagelayer_set_tmp_atts(row, 'retina-url', def);
_pagelayer_set_atts(row, getImgVal(imgObj));
});
row.find('.pagelayer-elp-retina-mobile-delete').on('click', function(){
// Update thumbnail
jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')');
delete imgObj['retina_mobile'];
// Set to blank and render
_pagelayer_set_tmp_atts(row, 'retina-mobile-url', def);
_pagelayer_set_atts(row, getImgVal(imgObj));
});
}
// Main image drag and drop function
function pagelayer_img_dragAndDrop(dropzoneParent, dropZone, jEle, row){
var reset_dragging = false;
dropzoneParent.on('dragover', function(e){
e.preventDefault();
// Checking that the dragged element is a file or not
var dt = e.originalEvent.dataTransfer;
if(dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))){
if(e.originalEvent.dataTransfer.items[0].type.search('image/')!=-1){
dropZone.show();
reset_dragging = true;
}
}
});
dropzoneParent.on('dragleave', function(e){
var rect = this.getBoundingClientRect();
// Checking that the cursor is in the drag area or not
if (e.clientX >= (rect.left + rect.width) || e.clientX <= rect.left || e.clientY >= (rect.top + rect.height) || e.clientY <= rect.top) {
dropZone.hide();
reset_dragging = false;
}
});
dropzoneParent.on('drop', function(e){
// Is not dropable?
if(!reset_dragging){
return;
}
e.preventDefault();
var pagelayer_ajax_func = {};
// This function for ajax success call back
pagelayer_ajax_func['success'] = function(obj){
if(obj['success']){
// Set the new ID and URL
id = obj['data']['id'];
url = obj['data']['url'];
if(row == ''){
// Getting Id of jEle
var widgetid = jEle.closest('[pagelayer-id]').attr('pagelayer-id');
// Finding widget image setting using id of jEle. Finding image editor setting from all of the other settings.
row = pagelayer.$$('[pagelayer-element-id='+widgetid+']').find('.pagelayer-elp-image').eq(0).parent().parent();
}
row.find('.pagelayer-elp-image').css('background-image', 'url(\''+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', '');
}
dropZone.find('.pagelayer-elp-img-up-bar').css('width', '3%');
dropZone.hide();
// Save and render
_pagelayer_set_tmp_atts(row, 'url', url);
_pagelayer_set_atts(row, id);
}else{
alert(obj['data']['message']);
}
}
// This function for ajax before send call back
pagelayer_ajax_func['beforeSend'] = function(xhr){
// It activate the image widget
if(row == ''){
jEle.click();
}
}
// This function for how much file is uploaded or for progress bar
pagelayer_ajax_func['uploadProgress'] = function(xhr){
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
if(row == ''){
dropZone.find('.pagelayer-img-up-bar').css('width', percentComplete+'%');
}else{
dropZone.find('.pagelayer-elp-img-up-bar').css('width', percentComplete+'%');
}
}
}, false);
return xhr;
}
// Uploading image to the media library
pagelayer_editable_paste_handler(e.originalEvent.dataTransfer.files[0], pagelayer_ajax_func);
reset_dragging = false;
});
}
// The Multi Image Property
function pagelayer_elp_multi_image(row, prop){
var div = '<div class="pagelayer-elp-multi_image-div">'+
'<center><button class="pagelayer-elp-button">'+pagelayer_l('Add Images')+'</button></center>'+
'<div class="pagelayer-elp-multi_image-thumbs"></div>'+
'</div>';
row.append(div);
var tmp = prop.c['name']+'-urls';
var ids = new Array();
// Any IDs ?
if(!pagelayer_empty(prop.c['val'])){
ids = prop.c['val']
if(pagelayer_is_string(ids)){
ids = prop.c['val'].split(',');
}
//console.log(ids);
}
// Do we have a URL set ?
if(!pagelayer_empty(ids)){
if(tmp in prop.el.tmp){
var images = JSON.parse(prop.el.tmp[tmp]);
//console.log(images);
for(var x in ids){
row.find('.pagelayer-elp-multi_image-thumbs').append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+images['i'+ids[x]]+'\');"></div>');
}
}else{
wp.media.query({ post__in: ids }).more().then(function(){
// You attachments here normally
// You can safely use any of them here
// TODO: Set tmp here
for(var x in ids){
var fetch_url = wp.media.attachment(ids[x]).get('url');
if(!pagelayer_empty(fetch_url)){
row.find('.pagelayer-elp-multi_image-thumbs').append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+fetch_url+'\');"></div>');
}
}
});
}
}
var pagelayer_init_frame = function(state){
var button = row.find('.pagelayer-elp-multi_image-thumbs');
//console.log(ids);
// Load the frame
var frame = pagelayer_select_frame('multi_image', state);
frame.on({
'select': function(){
var state = frame.state();
var id = url = '';
var urls = {};
// External URL
if('props' in state){
//console.log(state);
var urls_str = state.props.attributes.url;
var urls_arr = urls_str.split(',');
//console.log(urls_arr);
button.empty();
// Add to current selection
for(var i = 0; i < urls_arr.length; i++){
var single_url = pagelayer_parse_theme_vars(urls_arr[i]);
urls['i'+i] = single_url;
// Create thumbnails
button.append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+single_url+'\');"></div>');
}
urls_arr = Object.values(urls);
_pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls));
_pagelayer_set_atts(row, urls_arr.join());
}
},
// Set the current selection if any
'open': function(){
// Do we have anything
if(!pagelayer_empty(ids)){
var selection = '';
if(state == 'gallery-edit'){
selection = frame.state().get('library');
}else if(state == 'gallery-library'){
selection = frame.state().get('selection');
}
// Add to current selection
if(!pagelayer_empty(selection)){
for(var x in ids){
attachment = wp.media.attachment(ids[x]);
attachment.fetch();
selection.add(attachment ? [ attachment ] : [] );
}
}
}
},
// When images are selected
'update': function(selection){
//console.log(selection);
// Remove thumbnails
row.find('.pagelayer-elp-multi_image-thumb').remove();
//Fetch selected images
var attachments = selection.map(function(attachment){
attachment.toJSON();
return attachment;
});
//console.log(attachments);
var img_ids = [];
var urls = {};
var img_urls = {};
var titles = {};
var links = {};
var captions = {};
for(var i = 0; i < attachments.length; ++i){
// Add Id and urls to array
var id = attachments[i].id;
var _id = 'i'+id;
img_ids.push(id);
urls[_id] = attachments[i].attributes.url;
// Create thumbnails
button.append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+attachments[i].attributes.url+'\');"></div>');
//get title
titles[_id] = attachments[i].attributes.title;
links[_id] = attachments[i].attributes.link;
captions[_id] = attachments[i].attributes.caption;
// Create a URL
img_urls[_id] = {}
for(var x in attachments[i].attributes.sizes){
img_urls[_id][x] = attachments[i].attributes.sizes[x].url;
}
}
//console.log(img_urls);
// Save and render
_pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls));
_pagelayer_set_tmp_atts(row, 'all-urls', JSON.stringify(img_urls));
_pagelayer_set_tmp_atts(row, 'all-titles', JSON.stringify(titles));
_pagelayer_set_tmp_atts(row, 'all-links', JSON.stringify(links));
_pagelayer_set_tmp_atts(row, 'all-captions', JSON.stringify(captions));
_pagelayer_set_atts(row, img_ids);
// Update the IDs incase the user clicks on it again
ids = img_ids;
}
});
frame.open(button);
return false;
};
row.find('.pagelayer-elp-multi_image-thumbs').on('click', function(){
pagelayer_init_frame('gallery-edit');
});
row.find('.pagelayer-elp-button').on('click', function(){
if(!pagelayer_empty(ids)){
if(isNaN(ids[0])){
pagelayer_init_frame('embed');
}else{
pagelayer_init_frame('gallery-library');
}
}else{
pagelayer_init_frame('gallery');
}
});
}
// The Video Property
function pagelayer_elp_video(row, prop){
var tmp = prop.c['name']+'-url';
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
var div = '<div class="pagelayer-elp-video-div pagelayer-elp-input-icon">'+
'<input class="pagelayer-elp-video" name="'+prop.c['name']+'" type="text" value="'+src+'">'+
'<i class="pli pli-folder-open" ></i>'+
'</input></div>';
row.append(div);
row.find('.pagelayer-elp-video-div .pli').on('click', function(){
var button = jQuery(this);
// Load the frame
var frame = pagelayer_select_frame('video');
// On select update the stuff
frame.on({
'select': function(){
var state = frame.state();
var id = url = '';
// External URL
if('props' in state){
id = url = pagelayer_parse_theme_vars(state.props.attributes.url);
// Internal from gallery
}else{
var attachment = frame.state().get('selection').first().toJSON();
//console.log(attachment);
id = attachment.id;
url = attachment.url;
}
// Update URL
button.prev().val(url);
// Save and render
_pagelayer_set_tmp_atts(row, 'url', url);
_pagelayer_set_atts(row, id);
}
});
frame.open(button);
return false;
});
// Edited the video URL directly
row.find('.pagelayer-elp-video').on('change', function(){
var input = jQuery(this);
// Set the new URL
_pagelayer_set_tmp_atts(row, 'url', input.val());
_pagelayer_set_atts(row, input.val());
});
}
// The Audio Property
function pagelayer_elp_audio(row, prop){
var tmp = prop.c['name']+'-url';
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
var div = '<div class="pagelayer-elp-audio-div pagelayer-elp-input-icon">'+
'<input class="pagelayer-elp-audio" name="'+prop.c['name']+'" type="text" value="'+src+'" />'+
'<i class="pli pli-menu" ></i>'+
'</div>';
row.append(div);
// Choose from media
row.find('.pagelayer-elp-audio-div .pli').on('click', function(){
var button = jQuery(this);
// Load the frame
var frame = pagelayer_select_frame('audio');
frame.on({
'select': function(){
var state = frame.state();
var id = url = '';
// External URL
if('props' in state){
id = url = pagelayer_parse_theme_vars(state.props.attributes.url);
// Internal from gallery
}else{
var attachment = frame.state().get('selection').first().toJSON();
//console.log(attachment);
id = attachment.id;
url = attachment.url;
}
// Update URL
button.prev().val(url);
// Save and render
_pagelayer_set_tmp_atts(row, 'url', url);
_pagelayer_set_atts(row, id);
}
});
frame.open(button);
return false;
});
// Edited the media URL directly
row.find('.pagelayer-elp-audio').on('change', function(){
var input = jQuery(this);
// Set the new URL
_pagelayer_set_tmp_atts(row, 'url', input.val());
_pagelayer_set_atts(row, input.val());
});
}
// The Media Property
function pagelayer_elp_media(row, prop){
var tmp = prop.c['name']+'-url';
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
var div = '<div class="pagelayer-elp-media-div pagelayer-elp-input-icon">'+
'<input class="pagelayer-elp-media" value="'+src+'" type="text" />'+
'<i class="pli pli-menu" ></i>'+
'</div>';
row.append(div);
row.find('.pagelayer-elp-media-div .pli-menu').on('click', function(){
var button = jQuery(this);
// Load the frame
var frame = pagelayer_select_frame('media');
frame.on({
'select': function(){
var state = frame.state();
var id = url = '';
// External URL
if('props' in state){
id = url = pagelayer_parse_theme_vars(state.props.attributes.url);
// Internal from gallery
}else{
var attachment = frame.state().get('selection').first().toJSON();
//console.log(attachment);
id = attachment.id;
url = attachment.url;
}
// Update URL
button.prev().val(url);
// Save and render
_pagelayer_set_tmp_atts(row, 'url', url);
_pagelayer_set_atts(row, id);
}
});
frame.open(button);
return false;
});
// Edited the media URL directly
row.find('.pagelayer-elp-media').on('change', function(){
var input = jQuery(this);
// Set the new URL
_pagelayer_set_tmp_atts(row, 'url', input.val());
_pagelayer_set_atts(row, input.val());
});
}
// The Slider Property
function pagelayer_elp_slider(row, prop){
var div = '<div class="pagelayer-elp-slider-div">'+
'<input type="range" class="pagelayer-elp-slider" value="'+parseFloat(prop.c['val'])+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+
'<input type="number" class="pagelayer-elp-slider-value" value="'+parseFloat(prop.c['val'])+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+
'</div>'+
'</div>';
row.append(div);
// Set an value in span
row.find('.pagelayer-elp-slider-div input').on('input', function(){
var value = parseFloat(this.value);
var max = parseFloat(this.max);
if(!pagelayer_empty(max) && value > max){
value = max;
}
row.find('.pagelayer-elp-slider-div input').val(value);
_pagelayer_set_atts(row, value);// Save and Render
});
}
// The Editor proprety
function pagelayer_elp_editor(row, prop){
var rows = prop.rows ? prop.rows : '8';
var div = '<div class="pagelayer-elp-editor-div">'+
'<textarea rows="'+rows+'" class="pagelayer-elp-editor" ></textarea>'+
'</div>';
row.append(div);
var editor = row.find('.pagelayer-elp-editor');
editor.val(prop.c['val']);
// Handle on change
editor.on('input', function(){
_pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render
});
return;
// No SVG Icons for now
jQuery.trumbowyg.svgPath = false;
// Initiate the editor
editor.trumbowyg({
autogrow: false,
hideButtonTexts: true,
btns:[
['viewHTML'],
['wpmedia'],
['fontfamily'],
['formatting'],
['undo', 'redo'], // Only supported in Blink browsers
['fontsize'],
['lineheight'],
['foreColor', 'backColor',],
['strong', 'em', 'del'],
['horizontalRule'],
['superscript', 'subscript'],
['link'],
['unorderedList', 'orderedList'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
['removeformat'],
['fullscreen']
],
plugins: {
fontsize: {
sizeList: ['12px','13px','14px','15px','16px','17px','18px','19px','20px','21px','22px','23px','24px','25px']
}
},
imageWidthModalEdit: true,
// Handle the changes made in the editor
}).on('tbwchange', function(){
_pagelayer_set_atts(row, editor.trumbowyg('html'));// Save and Render
});
}
// The Link proprety
function pagelayer_elp_link(row, prop){
var values = {};
var settingOpt = false;
// Show link options?
if('selector' in prop){
settingOpt = true;
}
// Previously saved values
if(typeof prop.c['val'] === 'object'){
values = prop.c['val'];
}else{
values['link'] = prop.c['val'];
}
var tmp = prop.c['name'];
var link = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : values['link'];
var jEle = jQuery('[pagelayer-id='+prop.el.id+']');
var div = '<div class="pagelayer-elp-link-div pagelayer-elp-input-icon '+(settingOpt ? '' : 'pagelayer-elp-link-no-addons')+'">'+
'<input class="pagelayer-elp-link" type="text" value="'+link+'" />'+
'<i class="pli pli-service pagelayer-elp-link-icon" title="'+pagelayer_l('link_options')+'" ></i>'+
'<div class="pagelayer-elp-link-list">'+
'</div>';
if(settingOpt){
div += '<div class="pagelayer-elp-link-addons">'+
'<div class="pagelayer-elp-link-cb-div">'+
'<div class="pagelayer-elp-link-label-div" type="'+prop['type']+'">'+
'<label class="pagelayer-elp-link-label">'+pagelayer_l('open_link_in_new_window')+'</label>'+
'</div>'+
'<div>'+
'<input type="checkbox" name="link_new_tab" class="pagelayer-elp-checkbox" '+(!pagelayer_empty(values['target']) ? 'checked="checked"' : '')+' />'+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-link-cb-div" >'+
'<div class="pagelayer-elp-link-label-div" type="'+prop['type']+'">'+
'<label class="pagelayer-elp-link-label">'+pagelayer_l('add_nofollow')+'</label>'+
'</div>'+
'<div>'+
'<input type="checkbox" name="link_no_follow" class="pagelayer-elp-checkbox" '+(!pagelayer_empty(values['rel']) ? 'checked="checked"' : '')+'/>'+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-link-ca" >'+
'<div class="pagelayer-elp-link-label-div" type="'+prop['type']+'">'+
'<label class="pagelayer-elp-link-label">'+pagelayer_l('custom_attributes')+'</label>'+
'</div>'+
'<div>'+
'<input type="text" class="pagelayer-elp-text" placeholder="key = value" name="'+prop.c['name']+'" value="'+(pagelayer_empty(values['attrs']) ? '' : values['attrs'])+'"/>'+
'<p class="pagelayer-elp-link-desc">'+pagelayer_l('link_custom_attr_desc')+'</p>'+
'</div>'+
'</div>'+
'</div>';
}
div += '</div>';
row.append(div);
var listWrap = row.find('.pagelayer-elp-link-list');
var time = null;
//Add ID
var addID = function(permaID){
permaID = permaID || false;
var lDiv = row.closest('[pagelayer-elp-name]').find('.pagelayer-elp-label-div');
if(permaID){
lDiv = lDiv.find('.pagelayer-elp-label');
lDiv.after('<span class="pagelayer-elp-link-id">ID : '+permaID+'</span>');
}else{
lDiv.find('.pagelayer-elp-link-id').remove();
}
};
if(!isNaN(values['link'])){
addID(values['link']);
}
var getLinkVal = function(val){
if(typeof val === 'object' && pagelayer_length(val) == 1 && 'link' in val){
return val['link'];
}
return val;
}
var setTmpEmpty = function(){
if( 'link' in values && !pagelayer_empty(values['link']) ){
return;
}
_pagelayer_set_tmp_atts(row, '', '');
}
// Set a Link
row.find('.pagelayer-elp-link').on('change', function(){
var linkVal = jQuery(this).val();
values['link'] = linkVal;
// Save and Render
_pagelayer_set_tmp_atts(row, '', linkVal);
_pagelayer_set_atts(row, getLinkVal(values));
// Remove ID Holder
addID();
});
// Set a Link
row.find('.pagelayer-elp-link').on('input click', function(e){
e.stopPropagation();
if(!listWrap.is(':visible')){
listWrap.show();
}
var val = jQuery(this).val();
clearTimeout(time);
time = setTimeout(function(){
jQuery.ajax({
url: pagelayer_ajax_url,
type: 'post',
data:{
'action' : 'wp-link-ajax',
'_ajax_linking_nonce' : pagelayer_internal_linking_nonce,
'search' : val,
},
success: function(response) {
var data = jQuery.parseJSON(response);
var html = '';
//console.log('Link Data');console.log(response);
if(pagelayer_empty(data)){
html = pagelayer_l('custom_url');
// Remove ID Holder
addID();
}else if(typeof data === 'object'){
for(var key in data){
var vals = data[key];
html += '<div class="pagelayer-elp-link-item" data-id="'+vals['ID']+'" data-permalink="'+vals['permalink']+'">'+
'<div class="pagelayer-elp-link-title">'+
'<span class="pagelayer-elp-link-item-title" title="'+vals['title']+'">'+vals['title']+'</span>'+
'<span class="pagelayer-elp-link-item-perma" title="'+vals['permalink']+'">'+vals['permalink']+'</span>'+
'</div>'+
'<div class="pagelayer-elp-link-info">'+
'<span title="'+vals['info']+'">'+vals['info']+'</span>'+
'</div>'+
'</div>';
}
}
listWrap.html(html);
},
fail: function(data) {
listWrap.html('Some error occured in getting the link data');
}
});
}, 200);
});
listWrap.on('click', function(e){
e.stopPropagation();
var lEle = jQuery(e.target).closest('.pagelayer-elp-link-item');
// IF item not found
if(lEle.length < 1){
return;
}
var perma = lEle.attr('data-permalink');
var ID = lEle.attr('data-id');
values['link'] = ID;
// Save and Render
row.find('.pagelayer-elp-link').val(perma);
_pagelayer_set_tmp_atts(row, '', perma);
_pagelayer_set_atts(row, getLinkVal(values));
listWrap.hide();
// Show ID
addID(ID);
});
pagelayer.gDocument.on('click', function(e){
listWrap.hide();
});
row.find('.pagelayer-elp-checkbox').on('change', function(event){
var cEle = jQuery(this);
// Save or delete the value
var saveVal = function(key){
if(cEle.is(':checked')){
values[key] = true;
return;
}
delete values[key];
}
switch(cEle.attr('name')){
case 'link_new_tab':
saveVal('target');
break;
case 'link_no_follow':
saveVal('rel');
break;
}
setTmpEmpty();
_pagelayer_set_atts(row, getLinkVal(values));
});
var linkTime = '';
row.find('.pagelayer-elp-text').on('input', function(event){
var cEle = jQuery(this);
clearTimeout(linkTime);
linkTime = setTimeout(function(){
values['attrs'] = cEle.val();
if(pagelayer_empty(values['attrs'])){
delete values['attrs'];
}
setTmpEmpty();
_pagelayer_set_atts(row, getLinkVal(values));
}, 500);
});
row.find('.pagelayer-elp-link-icon').on('click', function(){
row.find('.pagelayer-elp-link-addons').slideToggle('slow');
});
}
// The Textarea property
function pagelayer_elp_textarea(row, prop){
var rows = prop.rows ? 'rows="'+prop.rows+' "' : '';
var div = '<div class="pagelayer-elp-textarea-div">'+
'<textarea '+rows+'class="pagelayer-elp-textarea"></textarea>'+
'</div>';
row.append(div);
row.find('.pagelayer-elp-textarea').val(prop.c['val']);
// Handle on change
row.find('.pagelayer-elp-textarea').on('input', function(){
_pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render
});
};
// Clear all editable
function pagelayer_clear_editable(dontDestroy){
// Destroy all
for(var x in pagelayer_editor){
if(dontDestroy == x){
console.log('Skipping '+dontDestroy);
continue;
}
pagelayer_editor[x].pen.destroy();
}
};
// Makes a field editable in the DOM
function pagelayer_make_editable(jEle, e){
// The parent element
var pEle = jEle.closest('.pagelayer-ele, [pagelayer-ref-id]');
// Mainly for editing table cells as pagelayer-ref-id is used by them
if(!pEle.hasClass('pagelayer-ele')){
var refID = pEle.attr('pagelayer-ref-id');
pEle = jQuery('[pagelayer-id="'+refID+'"]');
}
var prop = jEle.attr('pagelayer-editable');
var eId = pagelayer_id(pEle)+'|'+jEle.attr('pagelayer-editable');// Editing ID
// Is it already setup ?
if(jEle.hasClass('pagelayer-pen')){
//console.log('Already Penned');
//pagelayer_focus_editable(jEle, e, eId);
return true;
}
var tag = pagelayer_tag(pEle);
var all_props = pagelayer_shortcodes[tag];
var edit_opts;
var fullEdit = false;
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[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];//console.log(props);
// Any editor options?
if(prop in props){
if('e' in props[prop]){
edit_opts = props[prop].e;
}
if(props[prop]['type'] == 'editor'){
fullEdit = true;
}
}
}
}
var pen_tools = {
'inline': [ 'viewHTML',
{'formating' : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']},
'bold', 'italic', 'underline', 'strike',
{ 'color': [] }, { 'background': [] },
'removeformat'
],
'h': ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
'headers': [{'formating' : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}],
'c': [{ 'color': [] }, { 'background': [] }],
'f': ['bold', 'italic', 'underline', 'strike'],
'a': [{ 'align': ['left', 'center', 'right', 'justify'] }],
'r': ['removeformat'],
'v': ['viewHTML'],
};
// Create Toolbar Groups
if(!('pen_tools' in pagelayer_editor)){
pagelayer_editor['pen_tools'] = {};
}
pagelayer_editor['pen_tools'] = Object.assign(pagelayer_editor['pen_tools'], pen_tools);
var toolbar_options = [];
if( pagelayer_empty(edit_opts) ){
if(fullEdit){
toolbar_options = [
[ 'viewHTML' ],
[ 'bold', 'italic', 'underline', 'strike' ],
[ 'sub', 'super' ],
//[ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote'],
[ {'formating' : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote']}],
[ {'align': ['left', 'center', 'right', 'justify']} ],
[ 'image', 'link'],
[ 'unorderedlist', 'orderedlist'],
[ {'size': []}, {'lineheight': []}, {'font': []}],
[ {'color': [] }, {'background': []}],
[ 'removeformat' ]
];
}else{
toolbar_options = pagelayer_editor.pen_tools['inline'];
}
}else{
var options = [];
if(! Array.isArray(edit_opts) ){
edit_opts = [edit_opts];
}
for( var tt in edit_opts){
var tool = edit_opts[tt];
if(pagelayer_is_string(tool)){
if(tool in pagelayer_editor['pen_tools']){
tool = pagelayer_editor['pen_tools'][tool]
}else{
tool = [tool];
}
}
options.push(tool);
}
toolbar_options = options;
}
var options = {
class: 'pagelayer-pen',
editor: jEle,
toolbar: toolbar_options
}
// Setup the editor
pagelayer_editor[eId] = {};
pagelayer_editor[eId].pen = new PagelayerPen(jEle, options);
pagelayer_editor[eId].$ = jEle;
// Are we the clicked object, then set the focus
if(e){
var target = jQuery(e.target);
if(target.is(jEle) || jEle.find(target).length > 0){
jEle.focus();
}
}
// Reverse setup the event
jEle.on('blur', function(){
//pagelayer_editor[eId].pen.destroy();
if(jEle.hasClass('pagelayer-pen-focused')){
return;
}
var cEle = pEle;
// Do we have a parent ?
var have_parent = function(Ele){
var pId = pagelayer_get_parent(Ele);
if(pagelayer_empty(pId)){
return;
}
cEle = pagelayer_ele_by_id(pId);
have_parent(cEle);
}
have_parent(cEle);
var is_global = pagelayer_get_global_id(cEle);
if(pagelayer_empty(is_global)){
return;
}
pagelayer_sc_render(pEle);
});
/*// Reverse setup the event
jEle.on('focus', function(){
//pagelayer_clear_editable(eId);
});*/
// Reverse setup the event
jEle.on('input', function(){
var val = pagelayer_trim(jEle.html());
// Set the property as well
pagelayer_set_atts(pEle, prop, val);
// Update the property
var input = pagelayer.$$('[pagelayer-element-id='+pagelayer_id(pEle)+']').find('[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);
}
}
});
}
// The Icon Property
function pagelayer_elp_icon(row, prop){
var $ = jQuery;
var sets_html = '';
pagelayer_loaded_icons.forEach(function(item){
sets_html += '<option name="'+item+'" value="'+item+'">'+item+'</option>';
});
var icons = {};
var cur_icon_set = pagelayer_loaded_icons[0];
var sel_icon = prop.c['val'];
var sel_name = prop.c['val'];
var icon_type = '';
var sorted_icons = {};
// Handle the icon name
var icon_name = sel_icon.split(' fa-');
sel_name = icon_name[1];
// Is there a specific list
if('list' in prop && prop.list.length > 0){
for(var i in pagelayer_icons){
icons[i] = {};
for(var j in pagelayer_icons[i]){
icons[i][j] = {};
var list_icons = [];
prop.list.forEach(function(item){
if(pagelayer_icons[i][j]['icons'].includes(item)){
list_icons.push(item);
}
});
icons[i][j]['icons'] = list_icons;
icons[i][j]['pre'] = j;
}
}
}else{
icons = pagelayer_icons;
}
// Icon function
var icon_html = function(name, cat){
return '<span class="pagelayer-elp-icon-span">'+
'<i class="'+cat+' fa-'+name+'" icon="'+name+'" ></i> '+name+
'</span>';
}
var div = '<div class="pagelayer-elp-icon-div">'+
'<div class="pagelayer-elp-icon-preview">'+
'<i class="'+sel_icon+'"></i>'+
'<span class="pagelayer-elp-icon-name">'+
(pagelayer_empty(sel_name)?'Choose icon':sel_name)+
'</span>'+
'</div>'+
'<span class="pagelayer-elp-icon-open">▼</span>'+
'<span class="pagelayer-elp-icon-close" '+(pagelayer_empty(sel_name)? 'style="display:none"': '')+'><b>× </b></span>'+
'</div>';
row.append(div);
// Make all icons list
var html = '<div class="pagelayer-elp-icon-selector">';
if(pagelayer_loaded_icons.length > 1){
html += '<select class="pagelayer-elp-icon-sets">'+sets_html+'</select>';
}
html += '<span class="pagelayer-elp-icon-type">'+
'<p data-tab="fas" class="active">'+pagelayer_l('Solid')+'</p>'+
'<p data-tab="far">'+pagelayer_l('Regular')+'</p>'+
'<p data-tab="fab">'+pagelayer_l('Brand')+'</p>'+
'</span>'+
'<input type="text" class="pagelayer-elp-search-icon" name="search-icon" placeholder="'+pagelayer_l('search')+'">'+
'<div class="pagelayer-elp-icon-list">';
for(var y in icons[cur_icon_set]){
//console.log(icons[x][y])
for(var z in icons[cur_icon_set][y]['icons']){
html += icon_html(icons[cur_icon_set][y]['icons'][z], y);
}
}
html += '</div>'+
'</div>';
row.append(html);
// Open the selector
row.find('.pagelayer-elp-icon-div').on('click', function(){
row.find('.pagelayer-elp-icon-selector').slideToggle();
});
/*// When the set changes
row.find('.pagelayer-elp-icon-sets').on('change', function(){
var v = cur_icon_set = jQuery(this).val();
var span = '';
for(var x in icons[v]){
for(var z in icons[v][x]['icons']){
span += icon_html(icons[v][x]['icons'][z], x);
}
}
if(cur_icon_set == 'font-awesome5'){
row.find('.pagelayer-elp-icon-type').show();
sorted_icons = icons[cur_icon_set]['fas'];
row.find('.pagelayer-elp-icon-type [data-tab="fas"]').click();
}else{
row.find('.pagelayer-elp-icon-type').hide();
}
row.find('.pagelayer-elp-icon-list').empty().html(span);
if(row.find('.pagelayer-elp-search-icon').val() != ''){
row.find('.pagelayer-elp-search-icon').keyup();
}
});*/
// Handle type of icon
row.find('.pagelayer-elp-icon-type p').on('click', function(){
jQuery(this).toggleClass('active');
row.find('.pagelayer-elp-search-icon').keyup();
});
// Handle search of icon
row.find('.pagelayer-elp-search-icon').on('keyup', function(){
var v = this.value;
var span = '';
v = v.toLowerCase();
v = v.replace(/\s+/g, '-');
//console.log(sorted_icons);
row.find('.pagelayer-elp-icon-type p.active').each(function(){
var tab = jQuery(this).data('tab');
tab = tab.toLowerCase();
var cat = icons['font-awesome5'][tab]['icons'];
for(var x in cat){
if(cat[x].includes(v) || v.length < 1){
span += icon_html(cat[x], tab);
}
}
});
row.find('.pagelayer-elp-icon-list').empty().html(span);
});
// Handle click within the icon selector
row.find('.pagelayer-elp-icon-list').on('click', function(e){
var jEle = jQuery(e.target);
var i = jEle.children().attr('class');
var name = jEle.children().attr('icon');
if(pagelayer_empty(name)){
return false;
}
// Set the icon in this list
row.find('.pagelayer-elp-icon-preview').html('<i class="'+i+'"></i><span class="pagelayer-elp-icon-name">'+name+'</span>');
row.find('.pagelayer-elp-icon-selector').slideUp();
_pagelayer_set_atts(row, i);// Save and Render
row.find('.pagelayer-elp-icon-close').show();
return false;
});
// Delete the icon
row.find('.pagelayer-elp-icon-close').on('click', function(){
// Set the icon in this list
row.find('.pagelayer-elp-icon-preview').html('<i class=""></i><span class="pagelayer-elp-icon-name">'+pagelayer_l('choose_icon')+'</span>');
// Save and Render
_pagelayer_set_atts(row, '');
jQuery(this).hide();
return false;
});
}
// The Access Property
function pagelayer_elp_access(row, prop){
var div = '<div class="pagelayer-elp-access-div">'+
'<span class="pagelayer-elp-access"><i class="pli pli-caret-right" ></i></span>'+
'<div class="pagelayer-elp-access-holder"></div>'+
'</div>';
row.append(div);
var holder = row.find('.pagelayer-elp-access-holder');
row.find('.pagelayer-elp-access').on('click', function(){
// Setup first
if(holder.children().length < 1){
var p = row.parent().find('[pagelayer-access-item='+prop.show_group+']').detach();
p.appendTo(holder);
p.addClass('pagelayer-access-item-visible');
}
// Show and hide
if(holder.is(':visible')){
holder.hide();
row.find('.pli-caret-right').removeClass('pli-caret-open');
}else{
holder.show();
row.find('.pli-caret-right').addClass('pli-caret-open');
}
});
};
// The Modal Property
function pagelayer_elp_modal(row, prop){
var style = pagelayer_empty(prop.width) ? '' : 'style="width:'+prop.width+'"';
var div = '<div class="pagelayer-elp-modal-div">'+
'<span class="pagelayer-elp-modal"><i class="pli pli-window" ></i></span>'+
'<div class="pagelayer-elp-modal-wrapper">'+
'<div class="pagelayer-elp-modal-wrap" '+style+'>'+
'<div class="pagelayer-elp-modal-header">'+
prop.label +'<i class="pagelayer-elp-modal-close pli pli-cross" aria-hidden="true"></i>'+
'</div><hr>'+
'<div class="pagelayer-elp-modal-holder"></div>'+
'</div>'+
'</div>'+
'</div>';
row.append(div);
var wrapper = row.find('.pagelayer-elp-modal-wrapper');
var holder = row.find('.pagelayer-elp-modal-holder');
row.find('.pagelayer-elp-modal').on('click', function(){
// Setup first
if(holder.children().length < 1){
var p = row.parent().find('[pagelayer-access-item='+prop.show_group+']').detach();
p.appendTo(holder);
p.addClass('pagelayer-access-item-visible');
}
// Show and hide
wrapper.show();
});
// Close Modal Property
row.find('.pagelayer-elp-modal-close').on('click', function(){
wrapper.hide();
});
// On click Pagelayer setting icon
wrapper.on('click', function(event){
var target = jQuery(event.target);
if(target.closest('.pagelayer-elp-modal-wrap').length > 0){
return;
}
wrapper.hide();
});
};
// The Color Property
function pagelayer_elp_color(row, prop){
var val = prop.c['val'];
var is_global = pagelayer_is_global_color(val);
var global_active = '';
// If global color not exist
if(!pagelayer_empty(is_global)){
val = pagelayer_global_colors[is_global]['value'];
global_active = 'pagelayer-active-global';
}
var div = '<div class="pagelayer-elp-color-div-holder">'+
'<div class="pagelayer-elp-color-global '+global_active+'"></div>'+
'<div class="pagelayer-elp-color-div">'+
'<div class="pagelayer-elp-color-preview"></div>'+
'<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" ></i></span>'+
'</div>'+
'<div class="pagelayer-global-color-list">'+
'<div class="pagelayer-global-setting-color">'+
'<b>Global Colors</b><span class="pli pli-service"></span>'+
'</div>';
for( cid in pagelayer_global_colors ){
var color = pagelayer_global_colors[cid];
var active_class = '';
if(cid == is_global){
active_class = 'pagelayer-global-selected';
}
div += '<div class="pagelayer-global-color-list-item '+ active_class +'" data-global-id="'+ cid +'">'+
'<span class="pagelayer-global-color-pre" style="background:'+ color['value'] +'"></span>'+
'<span class="pagelayer-global-color-title">'+ color['title'] +'</span>'+
'<span class="pagelayer-global-color-code">'+ color['value'] +'</span>'+
'</div>';
}
div += '</div></div>';
row.append(div);
row.find('.pagelayer-elp-color-preview').css('background', val);
var picker = new pagelayer_Picker({
parent : row.find('.pagelayer-elp-color-div')[0],
popup : 'left',
color : val,
doc: window.parent.document
});
var preview = row.find('.pagelayer-elp-color-preview');
// If no val, then set blank
if(pagelayer_empty(val)){
preview.addClass('pagelayer-blank-preview');
}
var handle_white = function(col){
if(col.charAt(1) == 'f'){
preview.addClass('pagelayer-white-border');
}else{
preview.removeClass('pagelayer-white-border');
}
}
handle_white(val);
// Handle selected color
picker.onChange = function(color) {
preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString);
handle_white(color.hex);
_pagelayer_set_atts(row, color.hex);// Save and Render
// Remove global
row.find('.pagelayer-elp-color-global').removeClass('pagelayer-active-global');
row.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
row.find('.pagelayer-global-color-list').hide();
};
picker.onOpen = picker.onChange;
row.find('.pagelayer-elp-remove-color').on('click', function(event){
event.stopPropagation();
picker.setColor(prop.default, true);
preview.addClass('pagelayer-blank-preview');
handle_white('');
_pagelayer_set_atts(row, ' ');// Save and Render
});
// Handle for global color
row.find('.pagelayer-elp-color-global').on('click', function(e){
row.find('.pagelayer-global-color-list').slideToggle();
});
row.find('.pagelayer-global-setting-color').on('click', function(e){
e.stopPropagation();
if(jQuery(e.target).closest('.pli-service').length < 1){
return;
}
window.open(pagelayer_customizer_url+'&autofocus%5Bsection%5D=pagelayer_global_colors_sec', '_blank');
});
// Handle for global color
row.find('.pagelayer-global-color-list-item ').on('click', function(e){
e.stopPropagation();
var listItem = jQuery(this);
var globalID = listItem.data('global-id');
var listHolder = row.find('.pagelayer-global-color-list');
// Remove previous selecttion
listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
listItem.addClass('pagelayer-global-selected');
row.find('.pagelayer-elp-color-global').addClass('pagelayer-active-global');
listHolder.slideUp();
var color = pagelayer_global_colors[globalID]['value'];
preview.removeClass('pagelayer-blank-preview').css('background', color);
handle_white(color);
_pagelayer_set_atts(row, '$'+globalID);// Save and Render
});
}
// The Spinner property
function pagelayer_elp_spinner(row, prop){
var div = '<div class="pagelayer-elp-spinner-div">'+
'<input type="number" class="pagelayer-elp-spinner" name="'+prop.c['name']+'"'+
' min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'" value="'+parseFloat(prop.c['val'])+'"/>'+
'</div>';
row.append(div);
row.find('input').on('input', function(){
var value = parseFloat(this.value);
var max = parseFloat(this.max);
if(!pagelayer_empty(max) && value > max){
value = max;
}
_pagelayer_set_atts(row, value);// Save and Render
});
}
// The Group Property
function pagelayer_elp_group(row, prop){
var btnHidden = '';
// Hide button, clone and delete
if(!pagelayer_empty(prop['hide'])){
btnHidden = 'pagelayer-hidden';
}
// Remove the pagelayer-show-tab
row.removeAttr('pagelayer-show-tab');
var div = '<div class="pagelayer-elp-group-div"></div>'+
'<center><button class="pagelayer-elp-button '+btnHidden+'">'+prop['text']+'</button></center>';
row.append(div);
// Add button
var add_item = function(row){
var ele_id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id') || '';
var pEle = jQuery('[pagelayer-id="'+ele_id+'"]');
// First add the element inside the group element
var id = pagelayer_element_add_child(pEle, prop['sc'], prop);
//pagelayer_element_setup('[pagelayer-id='+id+']', true);
show_item(id);
};
// Show the properties of the existing things
var show_item = function(id, sel){
// To append after an existing item
sel = sel || false;
// If pagelayer id empty then return
if(pagelayer_empty(id)){
return false;
}
// Since the element is added very fast, we reselect via jQuery for it to re-access the dom
jEle = jQuery('[pagelayer-id="'+id+'"]');
var label_param = prop['item_label']['param'] || '';
var title = pagelayer_get_att(jEle, label_param) || prop['item_label']['default'];
// We need to get the correct value for select based params which are the label
var child_props = pagelayer_shortcodes[prop.sc];
for(var section in child_props){
for(var _param in child_props[section]){
if(child_props[section][_param]['type'] == 'select'){
if(title in child_props[section][_param]['list']){
title = child_props[section][_param]['list'][title];
}
}
}
}
// Create the HTML
var holder = jQuery('<div class="pagelayer-elp-group-item" pagelayer-group-item-id="'+id+'">'+
'<div class="pagelayer-elp-group-item-head">'+
'<span class="pagelayer-elp-group-item-drag"><i class="pli pli-menu" ></i></span>'+
'<span class="pagelayer-elp-group-item-title">'+title+'</span>'+
'<span class="pagelayer-elp-group-item-clone '+btnHidden+'"><i class="pli pli-clone" ></i></span>'+
'<span class="pagelayer-elp-group-item-del '+btnHidden+'"><i class="pli pli-trashcan" ></i></span>'+
'</div>'+
'<div class="pagelayer-elp-group-item-body"></div>'+
'</div>');
// Append to the row
if(sel){
row.find(sel).after(holder);
}else{
row.find('.pagelayer-elp-group-div').first().append(holder);
}
// Setup the toggle
holder.find('.pagelayer-elp-group-item-title').first().on('click', function(){
var rEle = holder.find('.pagelayer-elp-group-item-body').first();
var r_id = holder.attr('pagelayer-group-item-id');
// If the props are not already setup
if(rEle.html().length < 1){
pagelayer_elpd_generate(jQuery('[pagelayer-id="'+r_id+'"]'), rEle);
// Change the group item title
var tmp_title = holder.find('[pagelayer-elp-name="'+label_param+'"] [name="'+label_param+'"]');
if(tmp_title.length > 0){
jQuery(tmp_title).on('input', function(){
holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val());
});
}
}
rEle.toggle();
});
// Clone the item
holder.find('.pagelayer-elp-group-item-head .pli-clone').on('click', function(){
// If the element have any parent
var jEle = jQuery('[pagelayer-id="'+id+'"]');
var par = pagelayer_get_parent(jEle);
var clone_ele = pagelayer_copy_element(jEle);
//console.log(clone_ele);console.log('[pagelayer-group-item-id="'+id+'"]');
show_item(clone_ele, '[pagelayer-group-item-id="'+id+'"]');
if(par){
pagelayer_sc_render(pagelayer_ele_by_id(par));
}
});
// Delete the item
holder.find('.pagelayer-elp-group-item-head .pli-trashcan').on('click', function(){
// If the element have any parent
var jEle = jQuery('[pagelayer-id="'+id+'"]');
var par = pagelayer_get_parent(jEle);
holder.remove();
pagelayer_delete_element(jEle);
if(par){
pagelayer_sc_render(pagelayer_ele_by_id(par));
}
});
};
// Setup the drag
pagelayer.$$(".pagelayer-elp-group-div").sortable({
axis: 'y',
nested : false,
vertical : true,
handle : ".pagelayer-elp-group-item-drag",
placeholder: "pagelayer-drag-highlight",
start : function(event, ui) {
var start_pos = ui.item.index();
ui.item.data('start_pos', start_pos);
},
stop : function(event, ui){
var end_pos = ui.item.index();
var id = jQuery(ui.item).closest('[pagelayer-group-item-id]').attr('pagelayer-group-item-id');
var jEle = jQuery('[pagelayer-id="'+id+'"]');
pagelayer_moving_element(jEle, ui.item.data('start_pos'), end_pos);
var par = pagelayer_get_parent(jEle);
if(par){
pagelayer_sc_render(pagelayer_ele_by_id(par));
}
}
});
// Handle click of the group
row.find('.pagelayer-elp-button').on('click', function(){
if('pro' in prop && pagelayer_empty(pagelayer_pro)){
pagelayer_pro_notice();
return;
}
add_item(row);
});
// Find the existing items
prop.el.$.find('[pagelayer-parent="'+prop.el['id']+'"]').each(function(){
var jEle = jQuery(this);
var id = pagelayer_assign_id(jEle);
show_item(id);
});
};
function pagelayer_pro_notice(){
var div = pagelayer.$$('.pagelayer-pro-notice');
div.find('.pagelayer-pro-x').click(function(){
div.hide();
});
div.show();
}
// Moving an element
function pagelayer_moving_element(jEle, start_pos, end_pos){
if(start_pos==end_pos){
return;
}
var id = pagelayer_assign_id(jEle);
// Is there a wrap
var wrap = pagelayer_wrap_by_id(id);
var par = wrap.parent();
var children = par.children("div");
// This is required for Owl Carousel
if(children.length==1){
par = par.parent();
children = par.children("div");
}
var element = children.eq(start_pos).detach();
if(end_pos < start_pos){
children.eq(end_pos).before(element);
}else{
children.eq(end_pos).after(element);
}
}
// The Datetime Property
function pagelayer_elp_datetime(row, prop){
var div = '<div class="pagelayer-elp-datetime-div">'+
'<input type="date" class="pagelayer-elp-datetime" name="'+prop.c['name']+'" value="'+prop.c['val']+'" />'+
'</div>';
row.append(div);
row.find('.pagelayer-elp-datetime').on('change', function(){
_pagelayer_set_atts(row, jQuery(this).val());// Save and Render
});
};
// The padding property
function pagelayer_elp_padding(row, prop){
var val = ['', '', '', ''];
if(!pagelayer_empty(prop.c['val'])){
val = prop.c['val'];
if(pagelayer_is_string(val)){
val = val.split(',');
}
}
var div = '<div class="pagelayer-elp-padding-div">'+
'<input type="number" class="pagelayer-elp-padding" value="'+parseFloat(val[0])+'"></input>'+
'<input type="number" class="pagelayer-elp-padding" value="'+parseFloat(val[1])+'"></input>'+
'<input type="number" class="pagelayer-elp-padding" value="'+parseFloat(val[2])+'"></input>'+
'<input type="number" class="pagelayer-elp-padding" value="'+parseFloat(val[3])+'"></input>'+
'<i class="pli pli-link" ></i>'+
'</div>';
row.append(div);
// Is the value linked ?
var link = row.find('.pagelayer-elp-padding-div i');
var isLinked = 1;
//isLinked = isLinked == 2 ? false : true;
//console.log(isLinked);
var tmp_val = val[0];
for(var p_val in val){
// Check if unlinked
if(tmp_val != val[p_val] ){
isLinked = 0;
}
tmp_val = val[p_val];
}
if(isLinked){
link.addClass('pagelayer-elp-padding-linked');
}else{
link.removeClass('pagelayer-elp-padding-linked');
}
// Handle link on click
link.on('click', function(){
var linked = link.hasClass('pagelayer-elp-padding-linked');
if(linked){
link.removeClass('pagelayer-elp-padding-linked');
}else{
link.addClass('pagelayer-elp-padding-linked');
}
});
row.find('input').on('input', function(){
// Are the values linked
var linked = row.find('.pagelayer-elp-padding-div .pli').hasClass('pagelayer-elp-padding-linked');
if(linked){
var val = jQuery(this).val();
row.find('input').each(function(){
jQuery(this).val(val);
});
}
var vals = [];
// Get all values
row.find('input').each(function(){
var val = jQuery(this).val();
vals.push(val ? val : 0);
});
_pagelayer_set_atts(row, vals);// Save and Render
});
};
// The shadow property
function pagelayer_elp_shadow(row, prop){
var val =['','','',''];
// Do we have a val ?
if(!pagelayer_empty(prop.c['val'])){
val = prop.c['val'];
if(pagelayer_is_string(val)){
val = val.split(',');
}
}
//var val = {color: '', blur: '', horizontal: '', vertical: ''};
var div = '<span class="pagelayer-prop-edit"><i class="pli pli-pencil"></i></span>'+
'<div class="pagelayer-elp-shadow-div">'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">'+
'<label class="pagelayer-elp-label">Horizontal</label>'+
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[0]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">'+
'<label class="pagelayer-elp-label">Vertical</label>'+
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[1]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">'+
'<label class="pagelayer-elp-label">Blur</label>'+
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-blur" value="'+val[2]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">'+
'<label class="pagelayer-elp-label">Color</label>'+
'<div class="pagelayer-elp-color-div">'+
'<div class="pagelayer-elp-color-preview"></div>'+
'<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" ></i></span>'+
'</div>'+
'</div>'+
'</div>';
row.append(div);
row.find('.pagelayer-prop-edit').on('click', function(){
row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
});
var preview = row.find('.pagelayer-elp-color-preview');
preview.css('background', val[3]);
var picker = new pagelayer_Picker({
parent : row.find('.pagelayer-elp-color-div')[0],
popup : 'left',
color : val[3],
doc: window.parent.document
});
// If no val, then set blank
if(pagelayer_empty(val[3])){
preview.addClass('pagelayer-blank-preview');
}
var handle_white = function(col){
if(col.charAt(1) == 'f'){
preview.addClass('pagelayer-white-border');
}else{
preview.removeClass('pagelayer-white-border');
}
}
handle_white(val[3]);
// Handle selected color
picker.onChange = function(color) {
preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString);
handle_white(color.hex);
val[3] = (color.hex ? color.hex : '');
_pagelayer_set_atts(row, val);
};
// Remove Color
row.find('.pagelayer-elp-remove-color').on('click', function(event){
event.stopPropagation();
picker.setColor(prop.default, true);
preview.addClass('pagelayer-blank-preview');
handle_white('');
val[3] = '';
_pagelayer_set_atts(row, val);
});
row.find('input').on('input', function(){
var i = 0;
row.find('.pagelayer-elp-shadow-input').each(function(){
var value = jQuery(this).val();
val[i] = (value ? value : '');
i++;
});
_pagelayer_set_atts(row, val);
});
}
// The box shadow property
function pagelayer_elp_box_shadow(row, prop){
var val = ['','','','','',''];
// Do we have a val ?
if(!pagelayer_empty(prop.c['val'])){
val = prop.c['val'];
if(pagelayer_is_string(val)){
val = val.split(',');
}
}
var val_pos = ['horizontal','vertical','blur','color','spread','inset'];
var div = '<span class="pagelayer-prop-edit"><i class="pli pli-pencil"></i></span>'+
'<div class="pagelayer-elp-shadow-div">'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">'+
'<label class="pagelayer-elp-label">Horizontal</label>'+
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" name="horizontal" value="'+val[0]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">'+
'<label class="pagelayer-elp-label">Vertical</label>'+
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" name="vertical" value="'+val[1]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">'+
'<label class="pagelayer-elp-label">Blur</label>'+
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-blur" name="blur" value="'+val[2]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-spread">'+
'<label class="pagelayer-elp-label">Spread</label>'+
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-spread" name="spread" value="'+(val[4] ? val[4] : 0 )+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">'+
'<label class="pagelayer-elp-label">Color</label>'+
'<div class="pagelayer-elp-color-div">'+
'<div class="pagelayer-elp-color-preview"></div>'+
'<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" ></i></span>'+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-inset">'+
'<label class="pagelayer-elp-label">Shadow</label>'+
'<select class="pagelayer-elp-shadow-input pagelayer-elp-select" name="inset" type="checkbox" class="pagelayer-elp-shadow-inset">'+
'<option value="">Outset</option>'+
'<option value="inset"'+(pagelayer_empty(val[5]) ? '' : ' selected' )+'>Inset</option>'+
'</select>'+
'</div>'+
'</div>';
row.append(div);
row.find('.pagelayer-prop-edit').on('click', function(){
row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
});
var preview = row.find('.pagelayer-elp-color-preview');
preview.css('background', val[3]);
var picker = new pagelayer_Picker({
parent : row.find('.pagelayer-elp-color-div')[0],
popup : 'left',
color : val[3],
doc: window.parent.document
});
// If no val, then set blank
if(pagelayer_empty(val[3])){
preview.addClass('pagelayer-blank-preview');
}
var handle_white = function(col){
if(col.charAt(1) == 'f'){
preview.addClass('pagelayer-white-border');
}else{
preview.removeClass('pagelayer-white-border');
}
}
handle_white(val[3]);
// Handle selected color
picker.onChange = function(color) {
row.find('.pagelayer-elp-color-preview').removeClass('pagelayer-blank-preview').css('background', color.rgbaString);
handle_white(color.hex);
val[3] = (color.hex ? color.hex : '');
_pagelayer_set_atts(row, val);
};
// Remove Color
row.find('.pagelayer-elp-remove-color').on('click', function(event){
event.stopPropagation();
picker.setColor(prop.default, true);
preview.addClass('pagelayer-blank-preview');
handle_white('');
val[3] = '';
_pagelayer_set_atts(row, val);
});
// Onchange set props
row.find('.pagelayer-elp-shadow-input').on('input change', function(){
//var i = 0;
row.find('.pagelayer-elp-shadow-input').each(function(){
var value = jQuery(this).val();
var name = jQuery(this).attr('name');
val[val_pos.indexOf(name)] = (value ? value : '');
//i++;
});
_pagelayer_set_atts(row, val);
});
}
// The filter property
function pagelayer_elp_filter(row, prop){
var val = [0,100,100,0,0,100,100];
// Do we have a val ?
if(!pagelayer_empty(prop.c['val'])){
val = prop.c['val'];
if(pagelayer_is_string(val)){
val = val.split(',');
}
}
var filters = [['blur','10','0.1'],['brightness','200','1'],['contrast','200','1'],['grayscale','200','1'],['hue','360','1'],['opacity','100','1'],['saturate','200','1']];
var div = '<span class="pagelayer-prop-edit"><i class="pli pli-pencil"></i></span>'+
'<div class="pagelayer-elp-filter-div">';
jQuery.each(val,function(key, value){
div += '<div class="pagelayer-elp-prop-grp pagelayer-elp-filter-'+filters[key][0]+'">'+
'<label class="pagelayer-elp-label">'+filters[key][0]+'</label>'+
'<input class="pagelayer-elp-slider pagelayer-elp-filter-input" type="range" max="'+filters[key][1]+'" min="0" step="'+filters[key][2]+'" class="pagelayer-elp-filter-'+filters[key][0]+'" value="'+value+'"></input>'+
'<span class="pagelayer-elp-filter-val">'+value+'</span>'+
'</div>';
});
div += '</div>';
row.append(div);
row.find('.pagelayer-prop-edit').on('click', function(){
row.find('.pagelayer-elp-filter-div').toggleClass('pagelayer-prop-show');
});
row.find('input').on('input', function(){
var val = [];
jQuery(this).parent().find('span').html(this.value);
row.find('.pagelayer-elp-filter-input').each(function(){
var value = jQuery(this).val();
val.push(value ? value : 'none');
});
_pagelayer_set_atts(row, val);
});
}
// The gradient property
function pagelayer_elp_gradient(row, prop){
var val = ['','','','','','',''];
// Do we have a val ?
if(!pagelayer_empty(prop.c['val'])){
val = prop.c['val'];
if(pagelayer_is_string(val)){
val = val.split(',');
}
}
var setColor = [val[1], val[3], val[5]];
//var val = {color: '', blur: '', horizontal: '', vertical: ''};
var getColorList = function(num){
var is_global = pagelayer_is_global_color(setColor[num]);
var global_list = '<div class="pagelayer-global-color-list">'+
'<div class="pagelayer-global-setting-color">'+
'<b>Global Colors</b><span class="pli pli-service"></span>'+
'</div>';
for( cid in pagelayer_global_colors ){
var color = pagelayer_global_colors[cid];
var active_class = '';
if(cid == is_global){
active_class = 'pagelayer-global-selected';
}
// If global color not exist
if(!pagelayer_empty(is_global)){
setColor[num] = pagelayer_global_colors[is_global]['value'];
}
global_list += '<div class="pagelayer-global-color-list-item '+ active_class +'" data-global-id="'+ cid +'">'+
'<span class="pagelayer-global-color-pre" style="background:'+ color['value'] +'"></span>'+
'<span class="pagelayer-global-color-title">'+ color['title'] +'</span>'+
'<span class="pagelayer-global-color-code">'+ color['value'] +'</span>'+
'</div>';
}
global_list += '</div>';
return global_list;
}
var div = '<div class="pagelayer-elp-gradient-div">'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-angle">'+
'<label class="pagelayer-elp-label">Angle</label>'+
'<input class="pagelayer-elp-gradient-input" type="number" max="360" min="0" step="1" class="pagelayer-elp-gradient-angle" value="'+val[0]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-color">'+
'<label class="pagelayer-elp-label">Color 1</label>'+
'<div class="pagelayer-elp-color-div-holder">'+
'<div class="pagelayer-elp-color-global"></div>'+
'<div class="pagelayer-elp-color-div">'+
'<div class="pagelayer-elp-gradient-color1 pagelayer-elp-color-preview"></div>'+
'</div>'+
getColorList(0)+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per1">'+
'<label class="pagelayer-elp-label">Percentage 1</label>'+
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-gradient-per1" value="'+val[2]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-color">'+
'<label class="pagelayer-elp-label">Color 2</label>'+
'<div class="pagelayer-elp-color-div-holder">'+
'<div class="pagelayer-elp-color-global"></div>'+
'<div class="pagelayer-elp-color-div">'+
'<div class="pagelayer-elp-gradient-color2 pagelayer-elp-color-preview"></div>'+
'</div>'+
getColorList(1)+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per2">'+
'<label class="pagelayer-elp-label">Percentage 2</label>'+
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per2" value="'+val[4]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-color">'+
'<label class="pagelayer-elp-label">Color 3</label>'+
'<div class="pagelayer-elp-color-div-holder">'+
'<div class="pagelayer-elp-color-global"></div>'+
'<div class="pagelayer-elp-color-div">'+
'<div class="pagelayer-elp-gradient-color3 pagelayer-elp-color-preview"></div>'+
'</div>'+
getColorList(2)+
'</div>'+
'</div>'+
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per3">'+
'<label class="pagelayer-elp-label">Percentage 3</label>'+
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per3" value="'+val[6]+'"></input>'+
'</div>'+
'</div>';
row.append(div);
var i = 0;
row.find('.pagelayer-elp-color-preview').each(function(){
jQuery(this).css('background', setColor[i]);
i++;
});
// Remove global
var removeGlobal = function(holder){
holder.find('.pagelayer-elp-color-global').removeClass('pagelayer-active-global');
holder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
holder.find('.pagelayer-global-color-list').hide();
}
var picker1 = new pagelayer_Picker({
parent : row.find('.pagelayer-elp-gradient-color1')[0],
popup : 'left',
color : setColor[0],
doc: window.parent.document
});
// Handle selected color
picker1.onChange = function(color) {
var cPreview = row.find('.pagelayer-elp-gradient-color1')
cPreview.css('background', color.rgbaString);
val[1] = (color.hex ? color.hex : '');
_pagelayer_set_atts(row, val);
removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder'));
};
var picker2 = new pagelayer_Picker({
parent : row.find('.pagelayer-elp-gradient-color2')[0],
popup : 'left',
color : setColor[1],
doc: window.parent.document
});
// Handle selected color
picker2.onChange = function(color) {
var cPreview = row.find('.pagelayer-elp-gradient-color2');
cPreview.css('background', color.rgbaString);
val[3] = (color.hex ? color.hex : '');
_pagelayer_set_atts(row, val);
removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder'));
};
var picker3 = new pagelayer_Picker({
parent : row.find('.pagelayer-elp-gradient-color3')[0],
popup : 'left',
color : setColor[2],
doc: window.parent.document
});
// Handle selected color
picker3.onChange = function(color) {
var cPreview = row.find('.pagelayer-elp-gradient-color3');
cPreview.css('background', color.rgbaString);
val[5] = (color.hex ? color.hex : '');
_pagelayer_set_atts(row, val);
removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder'));
};
row.find('input').on('input', function(){
var i = 0;
row.find('.pagelayer-elp-gradient-input').each(function(){
var value = jQuery(this).val();
val[i] = (value ? value : '');
i = i+2;
});
_pagelayer_set_atts(row, val);
});
row.find('.pagelayer-global-selected').each(function(){
jQuery(this).closest('.pagelayer-elp-color-div-holder').find('.pagelayer-elp-color-global').addClass('pagelayer-active-global');
});
// Handle for global color
row.find('.pagelayer-elp-color-global').on('click', function(e){
jQuery(this).closest('.pagelayer-elp-color-div-holder').find('.pagelayer-global-color-list').slideToggle();
});
row.find('.pagelayer-global-setting-color').on('click', function(e){
e.stopPropagation();
if(jQuery(e.target).closest('.pli-service').length < 1){
return;
}
window.open( pagelayer_customizer_url + '&autofocus%5Bsection%5D=pagelayer_global_colors_sec', '_blank' );
});
// Handle for global color
row.find('.pagelayer-global-color-list-item ').on('click', function(e){
e.stopPropagation();
var listItem = jQuery(this);
var globalID = listItem.data('global-id');
var listHolder = listItem.closest('.pagelayer-global-color-list');
var colorHolder = listItem.closest('.pagelayer-elp-color-div-holder');
var colorPreview = colorHolder.find('.pagelayer-elp-color-preview');
// Remove previous selecttion
listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
listItem.addClass('pagelayer-global-selected');
colorHolder.find('.pagelayer-elp-color-global').addClass('pagelayer-active-global');
listHolder.slideUp();
var color = pagelayer_global_colors[globalID]['value'];
colorPreview.removeClass('pagelayer-blank-preview').css('background', color);
var i = 1;
if(colorPreview.hasClass('pagelayer-elp-gradient-color2')){
i = 3;
}
if(colorPreview.hasClass('pagelayer-elp-gradient-color3')){
i = 5;
}
val[i] = '$'+globalID;
_pagelayer_set_atts(row, val);// Save and Render
});
}
function pagelayer_elp_font_family(row, prop){
var options = '';
var option = function(val, lang, type){
var selected = (val != prop.c['val']) ? '' : 'selected="selected"';
var lang = pagelayer_empty(lang) ? 'Default' : lang;
return '<option class="pagelayer-elp-select-option" value="'+val+'" type="'+type+'" '+selected+'>'+lang+'</option>';
}
for(y in pagelayer_fonts){
if(y != 'default'){
options += '<optgroup label="'+pagelayer_ucwords(y)+'">';
}
for (x in pagelayer_fonts[y]){
options += option((jQuery.isNumeric(x) ? pagelayer_fonts[y][x] : x), pagelayer_fonts[y][x], y);
}
}
var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+
'<select class="pagelayer-elp-select pagelayer-select" name="'+prop.c['name']+'">'+options+'</select>'+
'</div>';
row.append(div);
row.find('select').on('change', function(){
var sEle = jQuery(this);
pagelayer_link_font_family(sEle);
_pagelayer_set_atts(row, sEle.val());// Save and Render
});
}
// The typography property
function pagelayer_elp_typography(row, prop){
var val = pagelayer_parse_typo(prop.c['val'], true);
var is_typo = pagelayer_is_global_typo(prop.c['val']);
var global_active = '';
var save_timer = {};
// Load value of tablet and mobile
var val_tablet = pagelayer_get_att(prop.el.$, prop.c['name']+'_tablet');
var val_mobile = pagelayer_get_att(prop.el.$, prop.c['name']+'_mobile');
val_tablet = pagelayer_parse_typo(val_tablet);
val_mobile = pagelayer_parse_typo(val_mobile);
// If global color not exist
if(!pagelayer_empty(is_typo)){
global_active = 'pagelayer-active-global';
}
var select = {
'style' : {'' : 'Default', 'normal' : 'Normal', 'italic' : 'Italic', 'oblique' : 'Oblique'},
'weight' : {'' : 'Default', '100' : '100', '200' : '200', '300' : '300', '400' : '400', '500' : '500', '600' : '600', '700' : '700', '800' : '800', '900' : '900', 'normal' : 'Normal', 'lighter' : 'Lighter', 'bold' : 'Bold', 'bolder' :'Bolder', 'unset' : 'Unset'},
'variant' : {'' : 'Default', 'normal' : 'Normal', 'small-caps' : 'Small Caps'},
'deco-line' : {'' : 'Default', 'none' : 'None', 'overline' : 'Overline', 'line-through' : 'Line Through', 'underline' : 'Underline', 'underline overline' : 'Underline Overline'},
'deco-style' : {'' : 'Default', 'solid' : 'Solid', 'double' : 'Double', 'dotted' : 'Dotted', 'dashed' : 'Dashed', 'wavy' : 'Wavy'},
'transform' : {'' : 'Default', 'capitalize' : 'Capitalize', 'uppercase' : 'Uppercase', 'lowercase' : 'Lowercase'},
'fonts' : pagelayer_fonts,
}
var option = function(val, lang, setVal){
var selected = (val.toLowerCase() != setVal.toLowerCase()) ? '' : 'selected="selected"';
var lang = pagelayer_empty(lang) ? 'Default' : lang;
return '<option value="'+val+'" '+selected+'>'+ lang +'</option>';
}
var font_options = '';
var font_option = function(val, lang, type, setVal){
var selected = (val != setVal) ? '' : 'selected="selected"';
var lang = pagelayer_empty(lang) ? 'Default' : lang;
return '<option class="pagelayer-elp-typo-sele-op" value="'+val+'" type="'+type+'" '+selected+'>'+lang+'</option>';
}
for(y in select['fonts']){
if(y != 'default'){
font_options += '<optgroup label="'+pagelayer_ucwords(y)+'">';
}
for (x in select['fonts'][y]){
font_options += font_option((jQuery.isNumeric(x) ? select['fonts'][y][x] : x), select['fonts'][y][x], y, val[0]);
}
}
var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'};
var mode = pagelayer_get_screen_mode();
var screen = '<div class="pagelayer-elp-screen">'+
'<i class="pli pli-desktop" ></i>'+
'<i class="pli pli-tablet" ></i>'+
'<i class="pli pli-mobile" ></i>'+
'<i class="pagelayer-prop-screen pli pli-'+mode+'" ></i>'+
'</div>';
var div = '<span class="pagelayer-elp-typo-edit-div">'+
'<i class="pli pli-pencil"></i>'+
'</span>'+
'<div class="pagelayer-elp-typo-div" pagelayer-screen-mode="'+mode+'">'+
'<div class="pagelayer-elp-typo-fonts">'+
'<div class="pagelayer-elp-global-typo">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('global_fonts')+'</label>'+
'<span class="pagelayer-elp-typo-icons">'+
'<span class="pagelayer-elp-global-icon '+global_active+'"></span>'+
'<span class="pli pli-service"></span>'+
'</span>'+
'<div class="pagelayer-global-font-list">';
for( cid in pagelayer_global_fonts ){
var font = pagelayer_global_fonts[cid];
div += '<div class="pagelayer-global-font-list-item" data-global-id="'+ cid +'">'+
'<span class="pagelayer-global-font-title">'+font['title']+'</span>'+
'</div>';
}
div += '</div>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-family">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('font_family')+'</label>'+
'<select class="pagelayer-elp-typo-input pagelayer-elp-select" name="font-family">'+font_options+'</select>'+
'</div>';
div += '<div class="pagelayer-elp-typo pagelayer-elp-typo-size">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('font_size')+' '+screen+'</label>'+
'<input name="font-size" pagelayer-show-device="desktop" class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val[1]+'"></input>'+
'<input name="font-size_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val_tablet[1]+'"></input>'+
'<input name="font-size_mobile" pagelayer-show-device="mobile" class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val_mobile[1]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-style">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('font_style')+'</label>'+
'<select name="font-style" class="pagelayer-elp-typo-input pagelayer-elp-select">';
jQuery.each(select['style'],function(key, value){
div += option(key, value, val[2]);
});
div +='</select>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-weight">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('font_weight')+' '+screen+'</label>'+
'<select name="font-weight" pagelayer-show-device="desktop" class="pagelayer-elp-typo-input pagelayer-elp-select">';
jQuery.each(select['weight'],function(key, value){
div += option(key, value, val[3]);
});
div += '</select>'+
'<select name="font-weight_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input pagelayer-elp-select">';
jQuery.each(select['weight'],function(key, value){
div += option(key, value, val_tablet[3]);
});
div += '</select>'+
'<select name="font-weight_mobile" pagelayer-show-device="mobile" class="pagelayer-elp-typo-input pagelayer-elp-select">';
jQuery.each(select['weight'],function(key, value){
div += option(key, value, val_mobile[3]);
});
div += '</select>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-variant">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('font_variant')+'</label>'+
'<select name="font-variant" class="pagelayer-elp-typo-input pagelayer-elp-select">';
jQuery.each(select['variant'],function(key, value){
div += option(key, value, val[4]);
});
div += '</select>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-line">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('decoration_line')+'</label>'+
'<select name="text-decoration-line" class="pagelayer-elp-typo-input pagelayer-elp-select">';
jQuery.each(select['deco-line'],function(key, value){
div += option(key, value, val[5]);
});
div += '</select>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-style">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('decoration_style')+'</label>'+
'<select name="text-decoration-style" class="pagelayer-elp-typo-input pagelayer-elp-select">';
jQuery.each(select['deco-style'],function(key, value){
div += option(key, value, val[6]);
});
div += '</select>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-height">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('line_height')+' '+screen+'</label>'+
'<input name="line-height" class="pagelayer-elp-typo-input" pagelayer-show-device="desktop" type="number" max="15" min="0" step="0.1" value="'+val[7]+'"></input>'+
'<input name="line-height_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input" type="number" max="15" min="0" step="0.1" value="'+val_tablet[7]+'"</input>'+
'<input name="line-height_mobile" class="pagelayer-elp-typo-input" pagelayer-show-device="mobile" type="number" max="15" min="0" step="0.1" value="'+val_mobile[7]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-transform">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('text_transform')+'</label>'+
'<select name="text-transform" class="pagelayer-elp-typo-input pagelayer-elp-select">';
jQuery.each(select['transform'],function(key, value){
div += option(key, value, val[8]);
});
div += '</select>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-lspacing">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('text_spacing')+' '+screen+'</label>'+
'<input name="letter-spacing" pagelayer-show-device="desktop" class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val[9]+'"></input>'+
'<input name="letter-spacing_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val_tablet[9]+'"></input>'+
'<input name="letter-spacing_mobile" pagelayer-show-device="mobile" class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val_mobile[9]+'"></input>'+
'</div>'+
'<div class="pagelayer-elp-typo pagelayer-elp-typo-wspacing">'+
'<label class="pagelayer-elp-label">'+pagelayer_l('word_spacing')+' '+screen+'</label>'+
'<input name="word-spacing" pagelayer-show-device="desktop" class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val[10]+'"></input>'+
'<input name="word-spacing_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val_tablet[10]+'"></input>'+
'<input name="word-spacing_mobile" pagelayer-show-device="mobile" class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val_mobile[10]+'"></input>'+
'</div>'+
'</div>'+
'</div>';
row.append(div);
if(pagelayer_empty(val[5]) || val[5]=='none'){
row.find('.pagelayer-elp-typo-deco-style').hide();
}
row.find('.pagelayer-elp-typo-edit-div .pli-pencil').on('click', function(){
row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show');
});
var save_typography = function(){
var globalEle = row.find('.pagelayer-global-selected');
var atts = {};
atts[prop.c['name']] = {};
atts[prop.c['name']+'_tablet'] = {};
atts[prop.c['name']+'_mobile'] = {};
if(globalEle.length > 0){
atts[prop.c['name']]['global-font'] = globalEle.attr('data-global-id');
}
row.find('.pagelayer-elp-typo-input').each(function(){
var iEle = jQuery(this);
var name = iEle.attr('name');
var value = iEle.val();
var isGlobal = iEle.closest('[pagelayer-set-global]');
if((value == '' && isGlobal.length < 1 && globalEle.length < 1) || isGlobal.length > 0){
return;
}
if(name.indexOf('_tablet') > -1){
name = name.replace('_tablet', '');
atts[prop.c['name']+'_tablet'][name] = value;
return;
}
if(name.indexOf('_mobile') > -1){
name = name.replace('_mobile', '');
atts[prop.c['name']+'_mobile'][name] = value;
return;
}
atts[prop.c['name']][name] = value;
});
pagelayer_set_atts(prop.el.$, atts);
pagelayer_sc_render(prop.el.$); // Render
}
row.find('.pagelayer-elp-typo-input').on('change', function(e){
var jEle = jQuery(e.target);
pagelayer_link_font_family(jEle);
jEle.closest('[pagelayer-set-global]').removeAttr('pagelayer-set-global');
// Save value
save_typography();
});
row.find('.pagelayer-elp-typo-deco-line select').on('change', function(){
var value = jQuery(this).val();
if(pagelayer_empty(value) || value=='none'){
row.find('.pagelayer-elp-typo-deco-style').hide();
}else{
row.find('.pagelayer-elp-typo-deco-style').show();
}
});
// Handle for global font
row.find('.pagelayer-elp-global-typo .pagelayer-elp-global-icon').on('click', function(e){
e.stopPropagation();
row.find('.pagelayer-global-font-list').slideToggle();
});
row.find('.pagelayer-elp-global-typo .pli-service').on('click', function(e){
e.stopPropagation();
window.open(pagelayer_customizer_url+'&autofocus%5Bsection%5D=pagelayer_global_fonts_sec', '_blank');
});
// Added restore global val
row.find('.pagelayer-elp-typo > .pagelayer-elp-label').each(function(){
var label = jQuery(this);
var defaultButton = '<span class="pagelayer-typo-default" title="'+pagelayer_l('restore_global')+'" ><i class="fas fa-undo"></i></span>';
label.append(defaultButton);
label.find('.pagelayer-typo-default').on('click', function(e, skip_save){
skip_save = skip_save || false;
var globalID = row.find('.pagelayer-global-selected').data('global-id');
if(pagelayer_empty(globalID) || pagelayer_empty(pagelayer_global_fonts[globalID])){
return;
}
var setFonts = pagelayer_global_fonts[globalID]['value'];
var holder = label.closest('.pagelayer-elp-typo');
var inputs = holder.find('.pagelayer-elp-typo-input');
var name = inputs.first().attr('name');
var val = '';
holder.attr('pagelayer-set-global', 1);
if(name in setFonts){
val = setFonts[name];
}
if(typeof val == 'object'){
for(var mode in modes){
var _val = '';
if(mode in val){
_val = val[mode];
}
holder.find('.pagelayer-elp-typo-input[name="'+name+modes[mode]+'"]').val(_val);
}
}else{
if(inputs.length > 1){
inputs.val('');
}
inputs.first().val(val);
}
if(skip_save){
return;
}
// save value
clearTimeout(save_timer);
save_timer = setTimeout(save_typography, 200);
});
});
// Handle for global font
row.find('.pagelayer-global-font-list-item').on('click', function(e){
e.stopPropagation();
var listItem = jQuery(this);
var fontSelect = row.find('.pagelayer-elp-typo-family .pagelayer-elp-typo-input');
// Remove global typo
if(listItem.hasClass('pagelayer-global-selected')){
row.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
row.find('.pagelayer-elp-global-icon').removeClass('pagelayer-active-global');
row.find('[pagelayer-set-global]').removeAttr('pagelayer-set-global');
row.find('.pagelayer-global-on').removeClass('pagelayer-global-on');
// To save and render the typo
fontSelect.trigger('change');
return;
}
var globalID = listItem.data('global-id');
var listHolder = row.find('.pagelayer-global-font-list');
// Remove previous selecttion
listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
listItem.addClass('pagelayer-global-selected');
row.find('.pagelayer-elp-global-icon').addClass('pagelayer-active-global');
row.find('.pagelayer-elp-typo-fonts').addClass('pagelayer-global-on');
listHolder.slideUp();
pagelayer_link_font_family(fontSelect); // Apply google fonts
// Set global value to all fields and save
row.find('.pagelayer-elp-label .pagelayer-typo-default').click();
});
// Active global typography
if(!pagelayer_empty(is_typo)){
row.find('[data-global-id="'+is_typo+'"]').addClass('pagelayer-global-selected');
row.find('.pagelayer-elp-global-icon').addClass('pagelayer-active-global');
row.find('.pagelayer-elp-typo-fonts').addClass('pagelayer-global-on');
// Show the global values if is not customize
row.find('.pagelayer-elp-typo').attr('pagelayer-set-global', 1);
row.find('.pagelayer-elp-typo').find('select, input').each(function(){
var sEle = jQuery(this);
var val = sEle.val();
if(pagelayer_empty(val)){
return true;
}
sEle.closest('.pagelayer-elp-typo').removeAttr('pagelayer-set-global');
});
row.find('[pagelayer-set-global="1"] .pagelayer-typo-default').trigger('click', [true]);
}
// Set screen mode on change
row.find('.pagelayer-elp-screen .pli:not(.pagelayer-prop-screen)').on('click', function(){
var mode = 'desktop';
var jEle = jQuery(this);
// Tablet ?
if(jEle.hasClass('pli-tablet')){
mode = 'tablet';
}
// Mobile ?
if(jEle.hasClass('pli-mobile')){
mode = 'mobile';
}
pagelayer_set_screen_mode(mode);
row.find('.pagelayer-elp-screen .pli').removeClass('open');
});
row.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){
var mode = pagelayer_get_screen_mode();
row.find('[pagelayer-screen-mode]').attr('pagelayer-screen-mode', mode);
});
row.find('.pagelayer-elp-screen .pagelayer-prop-screen').on('click', function(e){
jQuery(this).siblings().toggleClass('open');
});
}
// The dimension property
function pagelayer_elp_dimension(row, prop){
var val = ['', ''];
if(!pagelayer_empty(prop.c['val'])){
val = prop.c['val'];
if(pagelayer_is_string(val)){
val = val.split(',');
//console.log(val);
}
}
var div = '<div class="pagelayer-elp-dimension-div">'+
'<input type="number" class="pagelayer-elp-dimension" value="'+parseFloat(val[0])+'"></input>'+
'<input type="number" class="pagelayer-elp-dimension" value="'+parseFloat(val[1])+'"></input>'+
'<i class="pli pli-link" ></i>'+
'</div>';
row.append(div);
// Is the value linked ?
var link = row.find('.pagelayer-elp-dimension-div .pli');
var isLinked = 1;
var tmp_val = val[0];
for(var p_val in val){
// Check if unlinked
if(tmp_val != val[p_val] ){
isLinked = 0;
}
tmp_val = val[p_val];
}
if(isLinked){
link.addClass('pagelayer-elp-dimension-linked');
}else{
link.removeClass('pagelayer-elp-dimension-linked');
}
// Handle link on click
link.on('click', function(){
var linked = link.hasClass('pagelayer-elp-dimension-linked');
if(linked){
link.removeClass('pagelayer-elp-dimension-linked');
}else{
link.addClass('pagelayer-elp-dimension-linked');
}
});
row.find('input').on('input', function(){
// Are the values linked
var linked = row.find('.pagelayer-elp-dimension-div .pli').hasClass('pagelayer-elp-dimension-linked');
if(linked){
var val = jQuery(this).val();
row.find('input').each(function(){
jQuery(this).val(val);
});
}
var vals = [];
// Get all values
row.find('input').each(function(){
var val = jQuery(this).val();
vals.push(val ? val : 0);
});
_pagelayer_set_atts(row, vals);// Save and Render
});
};
var first_time_cat = true;
// Post Category property
function pagelayer_elp_postCategory(row, prop){
if(pagelayer_empty(pagelayer_post_categories)){
return;
}
// Placing the checked categories on the top.
var checked_on_top = function(with_checkbox){
var checked_list = '';
var unchecked_list = '';
jQuery(with_checkbox).children().each(function(){
var list = this;
var temp = jQuery(list).find('input[checked=checked]');
if(!pagelayer_empty(temp.length)){
checked_list += list.outerHTML;
}else{
unchecked_list += list.outerHTML;
}
});
return ('<div class="pagelayer-post-cat-div" ><ul class="pagelayer-post-category" >'+checked_list+unchecked_list+'</ul></div>');
}
// Getting checked and unchecked categories on opening of page props settings.
if(first_time_cat == false){
var $div = jQuery('<div>').html(pagelayer_post_categories.with_checkbox);
$div.find('input[type=checkbox]').attr('checked', false);
if(!pagelayer_empty(prop.c['val'])){
var check_val = prop.c['val'];
if(pagelayer_is_string(check_val)){
check_val = check_val.split(',');
}
for(var no in check_val){
$div.find('input[type=checkbox][value='+check_val[no]+']').attr('checked', true);
}
}
pagelayer_post_categories.with_checkbox = $div.html();
}
first_time_cat = false;
// For making insert new categories functionality.
row.append(checked_on_top(pagelayer_post_categories.with_checkbox));
var div = '<div class="pagelayer-elp-postCategory">'+
'<span class="pagelayer-add-cat-btn">Add New Category</span>'+
'<form style="display:none;">'+
'<div>'+
'<label>New Category Name</label>'+
'<input type="text" name="category_name" required>'+
'</div>'+
'<div>'+
'<label>Parent Category</label>'+
'<div class="pagelayer-parent-category"></div>'+
'</div>'+
'<button type="submit" class="pagelayer-cat-submit" >Add New Category</button>'+
'</form>'+
'</div>';
row.append(div);
// For making categories drop down options and adding an empty option.
if(!pagelayer_empty(pagelayer_post_categories.without_checkbox)){
var options = pagelayer_post_categories.without_checkbox.replace('>', '><option class="level-0" value="0">--No Parent--</option>');
var options = jQuery(options);
row.find('.pagelayer-parent-category').append(options);
}
// For initiating ajax call when user create new category
row.find('form').on('submit', function(e){
e.preventDefault();
jQuery.ajax({
type: 'post',
url: pagelayer_ajax_url+'&action=pagelayer_get_cat_checkboxes',
dataType: 'json',
data: {
pagelayer_nonce: pagelayer_ajax_nonce,
'postid': pagelayer_postID,
'new_cat': row.find('form').serialize()
},
success: function(obj){
if(pagelayer_empty(obj)){
return;
}
if('error' in obj){
alert(obj.error);
}
if(!pagelayer_empty(obj.new_cat_id)){
obj.with_checkbox = obj.with_checkbox.replace('value="'+obj.new_cat_id+'"', 'value="'+obj.new_cat_id+'" checked="checked"');
}
var new_cat_elem = jQuery(obj.with_checkbox).find('input[value='+obj.new_cat_id+']').closest('li');
var post_cat = row.find('.pagelayer-post-category');
// Does the new element have no parents ? Then prepend the <LI> to the existing list shown
if(!pagelayer_empty(new_cat_elem.parent('.pagelayer-post-category').length)){
post_cat.prepend(new_cat_elem);
}else{
// Siblings are already there ?
if(!pagelayer_empty(new_cat_elem.siblings().length)){
post_cat.find('#'+new_cat_elem.parent().parent('li').attr('id')).children('ul').append(new_cat_elem);
// No siblings, hence append
}else{
new_cat_elem = new_cat_elem.parent();
post_cat.find('#'+new_cat_elem.closest('li').attr('id')).append(new_cat_elem);
}
post_cat.prepend(new_cat_elem.parentsUntil('.pagelayer-post-category').last());
}
row.find('#pagelayer_cat_parent').replaceWith(obj.without_checkbox.replace('>', '><option class="level-0" value="0">--No Parent--</option>'));
row.find('input[name="category_name"]').val('');
row.find('#pagelayer_cat_parent option[value="0"]').attr('selected', true);
checked_cat(row.find('.pagelayer-post-cat-div'));
event_function();
pagelayer_post_categories = obj;
}
});
});
// Show and hide 'Add new Category' button.
row.find('.pagelayer-add-cat-btn').on('click', function(){
row.find('form').toggle('fast');
});
var checked_cat = function(elem){
var jEle = elem.find('input:checked');
var cat_array = [];
for(var checked_input of jEle){
cat_array.push(jQuery(checked_input).attr('value'));
}
_pagelayer_set_atts(row, cat_array);
};
var event_function = function(){row.find('.pagelayer-post-cat-div').on('change', function(){
checked_cat(jQuery(this));
});
};
event_function();
}
var first_time_tag = true;
// Post tags property
function pagelayer_elp_postTags(row, prop){
if(pagelayer_empty(pagelayer_post_tags)){
return;
}
var div = '<div class="pagelayer-elp-postTags" >'+
'<div class="pagelayer-post-tags" >'+
'<input type="text" autocomplete="off" class="pagelayer-elp-postTags-inp" autofocus="autofocus"/>'+
'<ul class="pagelayer-postTags-list" >'+
'</ul>'+
'</div>'+
'</div>';
row.append(div);
// Single tag html
var singleTag = function(tags){
var html = '';
jQuery.each(tags, function(index, value){
if(pagelayer_empty(value['term_id'])){
return;
}
html += '<span class="pagelayer-elp-tags-ele" data-val="'+value['term_id']+'"><span class="pagelayer-tags-label" >'+value['name']+'</span><span class="pagelayer-elp-tags-remove"><i class="fas fa-times"></i></span></span>';
});
return html;
}
// Single list item html
var singleLi= function(tags){
var html = '';
jQuery.each(tags, function(index, value){
html += '<li data-val="'+value['term_id']+'">'+value['name']+'</li>';
});
return html;
}
// For making new tags as well as removing using keyboard inputs.
var keypresses = function(obj){
row.find('.pagelayer-elp-postTags-inp').on('keydown', function(e){
var val = e.target.value.trim();
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13' || keycode == '188'){
for(var tag of obj.allTags){
if(tag['name']==val){
insertTags(val, tag['term_id']);
return false;
}
}
jQuery.ajax({
url: pagelayer_ajax_url+'&action=pagelayer_get_post_tags',
type: 'post',
dataType: 'json',
data: {
pagelayer_nonce: pagelayer_ajax_nonce,
'postid': pagelayer_postID,
'new_tag': val
},
success: function(resp){
if(pagelayer_empty(resp)){
return;
}
if('error' in resp){
alert(resp.error);
}
if(!pagelayer_empty(resp.tag_id)){
insertTags(val, resp.tag_id);
tagSearching(resp);
pagelayer_post_tags = resp;
}
}
});
return false;
}else if(keycode == '8'){
if(!pagelayer_empty(val)){
return true;
}
row.find('.pagelayer-post-tags').children('span').last().remove();
selected_tags();
}
return true;
});
}
// Inserting tags in the Metabox.
var insertTags = function(name, tag_id){
var newItem = [];
newItem[0] = {
name:name,
term_id:tag_id
};
row.find('.pagelayer-post-tags').children('input').before(singleTag(newItem));
row.find('.pagelayer-elp-postTags .pagelayer-elp-postTags-inp').val('').focus();
tag_remove();
selected_tags();
}
// Removing tags by clicking on the x button.
var tag_remove = function(){
row.find('.pagelayer-elp-tags-remove').each(function(){
jQuery(this).on('click',function(){
jQuery(this).parent().remove();
selected_tags();
});
});
}
// For searching tag name in the list of the fetched tags
var tagSearching = function(obj){
row.find('.pagelayer-elp-postTags-inp').off('keyup');
row.find('.pagelayer-elp-postTags-inp').on("keyup", function() {
var value = jQuery(this).val().toLowerCase();
var listUl = row.find('.pagelayer-postTags-list');
listUl.empty();
if(value.length<2){
return;
}
var listValues = obj.allTags.filter(function(currentValue){
if(currentValue.name.indexOf(this)>-1){
var temp = false;
var tags = row.find('.pagelayer-post-tags').children('span');
for(var indi of tags){
if(jQuery(indi).attr('data-val')==currentValue.term_id){
temp = true;
}
}
if(temp==false){
return currentValue;
}
}
}, value);
if(!pagelayer_empty(listValues.length)){
listUl.append(singleLi(listValues));
listUl.children().each(function(index, value){
var ele = jQuery(this);
ele.off('click');
ele.on('click', function(){
insertTags(ele.text(), ele.attr('data-val'));
listUl.empty();
});
});
}
});
}
var tagsArray = pagelayer_post_tags.postTags;
// Getting tags on opening of page props settings.
if( first_time_tag == false ){
var i=0;
var tags_array = [];
// Create array for needed term_id with corresponding to the name.
if(!pagelayer_empty(prop.c['val'])){
var tags_val = prop.c['val'];
if(pagelayer_is_string(tags_val)){
tags_val = tags_val.split(',');
}
for(var name in tags_val){
tags_array[i] = pagelayer_post_tags.allTags.find(function(val){return val['name'] == tags_val[name]});
i++;
}
}
tagsArray = tags_array;
}
row.find('.pagelayer-post-tags').prepend(singleTag(tagsArray));
first_time_tag = false;
tagSearching(pagelayer_post_tags);
keypresses(pagelayer_post_tags);
tag_remove();
var selected_tags = function(){
var jEle = row.find('.pagelayer-elp-postTags .pagelayer-elp-tags-ele');
var tag_array = [];
for(var selec_tag of jEle){
tag_array.push(jQuery(selec_tag).text());
}
_pagelayer_set_atts(row, tag_array);
};
}
function pagelayer_elp_permalink(row, prop){
var tmp = '';
var link = '';
if(!pagelayer_empty(pagelayer_permalink_structure)){
tmp = pagelayer_post_permalink.replace(/\/$/,'');
link = tmp.substring(0, tmp.lastIndexOf('/'));
var new_link = link+'/'+prop.c['val'];
prop.default = pagelayer_post.post_name;
var div = '<div class="pagelayer-elp-text-div">'+
'<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+pagelayer_htmlEntities(prop.c['val'])+'"></input>'+
'<a href="'+pagelayer_post_permalink+'" class="pagelayer-elp-permalink-a" target="_blank" >'+new_link+'</a></p>'+
'</div>';
}else{
var div = '<div class="pagelayer-elp-text-div">'+
'<a href="'+pagelayer_post.guid+'" class="pagelayer-elp-permalink-a" target="_blank" >'+pagelayer_post.guid+'</a></p>'+
'</div>';
}
row.append(div);
setTimeout(function(){
row.find(".pagelayer-post-type").html(pagelayer_post.post_type);
}, 1000);
var string_to_slug = function (str){
str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase();
// remove accents, swap ñ for n, etc
var char_map = {
// Latin
'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE', 'Ç': 'C',
'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I',
'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ő': 'O',
'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ű': 'U', 'Ý': 'Y', 'Þ': 'TH',
'ß': 'ss',
'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c',
'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i',
'ð': 'd', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ő': 'o',
'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u', 'ű': 'u', 'ý': 'y', 'þ': 'th',
'ÿ': 'y',
// Latin symbols
'©': '(c)',
// Greek
'Α': 'A', 'Β': 'B', 'Γ': 'G', 'Δ': 'D', 'Ε': 'E', 'Ζ': 'Z', 'Η': 'H', 'Θ': '8',
'Ι': 'I', 'Κ': 'K', 'Λ': 'L', 'Μ': 'M', 'Ν': 'N', 'Ξ': '3', 'Ο': 'O', 'Π': 'P',
'Ρ': 'R', 'Σ': 'S', 'Τ': 'T', 'Υ': 'Y', 'Φ': 'F', 'Χ': 'X', 'Ψ': 'PS', 'Ω': 'W',
'Ά': 'A', 'Έ': 'E', 'Ί': 'I', 'Ό': 'O', 'Ύ': 'Y', 'Ή': 'H', 'Ώ': 'W', 'Ϊ': 'I',
'Ϋ': 'Y',
'α': 'a', 'β': 'b', 'γ': 'g', 'δ': 'd', 'ε': 'e', 'ζ': 'z', 'η': 'h', 'θ': '8',
'ι': 'i', 'κ': 'k', 'λ': 'l', 'μ': 'm', 'ν': 'n', 'ξ': '3', 'ο': 'o', 'π': 'p',
'ρ': 'r', 'σ': 's', 'τ': 't', 'υ': 'y', 'φ': 'f', 'χ': 'x', 'ψ': 'ps', 'ω': 'w',
'ά': 'a', 'έ': 'e', 'ί': 'i', 'ό': 'o', 'ύ': 'y', 'ή': 'h', 'ώ': 'w', 'ς': 's',
'ϊ': 'i', 'ΰ': 'y', 'ϋ': 'y', 'ΐ': 'i',
// Turkish
'Ş': 'S', 'İ': 'I', 'Ç': 'C', 'Ü': 'U', 'Ö': 'O', 'Ğ': 'G',
'ş': 's', 'ı': 'i', 'ç': 'c', 'ü': 'u', 'ö': 'o', 'ğ': 'g',
// Russian
'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'Yo', 'Ж': 'Zh',
'З': 'Z', 'И': 'I', 'Й': 'J', 'К': 'K', 'Л': 'L', 'М': 'M', 'Н': 'N', 'О': 'O',
'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U', 'Ф': 'F', 'Х': 'H', 'Ц': 'C',
'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sh', 'Ъ': '', 'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu',
'Я': 'Ya',
'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 'ж': 'zh',
'з': 'z', 'и': 'i', 'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o',
'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f', 'х': 'h', 'ц': 'c',
'ч': 'ch', 'ш': 'sh', 'щ': 'sh', 'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu',
'я': 'ya',
// Ukrainian
'Є': 'Ye', 'І': 'I', 'Ї': 'Yi', 'Ґ': 'G',
'є': 'ye', 'і': 'i', 'ї': 'yi', 'ґ': 'g',
// Czech
'Č': 'C', 'Ď': 'D', 'Ě': 'E', 'Ň': 'N', 'Ř': 'R', 'Š': 'S', 'Ť': 'T', 'Ů': 'U',
'Ž': 'Z',
'č': 'c', 'ď': 'd', 'ě': 'e', 'ň': 'n', 'ř': 'r', 'š': 's', 'ť': 't', 'ů': 'u',
'ž': 'z',
// Polish
'Ą': 'A', 'Ć': 'C', 'Ę': 'e', 'Ł': 'L', 'Ń': 'N', 'Ó': 'o', 'Ś': 'S', 'Ź': 'Z',
'Ż': 'Z',
'ą': 'a', 'ć': 'c', 'ę': 'e', 'ł': 'l', 'ń': 'n', 'ó': 'o', 'ś': 's', 'ź': 'z',
'ż': 'z',
// Latvian
'Ā': 'A', 'Č': 'C', 'Ē': 'E', 'Ģ': 'G', 'Ī': 'i', 'Ķ': 'k', 'Ļ': 'L', 'Ņ': 'N',
'Š': 'S', 'Ū': 'u', 'Ž': 'Z',
'ā': 'a', 'č': 'c', 'ē': 'e', 'ģ': 'g', 'ī': 'i', 'ķ': 'k', 'ļ': 'l', 'ņ': 'n',
'š': 's', 'ū': 'u', 'ž': 'z'
};
for(var k in char_map) {
str = str.replace(new RegExp(k, 'g'), char_map[k]);
}
str = str.replace('.', '-')// replace a dot by a dash
.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
.replace(/\s+/g, '-') // collapse whitespace and replace by a dash
.replace(/-+/g, '-') // collapse dashes
.replace( /\//g, '' ); // collapse all forward-slashes
return str;
}
var editSlug = function(jEle, val){
// Convert to slug
val = string_to_slug(val);
var new_link = link+'/'+val;
var a = row.find('a');
a.html(new_link);
jEle.val(val);
return val;
}
var input = row.find('input');
if(pagelayer_empty(prop.c['val'])){
editSlug(input, pagelayer_post.post_title);
input.on('focusin', function(){
if(!pagelayer_empty(pagelayer_get_att(prop.el.$, prop.c['name']))){
return;
}
editSlug(input, pagelayer_get_att(prop.el.$, 'post_title'));
});
}
input.on('focusout', function(){
var val = jQuery(this).val();
val = editSlug(jQuery(this), val);
if(pagelayer_empty(pagelayer_get_att(prop.el.$, prop.c['name']))){
return;
}
_pagelayer_set_atts(row, val);// Save and Render
});
input.on('input', function(){
var new_link = link+'/'+jQuery(this).val();
var a = row.find('a');
a.html(new_link);
_pagelayer_set_atts(row, jQuery(this).val());// Save and Render
});
}
// The Datetime Property
function pagelayer_elp_postDate(row, prop){
var date_array = prop.c['val'].split(" ");
var div = '<div class="pagelayer-elp-postdate-div">'+
'<input type="date" class="pagelayer-elp-postdate" name="'+prop.c['name']+'" value="'+date_array[0]+'" />'+
'<input type="time" class="pagelayer-elp-postdate" name="'+prop.c['name']+'" value="'+date_array[1]+'" />'+
'</div>';
row.append(div);
row.find('.pagelayer-elp-postdate-div').on('change', function(){
var date_string = jQuery(this).children().eq(0).val() +' '+ jQuery(this).children().eq(1).val();
_pagelayer_set_atts(row, date_string);// Save and Render
});
};
// The button Property
function pagelayer_elp_trashButton(row, prop){
var div = '<div class="pagelayer-elp-trash-button-div">'+
'<button class="pagelayer-elp-trash-button">Move to trash</button>'+
'</div>';
row.append(div);
row.find('.pagelayer-elp-trash-button').on('click', function(event){
event.preventDefault();
if(!confirm(pagelayer_l('delete_post_conf'))){
return;
}
//console.log(pagelayer_postID);
jQuery.ajax({
url: pagelayer_ajax_url+'&action=pagelayer_trash_post',
type: 'post',
dataType: 'json',
data: {
pagelayer_nonce: pagelayer_ajax_nonce,
'postid': pagelayer_postID
},
success: function(resp){
if('error' in resp){
alert(resp.error);
}
if('url' in resp){
window.top.location.href = resp.url;
}
}
});
});
};
// The Menus list property
function pagelayer_elp_menus(row, prop){
var jEle = prop.el.$;
var options = '';
var option = function(val, lang){
var selected = (val != prop.c['val']) ? '' : 'selected="selected"';
return '<option class="pagelayer-elp-select-option" value="'+val+'" '+selected+'>'+lang+'</option>';
}
for(x in prop['list']){
// Single item
if(typeof prop['list'][x] == 'string'){
options += option(x, prop['list'][x]);
// Groups
}else{
options += '<optgroup label="'+x+'">';
for(var y in prop['list'][x]){
options += option(y, prop['list'][x][y]);
}
options += '</optgroup>';
}
}
var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+
'<select class="pagelayer-elp-select pagelayer-elp-select-menus" name="'+prop.c['name']+'">'+options+'</select>'+
'</div>'+
'<div class="pagelayer-elp-menu-items-holder pagelayer-elp-pos-rel"></div>';
row.append(div);
// Show the properties of the existing things
var show_item = function(item, child_elements, depth){
depth = depth || 0;
var title = item['title'] || '';
// Create the HTML
var holder = jQuery('<div class="pagelayer-elp-group-item pagelayer-menu-depth-'+depth+'" pagelayer-menu-item="'+item['ID']+'">'+
'<div class="pagelayer-elp-group-item-head">'+
'<span class="pagelayer-elp-group-item-drag"><i class="pli pli-menu" ></i></span>'+
'<span class="pagelayer-elp-group-item-title">'+title+'</span>'+
'</div>'+
'<div class="pagelayer-elp-group-item-body"></div>'+
'<div class="menu-item-transport"></div>'+
'</div>');
// Append to the row
row.find('.pagelayer-elp-menu-items-holder').append(holder);
// Setup the toggle
holder.find('.pagelayer-elp-group-item-title').first().on('click', function(){
var editArea = jEle.find('.pagelayer-mega-editor-'+item['ID']);
var child = editArea.find('[pagelayer-tag="pl_nav_menu_item"]');
var cid;
if(child.length < 1){
// First add the element inside the group element
var _child = jQuery('<div pagelayer-tag="pl_nav_menu_item"></div>');
editArea.append(_child);
cid = pagelayer_onadd(_child, false);
child = jQuery('[pagelayer-id='+cid+']');
// Set Attributes
pagelayer_set_atts(child, item);
}else{
cid = pagelayer_id(child);
}
var rEle = holder.find('.pagelayer-elp-group-item-body').first();
holder.attr('pagelayer-group-item-id', cid);
// If the props are not already setup
if(rEle.html().length < 1){
pagelayer_elpd_generate(jQuery('[pagelayer-id="'+cid+'"]'), rEle);
// Change the group item title
var tmp_title = holder.find('[pagelayer-elp-name="'+item['title']+'"] [name="'+item['title']+'"]');
if(tmp_title.length > 0){
jQuery(tmp_title).on('input', function(){
holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val());
});
}
}
if(!rEle.is(':visible')){
jQuery('.pagelayer-active-mega-menu').removeClass('pagelayer-active-mega-menu');
jEle.find('.pagelayer-mega-menu-item.menu-item-'+item['ID']).addClass('pagelayer-active-mega-menu');
}
rEle.slideToggle();
});
// Add child elements
if(!pagelayer_empty(child_elements[item['ID']])){
depth++;
for(var i in child_elements[item['ID']]){
show_item(child_elements[item['ID']][i], child_elements, depth);
}
}
holder.on('change', 'select[name="menu_type"]', function(){
var mType = jQuery(this).val();
var rowGroup = holder.find('[pagelayer-elp-name="element"]');
if(mType != 'mega' || rowGroup.find('.pagelayer-elp-group-div .pagelayer-elp-group-item').length > 0){
return;
}
rowGroup.find('.pagelayer-elp-button').click();
});
};
var createItemsList = function(menuID){
// Remove previous items
row.find('.pagelayer-elp-menu-items-holder').empty();
if(!(menuID in pagelayer_menus_items_list)){
return;
}
var $elements = pagelayer_menus_items_list[menuID];
var top_level_elements = [];
var children_elements = [];
for($e in $elements){
// Make a referrer of each menu
pagelayer_menus_items_ref[$elements[$e]['ID']] = $elements[$e];
if ( pagelayer_empty( $elements[$e]['menu_item_parent'] ) ) {
top_level_elements.push($elements[$e]);
} else {
if(pagelayer_empty(children_elements[ $elements[$e]['menu_item_parent'] ])){
children_elements[ $elements[$e]['menu_item_parent'] ] = [];
}
children_elements[ $elements[$e]['menu_item_parent'] ].push($elements[$e]);
}
}
for(var i in top_level_elements){
show_item(top_level_elements[i], children_elements, 0);
}
}
createItemsList(prop.c['val']);
row.find('select.pagelayer-elp-select-menus').on('change', function(){
var ID = jQuery(this).val();
// Load Menu list
createItemsList(ID);
_pagelayer_set_atts(row, ID);// Save and Render
});
}
// Select frame to upload media
function pagelayer_select_frame(tag, state){
var state = state || '';
//console.log(state);
var frame;
switch(tag){
// Multi image selection frame
case 'multi_image':
frame = wp.media({
id: 'pagelayer-wp-multi-image-library',
frame: 'post',
state: state,
title: pagelayer_l('frame_multi_image'),
multiple: true,
library: wp.media.query({type: 'image'}),
button: {
text: pagelayer_l('insert')
},
});
break;
// Media selection frame
case 'media':
frame = wp.media({
id: 'pagelayer-wp-media-library',
frame: 'post',
state: 'pagelayer-media',
title: pagelayer_l('frame_media'),
multiple: false,
states: [
new wp.media.controller.Library({
id: 'pagelayer-media',
title: pagelayer_l('frame_media'),
multiple: false,
date: true
})
],
button: {
text: pagelayer_l('insert')
},
});
break;
//Default frame(for image, video, audio)
default:
frame = wp.media({
id: 'pagelayer-wp-'+tag+'-library',
frame: 'post',
state: 'pagelayer-'+tag,
title: pagelayer_l('frame_media'),
multiple: false,
library: wp.media.query({type: tag}),
states: [
new wp.media.controller.Library({
id: 'pagelayer-'+tag,
title: pagelayer_l('frame_media'),
library: wp.media.query( { type: tag } ),
multiple: false,
date: true
})
],
button: {
text: pagelayer_l('insert')
},
});
break;
}
frame.on({
'menu:render:default': function(view){
view.unset('insert');
view.unset('gallery');
view.unset('featured-image');
view.unset('playlist');
view.unset('video-playlist');
},
}, this);
return frame;
}
// function to show default button
function pagelayer_show_default_button(row, prop, value){
// Default button is visible or not
if(row.find('.pagelayer-elp-default').attr('data_show')){
return;
}
// value is an object or not
if(typeof value == 'object'){
// Checking value for NaN, empty and default.
for(var i = 0; i < pagelayer_length(value); i++){
if(value[i]!= prop.default && value[i] == value[i] && value[i] != ''){
row.find('.pagelayer-elp-default').attr('data_show',true);
break;
}
}
}else{
if('default' in prop && value!=prop.default){
row.find('.pagelayer-elp-default').attr('data_show',true);
}else if(value!=prop.default && value==value && value!=''){
row.find('.pagelayer-elp-default').attr('data_show',true);
}
}
}
// Function which checks the properties to not to show default button
function pagelayer_properties_filter(property){
var propTypeDefault = ['image', 'text', 'editor', 'textarea', 'checkbox', 'access', 'modal', 'group', 'radio', 'postCategory', 'postTags', 'postDate', 'gradient'];
return (jQuery.inArray(property, propTypeDefault) == -1)
}
// Link font family
function pagelayer_link_font_family(sEle){
var value = sEle.val();
if(sEle.val() == 'Default'){
return;
}
value = value.replace(' ', '+');
var t = sEle.find("option:selected").attr('type');
switch(t){
case 'google':
if(jQuery('#pagelayer-google-fonts').length == 0){
if(value==''){
return;
}
jQuery('head').append('<link id="pagelayer-google-fonts" href="https://fonts.googleapis.com/css?family='+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">');
}else{
var url = jQuery('#pagelayer-google-fonts').attr('href');
if(url.indexOf(value) == -1){
url = url+'|'+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i';
jQuery('#pagelayer-google-fonts').attr('href', url);
}
}
break;
case 'custom':
if(!pagelayer_empty(jQuery('style[id='+value+'_plf]').length)){
break;
}
jQuery.ajax({
url: pagelayer_ajax_url+'&action=pagelayer_custom_font',
type: 'POST',
dataType: 'json',
data: {
'pagelayer_nonce': pagelayer_ajax_nonce,
'font_name': value
},
success: function(data) {
if('style' in data){
jQuery('body').append(data['style']);
}
}
});
break;
}
}