https://www.tierschutzbund-zuerich.ch/typo3conf/ext/fp_stoerer/Res…/Public/JavaScript/fp_stoerer.js?1738667633

1// Störer schließen
2$('.tx-fp-stoerer .stoerer .myclose').click(function() {
3    var stoerer = tx_fpstoerer_getStoerer($(this));
4    tx_fpstoerer_close(stoerer);
5});
6
7// Störer verbergen
8$('.tx-fp-stoerer .stoerer .hide').click(function() {
9    var stoerer = tx_fpstoerer_getStoerer($(this));
10    tx_fpstoerer_hide(stoerer);
11});
12$('.tx-fp-stoerer .stoerer').on('mouseleave focusout', function(event) {
13    var stoerer = tx_fpstoerer_getStoerer($(this));
14    var relatedTargetStoerer = tx_fpstoerer_getStoerer($(event.relatedTarget));
15
16    if(stoerer.attr("data-hide-on-mouseleave") && !relatedTargetStoerer.is(stoerer)) {
17        tx_fpstoerer_hide(stoerer);
18    }
19});
20
21// Störer öffnen
22$('.tx-fp-stoerer .stoerer').on('mouseenter focusin', function(event) {
23    var stoerer = tx_fpstoerer_getStoerer($(this));
24    if(!tx_fpstoerer_isHidden(stoerer)) return;
25
26    tx_fpstoerer_open(stoerer);
27
28    // if focus in, we might want to select the last tabable element
29    console.log(event);
30    if(event.type === "focusin" && event.relatedTarget !== null) {
31        const position = stoerer[0].compareDocumentPosition(event.relatedTarget);
32        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
33            console.log('focus on last');
34            var focusable = stoerer[0].querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
35            var lastFocusable = focusable[focusable.length - 1];
36            $(lastFocusable).focus();
37        }
38    }
39});
40
41
42
43$(document).ready(function() {
44    var stoerers = $(this).find('.tx-fp-stoerer .stoerer');
45    stoerers.each(function() {
46        var stoerer = tx_fpstoerer_getStoerer($(this));
47
48        // Nicht einblenden, wenn Cookiegesetzt ist.
49        if(!tx_fpstoerer_isVisible(stoerer)) {
50            return;
51        }
52
53        // Ansicht anpassen
54        var displayClasses = stoerer.attr("data-display-classes");
55        console.log(displayClasses);
56        stoerer.attr("class", "stoerer " + displayClasses);
57
58        // Löse Delay auf
59        if(stoerer.attr("data-delayed")) {
60            var delayedby = $(this).attr("data-delayed-by");
61            setTimeout((function() {
62                tx_fpstoerer_display(stoerer);
63            }), delayedby);
64        }
65    })
66})
67
68
69
70
71/**
72 * Ermittelt das Störer DOM-Element.
73 * @param domelement
74 * @returns {any}
75 */
76function tx_fpstoerer_getStoerer(domelement) {
77    if(domelement.hasClass("stoerer")) {
78        return domelement;
79    }
80    return domelement.closest('.stoerer');
81}
82
83/**
84 * Prüft ob ein Störer einem angegeben Typen entspricht.
85 * @param stoerer
86 * @param variant
87 * @returns {boolean}
88 */
89function tx_fpstoerer_isVariant(stoerer, variant) {
90    return stoerer.attr("data-variant") === variant;
91}
92
93/**
94 * Ermittelt die Höhe des Störers, wenn dieser ausgefahren wäre.
95 * @param stoerer
96 * @returns {number}
97 */
98function tx_fpstoerer_getHeight(stoerer) {
99    var height = 0;
100
101    if(tx_fpstoerer_isVariant(stoerer, "bottom") || tx_fpstoerer_isVariant(stoerer, "top")) {
102        var contentWrapper = stoerer.find('.contentWrapper');
103        var overflow = contentWrapper.find('.overflow');
104        var content = contentWrapper.find('.content');
105
106        // Aktuellen Stand speichern
107        var tempContentWrapperVisible = contentWrapper.is(':visible');
108        var tempClassesOverflow = overflow.attr("class");
109        var tempHeightContent = content.css("height");
110
111        // Höhe ermitteln
112        overflow.removeClass("overflow-hidden").addClass("overflow-auto");
113        content.css("height", "");
114        contentWrapper.show();
115        height = overflow.height();
116
117        // Vorherigen stand wiederherstellen
118        if(!tempContentWrapperVisible) {
119            contentWrapper.hide();
120        }
121        overflow.attr("class", tempClassesOverflow);
122        content.css("height", tempHeightContent);
123    }
124
125    return height;
126}
127
128/**
129 * Verbirgt den Störer.
130 * @param stoerer
131 */
132function tx_fpstoerer_hide(stoerer) {
133    if(stoerer.hasClass("animating")) {
134        return false;
135    }
136    stoerer.addClass("animating");
137
138    if(tx_fpstoerer_isVariant(stoerer, "bottom") || tx_fpstoerer_isVariant(stoerer, "top")) {
139        var contentWrapper = stoerer.find('.contentWrapper');
140        var overflow = contentWrapper.find('.overflow');
141        var content = contentWrapper.find('.content');
142
143        overflow.removeClass("overflow-auto").addClass("overflow-hidden");
144        content.css("height", content.css("height"));
145        contentWrapper.slideUp(1000).queue(function() {
146            tx_fpstoerer_removeBootstrapClasses(stoerer);
147            stoerer.removeClass("animating");
148            $(this).dequeue();
149        });
150    } else if(tx_fpstoerer_isVariant(stoerer, "center")) {
151        stoerer.fadeOut().queue(function() {
152            stoerer.removeClass("animating");
153            $(this).dequeue();
154        });
155    }
156}
157
158function tx_fpstoerer_close(stoerer) {
159    tx_fpstoerer_hide(stoerer);
160    stoerer.fadeOut().queue(function() {
161        tx_fpstoerer_setHiddenCookie(stoerer);
162        $(this).remove();
163        $(this).dequeue();
164    });
165}
166
167/**
168 * Öffnet den Störer.
169 * @param stoerer
170 * @returns {boolean}
171 */
172function tx_fpstoerer_open(stoerer) {
173    if(stoerer.hasClass("animating")) {
174        return false;

175    }
176    stoerer.addClass("animating");
177
178    if(tx_fpstoerer_isVariant(stoerer, "bottom") || tx_fpstoerer_isVariant(stoerer, "top")) {
179        tx_fpstoerer_removeBootstrapClasses(stoerer);
180        var height = tx_fpstoerer_getHeight(stoerer);
181
182        var contentWrapper = stoerer.find('.contentWrapper');
183        var overflow = contentWrapper.find('.overflow');
184        var content = contentWrapper.find('.content');
185
186        content.css("height", height + "px");
187        contentWrapper.slideDown(1000).queue(function() {
188            overflow.removeClass("overflow-hidden").addClass("overflow-auto");
189            content.css("height", "");
190            stoerer.removeClass("animating");
191            $(this).dequeue();
192        });
193    } else if(tx_fpstoerer_isVariant(stoerer, "center")) {
194        stoerer.fadeIn().queue(function() {
195            stoerer.removeClass("animating");
196            $(this).dequeue();
197        });
198    }
199}
200
201/**
202 * Öffnet einen Störer das erste Mal.
203 * @param stoerer
204 */
205function tx_fpstoerer_display(stoerer) {
206    stoerer.addClass("animating");
207
208    if(tx_fpstoerer_isVariant(stoerer, "bottom") || tx_fpstoerer_isVariant(stoerer, "top")) {
209        // ToDo: Animatino für oben und unten
210        stoerer.fadeIn().queue(function() {
211            stoerer.removeClass("animating");
212            $(this).dequeue();
213        });
214    } else if(tx_fpstoerer_isVariant(stoerer, "center")) {
215        stoerer.fadeIn().queue(function() {
216            stoerer.removeClass("animating");
217            $(this).dequeue();
218        });
219    }
220}
221
222/**
223 * Entfernt die Standardklassen des Bootstrap Frameworks.
224 * @param stoerer
225 */
226function tx_fpstoerer_removeBootstrapClasses(stoerer) {
227    var contentWrapper = stoerer.find('.contentWrapper');
228    var isHidden = contentWrapper.is(":hidden");
229    contentWrapper.removeClass("d-none").removeClass("d-sm-none").removeClass("d-sm-block");
230    if(isHidden) {
231        contentWrapper.css("display", "none");
232    }
233}
234
235/**
236 * Setzt ein Cookie,der den Störer als geschlossen markiert.
237 * @param stoerer
238 */
239function tx_fpstoerer_setHiddenCookie(stoerer) {
240    var cuid = stoerer.attr("data-cuid");
241    document.cookie = "showStoerer_" + cuid + "=false;path=/";
242}
243
244/**
245 * Returns if the stoerer should be displayed at all
246 * @param stoerer
247 * @returns {boolean}
248 */
249function tx_fpstoerer_isVisible(stoerer) {
250    var cuid = stoerer.attr("data-cuid");
251    var cookies = document.cookie.split(";");
252    for(var i = 0; i < cookies.length; i++) {
253        var cookie = cookies[i];
254        var parts = cookie.split("=");
255        var key = parts.shift().trim();
256        var value = parts.join("=").trim();
257
258        if(key == ("showStoerer_" + cuid)) {
259            return false;
260        }
261    }
262    return true;
263}
264
265function tx_fpstoerer_isHidden(stoerer) {
266    return !stoerer.find('.contentWrapper').is(':visible') && !stoerer.hasClass("animating");
267}