1663 lines
67 KiB
JavaScript
Executable File
1663 lines
67 KiB
JavaScript
Executable File
/*
|
|
jQuery deparam is an extraction of the deparam method from Ben Alman's jQuery BBQ
|
|
http://benalman.com/projects/jquery-bbq-plugin/
|
|
*/
|
|
function BloghashLinkField($el) {
|
|
this.$el = $el; // Adjust the selector to get the container
|
|
|
|
const setupEventListeners = () => {
|
|
this.$el.on('click', 'a[data-name="add"]', onClickEdit);
|
|
this.$el.on('click', 'a[data-name="edit"]', onClickEdit);
|
|
this.$el.on('click', 'a[data-name="remove"]', onClickRemove);
|
|
this.$el.on('change', '.link-node', onChange);
|
|
|
|
if (typeof wpLink !== 'undefined') {
|
|
wpLink.init(); // Initialize wpLink if it's not already initialized
|
|
}
|
|
}
|
|
|
|
const control = () => {
|
|
return this.$el;
|
|
}
|
|
|
|
const node = () => {
|
|
return this.$el.find('.link-node');
|
|
}
|
|
|
|
const getValue = (e) => {
|
|
|
|
var $node = node();
|
|
|
|
|
|
if (!$node.attr('href')) {
|
|
return false;
|
|
}
|
|
|
|
return {
|
|
title: $node.html(),
|
|
url: $node.attr('href'),
|
|
target: $node.attr('target')
|
|
};
|
|
}
|
|
|
|
const setValue = (val,e) => {
|
|
val = val || { title: '', url: '', target: '' };
|
|
|
|
var $div = control();
|
|
var $node = node();
|
|
|
|
$div.removeClass('-value -external');
|
|
|
|
if (val.url) $div.addClass('-value');
|
|
if (val.target === '_blank') $div.addClass('-external');
|
|
|
|
this.$el.find('.link-title').html(val.title);
|
|
var url = val?.url?.length > 25 ? val.url.substring(0, 22) + '...' : val.url
|
|
this.$el.find('.link-url').attr('href', val.url).html(url).attr('title', val.url);
|
|
|
|
$node.html(val.title);
|
|
$node.attr('href', val.url);
|
|
$node.attr('target', val.target);
|
|
|
|
this.$el.find('.input-title').val(val.title);
|
|
this.$el.find('.input-target').val(val.target);
|
|
this.$el.find('.input-url').val(val.url).trigger('change');
|
|
|
|
}
|
|
|
|
const onClickEdit = (e) => {
|
|
e.preventDefault();
|
|
open();
|
|
}
|
|
|
|
|
|
const onClickRemove = (e) => {
|
|
e.preventDefault();
|
|
setValue(false);
|
|
}
|
|
|
|
const onChange = (e) => {
|
|
var val = getValue(e);
|
|
setValue(val,e);
|
|
}
|
|
|
|
const getNodeValue = () => {
|
|
var $node = node();
|
|
return {
|
|
title: $node.html(),
|
|
url: $node.attr('href'),
|
|
target: $node.attr('target')
|
|
};
|
|
}
|
|
|
|
const setNodeValue = (val) => {
|
|
var $node = node();
|
|
$node.text(val.title);
|
|
$node.attr('href', val.url);
|
|
$node.attr('target', val.target);
|
|
$node.trigger('change');
|
|
}
|
|
|
|
const getInputValue = () => {
|
|
return {
|
|
title: jQuery('#wp-link-text').val(),
|
|
url: jQuery('#wp-link-url').val(),
|
|
target: jQuery('#wp-link-target').prop('checked') ? '_blank' : ''
|
|
};
|
|
}
|
|
|
|
const setInputValue = (val) => {
|
|
jQuery('#wp-link-text').val(val.title);
|
|
jQuery('#wp-link-url').val(val.url);
|
|
jQuery('#wp-link-target').prop('checked', val.target === '_blank');
|
|
}
|
|
|
|
|
|
|
|
const open = () => {
|
|
jQuery(document).on('wplink-open', onOpen);
|
|
jQuery(document).on('wplink-close', onClose);
|
|
|
|
var $textarea = jQuery('<textarea id="bloghash-link-textarea" style="display:none;"></textarea>');
|
|
if(!jQuery('#bloghash-link-textarea').length)jQuery('body').append($textarea);
|
|
|
|
var val = getNodeValue();
|
|
wpLink.open('bloghash-link-textarea', val.url, val.title, null);
|
|
}
|
|
|
|
const onOpen = () => {
|
|
|
|
// always show title (WP will hide title if empty)
|
|
jQuery('#wp-link-wrap').addClass('has-text-field'); // set inputs
|
|
jQuery(document).one('click', '#wp-link-submit', onWPLinkInsert);
|
|
var val = getNodeValue();
|
|
setInputValue(val); // Update button text.
|
|
|
|
if (val.url && wpLinkL10n) {
|
|
jQuery('#wp-link-submit').val(wpLinkL10n.update);
|
|
}
|
|
}
|
|
|
|
const onClose = () => {
|
|
|
|
var $submit = jQuery('#wp-link-submit');
|
|
var isSubmit = $submit.is(':hover') || $submit.is(':focus'); // Set value
|
|
|
|
if (isSubmit) {
|
|
var val = getInputValue();
|
|
setNodeValue(val);
|
|
} // Cleanup.
|
|
|
|
|
|
jQuery(document).off('wplink-open');
|
|
jQuery(document).off('wplink-close');
|
|
jQuery('#bloghash-link-textarea').remove();
|
|
}
|
|
|
|
|
|
const onWPLinkInsert = (e) => {
|
|
e.stopPropagation();
|
|
var data = getInputValue();
|
|
if (data.url) {
|
|
var val = {
|
|
title: data.title,
|
|
url: data.url,
|
|
target: data.target
|
|
};
|
|
|
|
setNodeValue(val);
|
|
}
|
|
|
|
|
|
};
|
|
|
|
return {
|
|
|
|
init: function () {
|
|
setupEventListeners();
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
( function( $ ) {
|
|
$.deparam = function( params, coerce ) {
|
|
var obj = {},
|
|
coerce_types = {
|
|
'true': ! 0,
|
|
'false': ! 1,
|
|
'null': null
|
|
};
|
|
|
|
// Iterate over all name=value pairs.
|
|
$.each( params.replace( /\+/g, ' ' ).split( '&' ), function( j, v ) {
|
|
var param = v.split( '=' ),
|
|
key = decodeURIComponent( param[0]),
|
|
val,
|
|
cur = obj,
|
|
i = 0,
|
|
|
|
// If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
|
|
// into its component parts.
|
|
keys = key.split( '][' ),
|
|
keys_last = keys.length - 1;
|
|
|
|
// If the first keys part contains [ and the last ends with ], then []
|
|
// are correctly balanced.
|
|
if ( /\[/.test( keys[0]) && /\]$/.test( keys[keys_last]) ) {
|
|
|
|
// Remove the trailing ] from the last keys part.
|
|
keys[keys_last] = keys[keys_last].replace( /\]$/, '' );
|
|
|
|
// Split first keys part into two parts on the [ and add them back onto
|
|
// the beginning of the keys array.
|
|
keys = keys.shift().split( '[' ).concat( keys );
|
|
keys_last = keys.length - 1;
|
|
} else {
|
|
|
|
// Basic 'foo' style key.
|
|
keys_last = 0;
|
|
}
|
|
|
|
// Are we dealing with a name=value pair, or just a name?
|
|
if ( 2 === param.length ) {
|
|
val = decodeURIComponent( param[1]);
|
|
|
|
// Coerce values.
|
|
if ( coerce ) {
|
|
val = val && ! isNaN( val ) ? +val // number
|
|
:
|
|
'undefined' === val ? undefined // undefined
|
|
:
|
|
coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
|
|
:
|
|
val; // string
|
|
}
|
|
if ( keys_last ) {
|
|
|
|
// Complex key, build deep object structure based on a few rules:
|
|
// * The 'cur' pointer starts at the object top-level.
|
|
// * [] = array push (n is set to array length), [n] = array if n is
|
|
// numeric, otherwise object.
|
|
// * If at the last keys part, set the value.
|
|
// * For each keys part, if the current level is undefined create an
|
|
// object or array based on the type of the next keys part.
|
|
// * Move the 'cur' pointer to the next level.
|
|
// * Rinse & repeat.
|
|
for ( ; i <= keys_last; i++ ) {
|
|
key = '' === keys[i] ? cur.length : keys[i];
|
|
cur = cur[key] = i < keys_last ?
|
|
cur[key] || ( keys[i + 1] && isNaN( keys[i + 1]) ? {} : []) :
|
|
val;
|
|
}
|
|
} else {
|
|
|
|
// Simple key, even simpler rules, since only scalars and shallow
|
|
// arrays are allowed.
|
|
if ( $.isArray( obj[key]) ) {
|
|
|
|
// val is already an array, so push on the next value.
|
|
obj[key].push( val );
|
|
} else if ( obj[key] !== undefined ) {
|
|
|
|
// val isn't an array, but since a second value has been specified,
|
|
// convert val into an array.
|
|
obj[key] = [ obj[key], val ];
|
|
} else {
|
|
|
|
// val is a scalar.
|
|
obj[key] = val;
|
|
}
|
|
}
|
|
} else if ( key ) {
|
|
|
|
// No value was defined, so set something meaningful.
|
|
obj[key] = coerce ?
|
|
undefined :
|
|
'';
|
|
}
|
|
});
|
|
return obj;
|
|
};
|
|
}( jQuery ) );
|
|
|
|
// COLOR ALPHA -----------------------------
|
|
/**
|
|
* Alpha Color Picker JS
|
|
*/
|
|
( function( $ ) {
|
|
|
|
/**
|
|
* Override the stock color.js toString() method to add support for
|
|
* outputting RGBa or Hex.
|
|
*/
|
|
if (typeof Color !== 'undefined' ) {
|
|
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 ( 6 > hex.length ) {
|
|
for ( var i = 6 - hex.length - 1; 0 <= i; i-- ) {
|
|
hex = '0' + hex;
|
|
}
|
|
}
|
|
return '#' + hex;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Given an RGBa, RGB, or hex color value, return the alpha channel value.
|
|
*/
|
|
function acp_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 acp_update_alpha_value_on_color_input( alpha, $input, $alphaSlider, update_slider ) {
|
|
var iris, colorPicker, color;
|
|
iris = $input.data( 'a8cIris' );
|
|
colorPicker = $input.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.
|
|
$input.val( color );
|
|
$input.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 ) {
|
|
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
|
}
|
|
|
|
// Update the color value of the color picker object.
|
|
$input.wpColorPicker( 'color', color );
|
|
}
|
|
|
|
/**
|
|
* Update the slider handle position and label.
|
|
*/
|
|
function acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ) {
|
|
$alphaSlider.slider( 'value', alpha );
|
|
$alphaSlider.find( '.ui-slider-handle' ).text( alpha.toString() );
|
|
}
|
|
$.fn.alphaColorPicker = function() {
|
|
return this.each( function() {
|
|
|
|
// Scope the vars.
|
|
var $input, startingColor, paletteInput, showOpacity, defaultColor, palette,
|
|
colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions;
|
|
|
|
// Store the input.
|
|
$input = $( this );
|
|
|
|
// We must wrap the input now in order to get our a top level class
|
|
// around the HTML added by wpColorPicker().
|
|
$input.wrap( '<div class="alpha-color-picker-wrap"></div>' );
|
|
|
|
// Get some data off the input.
|
|
paletteInput = $input.attr( 'data-palette' ) || 'true';
|
|
showOpacity = $input.attr( 'data-show-opacity' ) || 'true';
|
|
defaultColor = $input.attr( 'data-default-color' ) || '';
|
|
|
|
// Process the palette.
|
|
if ( -1 !== paletteInput.indexOf( '|' ) ) {
|
|
palette = paletteInput.split( '|' );
|
|
} else if ( 'false' == paletteInput ) {
|
|
palette = false;
|
|
} else {
|
|
palette = true;
|
|
}
|
|
|
|
// Get a clean starting value for the option.
|
|
startingColor = $input.val().replace( /\s+/g, '' );
|
|
|
|
//startingColor = $input.val().replace( '#', '' );
|
|
|
|
// If we don't yet have a value, use the default color.
|
|
if ( '' == startingColor ) {
|
|
startingColor = defaultColor;
|
|
}
|
|
|
|
// Set up the options that we'll pass to wpColorPicker().
|
|
colorPickerOptions = {
|
|
change: function( event, ui ) {
|
|
var key, value, alpha, $transparency;
|
|
key = $input.attr( 'data-customize-setting-link' );
|
|
value = $input.wpColorPicker( 'color' );
|
|
|
|
// Set the opacity value on the slider handle when the default color button is clicked.
|
|
if ( defaultColor == value ) {
|
|
alpha = acp_get_alpha_value_from_color( value );
|
|
$alphaSlider.find( '.ui-slider-handle' ).text( alpha );
|
|
}
|
|
|
|
// If we're in the Customizer, send an ajax request to wp.customize
|
|
// to trigger the Save action.
|
|
if ( 'undefined' != typeof wp.customize ) {
|
|
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' ) );
|
|
$input.trigger( 'color_change' );
|
|
},
|
|
clear: function() {
|
|
var key = $input.attr( 'data-customize-setting-link' ) || '';
|
|
if ( key && '' !== key ) {
|
|
if ( 'undefined' != typeof wp.customize ) {
|
|
wp.customize( key, function( obj ) {
|
|
obj.set( '' );
|
|
});
|
|
}
|
|
}
|
|
$input.val( '' );
|
|
$input.trigger( 'color_change' );
|
|
},
|
|
palettes: palette // Use the passed in palette.
|
|
};
|
|
|
|
// Create the colorpicker.
|
|
$input.wpColorPicker( colorPickerOptions );
|
|
$container = $input.parents( '.wp-picker-container:first' );
|
|
|
|
// Insert our opacity slider.
|
|
$( '<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 = acp_get_alpha_value_from_color( startingColor );
|
|
|
|
// Set up jQuery UI slider() options.
|
|
sliderOptions = {
|
|
create: function( event, ui ) {
|
|
var value = $( this ).slider( 'value' );
|
|
|
|
// Set up initial values.
|
|
$( this ).find( '.ui-slider-handle' ).text( value );
|
|
$( 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' );
|
|
}
|
|
|
|
// Bind event handlers for the click zones.
|
|
$container.find( '.min-click-zone' ).on( 'click', function() {
|
|
acp_update_alpha_value_on_color_input( 0, $input, $alphaSlider, true );
|
|
});
|
|
$container.find( '.max-click-zone' ).on( 'click', function() {
|
|
acp_update_alpha_value_on_color_input( 100, $input, $alphaSlider, true );
|
|
});
|
|
|
|
// Bind event handler for clicking on a palette color.
|
|
$container.find( '.iris-palette' ).on( 'click', function() {
|
|
var color, alpha;
|
|
color = $( this ).css( 'background-color' );
|
|
alpha = acp_get_alpha_value_from_color( color );
|
|
acp_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 ( 100 != alpha ) {
|
|
color = color.replace( /[^,]+(?=\))/, ( alpha / 100 ).toFixed( 2 ) );
|
|
}
|
|
$input.wpColorPicker( 'color', color );
|
|
});
|
|
|
|
// Bind event handler for clicking on the 'Default' button.
|
|
$container.find( '.button.wp-picker-default' ).on( 'click', function() {
|
|
var alpha = acp_get_alpha_value_from_color( defaultColor );
|
|
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
|
|
});
|
|
|
|
// Bind event handler for typing or pasting into the input.
|
|
$input.on( 'input', function() {
|
|
var value = $( this ).val();
|
|
var alpha = acp_get_alpha_value_from_color( value );
|
|
acp_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;
|
|
acp_update_alpha_value_on_color_input( alpha, $input, $alphaSlider, false );
|
|
|
|
// Change value shown on slider handle.
|
|
$( this ).find( '.ui-slider-handle' ).text( ui.value );
|
|
});
|
|
});
|
|
};
|
|
}( jQuery ) );
|
|
|
|
// WP COLOR ALPHA customizer -----------------------------
|
|
( function( api, $ ) {
|
|
api.controlConstructor['alpha-color'] = api.Control.extend({
|
|
ready: function() {
|
|
var control = this;
|
|
$( '.alpha-color-control', control.container ).alphaColorPicker({
|
|
clear: function( event, ui ) {
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}( wp.customize, jQuery ) );
|
|
|
|
// WP REPEATERABLE Customizer -----------------------------
|
|
( function( api, $ ) {
|
|
api.controlConstructor['bloghash-repeater'] = api.Control.extend({
|
|
ready: function() {
|
|
var control = this;
|
|
setTimeout( function() {
|
|
control._init();
|
|
}, 2500 );
|
|
},
|
|
eval: function( valueIs, valueShould, operator ) {
|
|
switch ( operator ) {
|
|
case 'not_in':
|
|
valueShould = valueShould.split( ',' );
|
|
if ( 0 > $.inArray( valueIs, valueShould ) ) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
break;
|
|
case 'in':
|
|
valueShould = valueShould.split( ',' );
|
|
if ( -1 < $.inArray( valueIs, valueShould ) ) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
break;
|
|
case '!=':
|
|
return valueIs != valueShould;
|
|
case '<=':
|
|
return valueIs <= valueShould;
|
|
case '<':
|
|
return valueIs < valueShould;
|
|
case '>=':
|
|
return valueIs >= valueShould;
|
|
case '>':
|
|
return valueIs > valueShould;
|
|
case '==':
|
|
case '=':
|
|
return valueIs == valueShould;
|
|
break;
|
|
}
|
|
},
|
|
compare: function( value1, cond, value2 ) {
|
|
var equal = false;
|
|
var _v;
|
|
switch ( cond ) {
|
|
case '===':
|
|
equal = ( value1 === value2 ) ? true : false;
|
|
break;
|
|
case '>':
|
|
equal = ( value1 > value2 ) ? true : false;
|
|
break;
|
|
case '<':
|
|
equal = ( value1 < value2 ) ? true : false;
|
|
break;
|
|
case '!=':
|
|
equal = ( value1 != value2 ) ? true : false;
|
|
break;
|
|
case 'empty':
|
|
_v = _.clone( value1 );
|
|
if ( _.isObject( _v ) || _.isArray( _v ) ) {
|
|
_.each( _v, function( v, i ) {
|
|
if ( _.isEmpty( v ) ) {
|
|
delete _v[i];
|
|
}
|
|
});
|
|
equal = _.isEmpty( _v ) ? true : false;
|
|
} else {
|
|
equal = _.isNull( _v ) || '' == _v ? true : false;
|
|
}
|
|
break;
|
|
case 'not_empty':
|
|
_v = _.clone( value1 );
|
|
if ( _.isObject( _v ) || _.isArray( _v ) ) {
|
|
_.each( _v, function( v, i ) {
|
|
if ( _.isEmpty( v ) ) {
|
|
delete _v[i];
|
|
}
|
|
});
|
|
}
|
|
equal = _.isEmpty( _v ) ? false : true;
|
|
break;
|
|
default:
|
|
equal = ( value1 == value2 ) ? true : false;
|
|
}
|
|
return equal;
|
|
},
|
|
multiple_compare: function( list, values ) {
|
|
var control = this;
|
|
var check = true;
|
|
try {
|
|
var test = list[0];
|
|
check = true;
|
|
if ( _.isString( test ) ) {
|
|
check = false;
|
|
var cond = list[1];
|
|
var cond_val = list[2];
|
|
var value;
|
|
if ( ! _.isUndefined( values[test]) ) {
|
|
value = values[test];
|
|
check = control.compare( value, cond, cond_val );
|
|
}
|
|
} else if ( _.isArray( test ) ) {
|
|
check = true;
|
|
_.each( list, function( req ) {
|
|
var cond_key = req[0];
|
|
var cond_cond = req[1];
|
|
var cond_val = req[2];
|
|
var t_val = values[cond_key];
|
|
if ( _.isUndefined( t_val ) ) {
|
|
t_val = '';
|
|
}
|
|
if ( ! control.compare( t_val, cond_cond, cond_val ) ) {
|
|
check = false;
|
|
}
|
|
});
|
|
}
|
|
} catch ( e ) {
|
|
check = false;
|
|
}
|
|
return check;
|
|
},
|
|
conditionize: function( $context ) {
|
|
var control = this;
|
|
if ( $context.hasClass( 'conditionized' ) ) {
|
|
return;
|
|
}
|
|
$context.addClass( 'conditionized' );
|
|
var $fields = $( '.field--item', $context );
|
|
$context.on( 'change condition_check', 'input, select, textarea', function( e ) {
|
|
var f = $( '.form', $context );
|
|
var data = $( 'input, textarea, select', f ).serialize();
|
|
data = jQuery.deparam( data );
|
|
var fieldData = {};
|
|
if ( _.isObject( data ) ) {
|
|
_.each( data._items, function( value ) {
|
|
fieldData = value;
|
|
});
|
|
}
|
|
$fields.each( function() {
|
|
var $field = $( this );
|
|
var check = true;
|
|
var req = $field.attr( 'data-cond' ) || false;
|
|
if ( ! _.isUndefined( req ) && req ) {
|
|
req = JSON.parse( req );
|
|
check = control.multiple_compare( req, fieldData );
|
|
if ( ! check ) {
|
|
$field.hide().addClass( 'cond-hide' ).removeClass( 'cond-show' );
|
|
} else {
|
|
$field.slideDown().removeClass( 'cond-hide' ).addClass( 'cond-show' );
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Current support one level only
|
|
*/
|
|
$( 'input, select, textarea', $context ).eq( 0 ).trigger( 'condition_check' );
|
|
},
|
|
remove_editor: function( $context ) { },
|
|
editor: function( $textarea ) { },
|
|
_init: function() {
|
|
var control = this;
|
|
var default_data = control.params.fields;
|
|
var values;
|
|
try {
|
|
if ( 'string' == typeof control.params.value ) {
|
|
values = JSON.parse( control.params.value );
|
|
} else {
|
|
values = control.params.value;
|
|
}
|
|
} catch ( e ) {
|
|
values = {};
|
|
}
|
|
var max_item = 0; // unlimited
|
|
var limited_mg = control.params.limited_msg || '';
|
|
if ( ! isNaN( parseInt( control.params.max_item ) ) ) {
|
|
max_item = parseInt( control.params.max_item );
|
|
}
|
|
if ( 'no' === control.params.changeable ) {
|
|
|
|
// control.container.addClass( 'no-changeable' );
|
|
}
|
|
|
|
/**
|
|
* Toggle show/hide item
|
|
*/
|
|
control.container.on( 'click', '.widget .widget-action, .widget .repeat-control-close, .widget-title', function( e ) {
|
|
e.preventDefault();
|
|
var p = $( this ).closest( '.widget' );
|
|
if ( p.hasClass( 'explained' ) ) {
|
|
|
|
|
|
$( '.widget-inside', p ).slideUp( 200, 'linear', function() {
|
|
$( '.widget-inside', p ).removeClass( 'show' ).addClass( 'hide' );
|
|
p.removeClass( 'explained' );
|
|
});
|
|
} else {
|
|
|
|
|
|
$( '.widget-inside', p ).slideDown( 200, 'linear', function() {
|
|
$( '.widget-inside', p ).removeClass( 'hide' ).addClass( 'show' );
|
|
p.addClass( 'explained' );
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Remove repeater item
|
|
*/
|
|
control.container.on( 'click', '.repeat-control-remove', function( e ) {
|
|
e.preventDefault();
|
|
var $context = $( this ).closest( '.repeatable-customize-control' );
|
|
$( 'body' ).trigger( 'repeat-control-remove-item', [ $context ]);
|
|
control.remove_editor( $context );
|
|
$context.remove();
|
|
control.rename();
|
|
control.updateValue();
|
|
control._check_max_item();
|
|
});
|
|
|
|
/**
|
|
* Get customizer control data
|
|
*
|
|
* @returns {*}
|
|
*/
|
|
control.getData = function() {
|
|
var f = $( '.form-data', control.container );
|
|
|
|
var data = $( 'input, textarea, select', f ).serialize();
|
|
return JSON.stringify( data );
|
|
};
|
|
|
|
/**
|
|
* Update repeater value
|
|
*/
|
|
control.updateValue = function() {
|
|
var data = control.getData();
|
|
|
|
//$("[data-hidden-value]", control.container).val(data);
|
|
//$("[data-hidden-value]", control.container).trigger('change');
|
|
control.setting.set( data );
|
|
};
|
|
control.update_value = function() {
|
|
|
|
var self = this,
|
|
value = {},
|
|
option;
|
|
|
|
self.container.find( '[data-option]' ).each( function() {
|
|
option = $( this ).data( 'option' );
|
|
|
|
if ( 'background-size' === option || 'background-attachment' === option ) {
|
|
value[option] = $( this ).is( ':checked' ) ? $( this ).val() : value[option];
|
|
} else {
|
|
value[option] = $( this ).val();
|
|
}
|
|
});
|
|
|
|
self.setting.set( value );
|
|
};
|
|
|
|
/**
|
|
* Rename repeater item
|
|
*/
|
|
control.rename = function() {
|
|
$( '.list-repeatable li', control.container ).each( function( index ) {
|
|
var li = $( this );
|
|
$( 'input, textarea, select', li ).each( function() {
|
|
var input = $( this );
|
|
var name = input.attr( 'data-repeat-name' ) || undefined;
|
|
if ( 'undefined' !== typeof name ) {
|
|
name = name.replace( /__i__/g, index );
|
|
input.attr( 'name', name );
|
|
}
|
|
});
|
|
});
|
|
};
|
|
control.autocorrect_range_input_number = function( input_number, timeout ) {
|
|
|
|
var range_input = input_number,
|
|
range = range_input.parent().find( 'input[type="range"]' ),
|
|
value = parseFloat( range_input.val() ),
|
|
reset = parseFloat( range.find( '.bloghash-reset-range' ).attr( 'data-reset_value' ) ),
|
|
step = parseFloat( range_input.attr( 'step' ) ),
|
|
min = parseFloat( range_input.attr( 'min' ) ),
|
|
max = parseFloat( range_input.attr( 'max' ) );
|
|
|
|
clearTimeout( timeout );
|
|
|
|
timeout = setTimeout( function() {
|
|
|
|
if ( isNaN( value ) ) {
|
|
range_input.val( reset );
|
|
range.val( reset ).trigger( 'change' );
|
|
return;
|
|
}
|
|
|
|
if ( 1 <= step && 0 !== value % 1 ) {
|
|
value = Math.round( value );
|
|
range_input.val( value );
|
|
range.val( value ).trigger( 'change' );
|
|
}
|
|
|
|
if ( value > max ) {
|
|
range_input.val( max );
|
|
range.val( max ).trigger( 'change' );
|
|
}
|
|
|
|
if ( value < min ) {
|
|
range_input.val( min );
|
|
range.val( min ).trigger( 'change' );
|
|
}
|
|
|
|
}, timeout );
|
|
|
|
range.val( value ).trigger( 'change' );
|
|
control.updateValue();
|
|
};
|
|
if ( ! window._upload_bloghash ) {
|
|
|
|
// var insertImage = wp.media.controller.Library.extend({
|
|
// defaults : _.defaults({
|
|
// id: 'insert-image',
|
|
// title: 'Insert Image Url',
|
|
// allowLocalEdits: true,
|
|
// displaySettings: true,
|
|
// displayUserSettings: true,
|
|
// multiple : false,
|
|
// type : 'image'//audio, video, application/pdf, ... etc
|
|
// }, wp.media.controller.Library.prototype.defaults )
|
|
// });
|
|
|
|
window._upload_bloghash = wp.media({
|
|
title: wp.media.view.l10n.addMedia,
|
|
multiple: false
|
|
|
|
//frame : 'post'
|
|
// library: {type: 'all' },
|
|
//button : { text : 'Insert' }
|
|
});
|
|
}
|
|
window._upload_bloghash.on( 'close', function() {
|
|
|
|
// get selections and save to hidden input plus other AJAX stuff etc.
|
|
var selection = window._upload_bloghash.state().get( 'selection' );
|
|
|
|
|
|
});
|
|
window.media_current = {};
|
|
window.media_btn = {};
|
|
window._upload_bloghash.on( 'select', function() {
|
|
|
|
// Grab our attachment selection and construct a JSON representation of the model.
|
|
var media_attachment = window._upload_bloghash.state().get( 'selection' ).first().toJSON();
|
|
$( '.image_id', window.media_current ).val( media_attachment.id );
|
|
var preview, img_url;
|
|
img_url = media_attachment.url;
|
|
$( '.current', window.media_current ).removeClass( 'hide' ).addClass( 'show' );
|
|
$( '.image_url', window.media_current ).val( img_url );
|
|
if ( 'image' == media_attachment.type ) {
|
|
preview = '<img src="' + img_url + '" alt="">';
|
|
$( '.thumbnail-image', window.media_current ).html( preview );
|
|
}
|
|
$( '.remove-button', window.media_current ).show();
|
|
$( '.image_id', window.media_current ).trigger( 'change' );
|
|
try {
|
|
window.media_btn.text( window.media_btn.attr( 'data-change-txt' ) );
|
|
} catch ( e ) { }
|
|
});
|
|
control.handleMedia = function( $context ) {
|
|
$( '.item-media', $context ).each( function() {
|
|
var _item = $( this );
|
|
// when remove item
|
|
$( '.remove-button', _item ).on( 'click', function( e ) {
|
|
e.preventDefault();
|
|
$( '.image_id, .image_url', _item ).val( '' );
|
|
$( '.thumbnail-image', _item ).html( '' );
|
|
$( '.current', _item ).removeClass( 'show' ).addClass( 'hide' );
|
|
$( this ).hide();
|
|
$( '.upload-button', _item ).text( $( '.upload-button', _item ).attr( 'data-add-txt' ) );
|
|
$( '.image_id', _item ).trigger( 'change' );
|
|
});
|
|
|
|
// when upload item
|
|
$( '.upload-button, .attachment-media-view', _item ).on( 'click', function( e ) {
|
|
e.preventDefault();
|
|
window.media_current = _item;
|
|
window.media_btn = $( this );
|
|
window._upload_bloghash.open();
|
|
});
|
|
});
|
|
};
|
|
|
|
control.handleGradient = function( $context ) {
|
|
var control = this,
|
|
setting = control.setting.get(),
|
|
range,
|
|
range_input,
|
|
value,
|
|
bloghash_range_input_number_timeout,
|
|
popup_content = control.container.find( '.popup-content' );
|
|
|
|
// Range controls.
|
|
|
|
$( '.item-gradient', $context ).each( function() {
|
|
var _item = $( this );
|
|
|
|
_item.find( '.bloghash-range-wrapper' ).each( function() {
|
|
var $this = $( this );
|
|
|
|
$this.rangeControl({
|
|
id: control.params.id + '-' + $this.data( 'option-id' ),
|
|
option: $this.data( 'option-id' ),
|
|
value: setting[$this.data( 'options-id' )],
|
|
responsive: control.params.responsive,
|
|
change: function() {
|
|
control.update_value();
|
|
}
|
|
});
|
|
|
|
// Change the text value
|
|
$this.find( 'input.bloghash-range-input' ).on( 'change keyup', function() {
|
|
control.autocorrect_range_input_number( $( this ), 1000, bloghash_range_input_number_timeout );
|
|
}).on( 'focusout', function() {
|
|
control.autocorrect_range_input_number( $( this ), 0, bloghash_range_input_number_timeout );
|
|
});
|
|
|
|
});
|
|
|
|
|
|
// Visibility deps.
|
|
_item.on( 'change', '[data-option="background-type"], [data-option="gradient-type"]', function() {
|
|
var field = $( this ).attr( 'data-option' );
|
|
_item.find( '[data-dep-field="' + field + '"]' ).hide();
|
|
_item.find( '[data-dep-field="' + field + '"][data-dep-value="' + $( this ).val() + '"]' ).show();
|
|
});
|
|
|
|
_item.find( '[data-option="background-type"], [data-option="gradient-type"]' ).trigger( 'change' );
|
|
|
|
_item.on( 'change', '.bloghash-select-wrapper', function() {
|
|
control.update_value();
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
control.handleBackground = function( $context ) {
|
|
var control = this,
|
|
setting = control.setting.get(),
|
|
range,
|
|
range_input,
|
|
value,
|
|
bloghash_range_input_number_timeout,
|
|
popup_content = control.container.find( '.popup-content' );
|
|
|
|
// Range controls.
|
|
|
|
$( '.item-design-options', $context ).each( function() {
|
|
var _item = $( this );
|
|
|
|
_item.find( '.bloghash-range-wrapper' ).each( function() {
|
|
var $this = $( this );
|
|
|
|
$this.rangeControl({
|
|
id: control.params.id + '-' + $this.data( 'option-id' ),
|
|
option: $this.data( 'option-id' ),
|
|
value: setting[$this.data( 'options-id' )],
|
|
responsive: control.params.responsive,
|
|
change: function() {
|
|
control.update_value();
|
|
}
|
|
});
|
|
|
|
// Change the text value
|
|
$this.find( 'input.bloghash-range-input' ).on( 'change keyup', function() {
|
|
control.autocorrect_range_input_number( $( this ), 1000, bloghash_range_input_number_timeout );
|
|
}).on( 'focusout', function() {
|
|
control.autocorrect_range_input_number( $( this ), 0, bloghash_range_input_number_timeout );
|
|
});
|
|
|
|
});
|
|
|
|
// Visibility deps.
|
|
_item.on( 'change', '[data-option="background-type"], [data-option="gradient-type"]', function() {
|
|
var field = $( this ).attr( 'data-option' );
|
|
_item.find( '[data-dep-field="' + field + '"]' ).hide();
|
|
_item.find( '[data-dep-field="' + field + '"][data-dep-value="' + $( this ).val() + '"]' ).show();
|
|
});
|
|
|
|
_item.find( '[data-option="background-type"], [data-option="gradient-type"]' ).trigger( 'change' );
|
|
|
|
_item.on( 'change', '.bloghash-select-wrapper', function() {
|
|
control.update_value();
|
|
});
|
|
|
|
// Advanced panel.
|
|
_item.find( '.popup-link' ).on( 'click', function() {
|
|
popup_content.toggleClass( 'hidden' );
|
|
$( this ).toggleClass( 'active' );
|
|
$( this ).siblings( '.reset-defaults' ).toggleClass( 'active' );
|
|
|
|
// Close the panel on outside click.
|
|
$( 'body' ).on( 'click', outside_click_close );
|
|
});
|
|
|
|
var outside_click_close = function( e ) {
|
|
|
|
if ( ! $( e.target ).closest( '.customize-save-button-wrapper' ).length &&
|
|
! _item.has( $( e.target ).closest( '.popup-link' ) ).length &&
|
|
! _item.has( $( e.target ).closest( '.popup-content' ) ).length &&
|
|
! popup_content.hasClass( 'hidden' ) &&
|
|
! $( e.target ).closest( '.reset-defaults' ).length ) {
|
|
popup_content.addClass( 'hidden' );
|
|
_item.find( '.popup-link' ).removeClass( 'active' );
|
|
_item.find( '.reset-defaults' ).removeClass( 'active' );
|
|
$( 'body' ).off( 'click', outside_click_close );
|
|
}
|
|
};
|
|
|
|
// Hide unnecessary controls.
|
|
_item.find( '.background-image-advanced' ).hide();
|
|
|
|
// Background-Repeat.
|
|
_item.on( 'change', '.background-repeat select', function() {
|
|
control.update_value();
|
|
});
|
|
|
|
// Background-Size.
|
|
_item.on( 'change click', '.background-size input', function() {
|
|
control.update_value();
|
|
});
|
|
|
|
// Background-Attachment.
|
|
_item.on( 'change click', '.background-attachment input', function() {
|
|
control.update_value();
|
|
});
|
|
|
|
// Background-Image.
|
|
_item.on( 'click', '.background-image-upload-button', function( e ) {
|
|
|
|
$( 'body' ).off( 'click', outside_click_close );
|
|
|
|
var image = wp.media({
|
|
multiple: false,
|
|
title: control.params.l10n.image.select_image,
|
|
button: {
|
|
text: control.params.l10n.image.use_image
|
|
}
|
|
}).open().on( 'select', function() {
|
|
|
|
// This will return the selected image from the Media Uploader, the result is an object.
|
|
var uploadedImage = image.state().get( 'selection' ).first(),
|
|
uploadedImageJSON = uploadedImage.toJSON(),
|
|
previewImage,
|
|
imageUrl,
|
|
imageID,
|
|
imageWidth,
|
|
imageHeight,
|
|
preview,
|
|
removeButton;
|
|
|
|
if ( ! _.isUndefined( uploadedImageJSON.sizes ) ) {
|
|
if ( ! _.isUndefined( uploadedImageJSON.sizes.medium ) ) {
|
|
previewImage = uploadedImageJSON.sizes.medium.url;
|
|
} else if ( ! _.isUndefined( uploadedImageJSON.sizes.thumbnail ) ) {
|
|
previewImage = uploadedImageJSON.sizes.thumbnail.url;
|
|
} else if ( ! _.isUndefined( uploadedImageJSON.sizes.full ) ) {
|
|
previewImage = uploadedImageJSON.sizes.full.url;
|
|
} else {
|
|
previewImage = uploadedImageJSON.url;
|
|
}
|
|
} else {
|
|
previewImage = uploadedImageJSON.url;
|
|
}
|
|
|
|
imageUrl = uploadedImageJSON.url;
|
|
imageID = uploadedImageJSON.id;
|
|
imageWidth = uploadedImageJSON.width;
|
|
imageHeight = uploadedImageJSON.height;
|
|
|
|
// Show extra controls if the value has an image.
|
|
if ( '' !== imageUrl ) {
|
|
_item.find( '.background-image-advanced' ).show();
|
|
_item.find( '.advanced-settings' ).removeClass( 'hidden' ).addClass( 'up' );
|
|
}
|
|
|
|
_item.find( '[data-option="background-image"]' ).val( imageUrl );
|
|
_item.find( '[data-option="background-image-id"]' ).val( imageID );
|
|
|
|
control.update_value();
|
|
|
|
preview = _item.find( '.placeholder, .thumbnail' );
|
|
removeButton = _item.find( '.background-image-upload-remove-button' );
|
|
|
|
if ( preview.length ) {
|
|
preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
|
|
}
|
|
if ( removeButton.length ) {
|
|
removeButton.show();
|
|
}
|
|
|
|
setTimeout( function() {
|
|
$( 'body' ).on( 'click', outside_click_close );
|
|
}, 100 );
|
|
});
|
|
|
|
e.preventDefault();
|
|
});
|
|
|
|
_item.on( 'click', '.background-image-upload-remove-button', function( e ) {
|
|
|
|
var preview,
|
|
removeButton;
|
|
|
|
e.preventDefault();
|
|
|
|
_item.find( '[data-option="background-image"]' ).val( '' );
|
|
_item.find( '[data-option="background-image-id"]' ).val( '' );
|
|
|
|
control.update_value();
|
|
|
|
preview = _item.find( '.placeholder, .thumbnail' );
|
|
removeButton = _item.find( '.background-image-upload-remove-button' );
|
|
|
|
// Hide unnecessary controls.
|
|
_item.find( '.background-image-advanced' ).hide();
|
|
_item.find( '.advanced-settings' ).addClass( 'hidden' ).removeClass( 'up' );
|
|
|
|
if ( preview.length ) {
|
|
preview.removeClass().addClass( 'placeholder' ).html( control.params.l10n.image.placeholder );
|
|
}
|
|
|
|
if ( removeButton.length ) {
|
|
removeButton.hide();
|
|
}
|
|
});
|
|
|
|
_item.on( 'click', '.advanced-settings', function( e ) {
|
|
$( this ).toggleClass( 'up' );
|
|
_item.find( '.background-image-advanced' ).toggle();
|
|
});
|
|
|
|
// Spacing field.
|
|
|
|
// Linked button
|
|
_item.on( 'click', '.bloghash-spacing-linked', function() {
|
|
|
|
// Set up variables
|
|
var $this = $( this );
|
|
|
|
// Remove linked class
|
|
$this.closest( 'ul' ).find( '.spacing-input' ).removeClass( 'linked' );
|
|
|
|
// Remove class
|
|
$this.parent( '.spacing-link-values' ).removeClass( 'unlinked' );
|
|
});
|
|
|
|
// Unlinked button
|
|
_item.on( 'click', '.bloghash-spacing-unlinked', function() {
|
|
|
|
// Set up variables
|
|
var $this = $( this );
|
|
|
|
// Remove linked class
|
|
$this.closest( 'ul' ).find( '.spacing-input' ).addClass( 'linked' );
|
|
|
|
// Remove class
|
|
$this.parent( '.spacing-link-values' ).addClass( 'unlinked' );
|
|
});
|
|
|
|
// Values linked inputs
|
|
_item.on( 'input', '.linked input', function() {
|
|
var $val = $( this ).val();
|
|
$( this ).closest( '.spacing-input' ).siblings( '.linked' ).find( 'input' ).val( $val ).change();
|
|
});
|
|
|
|
// Store new inputs
|
|
_item.on( 'change input', '.spacing-input input', function() {
|
|
control.update_value();
|
|
});
|
|
|
|
// Reset default.
|
|
_item.find( '.reset-defaults' ).on( 'click', function() {
|
|
|
|
var item, option_id;
|
|
|
|
_item.find( '[data-option]' ).each( function() {
|
|
item = $( this );
|
|
option_id = item.data( 'option' );
|
|
|
|
if ( 'background-size' === option_id || 'background-attachment' === option_id ) {
|
|
|
|
item.prop( 'checked', false );
|
|
|
|
if ( ( option_id in control.params.default ) && control.params.default[option_id] === item.val() ) {
|
|
item.prop( 'checked', true );
|
|
}
|
|
|
|
} else {
|
|
item.val( control.params.default[item.data( 'option' )]).trigger( 'change' );
|
|
}
|
|
});
|
|
|
|
_item.find( '.background-image-upload-remove-button' ).click();
|
|
|
|
control.update_value();
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
control.linkPicker = function( $context ){
|
|
if(item_link = $context.find('.bloghash-field-link')) {
|
|
const a = new BloghashLinkField(item_link);
|
|
a.init();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Init color picker
|
|
*
|
|
* @param $context
|
|
*/
|
|
control.colorPicker = function( $context ) {
|
|
|
|
// Add Color Picker to all inputs that have 'color-field' class
|
|
$( '.c-color', $context ).wpColorPicker({
|
|
change: function( event, ui ) {
|
|
control.updateValue();
|
|
},
|
|
clear: function( event, ui ) {
|
|
control.updateValue();
|
|
}
|
|
});
|
|
$( '.c-coloralpha', $context ).each( function() {
|
|
var input = $( this );
|
|
var c = input.val();
|
|
|
|
//c = c.replace('#', '');
|
|
input.removeAttr( 'value' );
|
|
input.prop( 'value', c );
|
|
input.alphaColorPicker({
|
|
change: function( event, ui ) {
|
|
control.updateValue();
|
|
},
|
|
clear: function( event, ui ) {
|
|
control.updateValue();
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Live title events
|
|
*
|
|
* @param $context
|
|
*/
|
|
control.actions = function( $context ) {
|
|
if ( control.params.live_title_id ) {
|
|
if ( ! $context.attr( 'data-title-format' ) ) {
|
|
$context.attr( 'data-title-format', control.params.title_format );
|
|
}
|
|
var format = $context.attr( 'data-title-format' ) || '';
|
|
|
|
// Custom for special ID
|
|
if ( 'bloghash_section_order_styling' === control.id ) {
|
|
if ( 'click' !== $context.find( 'input.add_by' ).val() ) {
|
|
format = '[live_title]';
|
|
}
|
|
}
|
|
|
|
// Live title
|
|
if ( control.params.live_title_id && 0 < $( '[data-live-id=\'' + control.params.live_title_id + '\']', $context ).length ) {
|
|
var v = '';
|
|
if ( $( '[data-live-id=\'' + control.params.live_title_id + '\']', $context ).is( '.select-one' ) ) {
|
|
v = $( '[data-live-id=\'' + control.params.live_title_id + '\']', $context ).find( 'option:selected' ).eq( 0 ).text();
|
|
} else {
|
|
v = $( '[data-live-id=\'' + control.params.live_title_id + '\']', $context ).eq( 0 ).val();
|
|
}
|
|
if ( '' == v ) {
|
|
v = control.params.default_empty_title;
|
|
}
|
|
if ( '' !== format ) {
|
|
v = format.replace( '[live_title]', v );
|
|
}
|
|
$( '.widget-title .live-title', $context ).text( v );
|
|
$context.on( 'keyup change', '[data-live-id=\'' + control.params.live_title_id + '\']', function() {
|
|
var v = '';
|
|
var format = $context.attr( 'data-title-format' ) || '';
|
|
|
|
// custom for special ID
|
|
if ( 'bloghash_section_order_styling' === control.id ) {
|
|
if ( 'click' !== $context.find( 'input.add_by' ).val() ) {
|
|
format = '[live_title]';
|
|
}
|
|
}
|
|
if ( $( this ).is( '.select-one' ) ) {
|
|
v = $( this ).find( 'option:selected' ).eq( 0 ).text();
|
|
} else {
|
|
v = $( this ).val();
|
|
}
|
|
if ( '' == v ) {
|
|
v = control.params.default_empty_title;
|
|
}
|
|
if ( '' !== format ) {
|
|
v = format.replace( '[live_title]', v );
|
|
}
|
|
$( '.widget-title .live-title', $context ).text( v );
|
|
});
|
|
} else { }
|
|
} else {
|
|
|
|
//$('.widget-title .live-title', $context).text( control.params.title_format );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Check limit number item
|
|
*
|
|
* @private
|
|
*/
|
|
control._check_max_item = function() {
|
|
var n = $( '.list-repeatable > li.repeatable-customize-control', control.container ).length;
|
|
|
|
|
|
if ( n >= max_item ) {
|
|
$( '.repeatable-actions', control.container ).hide();
|
|
if ( 0 >= $( '.limited-msg', control.container ).length ) {
|
|
if ( '' !== limited_mg ) {
|
|
var msg = $( '<p class="limited-msg"/>' );
|
|
msg.html( limited_mg );
|
|
msg.insertAfter( $( '.repeatable-actions', control.container ) );
|
|
msg.show();
|
|
}
|
|
} else {
|
|
$( '.limited-msg', control.container ).show();
|
|
}
|
|
} else {
|
|
$( '.repeatable-actions', control.container ).show();
|
|
$( '.limited-msg', control.container ).hide();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function that loads the Mustache template
|
|
*/
|
|
control.repeaterTemplate = _.memoize( function() {
|
|
var compiled,
|
|
|
|
/*
|
|
* Underscore's default ERB-style templates are incompatible with PHP
|
|
* when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax.
|
|
*
|
|
* @see trac ticket #22344.
|
|
*/
|
|
options = {
|
|
evaluate: /<#([\s\S]+?)#>/g,
|
|
interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
|
|
escape: /\{\{([^\}]+?)\}\}(?!\})/g,
|
|
variable: 'data'
|
|
};
|
|
return function( data ) {
|
|
if ( 'undefined' === typeof window.repeater_item_tpl ) {
|
|
window.repeater_item_tpl = $( '#repeatable-js-item-tpl' ).html();
|
|
}
|
|
compiled = _.template( window.repeater_item_tpl, null, options );
|
|
return compiled( data );
|
|
};
|
|
});
|
|
control.template = control.repeaterTemplate();
|
|
|
|
/**
|
|
* Init item events
|
|
*
|
|
* @param $context
|
|
*/
|
|
control.intItem = function( $context ) {
|
|
control.rename();
|
|
control.conditionize( $context );
|
|
control.colorPicker( $context );
|
|
control.linkPicker( $context );
|
|
control.handleMedia( $context );
|
|
control.handleGradient( $context );
|
|
control.handleBackground( $context );
|
|
|
|
//Special check element
|
|
$( '[data-live-id="section_id"]', $context ).each( function() {
|
|
$( this ).closest( '.repeatable-customize-control' ).addClass( 'section-' + $( this ).val() );
|
|
if ( 'map' === $( this ).val() ) {
|
|
$context.addClass( 'show-display-field-only' );
|
|
}
|
|
});
|
|
|
|
// Custom for special IDs
|
|
if ( 'bloghash_section_order_styling' === control.id ) {
|
|
if ( 'click' !== $context.find( 'input.add_by' ).val() ) {
|
|
$context.addClass( 'no-changeable' );
|
|
|
|
// Remove because we never use
|
|
$( '.item-editor textarea', $context ).remove();
|
|
} else {
|
|
$context.find( '.item-title' ).removeClass( 'item-hidden ' );
|
|
$context.find( '.item-title input[type="hidden"]' ).attr( 'type', 'text' );
|
|
$context.find( '.item-section_id' ).removeClass( 'item-hidden ' );
|
|
$context.find( '.item-section_id input[type="hidden"]' ).attr( 'type', 'text' );
|
|
}
|
|
}
|
|
|
|
// Setup editor
|
|
$( '.item-editor textarea', $context ).each( function() {
|
|
control.editor( $( this ) );
|
|
});
|
|
|
|
// Setup editor
|
|
$( 'body' ).trigger( 'repeater-control-init-item', [ $context ]);
|
|
};
|
|
|
|
/**
|
|
* Drag to sort items
|
|
*/
|
|
$( '.list-repeatable', control.container ).sortable({
|
|
handle: '.widget-title',
|
|
|
|
//containment: ".customize-control-repeatable",
|
|
containment: control.container,
|
|
|
|
/// placeholder: "sortable-placeholder",
|
|
update: function( event, ui ) {
|
|
control.rename();
|
|
control.updateValue();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Create existing items
|
|
*/
|
|
_templateData = $.extend( true, {}, control.params.fields );
|
|
var _templateData;
|
|
$.each( values, function( i, _values ) {
|
|
_values = values[i];
|
|
if ( _values ) {
|
|
for ( var j in _values ) {
|
|
if ( _templateData.hasOwnProperty( j ) && _values.hasOwnProperty( j ) ) {
|
|
_templateData[j].value = _values[j];
|
|
}
|
|
}
|
|
}
|
|
var $html = $( control.template( _templateData ) );
|
|
$( '.list-repeatable', control.container ).append( $html );
|
|
control.intItem( $html );
|
|
control.actions( $html );
|
|
});
|
|
|
|
/**
|
|
* Add new item
|
|
*/
|
|
control.container.on( 'click', '.add-new-repeat-item', function() {
|
|
var $html = $( control.template( default_data ) );
|
|
$( '.list-repeatable', control.container ).append( $html );
|
|
|
|
// add unique ID for section if id_key is set
|
|
if ( '' !== control.params.id_key ) {
|
|
$html.find( '.item-' + control.params.id_key ).find( 'input' ).val( 'sid' + ( new Date().getTime() ) );
|
|
}
|
|
$html.find( 'input.add_by' ).val( 'click' );
|
|
control.intItem( $html );
|
|
control.actions( $html );
|
|
control.updateValue();
|
|
control._check_max_item();
|
|
});
|
|
|
|
/**
|
|
* Update repeater data when any events fire.
|
|
*/
|
|
$( '.list-repeatable', control.container ).on( 'keyup change color_change', 'input, select, textarea', function( e ) {
|
|
control.updateValue();
|
|
});
|
|
control._check_max_item();
|
|
|
|
}
|
|
});
|
|
}( wp.customize, jQuery ) );
|
|
|
|
/**
|
|
* Icon picker
|
|
*/
|
|
jQuery( document ).ready( function( $ ) {
|
|
window.editing_icon = false;
|
|
var icon_picker = $( '<div class="c-icon-picker"><div class="c-icon-type-wrap"><select class="c-icon-type"></select></div><div class="c-icon-search"><input class="" type="text"></div><div class="c-icon-list"></div></div>' );
|
|
var options_font_type = '',
|
|
icon_group = '';
|
|
$.each( Bloghash_Icon_Picker.fonts, function( key, font ) {
|
|
font = $.extend({}, {
|
|
url: '',
|
|
name: '',
|
|
prefix: '',
|
|
icons: ''
|
|
}, font );
|
|
$( '<link>' )
|
|
.appendTo( 'head' )
|
|
.attr({
|
|
type: 'text/css',
|
|
rel: 'stylesheet'
|
|
})
|
|
.attr( 'id', 'customizer-icon-' + key )
|
|
.attr( 'href', font.url );
|
|
options_font_type += '<option value="' + key + '">' + font.name + '</option>';
|
|
var icons_array = font.icons.split( '|' );
|
|
icon_group += '<div class="ic-icons-group" style="display: none;" data-group-name="' + key + '">';
|
|
$.each( icons_array, function( index, icon ) {
|
|
if ( font.prefix ) {
|
|
icon = font.prefix + ' ' + icon;
|
|
}
|
|
icon_group += '<span title="' + icon + '" data-name="' + icon + '"><i class="' + icon + '"></i></span>';
|
|
});
|
|
icon_group += '</div>';
|
|
});
|
|
icon_picker.find( '.c-icon-search input' ).attr( 'placeholder', Bloghash_Icon_Picker.search );
|
|
icon_picker.find( '.c-icon-type' ).html( options_font_type );
|
|
icon_picker.find( '.c-icon-list' ).append( icon_group );
|
|
$( '.wp-full-overlay' ).append( icon_picker );
|
|
|
|
// Change icon type
|
|
$( 'body' ).on( 'change', 'select.c-icon-type', function() {
|
|
var t = $( this ).val();
|
|
icon_picker.find( '.ic-icons-group' ).hide();
|
|
icon_picker.find( '.ic-icons-group[data-group-name="' + t + '"]' ).show();
|
|
});
|
|
icon_picker.find( 'select.c-icon-type' ).trigger( 'change' );
|
|
|
|
// When type to search
|
|
$( 'body' ).on( 'keyup', '.c-icon-search input', function() {
|
|
var v = $( this ).val();
|
|
if ( '' == v ) {
|
|
$( '.c-icon-list span' ).show();
|
|
} else {
|
|
$( '.c-icon-list span' ).hide();
|
|
try {
|
|
$( '.c-icon-list span[data-name*="' + v + '"]' ).show();
|
|
} catch ( e ) { }
|
|
}
|
|
});
|
|
|
|
// Edit icon
|
|
$( 'body' ).on( 'click', '.icon-wrapper', function( e ) {
|
|
e.preventDefault();
|
|
var icon = $( this );
|
|
window.editing_icon = icon;
|
|
icon_picker.addClass( 'ic-active' );
|
|
$( 'body' ).find( '.icon-wrapper' ).removeClass( 'icon-editing' );
|
|
icon.addClass( 'icon-editing' );
|
|
});
|
|
|
|
// Remove icon
|
|
$( 'body' ).on( 'click', '.item-icon .remove-icon', function( e ) {
|
|
e.preventDefault();
|
|
var item = $( this ).closest( '.item-icon' );
|
|
item.find( '.icon-wrapper input' ).val( '' );
|
|
item.find( '.icon-wrapper input' ).trigger( 'change' );
|
|
item.find( '.icon-wrapper i' ).attr( 'class', '' );
|
|
$( 'body' ).find( '.icon-wrapper' ).removeClass( 'icon-editing' );
|
|
});
|
|
|
|
// Selected icon
|
|
$( 'body' ).on( 'click', '.c-icon-list span', function( e ) {
|
|
e.preventDefault();
|
|
var icon_name = $( this ).attr( 'data-name' ) || '';
|
|
if ( window.editing_icon ) {
|
|
window.editing_icon.find( 'i' ).attr( 'class', '' ).addClass( $( this ).find( 'i' ).attr( 'class' ) );
|
|
window.editing_icon.find( 'input' ).val( icon_name ).trigger( 'change' );
|
|
}
|
|
icon_picker.removeClass( 'ic-active' );
|
|
window.editing_icon = false;
|
|
$( 'body' ).find( '.icon-wrapper' ).removeClass( 'icon-editing' );
|
|
});
|
|
$( document ).mouseup( function( e ) {
|
|
if ( window.editing_icon ) {
|
|
if ( ! window.editing_icon.is( e.target ) // if the target of the click isn't the container...
|
|
&&
|
|
0 === window.editing_icon.has( e.target ).length // ... nor a descendant of the container
|
|
&&
|
|
( ! icon_picker.is( e.target ) &&
|
|
0 === icon_picker.has( e.target ).length
|
|
)
|
|
) {
|
|
icon_picker.removeClass( 'ic-active' );
|
|
|
|
// window.editing_icon = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
});
|