298 lines
8.9 KiB
JavaScript
Executable File
298 lines
8.9 KiB
JavaScript
Executable File
(function (api, $) {
|
|
// Extends our custom "bloglo-info" section. Make it visible.
|
|
api.sectionConstructor["bloglo-info"] = api.Section.extend({
|
|
// No events for this type of section.
|
|
attachEvents: function () {},
|
|
|
|
// Always make the section active.
|
|
isContextuallyActive: function () {
|
|
return true;
|
|
},
|
|
});
|
|
|
|
// Custom Customizer Previewer class.
|
|
api.blogloCustomizerPreviewer = {
|
|
init: function () {
|
|
var self = this,
|
|
control;
|
|
|
|
// Listen to the "set-footer-widget" event.
|
|
this.preview.bind("set-footer-widget", function (data) {
|
|
// Focus control.
|
|
control = api.control("sidebars_widgets[" + data + "]");
|
|
control.focus();
|
|
|
|
// Open widgets panel.
|
|
api.Widgets.availableWidgetsPanel.open(control);
|
|
});
|
|
|
|
// Listen to the "set-footer-widget" event.
|
|
this.preview.bind("set-navigation-widget", function (data) {
|
|
// Focus control.
|
|
control = api.control("nav_menu_locations[" + data + "]");
|
|
control.focus();
|
|
});
|
|
},
|
|
};
|
|
|
|
// Store old previewer.
|
|
var blogloOldPreviewer = api.Previewer;
|
|
api.Previewer = blogloOldPreviewer.extend({
|
|
initialize: function (params, options) {
|
|
// Store a reference to the Previewer
|
|
api.blogloCustomizerPreviewer.preview = this;
|
|
|
|
// Call the old Previewer's initialize function
|
|
blogloOldPreviewer.prototype.initialize.call(this, params, options);
|
|
},
|
|
});
|
|
|
|
api("bloglo_info_style", function (setting) {
|
|
setting.bind(function (value) {
|
|
if (12 == value) {
|
|
var data = {
|
|
desktop: { top: 0, bottom: 0 },
|
|
tablet: { top: 0, bottom: 0 },
|
|
mobile: { top: 6, bottom: 6 },
|
|
unit: "rem",
|
|
};
|
|
|
|
api.control("bloglo_info_section_spacing").setting(data);
|
|
|
|
// console.log( 'New value', api.control( 'bloglo_info_section_spacing' ).setting() );
|
|
} else {
|
|
var data = {
|
|
desktop: { top: 10, bottom: 10 },
|
|
tablet: { top: 6, bottom: 6 },
|
|
mobile: { top: 6, bottom: 6 },
|
|
unit: "rem",
|
|
};
|
|
|
|
api.control("bloglo_info_section_spacing").setting(data);
|
|
|
|
// console.log( 'New value', api.control( 'bloglo_info_section_spacing' ).setting() );
|
|
}
|
|
var selector = api.control("bloglo_info_section_spacing").selector;
|
|
setSpacingFieldValue(selector, data);
|
|
});
|
|
});
|
|
|
|
function setSpacingFieldValue(selector, data) {
|
|
for (const [device, values] of Object.entries(data)) {
|
|
if (!["desktop", "tablet", "mobile"].includes(device)) {
|
|
continue;
|
|
}
|
|
for (const [position, value] of Object.entries(values)) {
|
|
var s =
|
|
selector +
|
|
' input[name="spacing-control-' +
|
|
device +
|
|
"-" +
|
|
position +
|
|
'"]';
|
|
var input = $(s);
|
|
if (input.length) {
|
|
input.val(value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Change preview url for certain sections.
|
|
_.each(
|
|
bloglo_customizer_localized.preview_url_for_section,
|
|
function (url, id) {
|
|
// eslint-disable-line camelcase
|
|
if (url) {
|
|
wp.customize.section(id, function (section) {
|
|
section.expanded.bind(function (isExpanded) {
|
|
if (isExpanded) {
|
|
wp.customize.previewer.previewUrl.set(url);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
$(document).ready(function ($) {
|
|
// Initialize our Previewer
|
|
api.blogloCustomizerPreviewer.init();
|
|
|
|
// Display the first responsive control
|
|
$(".bloglo-control-responsive").each(function () {
|
|
$(this).find(".control-responsive").first().addClass("active");
|
|
});
|
|
|
|
// Responsive switchers
|
|
$(".customize-control").on(
|
|
"click",
|
|
".bloglo-responsive-switchers span",
|
|
function (event) {
|
|
var $this = $(this),
|
|
$switcherContainer = $this.closest(".bloglo-responsive-switchers"),
|
|
$switcherButtons = $switcherContainer.find("li span"),
|
|
$device = $(event.currentTarget).data("device"),
|
|
$control = $(".bloglo-control-responsive"),
|
|
$body = $(".wp-full-overlay"),
|
|
$footerDevices = $(".wp-full-overlay-footer .devices");
|
|
|
|
if (!$switcherContainer.hasClass("expanded")) {
|
|
$switcherContainer.addClass("expanded");
|
|
$this.addClass("active");
|
|
} else {
|
|
if ($this.parent().is(":first-child")) {
|
|
if ($this.hasClass("active")) {
|
|
$switcherContainer.removeClass("expanded");
|
|
$this.removeClass("active");
|
|
} else {
|
|
$switcherButtons.removeClass("active");
|
|
$this.addClass("active");
|
|
}
|
|
} else {
|
|
$switcherButtons.removeClass("active");
|
|
$this.addClass("active");
|
|
}
|
|
}
|
|
|
|
// Control class
|
|
$control.find(".control-responsive").removeClass("active");
|
|
$control.find(".control-responsive." + $device).addClass("active");
|
|
$control
|
|
.removeClass(
|
|
"control-device-desktop control-device-tablet control-device-mobile"
|
|
)
|
|
.addClass("control-device-" + $device);
|
|
|
|
// Wrapper class
|
|
$body
|
|
.removeClass("preview-desktop preview-tablet preview-mobile")
|
|
.addClass("preview-" + $device);
|
|
|
|
// Panel footer buttons
|
|
$footerDevices
|
|
.find("button")
|
|
.removeClass("active")
|
|
.attr("aria-pressed", false);
|
|
$footerDevices
|
|
.find("button.preview-" + $device)
|
|
.addClass("active")
|
|
.attr("aria-pressed", true);
|
|
}
|
|
);
|
|
|
|
// If panel footer buttons clicked
|
|
$(".wp-full-overlay-footer .devices button").on("click", function (event) {
|
|
// Set up variables
|
|
var $this = $(this),
|
|
$devices = $(".customize-control .bloglo-responsive-switchers"),
|
|
$device = $(event.currentTarget).data("device"),
|
|
$control = $(".bloglo-control-responsive");
|
|
|
|
// Button class
|
|
$devices.find("span").removeClass("active");
|
|
$devices.find("span.preview-" + $device).addClass("active");
|
|
|
|
// Add expanded class
|
|
if ("desktop" === $device) {
|
|
$devices.removeClass("expanded");
|
|
} else {
|
|
$devices.addClass("expanded");
|
|
}
|
|
|
|
// Control class
|
|
$control.find(".control-responsive").removeClass("active");
|
|
$control.find(".control-responsive." + $device).addClass("active");
|
|
$control
|
|
.removeClass(
|
|
"control-device-desktop control-device-tablet control-device-mobile"
|
|
)
|
|
.addClass("control-device-" + $device);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
// Tooltip positioning
|
|
if ($(".bloglo-tooltip").length) {
|
|
var $tooltip, $iconPosLeft, $iconPosRight, $titleWidth;
|
|
|
|
$(".bloglo-tooltip").each(function () {
|
|
$tooltip = $(this);
|
|
|
|
if (
|
|
$tooltip.hasClass("top-right-tooltip") ||
|
|
$tooltip.hasClass("small-tooltip")
|
|
) {
|
|
return;
|
|
}
|
|
|
|
$titleWidth = $tooltip
|
|
.closest(".bloglo-control-wrapper")
|
|
.outerWidth();
|
|
|
|
$iconPosLeft = $tooltip
|
|
.closest(".bloglo-info-icon")
|
|
.css("position", "static")
|
|
.position().left;
|
|
$iconPosRight = $titleWidth - $iconPosLeft;
|
|
|
|
if ($iconPosLeft < $iconPosRight) {
|
|
$tooltip[0].style.setProperty(
|
|
"--tooltip-left",
|
|
Math.min(104, $iconPosLeft) + "px"
|
|
);
|
|
$tooltip.css("left", Math.max(0, $iconPosLeft - 104));
|
|
} else {
|
|
$tooltip.css(
|
|
"left",
|
|
Math.min($iconPosLeft - 90, $titleWidth - 208)
|
|
);
|
|
|
|
if ($iconPosLeft < $titleWidth - 104) {
|
|
$tooltip[0].style.setProperty("--tooltip-left", "90px");
|
|
} else {
|
|
$tooltip[0].style.setProperty(
|
|
"--tooltip-left",
|
|
$iconPosLeft - 178 + "px"
|
|
);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, 2000);
|
|
|
|
api.hasOwnProperty("previewer") &&
|
|
(api.previewer.bind("bloglo-customize-disable-section", function (e) {
|
|
$("input[id=" + e + "]")
|
|
.trigger("click")
|
|
.trigger("change");
|
|
const val = !api.control(e).setting.get();
|
|
api.control(e).setting.set(val);
|
|
}),
|
|
api.previewer.bind("bloglo-customize-focus-control", function (e) {
|
|
api.control(e).focus();
|
|
}));
|
|
|
|
//Scroll to section
|
|
$("body").on(
|
|
"click",
|
|
"#sub-accordion-panel-bloglo_panel_homepage > .accordion-section.control-subsection",
|
|
function (event) {
|
|
scrollToSection($(this).attr("id").substr(18));
|
|
}
|
|
);
|
|
|
|
function scrollToSection(section) {
|
|
var $contents = jQuery("#customize-preview iframe").contents();
|
|
|
|
if (0 < $contents.find("." + section).length) {
|
|
$contents.find("html, body").animate(
|
|
{
|
|
scrollTop: $contents.find("." + section).offset().top,
|
|
},
|
|
1000
|
|
);
|
|
}
|
|
}
|
|
});
|
|
})(wp.customize, jQuery);
|