jQuery(document).on('oceanready', function() {
var $ = jQuery;
"use strict";
/**
* Sortable Repeater Custom Control
*
* @author Anthony Hortin <http://maddisondesigns.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
* @link https://github.com/maddisondesigns
*/
// Update the values for all our input fields and initialise the sortable repeater
$('.sortable_repeater_control:not(.ocean-proccessed)').each(function() {
$(this).addClass('ocean-proccessed');
// If there is an existing customizer value, populate our rows
var defaultValuesArray = $(this).find('.customize-control-sortable-repeater').val().split(',');
var numRepeaterItems = defaultValuesArray.length;
if (numRepeaterItems > 0) {
// Add the first item to our existing input field
$(this).find('.repeater-input').val(defaultValuesArray[0]);
// Create a new row for each new value
if (numRepeaterItems > 1) {
var i;
for (i = 1; i < numRepeaterItems; ++i) {
skyrocketAppendRow($(this), defaultValuesArray[i]);
}
}
}
});
// Make our Repeater fields sortable
$(this).find('.sortable_repeater.sortable:not(.ocean-proccessed)').sortable({
update: function(event, ui) {
skyrocketGetAllInputs($(this).parent());
}
});
$(this).find('.sortable_repeater.sortable:not(.ocean-proccessed)').addClass('ocean-proccessed');
// Remove item starting from it's parent element
$('.sortable_repeater.sortable:not(.ocean-proccessed)').on('click', '.customize-control-sortable-repeater-delete', function(event) {
$(this).addClass('ocean-proccessed');
event.preventDefault();
var numItems = $(this).parent().parent().find('.repeater').length;
if (numItems > 1) {
$(this).parent().slideUp('fast', function() {
var parentContainer = $(this).parent().parent();
$(this).remove();
skyrocketGetAllInputs(parentContainer);
})
} else {
$(this).parent().find('.repeater-input').val('');
skyrocketGetAllInputs($(this).parent().parent().parent());
}
});
// Add new item
$('.customize-control-sortable-repeater-add:not(.ocean-proccessed)').click(function(event) {
$(this).addClass('ocean-proccessed');
event.preventDefault();
skyrocketAppendRow($(this).parent());
skyrocketGetAllInputs($(this).parent());
});
// Refresh our hidden field if any fields change
$('.sortable_repeater.sortable:not(.ocean-proccessed)').change(function() {
$(this).addClass('ocean-proccessed');
skyrocketGetAllInputs($(this).parent());
})
// Add https:// to the start of the URL if it doesn't have it
$('.sortable_repeater.sortable:not(.ocean-proccessed)').on('blur', '.repeater-input', function() {
$(this).addClass('ocean-proccessed');
var url = $(this);
var val = url.val();
if (val && !val.match(/^.+:\/\/.*/)) {
// Important! Make sure to trigger change event so Customizer knows it has to save the field
url.val('https://' + val).trigger('change');
}
});
// Append a new row to our list of elements
function skyrocketAppendRow($element, defaultValue = '') {
var newRow = '<div class="repeater" style="display:none"><input type="text" value="' + defaultValue + '" class="repeater-input" placeholder="https://" /><span class="dashicons dashicons-sort"></span><a class="customize-control-sortable-repeater-delete" href="#"><span class="dashicons dashicons-no-alt"></span></a></div>';
$element.find('.sortable').append(newRow);
$element.find('.sortable').find('.repeater:last').slideDown('slow', function() {
$(this).find('input').focus();
});
}
// Get the values from the repeater input fields and add to our hidden field
function skyrocketGetAllInputs($element) {
var inputValues = $element.find('.repeater-input').map(function() {
return $(this).val();
}).toArray();
// Add all the values from our repeater fields to the hidden field (which is the one that actually gets saved)
$element.find('.customize-control-sortable-repeater').val(inputValues);
// Important! Make sure to trigger change event so Customizer knows it has to save the field
$element.find('.customize-control-sortable-repeater').trigger('change');
}
/**
* Slider Custom Control
*
* @author Anthony Hortin <http://maddisondesigns.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
* @link https://github.com/maddisondesigns
*/
// Set our slider defaults and initialise the slider
$('.slider-custom-control:not(.ocean-proccessed)').each(function() {
$(this).addClass('ocean-proccessed');
var sliderValue = $(this).find('.customize-control-slider-value').val();
var newSlider = $(this).find('.slider');
var sliderMinValue = parseFloat(newSlider.attr('slider-min-value'));
var sliderMaxValue = parseFloat(newSlider.attr('slider-max-value'));
var sliderStepValue = parseFloat(newSlider.attr('slider-step-value'));
newSlider.slider({
value: sliderValue,
min: sliderMinValue,
max: sliderMaxValue,
step: sliderStepValue,
change: function(e, ui) {
// Important! When slider stops moving make sure to trigger change event so Customizer knows it has to save the field
$(this).parent().find('.customize-control-slider-value').trigger('change');
}
});
});
// Change the value of the input field as the slider is moved
$('.slider:not(.ocean-proccessed)').on('slide', function(event, ui) {
$(this).addClass('ocean-proccessed');
$(this).parent().find('.customize-control-slider-value').val(ui.value);
});
// Reset slider and input field back to the default value
$('.slider-reset:not(.ocean-proccessed)').on('click', function() {
$(this).addClass('ocean-proccessed');
var resetValue = $(this).attr('slider-reset-value');
$(this).parent().find('.customize-control-slider-value').val(resetValue);
$(this).parent().find('.slider').slider('value', resetValue);
});
// Update slider if the input field loses focus as it's most likely changed
$('.customize-control-slider-value').blur(function() {
var resetValue = $(this).val();
var slider = $(this).parent().find('.slider');
var sliderMinValue = parseInt(slider.attr('slider-min-value'));
var sliderMaxValue = parseInt(slider.attr('slider-max-value'));
// Make sure our manual input value doesn't exceed the minimum & maxmium values
if (resetValue < sliderMinValue) {
resetValue = sliderMinValue;
$(this).val(resetValue);
}
if (resetValue > sliderMaxValue) {
resetValue = sliderMaxValue;
$(this).val(resetValue);
}
$(this).parent().find('.slider').slider('value', resetValue);
});
/**
* Single Accordion Custom Control
*
* @author Anthony Hortin <http://maddisondesigns.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
* @link https://github.com/maddisondesigns
*/
$('.single-accordion-toggle:not(.ocean-proccessed)').click(function() {
$(this).addClass('ocean-proccessed');
var $accordionToggle = $(this);
$(this).parent().find('.single-accordion').slideToggle('slow', function() {
$accordionToggle.toggleClass('single-accordion-toggle-rotate', $(this).is(':visible'));
});
});
/**
* Image Checkbox Custom Control
*
* @author Anthony Hortin <http://maddisondesigns.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
* @link https://github.com/maddisondesigns
*/
$('.multi-image-checkbox:not(.ocean-proccessed)').on('change', function() {
$(this).addClass('ocean-proccessed');
skyrocketGetAllImageCheckboxes($(this).parent().parent());
});
// Get the values from the checkboxes and add to our hidden field
function skyrocketGetAllImageCheckboxes($element) {
var inputValues = $element.find('.multi-image-checkbox').map(function() {
if ($(this).is(':checked')) {
return $(this).val();
}
}).toArray();
// Important! Make sure to trigger change event so Customizer knows it has to save the field
$element.find('.customize-control-multi-image-checkbox').val(inputValues).trigger('change');
}
/**
* Pill Checkbox Custom Control
*
* @author Anthony Hortin <http://maddisondesigns.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
* @link https://github.com/maddisondesigns
*/
$(".pill_checkbox_control .sortable:not(.ocean-proccessed)").sortable({
placeholder: "pill-ui-state-highlight",
update: function(event, ui) {
skyrocketGetAllPillCheckboxes($(this).parent());
}
});
$(".pill_checkbox_control .sortable:not(.ocean-proccessed)").addClass('ocean-proccessed');
$('.pill_checkbox_control .sortable-pill-checkbox:not(.ocean-proccessed)').on('change', function() {
$(this).addClass('ocean-proccessed');
skyrocketGetAllPillCheckboxes($(this).parent().parent().parent());
});
// Get the values from the checkboxes and add to our hidden field
function skyrocketGetAllPillCheckboxes($element) {
var inputValues = $element.find('.sortable-pill-checkbox').map(function() {
if ($(this).is(':checked')) {
return $(this).val();
}
}).toArray();
$element.find('.customize-control-sortable-pill-checkbox').val(inputValues).trigger('change');
}
/**
* Dropdown Select2 Custom Control
*
* @author Anthony Hortin <http://maddisondesigns.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
* @link https://github.com/maddisondesigns
*/
$('.customize-control-dropdown-select2:not(.ocean-proccessed)').each(function() {
$(this).addClass('ocean-proccessed');
$('.customize-control-select2').select2({
allowClear: true
});
});
$(".customize-control-select2:not(.ocean-proccessed)").on("change", function() {
$(this).addClass('ocean-proccessed');
var select2Val = $(this).val();
$(this).parent().find('.customize-control-dropdown-select2').val(select2Val).trigger('change');
});
/**
* Googe Font Select Custom Control
*
* @author Anthony Hortin <http://maddisondesigns.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
* @link https://github.com/maddisondesigns
*/
$('.google-fonts-list:not(.ocean-proccessed)').each(function(i, obj) {
$(this).addClass('ocean-proccessed');
if (!$(obj).hasClass('select2-hidden-accessible')) {
$(obj).select2();
}
});
$('.google-fonts-list:not(.ocean-proccessed)').on('change', function() {
$(this).addClass('ocean-proccessed');
var elementRegularWeight = $(this).parent().parent().find('.google-fonts-regularweight-style');
var elementItalicWeight = $(this).parent().parent().find('.google-fonts-italicweight-style');
var elementBoldWeight = $(this).parent().parent().find('.google-fonts-boldweight-style');
var selectedFont = $(this).val();
var customizerControlName = $(this).attr('control-name');
var elementItalicWeightCount = 0;
var elementBoldWeightCount = 0;
// Clear Weight/Style dropdowns
elementRegularWeight.empty();
elementItalicWeight.empty();
elementBoldWeight.empty();
// Make sure Italic & Bold dropdowns are enabled
elementItalicWeight.prop('disabled', false);
elementBoldWeight.prop('disabled', false);
// Get the Google Fonts control object
var bodyfontcontrol = _wpCustomizeSettings.controls[customizerControlName];
// Find the index of the selected font
var indexes = $.map(bodyfontcontrol.skyrocketfontslist, function(obj, index) {
if (obj.family === selectedFont) {
return index;
}
});
var index = indexes[0];
// For the selected Google font show the available weight/style variants
$.each(bodyfontcontrol.skyrocketfontslist[index].variants, function(val, text) {
elementRegularWeight.append(
$('<option></option>').val(text).html(text)
);
if (text.indexOf("italic") >= 0) {
elementItalicWeight.append(
$('<option></option>').val(text).html(text)
);
elementItalicWeightCount++;
} else {
elementBoldWeight.append(
$('<option></option>').val(text).html(text)
);
elementBoldWeightCount++;
}
});
if (elementItalicWeightCount == 0) {
elementItalicWeight.append(
$('<option></option>').val('').html('Not Available for this font')
);
elementItalicWeight.prop('disabled', 'disabled');
}
if (elementBoldWeightCount == 0) {
elementBoldWeight.append(
$('<option></option>').val('').html('Not Available for this font')
);
elementBoldWeight.prop('disabled', 'disabled');
}
// Update the font category based on the selected font
$(this).parent().parent().find('.google-fonts-category').val(bodyfontcontrol.skyrocketfontslist[index].category);
skyrocketGetAllSelects($(this).parent().parent());
});
$('.google_fonts_select_control select:not(.ocean-proccessed)').on('change', function() {
$(this).addClass('ocean-proccessed');
skyrocketGetAllSelects($(this).parent().parent());
});
function skyrocketGetAllSelects($element) {
var selectedFont = {
font: $element.find('.google-fonts-list').val(),
regularweight: $element.find('.google-fonts-regularweight-style').val(),
italicweight: $element.find('.google-fonts-italicweight-style').val(),
boldweight: $element.find('.google-fonts-boldweight-style').val(),
category: $element.find('.google-fonts-category').val()
};
// Important! Make sure to trigger change event so Customizer knows it has to save the field
$element.find('.customize-control-google-font-selection').val(JSON.stringify(selectedFont)).trigger('change');
}
/**
* TinyMCE Custom Control
*
* @author Anthony Hortin <http://maddisondesigns.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
* @link https://github.com/maddisondesigns
*/
$('.customize-control-tinymce-editor:not(.ocean-proccessed)').each(function() {
$(this).addClass('ocean-proccessed');
// Get the toolbar strings that were passed from the PHP Class
var tinyMCEToolbar1String = _wpCustomizeSettings.controls[$(this).attr('id')].skyrockettinymcetoolbar1;
var tinyMCEToolbar2String = _wpCustomizeSettings.controls[$(this).attr('id')].skyrockettinymcetoolbar2;
var tinyMCEMediaButtons = _wpCustomizeSettings.controls[$(this).attr('id')].skyrocketmediabuttons;
wp.editor.initialize($(this).attr('id'), {
tinymce: {
wpautop: true,
toolbar1: tinyMCEToolbar1String,
toolbar2: tinyMCEToolbar2String
},
quicktags: true,
mediaButtons: tinyMCEMediaButtons
});
});
$(document).on('tinymce-editor-init', function(event, editor) {
editor.on('change', function(e) {
tinyMCE.triggerSave();
$('#' + editor.id).trigger('change');
});
});
/**
* WP ColorPicker Alpha Color Picker Control
*
* @author Anthony Hortin <http://maddisondesigns.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
* @link https://github.com/maddisondesigns
*/
// Manually initialise the wpColorPicker controls so we can add the color picker palette
$('.wpcolorpicker-alpha-color-picker:not(.ocean-proccessed)').each(function(i, obj) {
$(this).addClass('ocean-proccessed');
var paletteColors = _wpCustomizeSettings.controls[$(this).attr('id')].colorpickerpalette;
var options = {
palettes: paletteColors
};
$(obj).wpColorPicker(options);
});
/**
* Alpha Color Picker Custom Control
*
* @author Braad Martin <http://braadmartin.com>
* @license http://www.gnu.org/licenses/gpl-3.0.html
* @link https://github.com/BraadMartin/components/tree/master/customizer/alpha-color-picker
*/
// Loop over each control and transform it into our color picker.
$('.alpha-color-control:not(.ocean-proccessed)').each(function() {
$(this).addClass('ocean-proccessed');
// Scope the vars.
var $control, startingColor, paletteInput, showOpacity, defaultColor, palette,
colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions;
// Store the control instance.
$control = $(this);
// 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 = acp_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'));
},
palettes: oceanwpLocalize.colorPalettes // Use the passed in palette.
};
// Create the colorpicker.
$control.wpColorPicker(colorPickerOptions);
$container = $control.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_control(0, $control, $alphaSlider, true);
});
$container.find('.max-click-zone').on('click', function() {
acp_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 = $(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 (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', '#ffffff');
// Set the actual option value to empty string.
wp.customize(key, function(obj) {
obj.set('');
});
acp_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 = 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.
$control.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_control(alpha, $control, $alphaSlider, false);
// Change value shown on slider handle.
$(this).find('.ui-slider-handle').text(ui.value);
});
});
/**
* 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 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_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);
// 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.
$control.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());
}
});
/**
* Remove attached events from the Upsell Section to stop panel from being able to open/close
*/
(function($, api) {
api.sectionConstructor['skyrocket-upsell'] = api.Section.extend({
// Remove events for this type of section.
attachEvents: function() {},
// Ensure this type of section is active. Normally, sections without contents aren't visible.
isContextuallyActive: function() {
return true;
}
});
})(jQuery, wp.customize); |