Update from Git Manager GUI
This commit is contained in:
84
Minecraft-Modern-Theme/js/announcement.js
Normal file
84
Minecraft-Modern-Theme/js/announcement.js
Normal file
@@ -0,0 +1,84 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const bar = document.getElementById("mm-announcement");
|
||||
if (!bar) return;
|
||||
|
||||
// --- 1. Positionierung ---
|
||||
const position = bar.dataset.position || 'below-header';
|
||||
|
||||
if (position === "top") {
|
||||
document.body.insertAdjacentElement('afterbegin', bar);
|
||||
}
|
||||
else if (position === "below-slider") {
|
||||
const anchor = document.getElementById("mm-announcement-anchor");
|
||||
if (anchor) {
|
||||
anchor.replaceWith(bar);
|
||||
} else {
|
||||
const header = document.getElementById("masthead");
|
||||
if (header) header.insertAdjacentElement('afterend', bar);
|
||||
}
|
||||
}
|
||||
else if (position === "below-header") {
|
||||
const header = document.getElementById("masthead");
|
||||
if (header) header.insertAdjacentElement('afterend', bar);
|
||||
}
|
||||
else {
|
||||
const header = document.getElementById("masthead");
|
||||
if (header) header.insertAdjacentElement('afterend', bar);
|
||||
}
|
||||
|
||||
const closeBtn = bar.querySelector(".mm-announcement-close");
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener("click", function () {
|
||||
bar.style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
// --- 2. Countdown Timer Logik ---
|
||||
const timerElement = document.querySelector('.mm-countdown-timer');
|
||||
|
||||
if (timerElement) {
|
||||
const targetDateString = timerElement.getAttribute('data-date');
|
||||
const expiredMessage = timerElement.getAttribute('data-expired');
|
||||
|
||||
// Prüfen ob Datum gesetzt ist
|
||||
if (targetDateString) {
|
||||
const countDownDate = new Date(targetDateString).getTime();
|
||||
|
||||
const updateTimer = setInterval(function() {
|
||||
const now = new Date().getTime();
|
||||
const distance = countDownDate - now;
|
||||
|
||||
if (distance < 0) {
|
||||
clearInterval(updateTimer);
|
||||
timerElement.innerHTML = expiredMessage;
|
||||
// Optional: Rot einfärben wenn abgelaufen
|
||||
timerElement.style.color = '#ff3333';
|
||||
return;
|
||||
}
|
||||
|
||||
// Zeitberechnung
|
||||
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// Formatierung (z.B. 05 statt 5)
|
||||
const fDays = days > 0 ? days + "d " : "";
|
||||
const fHours = hours < 10 ? "0" + hours : hours;
|
||||
const fMinutes = minutes < 10 ? "0" + minutes : minutes;
|
||||
const fSeconds = seconds < 10 ? "0" + seconds : seconds;
|
||||
|
||||
timerElement.innerHTML = fDays + fHours + ":" + fMinutes + ":" + fSeconds;
|
||||
}, 1000);
|
||||
|
||||
// Sofort einmal ausführen, um Ladezeit zu vermeiden
|
||||
// Wir lösen das Interval manuell für den ersten Durchlauf aus,
|
||||
// indem wir den Code kopieren oder den Timeout kurz setzen.
|
||||
// Für diesen Fall reicht der erste Tick nach 1 Sekunde,
|
||||
// aber wir können es direkt aufrufen:
|
||||
// (Hier nutzen wir einfach den ersten Tick des Intervals)
|
||||
} else {
|
||||
timerElement.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
158
Minecraft-Modern-Theme/js/mm-announcement-admin.js
Normal file
158
Minecraft-Modern-Theme/js/mm-announcement-admin.js
Normal file
@@ -0,0 +1,158 @@
|
||||
(function($){
|
||||
$(document).ready(function(){
|
||||
|
||||
const fonts = window.MM_Announcement_Fonts || {};
|
||||
const current = window.MM_Announcement_Current || {};
|
||||
const fontSelect = $('#mm-announcement-font');
|
||||
const sizeInput = $('#mm-announcement-size');
|
||||
const bgInput = $('#mm-announcement-bg');
|
||||
const colorInput = $('#mm-announcement-color');
|
||||
const previewText = $('#mm-announcement-preview-text');
|
||||
const previewWrap = $('#mm-announcement-preview');
|
||||
const positionSelect = $('#mm-announcement-position');
|
||||
|
||||
// Helper: lädt Google-Font-Link oder updatet existing
|
||||
function ensureGoogleFont(googleName) {
|
||||
if (!googleName) return;
|
||||
const id = 'mm-admin-google-font';
|
||||
const href = 'https://fonts.googleapis.com/css2?family=' + encodeURIComponent(googleName) + ':wght@400;700&display=swap';
|
||||
let link = document.getElementById(id);
|
||||
if (link) {
|
||||
if (link.getAttribute('href') !== href) link.setAttribute('href', href);
|
||||
} else {
|
||||
link = document.createElement('link');
|
||||
link.id = id;
|
||||
link.rel = 'stylesheet';
|
||||
link.href = href;
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
// Update preview appearance based on font key
|
||||
function updatePreviewForFontKey(key) {
|
||||
const meta = fonts[key];
|
||||
if (!meta) {
|
||||
previewText.css('font-family', '');
|
||||
return;
|
||||
}
|
||||
previewText.css('font-family', meta.css);
|
||||
if (meta.google && meta.google_name) {
|
||||
ensureGoogleFont(meta.google_name);
|
||||
}
|
||||
}
|
||||
|
||||
// Update size/colors/position UI
|
||||
function updateSizeAndColors() {
|
||||
const size = parseInt(sizeInput.val(), 10) || 16;
|
||||
previewText.css('font-size', size + 'px');
|
||||
previewWrap.css('background', bgInput.val());
|
||||
previewWrap.css('color', colorInput.val());
|
||||
}
|
||||
|
||||
// Read content from wp_editor (TinyMCE) or textarea
|
||||
function getEditorText() {
|
||||
// Try TinyMCE first
|
||||
if ( typeof tinymce !== 'undefined' ) {
|
||||
try {
|
||||
const ed = tinymce.get('mm_announcement_text');
|
||||
if (ed && !ed.isHidden()) {
|
||||
// getContent then strip tags
|
||||
const html = ed.getContent({format: 'html'});
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = html;
|
||||
return tmp.textContent || tmp.innerText || '';
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
// Fallback to textarea
|
||||
const ta = $('#mm_announcement_text');
|
||||
if (ta.length) {
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = ta.val();
|
||||
return tmp.textContent || tmp.innerText || '';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// Update preview text from editor content
|
||||
function updatePreviewTextFromEditor() {
|
||||
const text = getEditorText();
|
||||
if (text && text.trim().length) {
|
||||
previewText.text(text.trim());
|
||||
} else {
|
||||
previewText.text(current.text || 'Das ist eine Vorschau: Wie sieht die Schrift aus?');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize controls with current settings
|
||||
if (current.font) {
|
||||
updatePreviewForFontKey(current.font);
|
||||
fontSelect.val(current.font);
|
||||
} else {
|
||||
updatePreviewForFontKey(fontSelect.val());
|
||||
}
|
||||
if (current.size) sizeInput.val(current.size);
|
||||
if (current.bg) bgInput.val(current.bg);
|
||||
if (current.color) colorInput.val(current.color);
|
||||
|
||||
updateSizeAndColors();
|
||||
updatePreviewTextFromEditor();
|
||||
|
||||
// Attach events --------------------------------------------------
|
||||
|
||||
// font change
|
||||
fontSelect.on('change', function(){
|
||||
const key = $(this).val();
|
||||
updatePreviewForFontKey(key);
|
||||
});
|
||||
|
||||
// size/color/position change
|
||||
sizeInput.on('input change', updateSizeAndColors );
|
||||
bgInput.on('input change', updateSizeAndColors );
|
||||
colorInput.on('input change', updateSizeAndColors );
|
||||
|
||||
// Editor changes:
|
||||
// - TinyMCE: listen for keyup / change events when editor is ready
|
||||
// - Textarea: listen for input
|
||||
function attachEditorListeners() {
|
||||
// TinyMCE
|
||||
if ( typeof tinymce !== 'undefined' ) {
|
||||
const ed = tinymce.get('mm_announcement_text');
|
||||
if (ed) {
|
||||
ed.on('keyup change NodeChange', function(){
|
||||
updatePreviewTextFromEditor();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Textarea fallback
|
||||
$('#mm_announcement_text').on('input change', function(){
|
||||
updatePreviewTextFromEditor();
|
||||
});
|
||||
}
|
||||
|
||||
// TinyMCE initialisation might be async — poll short time then attach
|
||||
let tries = 0;
|
||||
const waitForEditor = setInterval(function(){
|
||||
tries++;
|
||||
if ( (typeof tinymce !== 'undefined' && tinymce.get('mm_announcement_text')) || $('#mm_announcement_text').length ) {
|
||||
clearInterval(waitForEditor);
|
||||
attachEditorListeners();
|
||||
} else if (tries > 30) { // about 3s
|
||||
clearInterval(waitForEditor);
|
||||
// still attach textarea event just in case
|
||||
$('#mm_announcement_text').on('input change', updatePreviewTextFromEditor);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Also update preview when the form is programmatically changed (e.g., quicktags)
|
||||
$(document).on('change', '#mm-announcement-font, #mm-announcement-size, #mm-announcement-bg, #mm-announcement-color', function(){
|
||||
updateSizeAndColors();
|
||||
updatePreviewForFontKey($('#mm-announcement-font').val());
|
||||
updatePreviewTextFromEditor();
|
||||
});
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user