https://www.literaturportal-bayern.de/templates/yoo_master2/styles/lpb/js/lpb_spotify_embed.js

1// Vorwort Sepp Kuffer,
2// Laden der youtube-Videos immer mit document.write vgl.
3// <script type="text/javascript">document.write('<div class="embed_youtube">https://www.youtube.com/watch?v=gdvb_4bynUw</div>');</script>
4// in
5// https://www.bsb-muenchen.de/aktuelles/article/bsb-navigator-neue-app-der-bayerischen-staatsbibliothek-online/
6// Laden auf der HTML-Seite mit document.write hat den Sinn, dass ohne aktiviertes Javascript kein Laden.
7// Sonst könnte das Opt-In umgangen werden.
8// Beachte Aufruf per https von youtube https://www.youtube.com/watch?v=
9// ist für das Funktionieren der Ersetzungen unten notwendig
10
11// Der Text im Opt-In verlangt von uns Impressum-Datenschutzerklaerung
12// unter https://www.literaturportal-bayern.de/impressum-datenschutzerklaerung/
13
14// und fileadmin/media/scripts/BSBYouTubeEmbed/images/info.png wuerden wir anpassen (Typo3-Pfade)
15// und natuerlich auch die entsprechende Icons dort hinterlegen.
16
17// cookie habe ich von "bsbyoutubeembed" nach "lpbspotifyembed" umbenannt.
18
19// css koennte wohl verwendet werden wie es ist.
20
21// Function Set Cookie
22function set_cookie(my_cookie, value, days) {
23  if (days) {
24    var date = new Date();
25    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
26    var expires = "; expires=" + date.toGMTString();
27  } else {
28    expires = "";
29  }
30  document.cookie = my_cookie + "=" + value + expires + "; path=/";
31}
32
33// Function Delete Cookie
34function delete_cookie(my_cookie) {
35  set_cookie(my_cookie, "", -1);
36}
37
38// Function Read Cookie
39function read_cookie(my_cookie) {
40  var my_cookie_eq = my_cookie + "=";
41  var ca = document.cookie.split(";");
42  for (var i = 0; i < ca.length; i++) {
43    var c = ca[i];
44    while (c.charAt(0) == " ") {
45      c = c.substring(1, c.length);
46    }
47    if (c.indexOf(my_cookie_eq) == 0) {
48      return c.substring(my_cookie_eq.length, c.length);
49    }
50  }
51  return null;
52}
53
54// Function Create Embed-Code
55function create_embedcode(url) {
56  var embed_code =
57    "<iframe width='100%' height='352' src='" +
58    url +
59    "' frameborder='0' allowfullscreen></iframe>";
60  return embed_code;
61}
62
63jQuery(document).ready(function ($) {
64  // If YouTube-Link is found
65  if (jQuery(".embed_spotify").length) {
66    var spotify_url = [];
67    var clickIndex = 0;
68    // For each Video-Link
69    for (var i = 0; i < $(".embed_spotify").length; i = i + 1) {
70      // Get URL
71      spotify_url[i] = $(".embed_spotify > iframe").attr("src");
72
73      // Cookie set?
74      if (read_cookie("lpbspotifyembed") === "yes") {
75        // Create Spotify-iFrame
76        $(".embed_spotify").eq(i).html(create_embedcode(spotify_url[i]));
77      } else {
78
79        var spotify_img = "/images/literaturportal_logo_claim_scaled.jpg";
80
81				$(".embed_spotify").eq(i).html( "<div class='embed_spotify_preview'></div>" );
82
83        // Initiate dialog
84        if ($("html").attr("lang") == "en") {
85          // English version
86          $(".embed_spotify")
87            .eq(i)
88            .append(
89              "<div class='embed_dialog'><h1>Activation required</h1>By clicking on this audio, Spotify audios will be shown on the website www.literaturportal-bayern.de in the future. Please note that after activation data are transferred to YouTube. You can permanently activate the playing by one click or permanently deactivate the playing again by clicking on the data protection button on the right.<br><a href='/impressum/'>More Information</a><br><div class='embed_ok'>Permanent activation</div></div>"
90            );
91        } else {
92          // German version
93          $(".embed_spotify")
94            .eq(i)
95            .append(
96              "<div class='embed_dialog' style='margin:30px 2px 0 0;padding:0 10px 46px 10px;'><h1>Aktivierung erforderlich</h1>Durch das Klicken auf dieses Audio werden in Zukunft Spotify-Audios auf www.literaturportal-bayern.de eingeblendet. Wir m&ouml;chten Sie darauf hinweisen, dass nach der Aktivierung Daten an Spotify &uuml;bermittelt werden. Sie k&ouml;nnen mit einem Klick dauerhaft das Abspielen aktivieren oder im Datenschutzschalter rechts die Aktivierung auch dauerhaft wieder r&uuml;ckg&auml;ngig machen.<br><a href='/impressum/'>Weitere Informationen</a><br><div class='embed_ok'>

96Dauerhafte Aktivierung</div></div>"
97            );
98        }
99      }
100    }
101    // On commit dialog: Create YouTube-iFrame
102    $(".embed_dialog .embed_ok").click(function () {
103      set_cookie("lpbspotifyembed", "yes", 180);
104      $(".embed_dialog").remove();
105      for (var i = $(".embed_spotify").length - 1; i >= 0; i = i - 1) {
106        $(".embed_spotify .embed_spotify_preview")
107          .eq(i)
108          .replaceWith(create_embedcode(spotify_url[i]));
109      }
110      if (read_cookie("lpbspotifyembed") === "yes") {
111        $(".embed_spotify .embed_settings_box input").prop("checked", true);
112      }
113    });
114
115    // Create Buttons and Boxes for Info and Settings
116    if ($("html").attr("lang") == "en") {
117      // English version
118      $(".embed_spotify").prepend(
119        "<ul><li class='embed_settings'><i class='uk-icon-gear uk-icon-small'></i></li><li class='embed_info'><i class='uk-icon-info-circle'></i></li></ul>"
120      );
121      $(".embed_spotify .embed_info").after(
122        "<div class='embed_info_box'>If you activate the field by clicking on it, information will be transferred to the operator of Spotify. After placing the check mark, all audios can be viewed permanently without activation in the individual case. By removing the check mark, the permanent activation can be cancelled again.</div>"
123      );
124      $(".embed_spotify .embed_settings").after(
125        "<div class='embed_settings_box'>Activate permanently and agree with data transfer:<br><div style='margin-top: 5px; display: flex; align-items: center;'><input type='checkbox' class='embed_settings_checkbox'><span style='display: inline-block; margin-left: 5px; margin-bottom: -5px;'>Spotify</span></div></div>"
126      );
127    } else {
128      // German version
129      $(".embed_spotify").prepend(
130        "<ul><li class='embed_settings'><i class='uk-icon-gear uk-icon-small uk-icon-justify'></i></li><li class='embed_info'><i class='uk-icon-info-circle uk-icon-small uk-icon-justify'></i></li></ul>"
131      );
132      $(".embed_spotify .embed_info").after(
133        "<div class='embed_info_box'>Wenn Sie das Feld durch einen Klick aktivieren, werden Informationen an den Betreiber von Spotify &uuml;bertragen. Nach Setzen des H&auml;kchens k&ouml;nnen alle Audios dauerhaft ohne nochmalige Aktivierung abgerufen werden. Durch Entfernen des H&auml;kchens k&ouml;nnen Sie die dauerhafte Aktivierung wieder deaktivieren.</div>"
134      );
135      $(".embed_spotify .embed_settings").after(
136        "<div class='embed_settings_box'>Dauerhaft aktivieren und Daten&uuml;bertragung zustimmen:<br><div style='margin-top: 5px; display: flex; align-items: center;'><input type='checkbox' class='embed_settings_checkbox'><span style='display: inline-block; margin-left: 5px; margin-bottom: -5px;'>Spotify</span></div></div>"
137      );
138    }
139    if (read_cookie("lpbspotifyembed") === "yes") {
140      $(".embed_spotify .embed_settings_box input").prop("checked", true);
141    }
142
143    // On click Info Icon
144    $(".embed_spotify .embed_info").click(function () {
145      clickIndex = $(".embed_info").index(this);
146      if ($(".embed_spotify .embed_info_box").eq(clickIndex).is(":visible")) {
147        $(".embed_spotify .embed_info_box").eq(clickIndex).hide();
148      } else {
149        $(".embed_spotify .embed_settings_box").eq(clickIndex).hide();
150        $(".embed_info_box").eq(clickIndex).show();
151      }
152    });
153
154    // On click Settings Icon
155    $(".embed_spotify .embed_settings").click(function () {
156      clickIndex = $(".embed_settings").index(this);
157      if (
158        $(".embed_spotify .embed_settings_box").eq(clickIndex).is(":visible")
159      ) {
160        $(".embed_spotify .embed_settings_box").eq(clickIndex).hide();
161      } else {
162        $(".embed_spotify .embed_info_box").eq(clickIndex).hide();
163        $(".embed_settings_box").eq(clickIndex).show();
164      }
165    });
166
167    // On click Settings Checkbox
168    $(".embed_spotify .embed_settings_box :checkbox").change(function () {
169      if ($(this).prop("checked")) {
170        $(".embed_spotify .embed_settings_box input").prop("checked", true);
171        set_cookie("lpbspotifyembed", "yes", 180);
172        $(".embed_spotify .embed_settings_box").hide();
173        $(".embed_dialog .embed_ok").click();
174      } else {
175        delete_cookie("lpbspotifyembed");
176        location.reload();
177      }
178    });
179  }
180});