1134 lines
36 KiB
JavaScript
1134 lines
36 KiB
JavaScript
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);
|
|
});
|
|
} |