1642 lines
52 KiB
JavaScript
Executable File
1642 lines
52 KiB
JavaScript
Executable File
/*
|
|
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;
|
|
}
|
|
}
|
|
});
|
|
});
|