Current File : //proc/self/root/var/softaculous/sitepad/editor/site-data/plugins/pagelayer-pro/js/customizer.js
var pagelayer_fontHtmlArray = {};
(function($) {
var api = wp.customize;
api.bind( 'ready', function() {
var controls = api.settings.controls;
for(var control in controls){
if( !('show_filter' in controls[control]) ){
continue;
}
var filter = controls[control]['show_filter'];
for(var showParam in filter){
var except = showParam.substr(0, 1) == '!' ? true : false;
showParam = except ? showParam.substr(1) : showParam;
// Show and Hide Controls
api( showParam, function( setting ){
api.control( control, function( _control ) {
var visibility = function() {
var _filter = _control.params['show_filter'];
for(var _showParam in _filter){
var reqval = _filter[_showParam];
var val = setting.get();
var toShow = false;
if(typeof reqval == 'string' && reqval == val){
toShow = true;
}
// Its an array and a value is found, then dont show
if(typeof reqval != 'string' && reqval.indexOf(val) > -1){
toShow = true;
}
if(except && !toShow || !except && toShow ){
_control.container.show();
return
}
_control.container.hide();
}
};
visibility();
setting.bind( visibility );
});
});
}
}
// Expand pagelayer setting handler
api.section('pagelayer_global_fonts_sec', function( section ){
section.expanded.bind(function( isExpanding ){
// Set default value
section.container.find('select[data-font-key]').each(function(){
var ref = jQuery(this),
name = ref.attr('data-font-key'),
value = ref.attr('data-default-value');
ref.html(pagelayer_fontHtmlArray[name]).val(value);
ref.removeAttr('data-font-key');
});
});
});
});
})(jQuery);
/**
* Initialization trigger.
*/
jQuery(document).ready( function(){
// Create color setting
pagelayer_alpha_color_control_init();
var option = function(val, lang){
var lang = lang || 'Default';
return '<option value="'+val+'">'+lang+'</option>';
}
// Create font setting list
for(var sk in pagelayer_global_font_settings){
var sval = pagelayer_global_font_settings[sk];
if('choices' in sval){
var fontHtml = '';
for( var value in sval['choices'] ) {
if(typeof sval['choices'][value] !== 'object'){
fontHtml += option(value, sval['choices'][value]);
continue;
}
if(value != 'default'){
fontHtml += '<optgroup label="'+value+'">';
}
for (x in sval['choices'][value]){
fontHtml += option((jQuery.isNumeric(x) ? sval['choices'][value][x] : x), sval['choices'][value][x]);
}
}
pagelayer_fontHtmlArray[sk] = fontHtml;
}
}
// Show hide typography
jQuery(document).on('click.pagelayer-typo-icon', function (e){
var target = jQuery(e.target);
var isTypo = target.closest('.pagelayer-control-typo');
var isIcon = target.closest('.pagelayer-control-typo-icon');
var typoHolder = isIcon.closest('.pagelayer-control-typo-holder');
if(isTypo.length > 0){
return;
}
if(isIcon.length > 0){
// Set default value
typoHolder.find('select[data-font-key]').each(function(){
var ref = jQuery(this),
name = ref.attr('data-font-key'),
value = ref.attr('data-default-value');
ref.html(pagelayer_fontHtmlArray[name]).val(value);
ref.removeAttr('data-font-key');
});
var globalInput = typoHolder.find('.pagelayer-global-font-input');
if(!pagelayer_empty(globalInput)){
// Show the global values if is not customize
typoHolder.find('.pagelayer-control-typo-fields').attr('pagelayer-set-global', 1);
typoHolder.find('select, input').each(function(){
var sEle = jQuery(this);
var val = sEle.val();
if(pagelayer_empty(val)){
return true;
}
sEle.closest('.pagelayer-control-typo-fields').removeAttr('pagelayer-set-global');
});
typoHolder.find('[pagelayer-set-global="1"] .pagelayer-typo-global-default').trigger('click');
}
typoHolder.find('.pagelayer-control-typo').slideToggle(100);
return;
}
jQuery('.pagelayer-control-typo').slideUp(100);
});
// Show hide global color option
jQuery(document).on('click.pagelayer-global-color-icon', function (e){
var target = jQuery(e.target);
var isGcolor = target.closest('.pagelayer-global-color-list');
var isGIcon = target.closest('.pagelayer-control-global-color-icon');
if(isGcolor.length > 0){
return;
}
if(isGIcon.length > 0){
var listEle = isGIcon.closest('li').find('.pagelayer-global-color-list');
jQuery('.pagelayer-global-color-list').not(listEle).slideUp(100);
listEle.slideToggle(100);
return;
}
jQuery('.pagelayer-global-color-list').slideUp(100);
});
// Hide global color option
jQuery(document).on('focus', '.wp-color-result', function(e){
jQuery('.pagelayer-global-color-list').slideUp(100);
});
// Show hide global fonts option
jQuery('#customize-theme-controls').on('click.pagelayer-global-typo-icon', function (e){
var target = jQuery(e.target);
var isGcolor = target.closest('.pagelayer-global-font-list');
var isGIcon = target.closest('.pagelayer-control-global-typo-icon');
var typoHolder = isGIcon.closest('.pagelayer-control-typo-holder');
if(isGcolor.length > 0){
return;
}
if(isGIcon.length > 0){
typoHolder.find('.pagelayer-global-font-list').slideToggle(100);
return;
}
jQuery('.pagelayer-global-font-list').slideUp(100);
});
// Device handler
jQuery('#customize-theme-controls').on('click', '.pagelayer-devices button', function(e){
e.stopPropagation();
var device = jQuery(this).data('device');
var devices = {'desktop' : 'tablet', 'tablet' : 'mobile', 'mobile' : 'desktop'};
jQuery('.devices-wrapper .devices [data-device="'+devices[device]+'"]').click();
});
// Add attr to detect device
jQuery('#customize-theme-controls').attr('data-device-detector', 'desktop');
// Device handler
jQuery('.devices-wrapper .devices button[data-device]').on('click', function(e){
e.stopPropagation();
var device = jQuery(this).data('device');
jQuery('.pagelayer-devices .active-device').removeClass('active-device');
jQuery('.pagelayer-devices [data-device="'+device+'"]').addClass('active-device');
jQuery('[data-device-detector]').attr('data-device-detector', device);
});
// Units handler
jQuery('.pagelayer-units').each(function(){
var units = jQuery(this);
var uList = units.find('[data-unit]');
var input = units.find('.pagelayer-unit-input');
var uActive = units.find('[data-unit="'+input.val()+'"]');
units.find('[data-unit]').on('click', function(){
var uEle = jQuery(this);
uList.removeClass('active');
uEle.addClass('active');
input.val(uEle.data('unit')).trigger('input');
});
if(uActive.length > 0){
uActive.click();
return;
}
//uList.first().click();
});
// Accordion Tab handlers
jQuery('.pagelayer-accordion-tab').on('click', function(){
var toggle = jQuery(this);
var allToggle = toggle.closest('ul').find('.pagelayer-accordion-tab').not(toggle);
allToggle.nextUntil('.pagelayer-accordion-tab').slideUp();
allToggle.removeClass('pagelayer-active-accordion-tab')
toggle.nextUntil('.pagelayer-accordion-tab').slideToggle();
toggle.toggleClass('pagelayer-active-accordion-tab');
var dash = toggle.find('.pagelayer-customize-heading .dashicons');
var allDash = toggle.closest('ul').find('.pagelayer-accordion-tab .pagelayer-customize-heading .dashicons');
allDash.addClass('dashicons-arrow-right-alt2');
allDash.removeClass('dashicons-arrow-down-alt2');
if(toggle.hasClass('pagelayer-active-accordion-tab')){
dash.addClass('dashicons-arrow-down-alt2');
dash.removeClass('dashicons-arrow-right-alt2');
}
});
// Close all accordion tabs
jQuery('.pagelayer-accordion-tab').nextUntil('.pagelayer-accordion-tab').hide();
// Link padding control field handler
jQuery('.pagelayer-control-padding').each(function(){
pagelayer_control_padding_handler(jQuery(this));
});
// Link Global Color Palette
jQuery('.pagelayer-global-setting-color .dashicons').click(function(){
jQuery('#accordion-section-pagelayer_global_colors_sec .accordion-section-title').click();
});
// Link Global Font Palette
jQuery('.pagelayer-global-setting-font .dashicons-admin-generic').click(function(){
jQuery('#accordion-section-pagelayer_global_fonts_sec .accordion-section-title').click();
});
// Color Palette Custom Control
pagelayer_color_palette_control_handler();
// Color Palette Custom Control
pagelayer_font_palette_control_handler();
// Global color list handler
pagelayer_global_color_list_handler();
// Global font list handler
pagelayer_global_font_list_handler();
// Slider handler
pagelayer_control_slider_handler();
});
// Global font list handler
function pagelayer_global_font_list_handler(){
var font_list = '';
// Create global font list
for(var font in pagelayer_global_fonts){
font_list += '<div class="pagelayer-global-font-list-item" data-global-id="'+font+'">'+
'<span class="pagelayer-global-font-title">'+ pagelayer_global_fonts[font]['title'] +'</span>'+
'</div>';
}
jQuery('.customize-control-pagelayer-typo-control .pagelayer-control-typo-holder').each(function(){
var fHolder = jQuery(this);
var fList = fHolder.find('.pagelayer-global-font-list');
if(fList.length < 1){
return;
}
// Add list of font list
fList.append(font_list);
var globalInput = fHolder.find('.pagelayer-global-font-input');
var selectfont = globalInput.data('key');
// Restore global value
fHolder.find('.pagelayer-typo-global-default').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var sEle = jQuery(this);
var fieldHolder = sEle.closest('.pagelayer-control-typo-fields');
var globalID = globalInput.val();
if(pagelayer_empty(globalID) || pagelayer_empty(pagelayer_global_fonts[globalID])){
return;
}
var allInput = fieldHolder.find('select, input');
var name = allInput.first().attr('name');
var setFonts = pagelayer_global_fonts[globalID]['value'];
// Set default
var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'};
var val = '';
fieldHolder.attr('pagelayer-set-global', 1);
allInput.val(val).trigger('change');
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];
}
fieldHolder.find('[name="'+name+modes[mode]+'"]').val(_val);
}
return;
}
allInput.val(val);
});
if(fList.find('[data-global-id="'+selectfont+'"]').length > 0){
fList.find('[data-global-id="'+selectfont+'"]').addClass('pagelayer-global-selected');
// Set active
fHolder.find('.pagelayer-control-global-typo-icon').addClass('pagelayer-active-global');
}
// On change any field we need to handle for the global
fHolder.find('select, input').on('input', function(){
var sEle = jQuery(this);
var fieldHolder = sEle.closest('.pagelayer-control-typo-fields');
if(fieldHolder.attr('pagelayer-set-global') == '1'){
fieldHolder.removeAttr('pagelayer-set-global');
fieldHolder.find('select, input').trigger('change');
}
});
});
jQuery('#customize-theme-controls').on('click', '.pagelayer-global-font-list-item', function(){
var listItem = jQuery(this);
var globalID = listItem.data('global-id');
var listHolder = listItem.closest('.pagelayer-global-font-list');
var holder = listItem.closest('.pagelayer-control-typo-holder');
var allInputs = holder.find('select, input');
// Remove global font
if(listItem.hasClass('pagelayer-global-selected')){
listItem.removeClass('pagelayer-global-selected');
holder.find('.pagelayer-control-global-typo-icon').removeClass('pagelayer-active-global');
holder.find('.pagelayer-global-font-input').val('');
holder.removeClass('pagelayer-global-on');
allInputs.trigger('input');
allInputs.closest('.pagelayer-control-typo-fields').removeAttr('pagelayer-set-global');
listHolder.hide();
return;
}
// Remove previous selecttion
listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected')
listHolder.hide();
listItem.addClass('pagelayer-global-selected');
var key = holder.find( '.pagelayer-global-font-input' ).attr( 'data-customize-setting-link' );
// Empty all the typo
allInputs.val('').trigger('input');
allInputs.closest('.pagelayer-control-typo-fields').attr('pagelayer-set-global', 1);
holder.addClass('pagelayer-global-on');
// Set the actual option value to empty string.
wp.customize( key, function( obj ) {
obj.set(globalID);
});
// Apply all global values
holder.find('.pagelayer-typo-global-default').click();
holder.find('.pagelayer-control-global-typo-icon').addClass('pagelayer-active-global');
});
}
// Global color list handler
function pagelayer_global_color_list_handler(){
jQuery(document).on('click', '.pagelayer-global-color-list-item', function(e, skip_update){
skip_update = skip_update || false;
var listItem = jQuery(this);
var globalID = listItem.data('global-id');
var listHolder = listItem.closest('.pagelayer-global-color-list');
// Remove previous selecttion
listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
listItem.addClass('pagelayer-global-selected');
listHolder.hide();
var input = listItem.closest('li').find( '.pagelayer-alpha-color-control' )
var code = '$'+globalID;
var color = pagelayer_global_colors[globalID]['value'];
input.unbind('change.pagelayer_global input.pagelayer_global color_change.pagelayer_global');
if(!skip_update){
var key = input.attr( 'data-customize-setting-link' );
// Set the actual option value to empty string.
wp.customize( key, function( obj ) {
obj.set(code);
});
}
// Set the actual option value to empty string.
input.val( color );
input.closest('.wp-picker-container').find('.wp-color-result').css({'background-color': color});
input.on('change.pagelayer_global input.pagelayer_global color_change.pagelayer_global', function(){
var colorCode = jQuery(this).val();
if(jQuery.trim(colorCode) == color){
return;
}
listItem.closest('li').find('.pagelayer-control-global-color-icon').removeClass('pagelayer-active-global');
listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
});
listItem.closest('li').find('.pagelayer-control-global-color-icon').addClass('pagelayer-active-global');
});
jQuery('.pagelayer-global-color-list-item.pagelayer-global-selected').trigger('click', [true]);
}
var pagelayer_global_colors_timmer = {};
// Color palette Custom Control
function pagelayer_color_palette_control_handler(){
var global_palette = jQuery('#customize-control-pagelayer_global_colors');
// Get the values from the repeater input fields and add to our hidden field
var pagelayerGetAllInputs = function() {
var pagelayer_colors_palette = {};
global_palette.find('.pagelayer-alpha-color-control').each(function(){
var cEle = jQuery(this);
var id = cEle.data('id');
pagelayer_colors_palette[id] = {
'title' : cEle.closest('.pagelayer-color-holder').find('.pagelayer-color-title').text(),
'value' : cEle.val(),
}
});
var inputValues = JSON.stringify(pagelayer_colors_palette);
// Add all the values from our repeater fields to the hidden field (which is the one that actually gets saved)
global_palette.find('.pagelayer-color-palette-data').val(inputValues).trigger('change');
}
// Append a new row to our list of elements
var pagelayer_add_row = function(ele, val = ''){
var id = pagelayer_generate_randstr(6);
var name = ele.find('.pagelayer-color-holder').length - 3;
var newRow = jQuery('<div class="pagelayer-color-holder"><span class="pagelayer-color-title" contenteditable="true">Color #'+name+'</span><span class="pagelayer-color-controls">'+val+'</span><span class="customize-control-color-repeater-delete"><span class="dashicons dashicons-no-alt"></span></span><input class="pagelayer-alpha-color-control" type="text" data-show-opacity="true" data-palette="true" data-default-color="'+val+'" data-id="'+id+'" data-title="New Color"/></div>');
ele.find('.pagelayer-color-holder:last').after(newRow);
pagelayer_alpha_color_control_init();
// Update global variable
ele.find('.pagelayer-alpha-color-control').trigger('color_change');
}
jQuery(document).on('color_change change', '#customize-control-pagelayer_global_colors .pagelayer-alpha-color-control, #customize-control-pagelayer_global_colors .pagelayer-color-title', function(){
var cEle = jQuery(this);
clearTimeout(pagelayer_global_colors_timmer);
pagelayer_global_colors_timmer = setTimeout(function(){
cEle.closest('.pagelayer-color-holder').find('.pagelayer-color-controls').html(cEle.val());
pagelayerGetAllInputs();
}, 300);
});
jQuery(document).on('input', '#customize-control-pagelayer_global_colors .pagelayer-color-title', function(){
clearTimeout(pagelayer_global_colors_timmer);
pagelayer_global_colors_timmer = setTimeout(function(){
pagelayerGetAllInputs();
}, 500);
});
// Add new item
jQuery('.customize-control-color-repeater-add').click(function(event) {
event.preventDefault();
pagelayer_add_row(jQuery(this).parent());
});
// Remove item starting from it's parent element
jQuery(document).on('click', '.pagelayer-color-holder .customize-control-color-repeater-delete .dashicons', function(event) {
event.preventDefault();
var numItems = jQuery(this).closest('.pagelayer-color-holder').remove();
pagelayerGetAllInputs();
});
}
// Font palette Custom Control
function pagelayer_font_palette_control_handler(){
var global_palette = jQuery('#customize-control-pagelayer_global_fonts');
// Get the values from the repeater input fields and add to our hidden field
var pagelayerGetAllInputs = function() {
var pagelayer_colors_palette = {};
global_palette.find('.pagelayer-font-holder').each(function(){
var cEle = jQuery(this);
var id = cEle.data('id');
var data = {};
var array = cEle.find('input, textarea, select').serializeArray();
jQuery.each(array, function () {
if(this.value == ''){
return;
}
var name = this.name;
var value = this.value;
// Is multi array
if(name.indexOf("[") > -1){
var nameArray = name.replaceAll(']', '').split('\['),
base = nameArray.shift(),
last = nameArray.pop();
if(typeof data[base] != 'object'){
data[base] = {};
}
// Set base object as refrence
var _val = data[base];
for(key in nameArray){
if(typeof _val[nameArray[key]] != 'object'){
_val[nameArray[key]] = {};
}
// Change the refrence of object
_val = _val[nameArray[key]];
}
_val[last] = value;
return;
}
data[name] = value;
});
pagelayer_colors_palette[id] = {
'title' : cEle.children('.pagelayer-font-title').text(),
'value' : data,
}
});
var inputValues = JSON.stringify(pagelayer_colors_palette);
// Add all the values from our repeater fields to the hidden field (which is the one that actually gets saved)
global_palette.find('.pagelayer-font-palette-data').val(inputValues).trigger('change');
}
// Append a new row to our list of elements
var pagelayer_add_row = function(ele, val = ''){
var id = pagelayer_generate_randstr(6);
var name = ele.find('.pagelayer-font-holder').length - 3;
var fontHtml = '';
var option = function(val, lang){
var selected = '';//(val != prop.c['val']) ? '' : 'selected="selected"';
var lang = lang || 'Default';
return '<option value="'+val+'" '+selected+'>'+lang+'</option>';
}
fontHtml += '<div class="pagelayer-font-holder" data-id="'+id+'"><span class="pagelayer-font-title" contenteditable="true">New Font #'+ name +'</span><span class="customize-control-font-repeater-delete"><span class="dashicons dashicons-no-alt"></span></span><div class="pagelayer-control-typo-holder"><span class="pagelayer-control-typo-icon dashicons dashicons-edit"></span><div class="pagelayer-control-typo">';
for(var sk in pagelayer_global_font_settings){
var sval = pagelayer_global_font_settings[sk];
fontHtml += '<div class="pagelayer-control-typo-fields">'+
'<label class="pagelayer-control-typo-fields-label">'+sval['label'];
if('responsive' in sval){
fontHtml += '<span class="pagelayer-devices">'+
'<button type="button" class="active-device" aria-pressed="true" data-device="desktop">'+
'<i class="dashicons dashicons-desktop"></i>'+
'</button>'+
'<button type="button"aria-pressed="false" data-device="tablet">'+
'<i class="dashicons dashicons-tablet"></i>'+
'</button>'+
'<button type="button" aria-pressed="false" data-device="mobile">'+
'<i class="dashicons dashicons-smartphone"></i>'+
'</button>'+
'</span>';
}
fontHtml += '</label>';
if('choices' in sval){
fontHtml += '<select name="'+ sk +'">';
for( var value in sval['choices'] ) {
if(typeof sval['choices'][value] !== 'object'){
fontHtml += option(value, sval['choices'][value]);
continue;
}
if(value != 'default'){
fontHtml += '<optgroup label="'+value+'">';
}
for (x in sval['choices'][value]){
fontHtml += option((jQuery.isNumeric(x) ? sval['choices'][value][x] : x), sval['choices'][value][x]);
}
}
fontHtml += '</select>';
}else{
fontHtml += '<input type="number" name="'+ sk +'">';
}
fontHtml += '</div>';
}
fontHtml += '</div></div></div>';
ele.find('.customize-control-font-repeater-add').before(fontHtml);
}
jQuery(document).on('input', '#customize-control-pagelayer_global_fonts input, #customize-control-pagelayer_global_fonts textarea, #customize-control-pagelayer_global_fonts select', function(){
clearTimeout(pagelayer_global_colors_timmer);
pagelayer_global_colors_timmer = setTimeout(function(){
pagelayerGetAllInputs();
}, 300);
});
jQuery(document).on('input', '#customize-control-pagelayer_global_fonts .pagelayer-font-title', function(){
clearTimeout(pagelayer_global_colors_timmer);
pagelayer_global_colors_timmer = setTimeout(function(){
pagelayerGetAllInputs();
}, 500);
});
// Add new item
jQuery('.customize-control-font-repeater-add').click(function(event) {
event.preventDefault();
pagelayer_add_row(jQuery(this).parent());
pagelayerGetAllInputs();
});
// Remove item starting from it's parent element
jQuery('#customize-theme-controls').on('click', '.pagelayer-font-holder .customize-control-font-repeater-delete .dashicons', function(event) {
event.preventDefault();
var numItems = jQuery(this).closest('.pagelayer-font-holder').remove();
pagelayerGetAllInputs();
});
}
// Padding handler
function pagelayer_control_padding_handler(jEle){
var linked = jEle.find('.dashicons-admin-links');
var inputs = jEle.find('.pagelayer-padding-input');
var is_same = true;
var first_val = jEle.find('.pagelayer-padding-input').first().val();
jEle.find('.pagelayer-padding-input').each(function(){
if(jQuery(this).val() == first_val){
return;
}
is_same = false;
return false;
});
if(is_same){
linked.addClass('pagelayer-padding-linked');
}
linked.on('click', function (e){
jQuery(this).toggleClass('pagelayer-padding-linked');
});
inputs.on('change', function(){
// Are the values linked
if(! linked.hasClass('pagelayer-padding-linked')){
return;
}
var val = jQuery(this).val();
inputs.each(function(){
jQuery(this).val(val);
jQuery(this).trigger('input');
});
});
}
/**
* Alpha Color Picker JS
*
* This file includes several helper functions and the core control JS.
*/
function pagelayer_alpha_color_control_init(){
var timeOut = 0;
// Loop over each control and transform it into our color picker.
jQuery( '.pagelayer-alpha-color-control' ).each( function() {
// Scope the vars.
var $control, startingColor, paletteInput, showOpacity, defaultColor, palette,
colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions;
// Store the control instance.
$control = jQuery( this );
if($control.closest('.wp-picker-holder').length > 0){
return;
}
setTimeout(function(){
// Get a clean starting value for the option.
startingColor = $control.val().replace( /\s+/g, '' );
// Get some data off the control.
paletteInput = $control.attr( 'data-palette' );
showOpacity = $control.attr( 'data-show-opacity' );
defaultColor = $control.attr( 'data-default-color' );
// Process the palette.
if ( paletteInput.indexOf( '|' ) !== -1 ) {
palette = paletteInput.split( '|' );
} else if ( 'false' == paletteInput ) {
palette = false;
} else {
palette = true;
}
// Set up the options that we'll pass to wpColorPicker().
colorPickerOptions = {
change: function( event, ui ) {
var key, value, alpha, $transparency;
key = $control.attr( 'data-customize-setting-link' );
value = $control.wpColorPicker( 'color' );
// Set the opacity value on the slider handle when the default color button is clicked.
if ( defaultColor == value ) {
alpha = pagelayer_get_alpha_value_from_color( value );
$alphaSlider.find( '.ui-slider-handle' ).text( alpha );
}
// Send ajax request to wp.customize to trigger the Save action.
wp.customize( key, function( obj ) {
obj.set( value );
});
$transparency = $container.find( '.transparency' );
// Always show the background color of the opacity slider at 100% opacity.
$transparency.css( 'background-color', ui.color.toString( 'no-alpha' ) );
$control.trigger('color_change');
},
palettes: palette // Use the passed in palette.
};
// Create the colorpicker.
$control.wpColorPicker( colorPickerOptions );
$container = $control.parents( '.wp-picker-container:first' );
// Insert our opacity slider.
jQuery( '<div class="alpha-color-picker-container">' +
'<div class="min-click-zone click-zone"></div>' +
'<div class="max-click-zone click-zone"></div>' +
'<div class="alpha-slider"></div>' +
'<div class="transparency"></div>' +
'</div>' ).appendTo( $container.find( '.wp-picker-holder' ) );
$alphaSlider = $container.find( '.alpha-slider' );
// If starting value is in format RGBa, grab the alpha channel.
alphaVal = pagelayer_get_alpha_value_from_color( startingColor );
// Set up jQuery UI slider() options.
sliderOptions = {
create: function( event, ui ) {
var value = jQuery( this ).slider( 'value' );
// Set up initial values.
jQuery( this ).find( '.ui-slider-handle' ).text( value );
jQuery( this ).siblings( '.transparency ').css( 'background-color', startingColor );
},
value: alphaVal,
range: 'max',
step: 1,
min: 0,
max: 100,
animate: 300
};
// Initialize jQuery UI slider with our options.
$alphaSlider.slider( sliderOptions );
// Maybe show the opacity on the handle.
if( 'true' == showOpacity ){
$alphaSlider.find( '.ui-slider-handle' ).addClass( 'show-opacity' );
}
// Move input box inside the picker holder
$control.closest('.wp-picker-input-wrap').each(function () {
jQuery(this).next('.wp-picker-holder').prepend(jQuery(this));
});
// Bind event handlers for the click zones.
$container.find( '.min-click-zone' ).on( 'click', function() {
pagelayer_update_alpha_value_on_color_control( 0, $control, $alphaSlider, true );
});
$container.find( '.max-click-zone' ).on( 'click', function() {
pagelayer_update_alpha_value_on_color_control( 100, $control, $alphaSlider, true );
});
// Bind event handler for clicking on a palette color.
$container.find( '.iris-palette' ).on( 'click', function() {
var color, alpha;
color = jQuery( this ).css( 'background-color' );
alpha = pagelayer_get_alpha_value_from_color( color );
pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
// Sometimes Iris doesn't set a perfect background-color on the palette,
// for example rgba(20, 80, 100, 0.3) becomes rgba(20, 80, 100, 0.298039).
// To compensante for this we round the opacity value on RGBa colors here
// and save it a second time to the color picker object.
if ( alpha != 100 ) {
color = color.replace( /[^,]+(?=\))/, ( alpha / 100 ).toFixed( 2 ) );
}
$control.wpColorPicker( 'color', color );
});
// Bind event handler for clicking on the 'Clear' button.
$container.find( '.button.wp-picker-clear' ).on( 'click', function() {
var key = $control.attr( 'data-customize-setting-link' );
// The #fff color is delibrate here. This sets the color picker to white instead of the
// defult black, which puts the color picker in a better place to visually represent empty.
$control.wpColorPicker( 'color', '' );
// Set the actual option value to empty string.
wp.customize( key, function( obj ) {
obj.set( '' );
});
pagelayer_update_alpha_value_on_alpha_slider( 100, $alphaSlider );
});
// Bind event handler for clicking on the 'Default' button.
$container.find( '.button.wp-picker-default' ).on( 'click', function() {
var alpha = pagelayer_get_alpha_value_from_color( defaultColor );
pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
});
// Bind event handler for typing or pasting into the input.
$control.on( 'input', function() {
var value = jQuery( this ).val();
var alpha = pagelayer_get_alpha_value_from_color( value );
pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
});
// Update all the things when the slider is interacted with.
$alphaSlider.slider().on( 'slide', function( event, ui ) {
var alpha = parseFloat( ui.value ) / 100.0;
pagelayer_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, false );
// Change value shown on slider handle.
jQuery( this ).find( '.ui-slider-handle' ).text( ui.value );
});
}, timeOut);
timeOut += 20;
});
}
/**
* Override the stock color.js toString() method to add support for
* outputting RGBa or Hex.
*/
Color.prototype.toString = function( flag ) {
// If our no-alpha flag has been passed in, output RGBa value with 100% opacity.
// This is used to set the background color on the opacity slider during color changes.
if ( 'no-alpha' == flag ) {
return this.toCSS( 'rgba', '1' ).replace( /\s+/g, '' );
}
// If we have a proper opacity value, output RGBa.
if ( 1 > this._alpha ) {
return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
}
// Proceed with stock color.js hex output.
var hex = parseInt( this._color, 10 ).toString( 16 );
if ( this.error ) { return ''; }
if ( hex.length < 6 ) {
for ( var i = 6 - hex.length - 1; i >= 0; i-- ) {
hex = '0' + hex;
}
}
return '#' + hex;
};
/**
* Given an RGBa, RGB, or hex color value, return the alpha channel value.
*/
function pagelayer_get_alpha_value_from_color( value ) {
var alphaVal;
// Remove all spaces from the passed in value to help our RGBa regex.
value = value.replace( / /g, '' );
if ( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ ) ) {
alphaVal = parseFloat( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )[1] ).toFixed(2) * 100;
alphaVal = parseInt( alphaVal );
} else {
alphaVal = 100;
}
return alphaVal;
}
/**
* Force update the alpha value of the color picker object and maybe the alpha slider.
*/
function pagelayer_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, update_slider ) {
var iris, colorPicker, color;
iris = $control.data( 'a8cIris' );
colorPicker = $control.data( 'wpWpColorPicker' );
// Set the alpha value on the Iris object.
iris._color._alpha = alpha;
// Store the new color value.
color = iris._color.toString();
// Set the value of the input.
$control.val( color ).trigger('color_change');
// Update the background color of the color picker.
colorPicker.toggler.css({
'background-color': color
});
// Maybe update the alpha slider itself.
if ( update_slider ) {
pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
}
// Update the color value of the color picker object.
$control.wpColorPicker( 'color', color );
}
/**
* Update the slider handle position and label.
*/
function pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ){
$alphaSlider.slider( 'value', alpha );
$alphaSlider.find( '.ui-slider-handle' ).text( alpha.toString() );
}
/**
* Generates random string.
*/
// Generates a random string of "n" characters
function pagelayer_generate_randstr(n, special){
var text = '';
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
special = special || 0;
if(special){
possible = possible + '&#$%@';
}
for(var i=0; i < n; i++){
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
};
// PHP equivalent empty()
function pagelayer_empty(mixed_var) {
var undef, key, i, len;
var emptyValues = [undef, null, false, 0, '', '0'];
for (i = 0, len = emptyValues.length; i < len; i++) {
if (mixed_var === emptyValues[i]) {
return true;
}
}
if (typeof mixed_var === 'object') {
for (key in mixed_var) {
// TODO: should we check for own properties only?
//if (mixed_var.hasOwnProperty(key)) {
return false;
//}
}
return true;
}
return false;
};
// Slider handler
function pagelayer_control_slider_handler(){
// Change the value of the input field as the slider is moved
jQuery('.pagelayer-slider').on('input', function(event, ui) {
var sliderValue = jQuery(this).val();
jQuery(this).parent().find('.customize-control-slider-value').val(sliderValue).trigger('input');
});
// Update slider if the input field loses focus as it's most likely changed
jQuery('.customize-control-slider-value').on('change', function() {
var resetValue = jQuery(this).val();
var slider = jQuery(this).parent().find('.pagelayer-slider');
var sliderMinValue = parseInt(slider.attr('min'));
var sliderMaxValue = parseInt(slider.attr('max'));
// Make sure our manual input value doesn't exceed the minimum & maxmium values
if(resetValue < sliderMinValue) {
resetValue = sliderMinValue;
jQuery(this).val(resetValue).trigger('input');
}
if(resetValue > sliderMaxValue) {
resetValue = sliderMaxValue;
jQuery(this).val(resetValue).trigger('input');
}
slider.val(resetValue);
});
}
Mini Shell