https://kubawest.de/plugins/externalmedia/js/externalmedia.js

1(function () {
2
3    "use strict";
4
5
6var COOKIE_DAYS =
7    externalMediaConfig.cookieDays || 365;
8
9    function setCookie(name, value, days)
10    {
11        var d = new Date();
12
13        d.setTime(
14            d.getTime() + (days * 24 * 60 * 60 * 1000)
15        );
16
17        var cookie =
18            name + "=" + value +
19            "; expires=" + d.toUTCString() +
20            "; path=/" +
21            "; SameSite=Lax";
22
23        if (location.protocol === "https:") {
24            cookie += "; Secure";
25        }
26
27        document.cookie = cookie;
28    }
29
30
31    function getCookie(name)
32    {
33        var result = "";
34        var cookies = document.cookie.split(";");
35
36        for(var i=0; i<cookies.length; i++)
37        {
38            var c = cookies[i].trim();
39
40            if(c.indexOf(name + "=") === 0)
41            {
42                result = c.substring(name.length + 1);
43            }
44        }
45
46        return result;
47    }
48
49
50
51function consentCookie(provider)
52{
53    return "cmsimple_externalmedia_" + provider;
54}
55
56
57
58function hasConsent(provider)
59{
60    return getCookie(
61        consentCookie(provider)
62    ) == "1";
63}
64
65
66
67function deleteCookie(name)
68{
69    var cookie =
70        name +
71        "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" +
72        "; path=/" +
73        "; SameSite=Lax";
74
75    if (location.protocol === "https:")
76    {
77        cookie += "; Secure";
78    }
79
80    document.cookie = cookie;
81}
82
83
84
85    function createIframe(box)
86    {
87
88        var button =
89            box.querySelector(".externalmedia-load");
90
91
92        if(!button)
93        {
94            return;
95        }
96
97
98        var src =
99            button.getAttribute("data-externalmedia-src");
100
101
102        var provider =
103            button.getAttribute("data-externalmedia-provider");
104
105
106        var iframe =
107            document.createElement("iframe");
108
109
110        iframe.src = src;
111
112        iframe.width = "560";
113        iframe.height = "315";
114
115        iframe.frameBorder = "0";
116
117        iframe.allowFullscreen = true;
118
119        iframe.allow =
120        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
121
122
123        box.innerHTML = "";
124
125        box.appendChild(iframe);
126
127    }
128
129
130
131
132    function openDialog(box)
133    {
134
135        var provider =
136        box.getAttribute("data-provider");
137
138        var dialog =
139        document.createElement("div");
140
141
142        dialog.className =
143        "externalmedia-dialog";
144
145
146        dialog.innerHTML =
147        '<div class="externalmedia-dialog-box">' +
148
149        '<p>' +
150        'YouTube wird erst nach Ihrer Zustimmung geladen.' +
151        '</p>' +
152
153        '<button class="externalmedia-once">' +
154        'Nur dieses Medium laden' +
155        '</button>' +
156
157        '<button class="externalmedia-all">' +
158        'Für diesen Anbieter dauerhaft erlauben' +
159        '</button>' +
160
161        '<button class="externalmedia-cancel">' +
162        'Abbrechen' +
163        '</button>' +
164
165        '</div>';
166
167
168        document.body.appendChild(dialog);
169
170
171
172        dialog.querySelector(".externalmedia-once")
173        .onclick=function(){
174
175            dialog.remove();
176
177            createIframe(box);
178
179        };
180
181
182
183        dialog.querySelector(".externalmedia-all")
184        .onclick=function(){
185
186            setCookie(
187                consentCookie(provider),
188                "1",
189                COOKIE_DAYS
190            );
191
192            dialog.remove();
193
194            createIframe(box);
195
196        };
197
198
199
200        dialog.querySelector(".externalmedia-cancel")
201        .onclick=function(){
202
203            dialog.remove();
204
205        };
206
207    }
208
209
210
211
212    function init()
213    {
214
215        var boxes =
216        document.querySelectorAll(".externalmedia");
217
218
219        for(var i=0;i<boxes.length;i++)
220        {
221
222            var provider =
223            boxes[i].getAttribute("data-provider");
224
225
226            if(hasConsent(provider))
227            {
228                createIframe(boxes[i]);
229            }
230            else
231            {
232
233                (function(box){
234
235                    var button =
236                    box.querySelector(".externalmedia-load");
237
238
239                    if(button)
240                    {
241                        button.onclick=function(){
242
243                            openDialog(box);
244
245                        };
246                    }
247
248
249                })(boxes[i]);
250
251            }
252
253        }
254
255    }
256
257
258
259
260window.externalMediaRevoke = function(provider)
261{
262
263    deleteCookie(
264        consentCookie(provider)
265    );
266
267
268    var boxes =
269    document.querySelectorAll(
270        '.externalmedia[data-provider="' + provider + '"]'
271    );
272
273
274    for(var i=0; i<boxes.length; i++)
275    {
276
277        boxes[i].innerHTML =
278        '<div class="externalmedia-placeholder">' +
279
280        '<div class="externalmedia-play"></div>' +
281
282        '<div class="externalmedia-text">' +
283        'Die Zustimmung wurde widerrufen.' +
284        '</div>' +
285
286        '<button class="externalmedia-load">' +
287        'Medium laden' +
288        '</button>' +
289
290        '</div>';
291
292    }
293
294};
295
296
297
298
299    if(document.readyState=="loading")
300    {
301        document.addEventListener(
302            "DOMContentLoaded",
303            init
304        );
305    }
306    else
307    {
308        init();
309    }
310
311
312})();