ihk24/gfi-ihk-2024/stories/sections/social/social.js

import $ from 'jquery';

class IHKSocialBox {
  constructor(socialBox) {
    this.box = socialBox.addClass('initiated')

    this.checkHtmlFragmentCookiesAreSet(socialBox);
    this.checkIframe();
  }

  checkIframe() {
    setTimeout(() => {
      const iframe = this.box.find('iframe');
      if (iframe.length) {
        iframe.attr('tabindex', '-1');
      } else {
        this.checkIframe();
      }
    }, 1000)
  }

  checkHtmlFragmentCookiesAreSet(socialBox) {
    let socialMediaProtectionText = socialBox.data("socialmediaprotection");
    let socialMediaType = socialBox.data("socialmediatype");
    let cookieBot = socialBox.data("usecookiebot");

    if(socialBox.find('iframe').length > 0) {
      let iframeElement = socialBox.find('iframe')[0];
      this.checkIframeCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, iframeElement, socialBox);
    } else {
      this.checkEmbedCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, socialBox);
    }
  }

  checkIframeCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, iframeElement, socialBoxElement) {
    if (cookieBot) {
      $(iframeElement).data("cookieconsent", "marketing");
    }
    if (document.cookie.indexOf("social-media-consent-" + socialMediaType) === -1) {
      this.hideIframeElement(iframeElement);
      let textWithCheckbox = '<div class="social-media-protection-text-with-checkbox"> <input name="socialMediaType" type="checkbox" id=' + socialMediaType + '> <label id="textElement">' + socialMediaProtectionText + '</label> </div>';

      $(socialBoxElement).append(textWithCheckbox);

      let elementsByClassName = this.box.find("[name='socialMediaType']")[0];
      elementsByClassName.addEventListener("change", () => this.setCookie(socialMediaType));
    }
  }

  checkEmbedCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, socialBoxElement) {
    let scriptElements = socialBoxElement.find('script');
    let imageElements = socialBoxElement.find('img');
    if (cookieBot) {
      $(scriptElements).data("cookieconsent", "marketing");
      $(imageElements).data("cookieconsent", "marketing");
    }
    if (document.cookie.indexOf("social-media-consent-" + socialMediaType) === -1) {
      let textWithCheckbox = '<div class="social-media-protection-text-with-checkbox"> <input name="socialMediaType" type="checkbox"> <label id="textElement">' + socialMediaProtectionText + '</label> </div>';

      $(textWithCheckbox).appendTo(socialBoxElement);

      let elementsByClassName = this.box.find("[name='socialMediaType']")[0];
      elementsByClassName.addEventListener("change", () => this.setCookie(socialMediaType));
    }
  }

  hideIframeElement(iframeElement) {
    if (iframeElement) {
      iframeElement.src = "about:blank";
      $(iframeElement).hide();
    }
  }

  setCookie(socialMediaType) {
    // Anzahl der Tage für das Ablaufdatum des Cookies
    let expirationDays = 365;

    // Datum für das Ablaufdatum des Cookies berechnen
    let expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + expirationDays);

    // Checkbox wurde angeklickt, Cookie setzen
    document.cookie = "social-media-consent-" + socialMediaType + "=true; expires=" + expirationDate.toUTCString() + ";";

    console.log("Cookie wurde gesetzt!");
    // Finde alle Elemente mit dem selben socialMediaType
    let self = this;
    $(`[data-socialmediatype=${socialMediaType}]`).each(function () {
      let currentBox = $(this);
      currentBox.find(".social-media-protection-text-with-checkbox").hide();
      let scriptElements = currentBox.find('script');
      let imageElements = currentBox.find('img');
      let iframeElements = currentBox.find('iframe');

      self.showElements(scriptElements);
      self.showElements(imageElements);
      self.showElements(iframeElements);
    });
  }

  showElements(elements) {
    if (elements.length > 0) {
      for (let element of elements) {
        this.showElement(element);
      }
    }
  }

  showElement(htmlFragment) {
    let $element = $(htmlFragment);
    let elementType = $element.prop('tagName').toLowerCase();
    let dataSrc = $element.attr('data-src');
    if (typeof dataSrc === 'undefined') {
      dataSrc = $element.attr('src');
    }
    if (elementType === 'script') {
      $element.attr('src', dataSrc);
      $element.show();
    } else if (elementType === 'img' || elementType === 'iframe') {
      $element.attr('src', dataSrc);
      $element.show();
    }
  }
}

export default IHKSocialBox;

$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
  $('.social-box:not(.initiated)').each(function () {
    new IHKSocialBox($(this));
  })
})