300 lines
12 KiB
JavaScript
Executable File
300 lines
12 KiB
JavaScript
Executable File
!(function ($) {
|
|
"use strict";
|
|
wp.customize.controlConstructor["bloglo-design-options"] =
|
|
wp.customize.Control.extend({
|
|
ready: function () {
|
|
var control = this,
|
|
setting = control.setting.get(),
|
|
popup_content = control.container.find(".popup-content");
|
|
control.container.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();
|
|
},
|
|
});
|
|
}),
|
|
control.container
|
|
.find("input.bloglo-range-input")
|
|
.on("change keyup", function () {
|
|
control.autocorrect_range_input_number($(this), 1e3, undefined);
|
|
})
|
|
.on("focusout", function () {
|
|
control.autocorrect_range_input_number($(this), 0, undefined);
|
|
}),
|
|
control.container.on(
|
|
"change",
|
|
'[data-option="background-type"], [data-option="gradient-type"]',
|
|
function () {
|
|
var field = $(this).attr("data-option");
|
|
control.container.find('[data-dep-field="' + field + '"]').hide(),
|
|
control.container
|
|
.find(
|
|
'[data-dep-field="' +
|
|
field +
|
|
'"][data-dep-value="' +
|
|
$(this).val() +
|
|
'"]'
|
|
)
|
|
.show();
|
|
}
|
|
),
|
|
control.container
|
|
.find(
|
|
'[data-option="background-type"], [data-option="gradient-type"]'
|
|
)
|
|
.trigger("change"),
|
|
control.container.on(
|
|
"color-updated",
|
|
".bloglo-color-control",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
),
|
|
control.container.on("change", ".bloglo-select-wrapper", function () {
|
|
control.update_value();
|
|
}),
|
|
control.container.find(".popup-link").on("click", function () {
|
|
popup_content.toggleClass("hidden"),
|
|
$(this).toggleClass("active"),
|
|
$(this).siblings(".reset-defaults").toggleClass("active"),
|
|
$("body").on("click", outside_click_close);
|
|
});
|
|
var outside_click_close = function (e) {
|
|
$(e.target).closest(".customize-save-button-wrapper").length ||
|
|
control.container.has($(e.target).closest(".popup-link")).length ||
|
|
control.container.has($(e.target).closest(".popup-content"))
|
|
.length ||
|
|
popup_content.hasClass("hidden") ||
|
|
$(e.target).closest(".reset-defaults").length ||
|
|
(popup_content.addClass("hidden"),
|
|
control.container.find(".popup-link").removeClass("active"),
|
|
control.container.find(".reset-defaults").removeClass("active"),
|
|
$("body").off("click", outside_click_close));
|
|
};
|
|
control.container.find(".background-image-advanced").hide(),
|
|
control.container.on(
|
|
"change",
|
|
".background-repeat select",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
),
|
|
control.container.on(
|
|
"change click",
|
|
".background-size input",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
),
|
|
control.container.on(
|
|
"change click",
|
|
".background-attachment input",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
),
|
|
control.container.on(
|
|
"click",
|
|
".background-image-upload-button",
|
|
function (e) {
|
|
$("body").off("click", outside_click_close);
|
|
var image = wp
|
|
.media({
|
|
multiple: !1,
|
|
title: control.params.l10n.image.select_image,
|
|
button: { text: control.params.l10n.image.use_image },
|
|
})
|
|
.open()
|
|
.on("select", function () {
|
|
var previewImage,
|
|
imageUrl,
|
|
imageID,
|
|
preview,
|
|
removeButton,
|
|
uploadedImageJSON = image
|
|
.state()
|
|
.get("selection")
|
|
.first()
|
|
.toJSON();
|
|
(previewImage = _.isUndefined(uploadedImageJSON.sizes)
|
|
? uploadedImageJSON.url
|
|
: _.isUndefined(uploadedImageJSON.sizes.medium)
|
|
? _.isUndefined(uploadedImageJSON.sizes.thumbnail)
|
|
? _.isUndefined(uploadedImageJSON.sizes.full)
|
|
? uploadedImageJSON.url
|
|
: uploadedImageJSON.sizes.full.url
|
|
: uploadedImageJSON.sizes.thumbnail.url
|
|
: uploadedImageJSON.sizes.medium.url),
|
|
(imageUrl = uploadedImageJSON.url),
|
|
(imageID = uploadedImageJSON.id),
|
|
uploadedImageJSON.width,
|
|
uploadedImageJSON.height,
|
|
"" !== imageUrl &&
|
|
(control.container
|
|
.find(".background-image-advanced")
|
|
.show(),
|
|
control.container
|
|
.find(".advanced-settings")
|
|
.removeClass("hidden")
|
|
.addClass("up")),
|
|
control.container
|
|
.find('[data-option="background-image"]')
|
|
.val(imageUrl),
|
|
control.container
|
|
.find('[data-option="background-image-id"]')
|
|
.val(imageID),
|
|
control.update_value(),
|
|
(preview = control.container.find(
|
|
".placeholder, .thumbnail"
|
|
)),
|
|
(removeButton = control.container.find(
|
|
".background-image-upload-remove-button"
|
|
)),
|
|
preview.length &&
|
|
preview
|
|
.removeClass()
|
|
.addClass("thumbnail thumbnail-image")
|
|
.html('<img src="' + previewImage + '" alt="" />'),
|
|
removeButton.length && removeButton.show(),
|
|
setTimeout(function () {
|
|
$("body").on("click", outside_click_close);
|
|
}, 100);
|
|
});
|
|
e.preventDefault();
|
|
}
|
|
),
|
|
control.container.on(
|
|
"click",
|
|
".background-image-upload-remove-button",
|
|
function (e) {
|
|
var preview, removeButton;
|
|
e.preventDefault(),
|
|
control.container
|
|
.find('[data-option="background-image"]')
|
|
.val(""),
|
|
control.container
|
|
.find('[data-option="background-image-id"]')
|
|
.val(""),
|
|
control.update_value(),
|
|
(preview = control.container.find(".placeholder, .thumbnail")),
|
|
(removeButton = control.container.find(
|
|
".background-image-upload-remove-button"
|
|
)),
|
|
control.container.find(".background-image-advanced").hide(),
|
|
control.container
|
|
.find(".advanced-settings")
|
|
.addClass("hidden")
|
|
.removeClass("up"),
|
|
preview.length &&
|
|
preview
|
|
.removeClass()
|
|
.addClass("placeholder")
|
|
.html(control.params.l10n.image.placeholder),
|
|
removeButton.length && removeButton.hide();
|
|
}
|
|
),
|
|
control.container.on("click", ".advanced-settings", function (e) {
|
|
$(this).toggleClass("up"),
|
|
control.container.find(".background-image-advanced").toggle();
|
|
}),
|
|
control.container.on("click", ".bloglo-spacing-linked", function () {
|
|
var $this = $(this);
|
|
$this.closest("ul").find(".spacing-input").removeClass("linked"),
|
|
$this.parent(".spacing-link-values").removeClass("unlinked");
|
|
}),
|
|
control.container.on(
|
|
"click",
|
|
".bloglo-spacing-unlinked",
|
|
function () {
|
|
var $this = $(this);
|
|
$this.closest("ul").find(".spacing-input").addClass("linked"),
|
|
$this.parent(".spacing-link-values").addClass("unlinked");
|
|
}
|
|
),
|
|
control.container.on("input", ".linked input", function () {
|
|
var $val = $(this).val();
|
|
$(this)
|
|
.closest(".spacing-input")
|
|
.siblings(".linked")
|
|
.find("input")
|
|
.val($val)
|
|
.change();
|
|
}),
|
|
control.container.on(
|
|
"change input",
|
|
".spacing-input input",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
),
|
|
control.container.find(".reset-defaults").on("click", function () {
|
|
var item, option_id;
|
|
control.container.find("[data-option]").each(function () {
|
|
(item = $(this)),
|
|
"background-size" === (option_id = item.data("option")) ||
|
|
"background-attachment" === option_id
|
|
? (item.prop("checked", !1),
|
|
option_id in control.params.default &&
|
|
control.params.default[option_id] === item.val() &&
|
|
item.prop("checked", !0))
|
|
: item
|
|
.val(control.params.default[item.data("option")])
|
|
.trigger("change");
|
|
}),
|
|
control.container
|
|
.find(".background-image-upload-remove-button")
|
|
.click(),
|
|
control.update_value();
|
|
});
|
|
},
|
|
update_value: function () {
|
|
var option,
|
|
value = {};
|
|
this.container.find("[data-option]").each(function () {
|
|
(option = $(this).data("option")),
|
|
(value[option] =
|
|
"background-size" === option || "background-attachment" === option
|
|
? $(this).is(":checked")
|
|
? $(this).val()
|
|
: value[option]
|
|
: $(this).val());
|
|
}),
|
|
this.setting.set(value);
|
|
},
|
|
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))
|
|
return (
|
|
range_input.val(reset), void range.val(reset).trigger("change")
|
|
);
|
|
step >= 1 &&
|
|
value % 1 != 0 &&
|
|
((value = Math.round(value)),
|
|
range_input.val(value),
|
|
range.val(value).trigger("change")),
|
|
value > max &&
|
|
(range_input.val(max), range.val(max).trigger("change")),
|
|
value < min &&
|
|
(range_input.val(min), range.val(min).trigger("change"));
|
|
}, timeout)),
|
|
range.val(value).trigger("change"),
|
|
this.update_value();
|
|
},
|
|
});
|
|
})(jQuery);
|