1154 lines
29 KiB
JavaScript
1154 lines
29 KiB
JavaScript
var consultstreet = {
|
|
|
|
/**
|
|
* An object containing definitions for controls.
|
|
*/
|
|
control: {
|
|
|
|
/**
|
|
* The color control.
|
|
*/
|
|
'consultstreet-color': {
|
|
|
|
/**
|
|
* Init the control.
|
|
*
|
|
* @param {object} [control] The customizer control object.
|
|
* @returns {void}
|
|
*/
|
|
init: function ( control ) {
|
|
var self = this;
|
|
|
|
// Render the template.
|
|
self.template( control );
|
|
|
|
// Init the control.
|
|
consultstreet.input.color.init( control );
|
|
},
|
|
|
|
/**
|
|
* Render the template.
|
|
*
|
|
* @param {object} [control] The customizer control object.
|
|
* @returns {void}
|
|
*/
|
|
template: function ( control ) {
|
|
control.container.html(
|
|
consultstreet.input.color.getTemplate( {
|
|
label: control.params.label,
|
|
description: control.params.description,
|
|
'data-id': control.id,
|
|
mode: control.params.mode,
|
|
inputAttrs: control.params.inputAttrs,
|
|
'data-palette': control.params.palette,
|
|
'data-default-color': control.params.default,
|
|
'data-alpha': control.params.choices.alpha,
|
|
value: control.setting._value
|
|
} )
|
|
);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* An object containing definitions for input fields.
|
|
*/
|
|
input: {
|
|
|
|
/**
|
|
* Color input fields.
|
|
*/
|
|
color: {
|
|
|
|
/**
|
|
* Get the HTML for color inputs.
|
|
*
|
|
* @param {object} [data] The arguments.
|
|
* @returns {string}
|
|
*/
|
|
getTemplate: function ( data ) {
|
|
var html = '';
|
|
|
|
data = _.defaults( data, {
|
|
label: '',
|
|
description: '',
|
|
mode: 'full',
|
|
inputAttrs: '',
|
|
'data-palette': data['data-palette'] ? data['data-palette'] : true,
|
|
'data-default-color': data['data-default-color'] ?
|
|
data['data-default-color'] :
|
|
'',
|
|
'data-alpha': data['data-alpha'] ? data['data-alpha'] : false,
|
|
value: '',
|
|
'data-id': ''
|
|
} );
|
|
|
|
html += '<label>';
|
|
if ( data.label ) {
|
|
html +=
|
|
'<span class="customize-control-title">' + data.label + '</span>';
|
|
}
|
|
if ( data.description ) {
|
|
html +=
|
|
'<span class="description customize-control-description">' +
|
|
data.description +
|
|
'</span>';
|
|
}
|
|
html += '</label>';
|
|
html +=
|
|
'<input type="text" data-type="' +
|
|
data.mode +
|
|
'" ' +
|
|
data.inputAttrs +
|
|
' data-palette="' +
|
|
data['data-palette'] +
|
|
'" data-default-color="' +
|
|
data['data-default-color'] +
|
|
'" data-alpha="' +
|
|
data['data-alpha'] +
|
|
'" value="' +
|
|
data.value +
|
|
'" class="consultstreet-color-control" data-id="' +
|
|
data['data-id'] +
|
|
'"/>';
|
|
|
|
return (
|
|
'<div class="consultstreet-input-container" data-id="' +
|
|
data.id +
|
|
'">' +
|
|
html +
|
|
'</div>'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Init the control.
|
|
*
|
|
* @param {object} [control] The control object.
|
|
* @returns {void}
|
|
*/
|
|
init: function ( control ) {
|
|
var picker = jQuery(
|
|
'.consultstreet-color-control[data-id="' + control.id + '"]'
|
|
),
|
|
clear;
|
|
|
|
control.choices = control.choices || {};
|
|
if ( _.isEmpty( control.choices ) && control.params.choices ) {
|
|
control.choices = control.params.choices;
|
|
}
|
|
|
|
// If we have defined any extra choices, make sure they are passed-on to Iris.
|
|
if ( !_.isEmpty( control.choices ) ) {
|
|
picker.wpColorPicker( control.choices );
|
|
}
|
|
|
|
// Tweaks to make the "clear" buttons work.
|
|
setTimeout( function () {
|
|
clear = jQuery(
|
|
'.consultstreet-input-container[data-id="' +
|
|
control.id +
|
|
'"] .wp-picker-clear'
|
|
);
|
|
if ( clear.length ) {
|
|
clear.click( function () {
|
|
control.setting.set( '' );
|
|
} );
|
|
}
|
|
}, 200 );
|
|
|
|
// Saves our settings to the WP API
|
|
picker.wpColorPicker( {
|
|
change: function () {
|
|
|
|
// Small hack: the picker needs a small delay
|
|
setTimeout( function () {
|
|
control.setting.set( picker.val() );
|
|
}, 20 );
|
|
}
|
|
} );
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* An object containing definitions for settings.
|
|
*/
|
|
setting: {
|
|
|
|
/**
|
|
* Gets the value of a setting.
|
|
*
|
|
* This is a helper function that allows us to get the value of
|
|
* control[key1][key2] for example, when the setting used in the
|
|
* customizer API is "control".
|
|
*
|
|
* @param {string} [setting] The setting for which we're getting the value.
|
|
* @returns {mixed} Depends on the value.
|
|
*/
|
|
get: function ( setting ) {
|
|
var parts = setting.split( '[' ),
|
|
foundSetting = '',
|
|
foundInStep = 0,
|
|
currentVal = '';
|
|
|
|
_.each( parts, function ( part, i ) {
|
|
part = part.replace( ']', '' );
|
|
|
|
if ( 0 === i ) {
|
|
foundSetting = part;
|
|
} else {
|
|
foundSetting += '[' + part + ']';
|
|
}
|
|
|
|
if ( !_.isUndefined( wp.customize.instance( foundSetting ) ) ) {
|
|
currentVal = wp.customize.instance( foundSetting ).get();
|
|
foundInStep = i;
|
|
}
|
|
|
|
if ( foundInStep < i ) {
|
|
if ( _.isObject( currentVal ) && !_.isUndefined( currentVal[part] ) ) {
|
|
currentVal = currentVal[part];
|
|
}
|
|
}
|
|
} );
|
|
|
|
return currentVal;
|
|
},
|
|
|
|
/**
|
|
* Sets the value of a setting.
|
|
*
|
|
* This function is a bit complicated because there any many scenarios to consider.
|
|
* Example: We want to save the value for my_setting[something][3][something-else].
|
|
* The control's setting is my_setting[something].
|
|
* So we need to find that first, then figure out the remaining parts,
|
|
* merge the values recursively to avoid destroying my_setting[something][2]
|
|
* and also take into account any defined "key" arguments which take this even deeper.
|
|
*
|
|
* @param {object|string} [element] The DOM element whose value has changed,
|
|
* or an ID.
|
|
* @param {mixed} [value] Depends on the control-type.
|
|
* @param {string} [key] If we only want to save an item in an object
|
|
* we can define the key here.
|
|
* @returns {void}
|
|
*/
|
|
set: function ( element, value, key ) {
|
|
var setting,
|
|
parts,
|
|
currentNode = '',
|
|
foundNode = '',
|
|
subSettingObj = {},
|
|
currentVal,
|
|
subSetting,
|
|
subSettingParts;
|
|
|
|
// Get the setting from the element.
|
|
setting = element;
|
|
if ( _.isObject( element ) ) {
|
|
if ( jQuery( element ).attr( 'data-id' ) ) {
|
|
setting = element.attr( 'data-id' );
|
|
} else {
|
|
setting = element.parents( '[data-id]' ).attr( 'data-id' );
|
|
}
|
|
}
|
|
|
|
(
|
|
parts = setting.split( '[' )
|
|
),
|
|
|
|
// Find the setting we're using in the control using the customizer API.
|
|
_.each( parts, function ( part, i ) {
|
|
part = part.replace( ']', '' );
|
|
|
|
// The current part of the setting.
|
|
currentNode = 0 === i ? part : '[' + part + ']';
|
|
|
|
// When we find the node, get the value from it.
|
|
// In case of an object we'll need to merge with current values.
|
|
if ( !_.isUndefined( wp.customize.instance( currentNode ) ) ) {
|
|
foundNode = currentNode;
|
|
currentVal = wp.customize.instance( foundNode ).get();
|
|
}
|
|
} );
|
|
|
|
// Get the remaining part of the setting that was unused.
|
|
subSetting = setting.replace( foundNode, '' );
|
|
|
|
// If subSetting is not empty, then we're dealing with an object
|
|
// and we need to dig deeper and recursively merge the values.
|
|
if ( '' !== subSetting ) {
|
|
if ( !_.isObject( currentVal ) ) {
|
|
currentVal = {};
|
|
}
|
|
if ( '[' === subSetting.charAt( 0 ) ) {
|
|
subSetting = subSetting.replace( '[', '' );
|
|
}
|
|
subSettingParts = subSetting.split( '[' );
|
|
_.each( subSettingParts, function ( subSettingPart, i ) {
|
|
subSettingParts[i] = subSettingPart.replace( ']', '' );
|
|
} );
|
|
|
|
// If using a key, we need to go 1 level deeper.
|
|
if ( key ) {
|
|
subSettingParts.push( key );
|
|
}
|
|
|
|
// Converting to a JSON string and then parsing that to an object
|
|
// may seem a bit hacky and crude but it's efficient and works.
|
|
subSettingObj =
|
|
'{"' +
|
|
subSettingParts.join( '":{"' ) +
|
|
'":"' +
|
|
value +
|
|
'"' +
|
|
'}'.repeat( subSettingParts.length );
|
|
subSettingObj = JSON.parse( subSettingObj );
|
|
|
|
// Recursively merge with current value.
|
|
jQuery.extend( true, currentVal, subSettingObj );
|
|
value = currentVal;
|
|
} else {
|
|
if ( key ) {
|
|
currentVal = !_.isObject( currentVal ) ? {} : currentVal;
|
|
currentVal[key] = value;
|
|
value = currentVal;
|
|
}
|
|
}
|
|
wp.customize.control( foundNode ).setting.set( value );
|
|
}
|
|
}
|
|
};
|
|
|
|
(
|
|
function () {
|
|
'use strict';
|
|
|
|
/**
|
|
* A dynamic color-alpha control.
|
|
*
|
|
* @class
|
|
* @augments wp.customize.Control
|
|
* @augments wp.customize.Class
|
|
*/
|
|
wp.customize.consultstreetDynamicControl = wp.customize.Control.extend( {
|
|
initialize: function ( id, options ) {
|
|
var control = this,
|
|
args = options || {};
|
|
|
|
args.params = args.params || {};
|
|
if ( !args.params.type ) {
|
|
args.params.type = 'consultstreet-generic';
|
|
}
|
|
if ( !args.params.content ) {
|
|
args.params.content = jQuery( '<li></li>' );
|
|
args.params.content.attr(
|
|
'id',
|
|
'customize-control-' + id.replace( /]/g, '' ).replace( /\[/g, '-' )
|
|
);
|
|
args.params.content.attr(
|
|
'class',
|
|
'customize-control customize-control-' + args.params.type
|
|
);
|
|
}
|
|
|
|
control.propertyElements = [];
|
|
wp.customize.Control.prototype.initialize.call( control, id, args );
|
|
},
|
|
|
|
/**
|
|
* Add bidirectional data binding links between inputs and the setting(s).
|
|
*
|
|
* This is copied from wp.customize.Control.prototype.initialize(). It
|
|
* should be changed in Core to be applied once the control is embedded.
|
|
*
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_setUpSettingRootLinks: function () {
|
|
var control = this,
|
|
nodes = control.container.find( '[data-customize-setting-link]' );
|
|
|
|
nodes.each( function () {
|
|
var node = jQuery( this );
|
|
|
|
wp.customize( node.data( 'customizeSettingLink' ), function ( setting ) {
|
|
var element = new wp.customize.Element( node );
|
|
control.elements.push( element );
|
|
element.sync( setting );
|
|
element.set( setting() );
|
|
} );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Add bidirectional data binding links between inputs and the setting properties.
|
|
*
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_setUpSettingPropertyLinks: function () {
|
|
var control = this,
|
|
nodes;
|
|
|
|
if ( !control.setting ) {
|
|
return;
|
|
}
|
|
|
|
nodes = control.container.find( '[data-customize-setting-property-link]' );
|
|
|
|
nodes.each( function () {
|
|
var node = jQuery( this ),
|
|
element,
|
|
propertyName = node.data( 'customizeSettingPropertyLink' );
|
|
|
|
element = new wp.customize.Element( node );
|
|
control.propertyElements.push( element );
|
|
element.set( control.setting()[propertyName] );
|
|
|
|
element.bind( function ( newPropertyValue ) {
|
|
var newSetting = control.setting();
|
|
if ( newPropertyValue === newSetting[propertyName] ) {
|
|
return;
|
|
}
|
|
newSetting = _.clone( newSetting );
|
|
newSetting[propertyName] = newPropertyValue;
|
|
control.setting.set( newSetting );
|
|
} );
|
|
control.setting.bind( function ( newValue ) {
|
|
if ( newValue[propertyName] !== element.get() ) {
|
|
element.set( newValue[propertyName] );
|
|
}
|
|
} );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
ready: function () {
|
|
var control = this;
|
|
|
|
control._setUpSettingRootLinks();
|
|
control._setUpSettingPropertyLinks();
|
|
|
|
wp.customize.Control.prototype.ready.call( control );
|
|
|
|
control.deferred.embedded.done( function () {
|
|
control.initConsultStreetControl( control );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Embed the control in the document.
|
|
*
|
|
* Override the embed() method to do nothing,
|
|
* so that the control isn't embedded on load,
|
|
* unless the containing section is already expanded.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
embed: function () {
|
|
var control = this,
|
|
sectionId = control.section();
|
|
|
|
if ( !sectionId ) {
|
|
return;
|
|
}
|
|
|
|
wp.customize.section( sectionId, function ( section ) {
|
|
if (
|
|
'consultstreet-expanded' === section.params.type ||
|
|
section.expanded() ||
|
|
wp.customize.settings.autofocus.control === control.id
|
|
) {
|
|
control.actuallyEmbed();
|
|
} else {
|
|
section.expanded.bind( function ( expanded ) {
|
|
if ( expanded ) {
|
|
control.actuallyEmbed();
|
|
}
|
|
} );
|
|
}
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Deferred embedding of control when actually
|
|
*
|
|
* This function is called in Section.onChangeExpanded() so the control
|
|
* will only get embedded when the Section is first expanded.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
actuallyEmbed: function () {
|
|
var control = this;
|
|
if ( 'resolved' === control.deferred.embedded.state() ) {
|
|
return;
|
|
}
|
|
control.renderContent();
|
|
control.deferred.embedded.resolve(); // This triggers control.ready().
|
|
},
|
|
|
|
/**
|
|
* This is not working with autofocus.
|
|
*
|
|
* @param {object} [args] Args.
|
|
* @returns {void}
|
|
*/
|
|
focus: function ( args ) {
|
|
var control = this;
|
|
control.actuallyEmbed();
|
|
wp.customize.Control.prototype.focus.call( control, args );
|
|
},
|
|
|
|
/**
|
|
* Additional actions that run on ready.
|
|
*
|
|
* @param {object} [args] Args.
|
|
* @returns {void}
|
|
*/
|
|
initConsultStreetControl: function ( control ) {
|
|
if ( 'undefined' !== typeof consultstreet.control[control.params.type] ) {
|
|
consultstreet.control[control.params.type].init( control );
|
|
return;
|
|
}
|
|
|
|
// Save the value
|
|
this.container.on( 'change keyup paste click', 'input', function () {
|
|
control.setting.set( jQuery( this ).val() );
|
|
} );
|
|
},
|
|
|
|
consultstreetValidateCSSValue: function ( value ) {
|
|
var validUnits = [
|
|
'rem',
|
|
'em',
|
|
'ex',
|
|
'%',
|
|
'px',
|
|
'cm',
|
|
'mm',
|
|
'pt'
|
|
],
|
|
numericValue,
|
|
unit;
|
|
|
|
// 0 is always a valid value, and we can't check calc() values effectively.
|
|
if (
|
|
'0' === value ||
|
|
(
|
|
0 <= value.indexOf( 'calc(' ) && 0 <= value.indexOf( ')' )
|
|
)
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
// Get the numeric value.
|
|
numericValue = parseFloat( value );
|
|
|
|
// Get the unit
|
|
unit = value.replace( numericValue, '' );
|
|
|
|
// Check the validity of the numeric value and units.
|
|
if ( isNaN( numericValue ) || -1 === jQuery.inArray( unit, validUnits ) ) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
} );
|
|
}()
|
|
);
|
|
|
|
_.each( consultstreet.control, function ( obj, type ) {
|
|
wp.customize.controlConstructor[
|
|
type
|
|
] = wp.customize.consultstreetDynamicControl.extend( {} );
|
|
} );
|
|
|
|
|
|
/**
|
|
* Control: Slider.
|
|
*/
|
|
wp.customize.controlConstructor['consultstreet-slider'] = wp.customize.Control.extend( {
|
|
|
|
// When we're finished loading continue processing
|
|
ready: function () {
|
|
'use strict';
|
|
|
|
var control = this,
|
|
changeAction = (
|
|
'postMessage' === control.setting.transport
|
|
) ? 'mousemove change' : 'change',
|
|
slider = control.container.find( '.consultstreet-slider' ),
|
|
input = control.container.find( 'input.slider-input' ),
|
|
min = Number( input.attr( 'min' ) ),
|
|
max = Number( input.attr( 'max' ) ),
|
|
step = Number( input.attr( 'step' ) ),
|
|
$this,
|
|
val;
|
|
|
|
slider.slider( {
|
|
range: 'min',
|
|
min: min,
|
|
max: max,
|
|
value: input.val(),
|
|
step: step,
|
|
slide: function ( event, ui ) {
|
|
// Trigger keyup in input.
|
|
input.val( ui.value ).keyup();
|
|
},
|
|
change: function ( event, ui ) {
|
|
|
|
// Save the values.
|
|
control.initConsultStreetControl();
|
|
}
|
|
} );
|
|
|
|
input.on( 'change keyup paste', function () {
|
|
$this = jQuery( this );
|
|
val = $this.val();
|
|
|
|
slider.slider( 'value', val );
|
|
} );
|
|
|
|
// Change on input.
|
|
control.container.on(
|
|
'change keyup paste',
|
|
'.customize-control-content input.slider-input',
|
|
function () {
|
|
control.setting.set( jQuery( this ).val() );
|
|
}
|
|
);
|
|
|
|
// Reset.
|
|
control.container.find( '.slider-reset' ).on( 'click', function () {
|
|
input.attr( 'value', control.params.default.slider );
|
|
slider.slider( 'value', control.params.default.slider );
|
|
control.setting.set( input.val() );
|
|
} );
|
|
|
|
// Init the control.
|
|
if ( !_.isUndefined( window.consultstreetControlLoader ) && _.isFunction( consultstreetControlLoader ) ) {
|
|
consultstreetControlLoader( control );
|
|
} else {
|
|
control.initConsultStreetControl();
|
|
}
|
|
},
|
|
|
|
initConsultStreetControl: function () {
|
|
|
|
var control = this,
|
|
subControls = control.params.choices.controls,
|
|
value = {},
|
|
subsArray = [],
|
|
i;
|
|
|
|
_.each( subControls, function ( v, i ) {
|
|
if ( true === v ) {
|
|
subsArray.push( i );
|
|
}
|
|
} );
|
|
|
|
for ( i = 0; i < subsArray.length; i++ ) {
|
|
value[subsArray[i]] = control.setting._value[subsArray[i]];
|
|
control.updateSliderValue( subsArray[i], value );
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Updates the value.
|
|
*/
|
|
updateSliderValue: function ( context, value ) {
|
|
|
|
var control = this;
|
|
|
|
control.container.on( 'change keyup paste', 'input.slider-input', function () {
|
|
value['slider'] = jQuery( this ).val();
|
|
value['suffix'] = jQuery( this ).next().val();
|
|
|
|
// Save the value
|
|
control.saveValue( value );
|
|
} );
|
|
|
|
// TODO: find a way to merge event.
|
|
control.container.on( 'click', '.slider-reset', function () {
|
|
value['slider'] = jQuery( this ).siblings('.slider-input').val();
|
|
value['suffix'] = jQuery( this ).prev().val();
|
|
|
|
// Save the value
|
|
control.saveValue( value );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Saves the value.
|
|
*/
|
|
saveValue: function ( value ) {
|
|
var control = this,
|
|
newValue = {};
|
|
_.each( value, function ( newSubValue, i ) {
|
|
newValue[i] = newSubValue;
|
|
} );
|
|
|
|
control.setting.set( newValue );
|
|
}
|
|
} );
|
|
|
|
/**
|
|
* Control: Text.
|
|
*/
|
|
wp.customize.controlConstructor['consultstreet-text'] = wp.customize.Control.extend( {
|
|
|
|
// When we're finished loading continue processing.
|
|
ready: function () {
|
|
'use strict';
|
|
|
|
var control = this;
|
|
|
|
// Save the values
|
|
control.container.on(
|
|
'change keyup paste',
|
|
'.customize-control-content input',
|
|
function () {
|
|
control.setting.set( jQuery( this ).val() );
|
|
}
|
|
);
|
|
}
|
|
} );
|
|
|
|
/**
|
|
* Control: Sortable.
|
|
*/
|
|
/* global consultstreetControlLoader */
|
|
wp.customize.controlConstructor['consultstreet-sortable'] = wp.customize.Control.extend( {
|
|
|
|
// When we're finished loading continue processing
|
|
ready: function () {
|
|
'use strict';
|
|
|
|
var control = this;
|
|
|
|
// Init the control.
|
|
if (
|
|
!_.isUndefined( window.consultstreetControlLoader ) &&
|
|
_.isFunction( consultstreetControlLoader )
|
|
) {
|
|
consultstreetControlLoader( control );
|
|
} else {
|
|
control.initConsultStreetControl();
|
|
}
|
|
},
|
|
|
|
initConsultStreetControl: function () {
|
|
'use strict';
|
|
|
|
var control = this;
|
|
control.container.find( '.consultstreet-controls-loading-spinner' ).hide();
|
|
|
|
// Set the sortable container.
|
|
control.sortableContainer = control.container.find( 'ul.sortable' ).first();
|
|
|
|
// Init sortable.
|
|
control.sortableContainer
|
|
.sortable( {
|
|
|
|
// Update value when we stop sorting.
|
|
stop: function () {
|
|
control.updateValue();
|
|
}
|
|
} )
|
|
.disableSelection()
|
|
.find( 'li' )
|
|
.each( function () {
|
|
|
|
// Enable/disable options when we click on the eye of Thundera.
|
|
jQuery( this )
|
|
.find( 'i.visibility' )
|
|
.click( function () {
|
|
jQuery( this )
|
|
.toggleClass( 'dashicons-visibility-faint' )
|
|
.parents( 'li:eq(0)' )
|
|
.toggleClass( 'invisible' );
|
|
} );
|
|
} )
|
|
.click( function () {
|
|
|
|
// Update value on click.
|
|
control.updateValue();
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Updates the sorting list
|
|
*/
|
|
updateValue: function () {
|
|
'use strict';
|
|
|
|
var control = this,
|
|
newValue = [];
|
|
|
|
this.sortableContainer.find( 'li' ).each( function () {
|
|
if ( !jQuery( this ).is( '.invisible' ) ) {
|
|
newValue.push( jQuery( this ).data( 'value' ) );
|
|
}
|
|
} );
|
|
control.setting.set( newValue );
|
|
}
|
|
} );
|
|
|
|
/**
|
|
* Control: Radio image.
|
|
*/
|
|
wp.customize.controlConstructor['consultstreet-radio-image'] = wp.customize.consultstreetDynamicControl.extend( {} );
|
|
|
|
/**
|
|
* Control: Toggle.
|
|
*/
|
|
wp.customize.controlConstructor['consultstreet-toggle'] = wp.customize.consultstreetDynamicControl.extend( {
|
|
|
|
// When we're finished loading continue processing
|
|
ready: function () {
|
|
'use strict';
|
|
|
|
var control = this;
|
|
|
|
// Init the control.
|
|
if (
|
|
!_.isUndefined( window.consultstreetControlLoader ) &&
|
|
_.isFunction( consultstreetControlLoader )
|
|
) {
|
|
consultstreetControlLoader( control );
|
|
} else {
|
|
control.initConsultStreetControl();
|
|
}
|
|
},
|
|
|
|
initConsultStreetControl: function () {
|
|
var control = this,
|
|
checkboxValue = control.setting._value;
|
|
|
|
// Save the value
|
|
this.container.on( 'change', 'input', function () {
|
|
checkboxValue = jQuery( this ).is( ':checked' ) ? true : false;
|
|
control.setting.set( checkboxValue );
|
|
} );
|
|
}
|
|
} );
|
|
|
|
/**
|
|
* Control: Radio Buttonset.
|
|
*/
|
|
wp.customize.controlConstructor['consultstreet-radio-buttonset'] = wp.customize.Control.extend( {} );
|
|
|
|
/**
|
|
* Control: Dimensions.
|
|
*/
|
|
;
|
|
/* global dimensionsconsultstreetL10n */
|
|
/* global consultstreetControlLoader */
|
|
wp.customize.controlConstructor['consultstreet-dimensions'] = wp.customize.consultstreetDynamicControl.extend( {
|
|
|
|
// When we're finished loading continue processing
|
|
ready: function () {
|
|
'use strict';
|
|
|
|
var control = this;
|
|
|
|
// Init the control.
|
|
if ( !_.isUndefined( window.consultstreetControlLoader ) && _.isFunction( consultstreetControlLoader ) ) {
|
|
consultstreetControlLoader( control );
|
|
} else {
|
|
control.initConsultStreetControl();
|
|
}
|
|
},
|
|
|
|
initConsultStreetControl: function () {
|
|
|
|
var control = this,
|
|
subControls = control.params.choices.controls,
|
|
value = {},
|
|
subsArray = [],
|
|
i;
|
|
|
|
_.each( subControls, function ( v, i ) {
|
|
if ( true === v ) {
|
|
subsArray.push( i );
|
|
}
|
|
} );
|
|
|
|
for ( i = 0; i < subsArray.length; i++ ) {
|
|
value[subsArray[i]] = control.setting._value[subsArray[i]];
|
|
control.updateDimensionsValue( subsArray[i], value );
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Updates the value.
|
|
*/
|
|
updateDimensionsValue: function ( context, value ) {
|
|
|
|
var control = this;
|
|
|
|
control.container.on( 'change keyup paste', '.' + context + ' input', function () {
|
|
value[context] = jQuery( this ).val();
|
|
|
|
// Notifications.
|
|
control.consultstreetNotifications();
|
|
|
|
// Save the value
|
|
control.saveValue( value );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Saves the value.
|
|
*/
|
|
saveValue: function ( value ) {
|
|
|
|
var control = this,
|
|
newValue = {};
|
|
|
|
_.each( value, function ( newSubValue, i ) {
|
|
newValue[i] = newSubValue;
|
|
} );
|
|
|
|
control.setting.set( newValue );
|
|
},
|
|
|
|
/**
|
|
* Handles notifications.
|
|
*/
|
|
consultstreetNotifications: function () {
|
|
|
|
var control = this;
|
|
|
|
wp.customize( control.id, function ( setting ) {
|
|
setting.bind( function ( value ) {
|
|
var code = 'long_title',
|
|
subs = {},
|
|
message;
|
|
|
|
setting.notifications.remove( code );
|
|
|
|
_.each( ['top', 'right', 'bottom', 'left'], function ( direction ) {
|
|
if ( !_.isUndefined( value[direction] ) ) {
|
|
if ( false === control.consultstreetValidateCSSValue( value[direction] ) ) {
|
|
subs[direction] = dimensionsconsultstreetL10n[direction];
|
|
} else {
|
|
delete subs[direction];
|
|
}
|
|
}
|
|
} );
|
|
|
|
if ( !_.isEmpty( subs ) ) {
|
|
message = dimensionsconsultstreetL10n['invalid-value'] + ' (' + _.values( subs ).toString() + ') ';
|
|
setting.notifications.add( code, new wp.customize.Notification(
|
|
code,
|
|
{
|
|
type: 'warning',
|
|
message: message
|
|
}
|
|
) );
|
|
} else {
|
|
setting.notifications.remove( code );
|
|
}
|
|
} );
|
|
} );
|
|
}
|
|
} );
|
|
|
|
/**
|
|
* Control: Background.
|
|
*/
|
|
;
|
|
/* global consultstreetControlLoader */
|
|
wp.customize.controlConstructor['consultstreet-background'] = wp.customize.Control.extend( {
|
|
|
|
// When we're finished loading continue processing
|
|
ready: function () {
|
|
|
|
'use strict';
|
|
|
|
var control = this;
|
|
|
|
// Init the control.
|
|
if ( !_.isUndefined( window.consultstreetControlLoader ) && _.isFunction( consultstreetControlLoader ) ) {
|
|
consultstreetControlLoader( control );
|
|
} else {
|
|
control.initConsultStreetControl();
|
|
}
|
|
},
|
|
|
|
initConsultStreetControl: function () {
|
|
|
|
var control = this,
|
|
value = control.setting._value,
|
|
picker = control.container.find( '.consultstreet-color-control' );
|
|
|
|
// Hide unnecessary controls if the value doesn't have an image.
|
|
if ( _.isUndefined( value['background-image'] ) || '' === value['background-image'] ) {
|
|
control.container.find( '.background-wrapper > .background-repeat' ).hide();
|
|
control.container.find( '.background-wrapper > .background-position' ).hide();
|
|
control.container.find( '.background-wrapper > .background-size' ).hide();
|
|
control.container.find( '.background-wrapper > .background-attachment' ).hide();
|
|
}
|
|
|
|
// Color.
|
|
picker.wpColorPicker( {
|
|
change: function () {
|
|
setTimeout( function () {
|
|
control.saveValue( 'background-color', picker.val() );
|
|
}, 100 );
|
|
}
|
|
} );
|
|
|
|
// Background-Repeat.
|
|
control.container.on( 'change', '.background-repeat select', function () {
|
|
control.saveValue( 'background-repeat', jQuery( this ).val() );
|
|
} );
|
|
|
|
// Background-Size.
|
|
control.container.on( 'change click', '.background-size input', function () {
|
|
control.saveValue( 'background-size', jQuery( this ).val() );
|
|
} );
|
|
|
|
// Background-Position.
|
|
control.container.on( 'change', '.background-position select', function () {
|
|
control.saveValue( 'background-position', jQuery( this ).val() );
|
|
} );
|
|
|
|
// Background-Attachment.
|
|
control.container.on( 'change click', '.background-attachment input', function () {
|
|
control.saveValue( 'background-attachment', jQuery( this ).val() );
|
|
} );
|
|
|
|
// Background-Image.
|
|
control.container.on( 'click', '.background-image-upload-button', function ( e ) {
|
|
var image = wp.media( {multiple: false} ).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(),
|
|
previewImage = uploadedImage.toJSON().sizes.full.url,
|
|
imageUrl,
|
|
imageID,
|
|
imageWidth,
|
|
imageHeight,
|
|
preview,
|
|
removeButton;
|
|
|
|
if ( !_.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
|
|
previewImage = uploadedImage.toJSON().sizes.medium.url;
|
|
} else if ( !_.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) {
|
|
previewImage = uploadedImage.toJSON().sizes.thumbnail.url;
|
|
}
|
|
|
|
imageUrl = uploadedImage.toJSON().sizes.full.url;
|
|
imageID = uploadedImage.toJSON().id;
|
|
imageWidth = uploadedImage.toJSON().width;
|
|
imageHeight = uploadedImage.toJSON().height;
|
|
|
|
// Show extra controls if the value has an image.
|
|
if ( '' !== imageUrl ) {
|
|
control.container.find( '.background-wrapper > .background-repeat, .background-wrapper > .background-position, .background-wrapper > .background-size, .background-wrapper > .background-attachment' ).show();
|
|
}
|
|
|
|
control.saveValue( 'background-image', imageUrl );
|
|
preview = control.container.find( '.placeholder, .thumbnail' );
|
|
removeButton = control.container.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();
|
|
}
|
|
} );
|
|
|
|
e.preventDefault();
|
|
} );
|
|
|
|
control.container.on( 'click', '.background-image-upload-remove-button', function ( e ) {
|
|
|
|
var preview,
|
|
removeButton;
|
|
|
|
e.preventDefault();
|
|
|
|
control.saveValue( 'background-image', '' );
|
|
|
|
preview = control.container.find( '.placeholder, .thumbnail' );
|
|
removeButton = control.container.find( '.background-image-upload-remove-button' );
|
|
|
|
// Hide unnecessary controls.
|
|
control.container.find( '.background-wrapper > .background-repeat' ).hide();
|
|
control.container.find( '.background-wrapper > .background-position' ).hide();
|
|
control.container.find( '.background-wrapper > .background-size' ).hide();
|
|
control.container.find( '.background-wrapper > .background-attachment' ).hide();
|
|
|
|
if ( preview.length ) {
|
|
preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' );
|
|
}
|
|
if ( removeButton.length ) {
|
|
removeButton.hide();
|
|
}
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Saves the value.
|
|
*/
|
|
saveValue: function ( property, value ) {
|
|
|
|
var control = this,
|
|
input = jQuery( '#customize-control-' + control.id.replace( '[', '-' ).replace( ']', '' ) + ' .background-hidden-value' ),
|
|
val = control.setting._value;
|
|
|
|
val[property] = value;
|
|
|
|
jQuery( input ).attr( 'value', JSON.stringify( val ) ).trigger( 'change' );
|
|
control.setting.set( val );
|
|
}
|
|
} );
|
|
|
|
/**
|
|
* Control: Editor.
|
|
*/
|
|
wp.customize.controlConstructor['consultstreet-editor'] = wp.customize.consultstreetDynamicControl.extend( {
|
|
|
|
initConsultStreetControl: function () {
|
|
|
|
var control = this,
|
|
element = control.container.find( 'textarea' ),
|
|
editor;
|
|
|
|
control_id = control.id.replace( '[', '' ).replace( ']', '' );
|
|
|
|
var id = 'consultstreet-editor-' + control_id;
|
|
|
|
wp.editor.initialize( id, {
|
|
tinymce: {
|
|
wpautop: true
|
|
},
|
|
quicktags: true,
|
|
mediaButtons: true
|
|
} );
|
|
|
|
editor = tinyMCE.get( id );
|
|
|
|
if ( editor ) {
|
|
editor.onChange.add( function ( ed ) {
|
|
var content;
|
|
|
|
ed.save();
|
|
content = editor.getContent();
|
|
element.val( content ).trigger( 'change' );
|
|
wp.customize.instance( control.id ).set( content );
|
|
} );
|
|
}
|
|
}
|
|
|
|
} );
|