427 lines
13 KiB
JavaScript
Executable File
427 lines
13 KiB
JavaScript
Executable File
(function ($) {
|
|
"use strict";
|
|
|
|
wp.customize.controlConstructor["bloglo-design-options"] =
|
|
wp.customize.Control.extend({
|
|
ready: function () {
|
|
"use strict";
|
|
|
|
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.
|
|
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();
|
|
},
|
|
});
|
|
});
|
|
|
|
// Change the text value
|
|
control.container
|
|
.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.
|
|
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");
|
|
|
|
// Changes.
|
|
control.container.on(
|
|
"color-updated",
|
|
".bloglo-color-control",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
);
|
|
|
|
control.container.on("change", ".bloglo-select-wrapper", function () {
|
|
control.update_value();
|
|
});
|
|
|
|
// Advanced panel.
|
|
control.container.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 &&
|
|
!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);
|
|
}
|
|
};
|
|
|
|
// Hide unnecessary controls.
|
|
control.container.find(".background-image-advanced").hide();
|
|
|
|
// Background-Repeat.
|
|
control.container.on(
|
|
"change",
|
|
".background-repeat select",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
);
|
|
|
|
// Background-Size.
|
|
control.container.on(
|
|
"change click",
|
|
".background-size input",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
);
|
|
|
|
// Background-Attachment.
|
|
control.container.on(
|
|
"change click",
|
|
".background-attachment input",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
);
|
|
|
|
// Background-Image.
|
|
control.container.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) {
|
|
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"
|
|
);
|
|
|
|
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();
|
|
}
|
|
);
|
|
|
|
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"
|
|
);
|
|
|
|
// Hide unnecessary controls.
|
|
control.container.find(".background-image-advanced").hide();
|
|
control.container
|
|
.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();
|
|
}
|
|
}
|
|
);
|
|
|
|
control.container.on("click", ".advanced-settings", function (e) {
|
|
$(this).toggleClass("up");
|
|
control.container.find(".background-image-advanced").toggle();
|
|
});
|
|
|
|
// Spacing field.
|
|
|
|
// Linked button
|
|
control.container.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
|
|
control.container.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
|
|
control.container.on("input", ".linked input", function () {
|
|
var $val = $(this).val();
|
|
$(this)
|
|
.closest(".spacing-input")
|
|
.siblings(".linked")
|
|
.find("input")
|
|
.val($val)
|
|
.change();
|
|
});
|
|
|
|
// Store new inputs
|
|
control.container.on(
|
|
"change input",
|
|
".spacing-input input",
|
|
function () {
|
|
control.update_value();
|
|
}
|
|
);
|
|
|
|
// Reset default.
|
|
control.container.find(".reset-defaults").on("click", function () {
|
|
var item, option_id;
|
|
|
|
control.container.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");
|
|
}
|
|
});
|
|
|
|
control.container
|
|
.find(".background-image-upload-remove-button")
|
|
.click();
|
|
|
|
control.update_value();
|
|
});
|
|
},
|
|
|
|
// Update value.
|
|
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);
|
|
},
|
|
|
|
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 (step >= 1 && value % 1 !== 0) {
|
|
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");
|
|
this.update_value();
|
|
},
|
|
});
|
|
})(jQuery);
|