1 2 // // Mobile Navigation 3 document.querySelector("#mobile-menu-icon").addEventListener('click',(e) => { 4 e.preventDefault(); 5 document.getElementById("navbar").classList.toggle('active') 6 document.getElementById("link-wrapper").classList.toggle('active') 7 document.getElementById("mobile-menu-icon").classList.toggle('active') 8 }) 9 10 // Products & Buylinks (build music carousel item) 11 fetch('https://services.sme-apps.com/cache/?id=74&lang=de_DE&type=products',).then(response => response.json()) 12 .then(data => { 13 const products = data.products.filter((prod) => prod.product_type.name =="CD" ) 14 const musicItem = document.getElementById('music-carousel') 15 16 if (products.length) { 17 let html = '' 18 19 for (let i = 0; i < products.length; i++) { 20 console.log(products[i]) 21 const coverArt = products[i].cover.url 22 const altText = products[i].title 23 const buyLinks = products[i].buy_links 24 const artist = products[i].artist 25 let spotifyEmbedId = artist.spotify 26 let buyLink = "" 27 let spotify = false 28 29 buyLinks.forEach(item => { 30 if (item.merchant.name == "Spotify") { 31 spotify = true 32 spotifyEmbedId = item.url 33 } 34 35 if (item.merchant.name == "Linkfire") { 36 buyLink = item.url 37 } 38 39 }) 40 41 html += '<div class="item swiper-slide">' 42 html += '<div class="cover">' 43 html += `<img src="${coverArt}" alt="${altText}">` 44 html += '</div>' 45 html += '<div class="music">' 46 html += `<iframe style="border-radius:12px" src="${spotifyEmbedId}" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>` 47 48 if (buyLink) { 49 html += `<a class="btn" href="${buyLink}" target="_blank">JETZT BESTELLEN & ANHÃREN</a>` 50 } 51 52 html += '</div>' 53 html += '</div>' 54 } 55 56 if (musicItem) { 57 musicItem.innerHTML = html; 58 } 59 } 60 61 // Music Carousel 62 63 const music_swiper = new Swiper('.music-swiper', { 64 speed: 400, 65 effect: 'fade', 66 centeredSlides: true, 67 loop: true, 68 slidesPerView: 1, 69 navigation: { 70 enabled: true, 71 nextEl: '.owl-custom-nav-next.arrow', 72 prevEl: '.owl-custom-nav-prev.arrow' 73 }, 74 }); 75 76 }) 77 78 // Products & Buylinks (build radioplaycarousel item) 79 fetch('https://services.sme-apps.com/cache/?id=74&lang=de_DE&type=products',).then(response => response.json()) 80 .then(data => { 81 const products = data.products.filter((prod) => prod.product_type.name =="Hörspiel" ) 82 if (products.length <= 1) { 83 products.push(products[0]) 84 products.push(products[0]) 85 } 86 87 const radioplayItem = document.getElementById('radioplay-carousel') 88 89 if (products.length) { 90 let html = '' 91 92 for (let i = 0; i < products.length; i++) { 93 console.log(products[i]) 94 const coverArt = products[i].cover.url 95 const altText = products[i].title 96 const buyLinks = products[i].buy_links 97 const artist = products[i].artist 98 let description = products[i].description 99 let buyLink = "" 100 let spotify = false 101 102 buyLinks.forEach(item => { 103 if (item.merchant.name == "Spotify") { 104 spotify = true 105 spotifyEmbedId = item.url 106 } 107 108 if (item.merchant.name == "Linkfire") { 109 buyLink = item.url 110 } 111 112 }) 113 114 html += '<div class="item swiper-slide">' 115 html += '<div class="cover">' 116 html += `<img src="${coverArt}" alt="${altText}">` 117 html += '</div>' 118 html += '<div class="radioplay box">' 119 html += `<p>${description}</p>` 120 121 if (buyLink) { 122 html += `<a class="btn" href="${buyLink}" target="_blank">JETZT BESTELLEN & ANHÃREN</a>` 123 } 124 125 html += '</div>' 126 html += '</div>' 127 } 128 129 if (radioplayItem) { 130 radioplayItem.innerHTML = html; 131 } 132 } 133 134 // radioplay Carousel
135 136 const radioplay_swiper = new Swiper('.radioplay-swiper', { 137 speed: 400, 138 effect: 'fade', 139 centeredSlides: true, 140 loop: true, 141 slidesPerView: 1, 142 navigation: { 143 enabled: true, 144 nextEl: '.owl-custom-nav-next.arrow', 145 prevEl: '.owl-custom-nav-prev.arrow' 146 }, 147 }); 148 149 }) 150 151 152 153 154 // Social/DSP Links Import and MUSIC CAROUSEL 155 fetch('https://services.sme-apps.com/cache/?id=74&lang=de_DE&type=artists',).then(response => response.json()) 156 .then(data => { 157 158 // Social 159 const artist = data.artists[0] 160 const socials = document.getElementById('beast-socials') 161 const footerSocials = document.getElementById('footer-socials') 162 let html = '' 163 164 if (artist.spotify) { 165 const spotify = artist.spotify 166 html += `<li><a href="${spotify}" target="_blank"><img alt="spotify" src="./img/icon/spotify.svg"></a></li>` 167 } 168 169 if (artist.itunes) { 170 const itunes = artist.itunes 171 html += `<li><a href="${itunes}" target="_blank"><img alt="itunes" src="./img/icon/apple.svg"></a></li>` 172 } 173 174 if (artist.amazon) { 175 const amazon = artist.amazon 176 html += `<li><a href="${amazon}" target="_blank"><img alt="amazon" src="./img/icon/amazon.svg"></a></li>` 177 } 178 179 if (artist.tiktok) { 180 const tiktok = artist.tiktok 181 html += `<li><a href="${tiktok}" target="_blank"><img alt="tiktok" src="./img/icon/tiktok.svg"></a></li>` 182 } 183 184 if (artist.instagram) { 185 const instagram = artist.instagram 186 html += `<li><a href="${instagram}" target="_blank"><img alt="instagram" src="./img/icon/instagram.svg"></a></li>` 187 } 188 189 if (artist.facebook) { 190 const facebook = artist.facebook 191 html += `<li><a href="${facebook}" target="_blank"><img alt="facebook" src="./img/icon/facebook.svg"></a></li>` 192 } 193 194 if (artist.youtube) { 195 const youtube = artist.youtube 196 html += `<li><a href="${youtube}" target="_blank"><img alt="youtube" src="./img/icon/youtube.svg"></a></li>` 197 } 198 199 // Newsletter 200 if (artist.newsletter) { 201 const navNewsletterLink = document.querySelector('.newsletter-link') 202 let navHtml = '' 203 const newsletter = artist.newsletter 204 205 navHtml += `<a class="mfp-iframe" href="${newsletter}">Newsletter</a>` 206 navNewsletterLink.innerHTML = navHtml 207 208 html += `<li><a class="mfp-iframe" href="${newsletter}"><img alt="newsletter" src="./img/icon/newsletter.svg"></a></li>` 209 } 210 211 if (html.length) { 212 socials.innerHTML = html 213 footerSocials.innerHTML = html 214 } 215 216 // Shop 217 if (artist.shop) { 218 const shopBtn = document.getElementById('shop-button') 219 const shopUrl = artist.shop 220 let shopHtml = '' 221 222 shopHtml += `<a class="btn" href="${shopUrl}">Zum Shop</a>` 223 224 shopBtn.innerHTML = shopHtml 225 } 226 227 228 // Navlinks 229 if (artist.merch) { 230 const url = artist.merch 231 const navBtn = document.getElementById('treffe-link') 232 let navHtml = '' 233 navHtml += `<a href="${url}" target="_blank" >Treffe Die Dinos</a>` 234 navBtn.innerHTML = navHtml 235 236 const footerLink = document.getElementById('treffe-footer-link') 237 footerLink.href = url 238 } 239 240 if (artist.myspace) { 241 const url = artist.myspace 242 const navBtn = document.getElementById('fanclub-link') 243 let navHtml = '' 244 navHtml += `<a href="${url}" target="_blank" >Fanclub</a>` 245 navBtn.innerHTML = navHtml 246 247 const fanclubFooterLink = document.getElementById('fanclub-footer-link') 248 fanclubFooterLink.href = url 249 } 250 }) 251 252 // Tourdate Import 253 254 fetch('https://services.sme-apps.com/cache/?id=74&lang=de_DE&type=events',).then(response => response.json()) 255 .then(response => { 256 moment.locale('de') 257 const currentDate = moment() 258 if (response.event_dates.length) { 259 const filteredEvents = response.event_dates.filter(eventDate => { 260 const startDate = moment(eventDate.start_date) 261 return startDate.isAfter(currentDate) 262 }).sort((a, b) => { 263 return new Date(a.start_date) - new Date(b.start_date); 264 }); 265 let tours = []; 266 for (let event of filteredEvents) { 267 let i = 0; 268 //let i = tours.findIndex(e => e.name === event.tour.name); 269 if (i < 0) { 270 tours.push({ 271 name: event.tour.name, 272 events: [] 273 }); 274 i = tours.length - 1; 275 } 276 tours[i].events.push(event); 277 278 } 279 // console.log(tours) 280 281 if (tours.length) { 282 createTourHTML(tours) 283 } 284 } 285 }) 286 287 288 289 function createTourHTML(tours) { 290 291 const tourSection = document.getElementById("tour-section") 292 let html = "" 293 294 295 for (let tour of tours) { 296 moment.locale('de') 297 html += `<div class="tour item swiper-slide"><h3>${tour.name}</h3><div class="tour-dates">` 298 299 for (let show of tour.events) { 300 html += '<div class="event-group">' 301 html += '<div class="event-info cover">' 302 html += `<div class="event-date">${moment(show.start_date).format('DD. MMMM YYYY')}</div>` 303 html += `<div class="event-venue">${show.location}</div> | ` 304 html += `<div class="event-location">${show.city}</div>` 305 html += '</div>' 306 html += '<div class="event-links">' 307 308 for (let ticket of show.ticket_links) { 309 html += `<a class="link" href="${ticket.url} target="_blank" >${ticket.merchant.name}</a>` 310 } 311 312 html += '</div>' 313 html += '</div>' 314 } 315 html += '</div></div>' 316 } 317 318 tourSection.innerHTML = html; 319 //tour Carousel
320 const tour_swiper = new Swiper('.tour-swiper', { 321 speed: 400, 322 centeredSlides: true, 323 slidesPerView: 3, 324 loop: true, 325 navigation: { 326 enabled: true, 327 nextEl: '.owl-custom-nav-next.arrow', 328 prevEl: '.owl-custom-nav-prev.arrow' 329 }, 330 }); 331 } 332 333 // // Scroll 334 var scrollElements = document.getElementsByClassName('scroll') 335 for (var i = 0; i < scrollElements.length; i++) { 336 scrollElements[i].addEventListener('click',(e) => { 337 e.preventDefault(); 338 339 const href = e.target.getAttribute("href"); 340 const target = document.querySelector(href) 341 const animationDuration = 500; 342 343 document.getElementById("navbar").classList.toggle("active"); 344 document.getElementById("link-wrapper").classList.toggle("active"); 345 346 target.scrollIntoView({ behavior: "smooth"}); 347 348 }); 349 } 350 351 352 fetch('https://services.sme-apps.com/cache/?id=74&lang=de_DE&type=artists',).then(response => response.json()) 353 .then(response => { 354 355 const playlistUrl = response.artists[0].youtube_playlist 356 357 getPlaylist(playlistUrl) 358 }) 359 360 function getPlaylist(url) { 361 const regex = /[&?]list=([^&]+)/i 362 const match = url.match(regex) 363 const playlistId = match ? match[1] : "" 364 const API_KEY = "AIzaSyCPAO_b_h1shtFFkIjaAJduaNq2vN_dvvk" 365 const baseUrl = "https://www.googleapis.com/youtube/v3/" 366 let html = "" 367 368 fetch(`${baseUrl}playlistItems?part=snippet&key=${API_KEY}&playlistId=${playlistId}`,).then(response => response.json()) 369 .then(responseJson => { 370 371 for (let item of responseJson.items) { 372 const title = item.snippet.title 373 const videoId = item.snippet.resourceId.videoId 374 375 html += `<div class="item swiper-slide"><div class="embed-container"><iframe width="560" height="315" data-src="https://www.youtube.com/embed/${videoId}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div><p>${title}</p></div>` 376 } 377 378 createVideoCarousel(html) 379 }) 380 } 381 382 // VIDEO CAROUSEL 383 function createVideoCarousel(html) { 384 const videoCarousel = document.getElementById("videos-carousel") 385 videoCarousel.innerHTML = html; 386 387 const videos_swiper = new Swiper('.videos-swiper', { 388 speed: 400, 389 slidesPerView: 1, 390 centeredSlides: true, 391 loop: true, 392 navigation: { 393 enabled: true, 394 nextEl: '.owl-custom-nav-next.arrow', 395 prevEl: '.owl-custom-nav-prev.arrow' 396 }, 397 }); 398 399 400 } 401 402 // ISO 8601 Decoder 403 function durationToSeconds(durationString) { 404 const durationRegex = /P(?:([0-9]+)Y)?(?:([0-9]+)M)?(?:([0-9]+)W)?(?:([0-9]+)D)?(?:T(?:([0-9]+)H)?(?:([0-9]+)M)?(?:([0-9]+)S)?)?/; 405 const match = durationRegex.exec(durationString); 406 407 let seconds = 0; 408 let secondsPerMinute = 60; 409 let minutesPerHour = 60 * secondsPerMinute; 410 let hoursPerDay = 24 * minutesPerHour; 411 if (match) { 412 const [, years, months, weeks, days, hours, minutes, secondsStr] = match; 413 414 seconds += years ? parseInt(years) * 365 * hoursPerDay : 0; 415 seconds += months ? parseInt(months) * 30 * hoursPerDay : 0; 416 seconds += weeks ? parseInt(weeks) * 7 * hoursPerDay : 0; 417 seconds += days ? parseInt(days) * hoursPerDay : 0; 418 seconds += hours ? parseInt(hours) * minutesPerHour : 0; 419 seconds += minutes ? parseInt(minutes) * secondsPerMinute : 0; 420 seconds += secondsStr ? parseInt(secondsStr) : 0; 421 } 422 423 return seconds; 424 } 425 426 // Blocks Iframes EU Compliance (germany) 427 coreFunctions.init({ 428 copyright: ['copyright', 'de'], //Container, Language 429 enablethirdpartycleaner: true, // enable or disable the Iframe blocker 430 tpcDomainsToBlock: [ // list of domains you want to block for this website 431 "youtube.com", 432 "youtube-nocookie.com", 433 "widget.bandsintown.com", 434 "www.eventim.de", 435 "eventim.de", 436 "forms.sonymusicfans.com", 437 "www.tiktok.com", 438 "tiktok.com", 439 "connect.facebook.net", 440 "facebook.net", 441 "embed.music.apple.com", 442 "maps.googleapis.com" 443 ], 444 thirdpartycleaner: { // some basic styling 445 backgroundColor: "rgba(0,0,0,0.8)", // background color of the disclaimer 446 textColor: "white", // text color of the disclaimer
447 buttonBackgroundColor: "white", // background color of the allow button 448 buttonTextColor: "black" // text color of the allow button 449 } 450 }) 451 452
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.