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