wordpress-plugin/assets/js/admin-settings.jsJavaScript
(function ($) {
'use strict';
$(function () {
var tabs = $('[data-mw-settings-tab]');
var panels = $('[data-mw-settings-panel]');
function activateSettingsTab(tabId, updateUrl) {
if (!tabs.filter('[data-mw-settings-tab="' + tabId + '"]').length) {
tabId = tabs.first().data('mw-settings-tab');
}
tabs.each(function () {
var tab = $(this);
var active = tab.data('mw-settings-tab') === tabId;
tab.toggleClass('nav-tab-active', active);
tab.attr('aria-selected', active ? 'true' : 'false');
});
panels.each(function () {
var panel = $(this);
panel.prop('hidden', panel.data('mw-settings-panel') !== tabId);
});
if (updateUrl && window.history && window.history.replaceState) {
window.history.replaceState(null, '', '#mw-tab-' + tabId);
}
}
if (tabs.length) {
var hash = window.location.hash.replace(/^#mw-tab-/, '');
activateSettingsTab(hash || tabs.first().data('mw-settings-tab'), false);
tabs.on('click', function () {
activateSettingsTab($(this).data('mw-settings-tab'), true);
});
}
function bindLogoPickers(scope) {
var root = scope ? $(scope) : $(document);
var buttons = root.find('[data-mw-logo-picker]');
if (root.is('[data-mw-logo-picker]')) buttons = buttons.add(root);
buttons.filter(':not([data-mw-bound])').each(function () {
var button = $(this);
button.attr('data-mw-bound', '1');
button.on('click', function (event) {
event.preventDefault();
if (typeof wp === 'undefined' || !wp.media) return;
var frame = wp.media({
title: button.data('title') || 'MeinWeimar-Logo auswählen',
button: { text: button.data('button-text') || 'Logo verwenden' },
multiple: false,
library: { type: 'image' }
});
frame.on('select', function () {
var attachment = frame.state().get('selection').first().toJSON();
$('#' + button.data('input')).val(attachment.id).trigger('change');
var previewLabel = button.data('preview-label') || 'Logo ausgewählt';
$('#' + button.data('preview')).text(previewLabel + ': ' + (attachment.filename || attachment.id));
});
frame.open();
});
});
}
function bindMarkerPickers() {
$('[data-mw-marker-picker]').filter(':not([data-mw-bound])').each(function () {
var markerButton = $(this);
markerButton.attr('data-mw-bound', '1');
markerButton.on('click', function (event) {
event.preventDefault();
if (typeof wp === 'undefined' || !wp.media) return;
var frame = wp.media({
title: 'MeinWeimar-Kartenmarker auswählen',
button: { text: 'Marker verwenden' },
multiple: false,
library: { type: 'image' }
});
frame.on('select', function () {
var attachment = frame.state().get('selection').first().toJSON();
$('#' + markerButton.data('input')).val(attachment.id).trigger('change');
$('#' + markerButton.data('preview')).text('Marker ausgewählt: ' + (attachment.filename || attachment.id));
});
frame.open();
});
});
}
function updateHeroStatus(card) {
var active = card.find('[data-mw-hero-active]').is(':checked');
card.find('[data-mw-hero-status]').text(active ? 'Aktiv' : 'Inaktiv').toggleClass('is-active', active);
}
function bindHeroCampaignCard(card) {
card = $(card);
if (card.data('mwHeroBound')) return;
card.data('mwHeroBound', true);
card.find('[data-mw-hero-active]').on('change', function () {
updateHeroStatus(card);
});
card.find('[data-mw-hero-remove]').on('click', function () {
card.remove();
});
updateHeroStatus(card);
bindLogoPickers(card);
}
bindLogoPickers(document);
bindMarkerPickers();
$(document).on('click', '[data-mw-image-map-clear]', function () {
var button = $(this);
$('#' + button.data('input')).val('0').trigger('change');
$('#' + button.data('preview')).text(button.data('clear-label') || 'Fallback aktiv');
});
$('[data-mw-hero-campaign-card]').each(function () {
bindHeroCampaignCard(this);
});
$('[data-mw-hero-add]').on('click', function () {
var root = $(this).closest('[data-mw-hero-campaigns]');
var list = root.find('[data-mw-hero-campaign-list]');
var template = root.find('[data-mw-hero-template]')[0];
if (!template) return;
var index = list.children('[data-mw-hero-campaign-card]').length;
var html = template.innerHTML
.replace(/__INDEX__/g, String(index))
.replace(/__index__/g, String(index));
list.append(html);
bindHeroCampaignCard(list.children('[data-mw-hero-campaign-card]').last());
});
function serializeHomeSections(root) {
var sections = [];
root.find('[data-mw-home-section-list]').children('[data-mw-home-section-card]').each(function () {
var card = $(this);
var title = {};
card.find('[data-mw-home-title-locale]').each(function () {
var input = $(this);
title[input.data('mw-home-title-locale')] = input.val() || '';
});
var section = {
id: card.data('section-id') || '',
enabled: card.find('[data-mw-home-enabled]').is(':checked'),
title: title,
icon: card.find('[data-mw-home-icon]').val() || '',
icon_image_id: parseInt(card.find('[data-mw-home-icon-image]').val(), 10) || 0
};
if (section.id === 'quick_access') {
section.items = [];
card.find('[data-mw-home-quick-item]').each(function () {
var row = $(this);
var routeValue = String(row.find('[data-mw-home-quick-route]').val() || '').split('|');
var label = {};
row.find('[data-mw-home-quick-label-locale]').each(function () {
var input = $(this);
label[input.data('mw-home-quick-label-locale')] = input.val() || '';
});
if (routeValue[0]) {
section.items.push({
route: routeValue[0],
category: routeValue.slice(1).join('|'),
label: label,
image_id: parseInt(row.find('[data-mw-home-quick-image]').val(), 10) || 0
});
}
});
}
sections.push(section);
});
root.find('[data-mw-home-sections-json]').val(JSON.stringify(sections));
root.find('[data-mw-home-save-status]').text('Ungespeicherte Änderungen');
}
function resetClonedHomeQuickItem(clone) {
// Cloning an existing row also clones the media-picker binding marker.
// Clear it before binding the new row, otherwise its picker is inert.
clone.removeAttr('data-mw-bound').removeData('mwBound');
clone.find('[data-mw-bound]').removeAttr('data-mw-bound').removeData('mwBound');
clone.find('[data-mw-home-quick-image], [data-mw-home-quick-route], [data-mw-home-quick-label-locale], [data-mw-logo-picker], [data-mw-home-quick-image-clear]').removeData();
return clone;
}
function bindHomeSections() {
$('[data-mw-home-sections]').each(function () {
var root = $(this);
var list = root.find('[data-mw-home-section-list]');
if (list.length && $.fn.sortable) {
list.sortable({
axis: 'y',
handle: '[data-mw-home-section-handle]',
items: '[data-mw-home-section-card]',
placeholder: 'mw-home-section-card--placeholder',
update: function () {
serializeHomeSections(root);
}
});
}
root.on('click', '[data-mw-home-move]', function () {
var card = $(this).closest('[data-mw-home-section-card]');
var direction = $(this).data('mw-home-move');
if (direction === 'up') {
card.prev('[data-mw-home-section-card]').before(card);
} else {
card.next('[data-mw-home-section-card]').after(card);
}
serializeHomeSections(root);
});
root.on('click', '[data-mw-home-icon-clear]', function () {
var button = $(this);
$('#' + button.data('input')).val('0').trigger('change');
$('#' + button.data('preview')).text(button.data('clear-label') || 'Fallback aktiv');
});
root.on('click', '[data-mw-home-quick-add]', function () {
var quick = root.find('[data-mw-home-quick-items]');
var source = quick.find('[data-mw-home-quick-item]').first();
var template = root.find('[data-mw-home-quick-template]').first();
var clone = source.length ? source.clone(false) : $(template.html() || '');
if (!clone.length) return;
resetClonedHomeQuickItem(clone);
var suffix = Date.now() + '-' + quick.find('[data-mw-home-quick-item]').length;
var image = clone.find('[data-mw-home-quick-image]');
var imageId = 'mw-home-quick-image-' + suffix;
var previewId = imageId + '-preview';
image.attr('id', imageId).val('0');
clone.find('[data-mw-home-quick-route]').prop('selectedIndex', 0);
clone.find('[data-mw-home-quick-label-locale]').val('');
clone.find('[data-mw-logo-picker]').attr('data-input', imageId).attr('data-preview', previewId);
clone.find('[data-mw-home-quick-image-clear]').attr('data-input', imageId).attr('data-preview', previewId);
clone.find('[id$="-preview"]').attr('id', previewId).text('Modul-Icon als Fallback');
quick.append(clone);
bindLogoPickers(clone);
serializeHomeSections(root);
});
root.on('click', '[data-mw-home-quick-remove]', function () {
$(this).closest('[data-mw-home-quick-item]').remove();
serializeHomeSections(root);
});
root.on('click', '[data-mw-home-quick-image-clear]', function () {
var button = $(this);
$('#' + button.data('input')).val('0').trigger('change');
$('#' + button.data('preview')).text('Modul-Icon als Fallback');
});
root.on('input change', '[data-mw-home-enabled], [data-mw-home-title-locale], [data-mw-home-icon], [data-mw-home-icon-image], [data-mw-home-quick-route], [data-mw-home-quick-label-locale], [data-mw-home-quick-image]', function () {
serializeHomeSections(root);
});
root.closest('form').on('submit', function () {
serializeHomeSections(root);
root.find('[data-mw-home-save-status]').text('Wird gespeichert …');
});
serializeHomeSections(root);
});
}
bindHomeSections();
});
}(jQuery));