AlkantarClanX12
Your IP : 216.73.217.24
/**
* LBX Listing Image Groups — admin editor (LBT-1462, Round 3)
*
* Minimal JS on top of server-rendered markup:
* - editor tab switching (Group / Images)
* - collapsible image rows + reorder + media picker + add/remove (clones the
* server-rendered <template> so the row markup stays owned by PHP)
* - AJAX save/delete/duplicate/toggle (then reload, like the Round 2 admin)
*/
jQuery(document).ready(function ($) {
function notify(msg, isError) {
$("#response-message").html(
"<p class='" + (isError ? "msg-er" : "msg") + "'>" + msg + "</p>"
);
}
// --- Editor tabs (Group / Images) ---
$(document).on("click", ".lig-editor-tabs .lbx-tab", function () {
var tab = $(this).data("tab");
var $nav = $(this).closest(".lbx-tabs-nav");
$nav.find(".lbx-tab").removeClass("is-active");
$(this).addClass("is-active");
var $content = $nav.next(".lbx-tabs-content");
$content.find("> .lbx-tab-panel").removeClass("is-active");
$content.find('> .lbx-tab-panel[data-tab="' + tab + '"]').addClass("is-active");
});
// --- Collapse / expand image rows (ignore control buttons) ---
// Bind directly on .lig-editor (a descendant of document) and stopPropagation so
// the event never bubbles to document, where the Round 2 admin's own delegated
// .lbx-slide-header handler lives — otherwise both fire and cancel the toggle
// (they share the .lbx-slide markup on this page). Delegation still covers rows
// added later via "Add Image". .lig-editor is server-rendered, present at ready.
$(".lig-editor").on("click", ".lbx-slide-header", function (e) {
if ($(e.target).closest("button").length) return;
e.stopPropagation();
$(this).closest(".lbx-slide").toggleClass("lbx-slide--collapsed");
});
// --- Media picker (add form has none; each row has its own) ---
function openMediaPicker($input, $preview) {
var frame = wp.media({
title: "Select Image",
button: { text: "Use this image" },
multiple: false,
library: { type: "image" },
});
frame.on("select", function () {
var attachment = frame.state().get("selection").first().toJSON();
$input.val(attachment.url);
if ($preview && $preview.length) {
$preview.html('<img src="' + attachment.url + '" alt="">');
}
});
frame.open();
}
$(document).on("click", ".lig-row-preview", function () {
var $col = $(this).closest(".lbx-slide-image-col");
openMediaPicker($col.find(".lig-image-input"), $(this));
});
// --- Add image row (clone the server template, renumber names) ---
function reindexRows() {
$("#lig-image-rows .lig-row").each(function (i) {
$(this)
.find(":input")
.each(function () {
var name = $(this).attr("name");
if (!name) return;
$(this).attr("name", name.replace(/images\[[^\]]*\]/, "images[" + i + "]"));
});
});
var count = $("#lig-image-rows .lig-row").length;
$(".lig-img-count").text("(" + count + ")");
$("#lig-empty-images").toggle(count === 0);
}
$(document).on("click", "#lig-add-image", function () {
var tpl = document.getElementById("lig-image-row-template");
if (!tpl) return;
var html = tpl.innerHTML.replace(/__INDEX__/g, $("#lig-image-rows .lig-row").length);
var $row = $(html);
$row.removeClass("lbx-slide--collapsed"); // open the new row for editing
$("#lig-image-rows").append($row);
reindexRows();
});
// --- Live UX: echo the offset in the help text ---
$(document).on("input", "#lig_group_offset", function () {
var v = parseInt($(this).val(), 10);
$(".lig-offset-echo").text(!v || v < 1 ? 1 : v);
});
// --- Live UX: reflect a row's Active toggle in its header (badge + strike) ---
$(document).on("change", ".lig-active-input", function () {
$(this).closest(".lig-row").toggleClass("lig-row--inactive", !$(this).prop("checked"));
});
// --- Remove row ---
$(document).on("click", ".lig-remove", function (e) {
e.stopPropagation();
$(this).closest(".lig-row").remove();
reindexRows();
});
// --- Reorder rows ---
$(document).on("click", ".lig-move-up", function (e) {
e.stopPropagation();
var $row = $(this).closest(".lig-row");
var $prev = $row.prev(".lig-row");
if ($prev.length) {
$prev.before($row);
reindexRows();
}
});
$(document).on("click", ".lig-move-down", function (e) {
e.stopPropagation();
var $row = $(this).closest(".lig-row");
var $next = $row.next(".lig-row");
if ($next.length) {
$next.after($row);
reindexRows();
}
});
// --- Collect the editor form into a payload ---
function collectImages() {
var images = [];
$("#lig-image-rows .lig-row").each(function () {
var entry = {};
$(this)
.find(":input")
.each(function () {
var name = $(this).attr("name") || "";
var m = name.match(/images\[[^\]]*\]\[(\w+)\]/);
if (!m) return;
var field = m[1];
if ($(this).attr("type") === "checkbox") {
entry[field] = $(this).prop("checked") ? $(this).val() : "";
} else {
entry[field] = $(this).val();
}
});
if (entry.image && $.trim(entry.image) !== "") {
images.push(entry);
}
});
return images;
}
// --- Save group ---
$(document).on("click", "#lig-save-group", function () {
var $editor = $(".lig-editor");
var name = $.trim($("#lig_group_name").val() || "");
if (name === "") {
alert("A group name is required.");
$('.lig-editor-tabs .lbx-tab[data-tab="group"]').trigger("click");
$("#lig_group_name").focus();
return;
}
var payload = {
action: "lbx_lig_save_group",
nonce: lbxLig.nonce,
group_id: $editor.data("group-id"),
group_name: name,
group_active: $("#lig_group_active").prop("checked") ? 1 : 0,
group_offset: $("#lig_group_offset").val(),
group_date_enabled: $("#lig_group_date_enabled").prop("checked") ? 1 : 0,
group_limit_date: $("#lig_group_limit_date").val(),
images: JSON.stringify(collectImages()),
};
var $btn = $(this).prop("disabled", true);
$.post(lbxLig.ajax_url, payload)
.done(function (res) {
if (res && res.success) {
// Back to the list so the saved group shows up.
window.location.href =
"admin.php?page=" + lbxLig.page + "&li_tab=groups";
} else {
notify((res && res.data) || "Save failed.", true);
$btn.prop("disabled", false);
}
})
.fail(function () {
notify("Save failed.", true);
$btn.prop("disabled", false);
});
});
// --- List actions: toggle / duplicate / delete ---
$(document).on("change", ".lig-toggle", function () {
var id = $(this).closest("[data-group-id]").data("group-id");
$.post(lbxLig.ajax_url, {
action: "lbx_lig_toggle_group",
nonce: lbxLig.nonce,
group_id: id,
});
});
$(document).on("click", ".lig-duplicate", function () {
var id = $(this).closest("[data-group-id]").data("group-id");
$.post(lbxLig.ajax_url, {
action: "lbx_lig_duplicate_group",
nonce: lbxLig.nonce,
group_id: id,
}).done(function () {
window.location.reload();
});
});
$(document).on("click", ".lig-delete", function () {
var id = $(this).closest("[data-group-id]").data("group-id");
if (!confirm("Delete this group? This cannot be undone.")) return;
$.post(lbxLig.ajax_url, {
action: "lbx_lig_delete_group",
nonce: lbxLig.nonce,
group_id: id,
}).done(function () {
window.location.reload();
});
});
});