File Manager

Editing File: /home/maglabs/etisprooo/wp-content/themes/oceanwp/inc/customizer/assets/js/customizer.js

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);

Back to Directory File Manager