// 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 = '
'+
'
Settings
'+
//'
Style
'+
'
Options
'+
'
Advanced
'+
'
'+
''+
''+
'
'+
'
'+
''+
'';
// 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('');
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('
'+
'
'+all_props[tab][section]+'
'+
''+
'
');
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('');
// 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('');
}
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('');
// 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 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('');
var label = row.children('.pagelayer-elp-label-div');
// Do we have screen ?
if('screen' in prop){
var mode = pagelayer_get_screen_mode();
var screen = '
'+
''+
''+
''+
''+
'
';
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('
Pro
');
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 += ''+prop['units'][i]+'';
}
label.append('
'+units+'
');
// 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 = '';
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('
'+label+'
');
};
// The Text property
function pagelayer_elp_text(row, prop){
var 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 '';
}
for (x in prop['list']){
// Single item
if(typeof prop['list'][x] == 'string'){
options += option(x, prop['list'][x]);
// Groups
}else{
options += '';
}
}
var 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 '
'+lang+'
';
}
var show_sel = function(val){
var sel_html = '';
jQuery.each(val, function(index, value){
sel_html += ''+prop['list'][value]+' x';
});
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 = '
'+
'
'+show_sel(selection)+'
'+
'
'+options+'
'+
'
';
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 = '
'+
''+
'
';
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 = '
';
for(var x in prop.list){
var addclass = (prop.c['val'] == x) ? active : '';
div += ''+prop.list[x]+'';
}
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 = '
'+
'
'+
'
'+
''+
'
'+pagelayer_l('drop_file')+'
'+
'
'+
''+
'
'+
'
'+
'
'+
''+
'
';
// Retina image icon
if(isRetina){
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 +='
'+
''+
'
'+
'
'+
'
'+
'
'+
''+
'
'+pagelayer_l('drop_file')+'
'+
'
'+
''+
'
'+
'
'+
'
'+
''+
'
'+
'
'+
'
'+
'
'+
''+
'
'+
'
'+
''+
'
'+
'
'+
'
'+
'
'+
'
'+
''+
'
'+pagelayer_l('drop_file')+'
'+
'
'+
''+
'
'+
'
'+
'
'+
''+
'
'+
'
';
}
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 = '
'+
'
'+
''+
'
';
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('');
}
}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('');
}
}
});
}
}
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('');
}
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('');
//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 = '
'+
''+
''+
'
';
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 = '
'+
''+
''+
'
';
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 = '
'+
''+
''+
'
';
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 = '
'+
''+
''+
'
'+
'';
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 = '
'+
''+
'
';
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 = '
'+
''+
''+
'
'+
'
';
if(settingOpt){
div += '
'+
'
'+
'
'+
''+
'
'+
'
'+
''+
'
'+
'
'+
'
'+
'
'+
''+
'
'+
'
'+
''+
'
'+
'
'+
'
'+
'
'+
''+
'
'+
'
'+
''+
'
'+pagelayer_l('link_custom_attr_desc')+'
'+
'
'+
'
'+
'
';
}
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('ID : '+permaID+'');
}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 += '
';
row.append(div);
// Make all icons list
var html = '
';
if(pagelayer_loaded_icons.length > 1){
html += '';
}
html += ''+
'
'+pagelayer_l('Solid')+'
'+
'
'+pagelayer_l('Regular')+'
'+
'
'+pagelayer_l('Brand')+'
'+
''+
''+
'
';
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 += '
'+
'
';
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(''+name+'');
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(''+pagelayer_l('choose_icon')+'');
// Save and Render
_pagelayer_set_atts(row, '');
jQuery(this).hide();
return false;
});
}
// The Access Property
function pagelayer_elp_access(row, prop){
var 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 = '
'+
''+
'
'+
'
'+
'
'+
prop.label +''+
'
'+
''+
'
'+
'
'+
'
';
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 = '
'+
''+
'
'+
''+
''+
'
'+
'
'+
'
'+
'Global Colors'+
'
';
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 += '
';
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 = '
'+
''+
'
';
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 = ''+
'
';
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('
'+
'
'+
''+
''+title+''+
''+
''+
'
'+
''+
'
');
// 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 = '
'+
''+
'
';
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 = '
'+
''+
''+
''+
''+
''+
'
';
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 = ''+
'
'+
'
'+
''+
''+
'
'+
'
'+
''+
''+
'
'+
'
'+
''+
''+
'
'+
'
'+
''+
'
'+
''+
''+
'
'+
'
'+
'
';
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 = ''+
'
'+
'
'+
''+
''+
'
'+
'
'+
''+
''+
'
'+
'
'+
''+
''+
'
'+
'
'+
''+
''+
'
'+
'
'+
''+
'
'+
''+
''+
'
'+
'
'+
'
'+
''+
''+
'
'+
'
';
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 = ''+
'
';
jQuery.each(val,function(key, value){
div += '
'+
''+
''+
''+value+''+
'
';
});
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 = '
'+
'
'+
'Global Colors'+
'
';
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 += '