<div style="margin: 0 0 10px 15px; padding: 10px; background-color: {{global_profile_left}}; border: 2px solid {{global_input_border}}; border-radius: 10px; height: auto; width: 1145px; display: grid; place-items: center;">
<span style="text-transform: uppercase; font-size: 25px; font-family: 'Pirates of Cydonia'; color: {{global_h2_color}}; text-align: center;">Triggerwarnungen</span>
<select id="TriggerwarnungDropdown" style="width: 24.5%; padding: 5px; border-radius: 5px; border: 1px solid {{global_input_border}}; margin-bottom: 10px; background-color: {{global_input_bg}};">
<option value="" disabled selected>Wähle ein Thema</option>
<option value="violence-abuse">Gewalt und Missbrauch</option>
<option value="mental-health-trauma">Psychische Gesundheit und Trauma</option>
<option value="death-loss">Tod und Verlust</option>
<option value="discrimination-hate">Diskriminierung und Hass</option>
<option value="substance-abuse">Substanzmissbrauch</option>
<option value="self-harm">Selbstverletzendes Verhalten</option>
<option value="sexuality-nudity">Sexualität und Nacktheit</option>
<option value="medical-physical">Medizinische und körperliche Themen</option>
<option value="loss-freedom">Verlust von Freiheit</option>
<option value="other">Sonstiges/Anderes</option>
</select>
<!-- Dynamisches zweites Dropdown-Menü -->
<select id="SubTriggerwarnungDropdown" style="width: 24.5%; padding: 5px; border-radius: 5px; border: 1px solid {{global_input_border}}; margin-bottom: 10px; background-color: {{global_input_bg}}; display: none;">
</select>
<!-- Textfeld, das angezeigt wird, wenn "Sonstiges/Anderes" ausgewählt ist -->
<input type="text" id="OtherTextInput" placeholder="Bitte spezifizieren Sie..." style="width: 24.5%; padding: 5px; border-radius: 5px; border: 1px solid {{global_input_border}}; margin-bottom: 10px; background-color: {{global_input_bg}}; display: none;">
<div style="text-align: center;">
<button id="SafeButtonTrigger">Triggerwarnung hinzufügen</button>
</div>
<div id="LoadedTriggerwarnungen" style="text-align: center; background-color: {{global_profile_left}}; border: 2px dotted {{global_input_border}}; border-radius: 10px; padding: 10px; width: 1125px; min-height: 40px; margin-bottom: 10px; margin-top: 10px; position: relative;">
<span style="text-transform: uppercase; font-size: 25px; font-family: 'Pirates of Cydonia'; color: {{global_h2_color}}; text-align: center;">Gespeicherte Triggerwarnungen</span>
<div id="TriggerwarnungenList"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let Triggerwarnungen = {
TriggerwarnungenArray: []
};
const triggerTextMapping = {
"violence-abuse": "Gewalt und Missbrauch",
"mental-health-trauma": "Psychische Gesundheit und Trauma",
"death-loss": "Tod und Verlust",
"discrimination-hate": "Diskriminierung und Hass",
"substance-abuse": "Substanzmissbrauch",
"self-harm": "Selbstverletzendes Verhalten",
"sexuality-nudity": "Sexualität und Nacktheit",
"medical-physical": "Medizinische und körperliche Themen",
"loss-freedom": "Verlust von Freiheit",
"other": "Sonstiges/Anderes"
};
function loadTriggerwarnungen(callback) {
xobor.plugin('triggerwarnungen').getDataVar('triggerwarnungnewpost_text_datav', 2, '{{post:id}}', function(res) {
if (res && res.TriggerwarnungenArray) {
Triggerwarnungen.TriggerwarnungenArray = res.TriggerwarnungenArray;
displayTriggerwarnungen();
}
callback();
});
}
function displayTriggerwarnungen() {
const listElement = document.getElementById("TriggerwarnungenList");
listElement.innerHTML = ""; // Liste zurücksetzen
// Für jede Triggerwarnung einen div-Eintrag erstellen
Triggerwarnungen.TriggerwarnungenArray.forEach((trigger) => {
const mainTriggerText = triggerTextMapping[trigger.MainTrigger] || trigger.MainTrigger; // Text aus Mapping
const subTriggerText = trigger.SubTrigger === "Keine spezifische Unterkategorie ausgewählt"
? trigger.SubTrigger
: trigger.SubTrigger || "Keine Unterkategorie";
const triggerDiv = document.createElement("div");
triggerDiv.textContent = `Thema: ${mainTriggerText}, Unterkategorie: ${subTriggerText}`;
triggerDiv.style.marginBottom = "10px";
listElement.appendChild(triggerDiv);
});
}
const subOptions = {
"violence-abuse": ["Körperliche Gewalt", "Psychischer Missbrauch", "Mobbing"],
"mental-health-trauma": ["Depression", "Angststörungen", "PTBS"],
"death-loss": ["Trauer", "Verlust eines geliebten Menschen"],
"discrimination-hate": ["Rassismus", "Sexismus", "Homophobie"],
"substance-abuse": ["Alkoholmissbrauch", "Drogenmissbrauch", "Rauchen"],
"self-harm": ["Selbstverletzendes Verhalten", "Suizidgedanken"],
"sexuality-nudity": ["Sexuelle Inhalte", "Nacktheit", "Sexuelle Orientierung"],
"medical-physical": ["Krankheiten", "Operationen", "Unfälle"],
"loss-freedom": ["Gefängnis", "Einschränkungen", "Isolation"],
"other": []
};
const mainDropdown = document.getElementById("TriggerwarnungDropdown");
const subDropdown = document.getElementById("SubTriggerwarnungDropdown");
const otherTextInput = document.getElementById("OtherTextInput");
mainDropdown.addEventListener("change", function(event) {
const mainTriggerValue = event.target.value;
if (mainTriggerValue === "other") {
subDropdown.style.display = "none";
otherTextInput.style.display = "block";
} else {
otherTextInput.style.display = "none";
subDropdown.style.display = "block";
subDropdown.innerHTML = "";
if (subOptions[mainTriggerValue]) {
subOptions[mainTriggerValue].forEach(function(option) {
const opt = document.createElement("option");
opt.value = option;
opt.textContent = option;
subDropdown.appendChild(opt);
});
} else {
subDropdown.style.display = "none";
}
}
});
document.getElementById("SafeButtonTrigger").addEventListener("click", function(event) {
event.preventDefault();
const mainTriggerValue = mainDropdown.value.trim();
const subTriggerValue = subDropdown.style.display === "block" ? subDropdown.value : null;
const otherTriggerValue = otherTextInput.style.display === "block" ? otherTextInput.value.trim() : null;
if (!mainTriggerValue) {
console.log("Bitte wähle eine gültige Triggerwarnung aus.");
return;
}
let combinedString = {
MainTrigger: mainTriggerValue,
SubTrigger: subTriggerValue || otherTriggerValue || "Keine spezifische Unterkategorie ausgewählt"
};
Triggerwarnungen.TriggerwarnungenArray.push(combinedString);
console.log("Aktualisiertes Triggerwarnungen-Array:", Triggerwarnungen.TriggerwarnungenArray);
xobor.plugin('triggerwarnungen').setDataVar('triggerwarnungnewpost_text_datav', 2, '{{post:id}}', Triggerwarnungen, function(res) {
console.log("Triggerwarnungen erfolgreich aktualisiert");
mainDropdown.value = "";
subDropdown.style.display = "none";
otherTextInput.style.display = "none";
subDropdown.innerHTML = "";
otherTextInput.value = "";
displayTriggerwarnungen();
});
});
loadTriggerwarnungen(() => displayTriggerwarnungen());
});
</script>
<style>
#SafeButtonTrigger {
background-color: {{global_input_bg}};
border: none;
color: {{global_input_border}};
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
width: 100%;
}
#SafeButtonTrigger:hover {
background-color: {{global_button_bg_hover}};
}
</style>
