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) {
    if (socialBox.data("useconsent")) {
      return;
    }
    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 for="' + socialMediaType + '">' +
        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" id="' + socialMediaType + '" type="checkbox"> <label for="' + socialMediaType + '">' +
        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() + ";";

    // 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));
  });
});