haimian_landing/src/main.js

import cookieLanguage from "./common/cookie.json";
import { getUrlParam } from "./common/helpers";
import { asyncLoadGoogleTag } from "./common/google.tag";
import * as helper from "./common/helpers";
import "./index.scss";

function getLanguage() {
  const lang = getUrlParam("lang") ?? "en";
  return cookieLanguage[lang] || cookieLanguage["en"];
}

const replaceAgreementLink = (privacyContent) => {
  const newString = [
    "<a href='https://funplus.com/privacy-policy/' target='_blank' style='color:#ddb463'>",
    "</a>",
    "<a href='https://funplus.com/terms-conditions/' target='_blank' style='color:#ddb463'>",
  ];
  return privacyContent
    .replaceAll("%1", newString[0])
    .replaceAll("%2", newString[1])
    .replaceAll("%3", newString[2]);
};

const showCookieNotice = () => {
  $("#cookieNotice").show();
  setTimeout(() => {
    $("#cookieNotice").hide();
  }, 2000);
};

function cookieAgreementInit() {
  const lang = getLanguage();
  const cookieAgreement = $(`<div id="cookie-agreement"></div>`);
  cookieAgreement.css("display", "none");
  const cookieWarpper = $(`<div class="cookie-agreement__warpper"></div>`);
  const cookieContent = $(`<div class="cookie-content"></div>`).html(
    `${replaceAgreementLink(lang.footer_txt)}`
  );
  const cookieBtns = $(`<div class="rgreement-btn-box">
        <button id="acceptAllPrivacy" class="rgreement-btn accept">${lang.footer_btn_left}</button>
        <button id="customizePrivacy" class="rgreement-btn customize">${lang.footer_btn_right}</button>
    </div>`);

  cookieWarpper.append(cookieContent).append(cookieBtns);
  cookieAgreement.append(cookieWarpper).hide();
  return cookieAgreement;
}

function getCookieItem(title, tips, checked, disabled) {
  const cookieItemWarpper = $(`<div class="cookie-item__warpper"></div>`);
  const cookieItem = $(`<div class="cookie-item"></div>`);
  const itemTitleContainer = $(`<div class="item-title-container"></div>`);
  const itemTitle = $(`<div class="item-title">${title}</div>`);
  const itemDetailImg = $(
    `<img class="item-details-img" src="./images/details.png" />`
  );
  const itemSwitch = $(`<input type="checkbox" class="switch">`);
  if (checked) {
    itemSwitch.attr("checked", checked);
  }
  if (disabled) {
    itemSwitch.attr("disabled", true);
  }

  const detailTips = $(
    '<div class="details-tips" style="display:none;"></div>'
  );
  detailTips.text(tips);
  itemTitleContainer.append(itemTitle).append(itemDetailImg);
  cookieItem.append(itemTitleContainer).append(itemSwitch);
  cookieItemWarpper.append(cookieItem).append(detailTips);
  return cookieItemWarpper;
}

function cookieConfirmModal() {
  const lang = getLanguage();
  const container = $(`<div id="cookieConfirmModal"></div>`);
  container.css("display", "none");
  const banner = $(`<div id="cookieBanner"></div>`);
  banner.css({
    backgroundImage: `url(./images/modal-bg.png)`,
  });
  const bannerClose = $(
    `<div id="modalClose"> <img src="./images/close.png" /></div>`
  );
  const title = $(`<div class="confirm-title">${lang.modal_title}</div>`);
  const content = $(`<div class="confirm-content">${lang.modal_txt}</div>`);

  const settings = $(`<div class="setting"></div>`);

  // 协议 1
  const cookieItem1 = getCookieItem(
    lang.cookie_type_1,
    lang.cookie_intro_1,
    true,
    true
  );
  const cookieItem2 = getCookieItem(
    lang.cookie_type_2,
    lang.cookie_intro_2,
    false
  );

  settings.append(cookieItem1).append(cookieItem2);

  // 提交
  const footerBtnContainer = $(`<div class="footer-btn-container"></div>`);
  const saveCurrent = $(
    "<button id='selectCurrent'>" + lang.modal_btn_left + "</button>"
  );
  saveCurrent.addClass("footer-cookie-btn select-current");
  const submitAcceptCurrent = $(
    "<button id='submitAccpetAll'>" + lang.modal_btn_right + "</button>"
  );
  submitAcceptCurrent.addClass("footer-cookie-btn submit-accpet-all");

  footerBtnContainer.append(saveCurrent).append(submitAcceptCurrent);
  banner
    .append(bannerClose)
    .append(title)
    .append(content)
    .append(settings)
    .append(footerBtnContainer);
  container.append(banner);
  return container;
}

const getNotice = () => {
  const lang = getLanguage();
  const cookieNotice = $(`<div id="cookieNotice"></div>`);
  cookieNotice.css("display", "none");
  cookieNotice.append(
    `<div class="cookie-notice-content">${lang.tips_success}</div>`
  );
  cookieNotice.css("display", "hidden");
  return cookieNotice;
};

const downloadNotice = () => {
  const noticeContainer = $('<div class="download-notice"></div>');
  noticeContainer.append('<div class="backdrop"></div>');
  noticeContainer.append(
    $(
      '<div class="center-notice"><img src="https://kg-web-cdn.akamaized.net/official-website/pc-landing-builder/wp-content/themes/pc_landing/dist/images/notice-mo-en.png"/></div>'
    )
  );
  return noticeContainer;
};

// 接受所有协议
const allPrivacyClick = () => {
  helper.BILog("privacy_protocol_lp", {
    privacy_action: "accept_all_cookies",
    privacy_pop_style: 1,
    privacy_lang: window.lang,
  });
  helper.consentAllGranted();
  helper.setCookie("fp_opt", "all", 365);
  $("#cookie-agreement").hide();
  $("#cookieConfirmModal").hide();
  showCookieNotice();
};

const handleAddEvents = () => {
  // 接受所有协议
  $("#acceptAllPrivacy").on("click", function () {
    allPrivacyClick();
  });
  // 自定义协议
  $("#customizePrivacy").on("click", function () {
    $("#cookie-agreement").hide();
    $("#cookieConfirmModal").show();
  });
  // 关闭弹框
  $("#modalClose").on("click", function () {
    $("#cookieConfirmModal").hide();
  });
  // 查看详情
  $(
    ".cookie-item__warpper .item-details-img,.cookie-item__warpper .item-title"
  ).on("click", function () {
    $(this).parents(".cookie-item").next().toggle(300);
  });
  // 开关
  $(".cookie-item input[type=checkbox]").on("change", function () {
    const checked = this.checked;
  });
  // 保存当前
  $("#selectCurrent").on("click", function () {
    const _checked = $(".cookie-item__warpper input[type=checkbox]")[1].checked;
    // 全部同意
    if (_checked) {
      helper.setCookie("fp_opt", "all", 365);
      helper.consentAllGranted();
      helper.BILog("privacy_protocol_lp", {
        privacy_action: "custom_confirm_selection",
        privacy_marketing_cookie: "on",
        privacy_pop_style: 1,
        privacy_lang: window.lang,
      });
    } else {
      helper.setCookie("fp_opt", "necessary", 365);
      helper.BILog("privacy_protocol_lp", {
        privacy_action: "custom_confirm_selection",
        privacy_marketing_cookie: "off",
        privacy_pop_style: 1,
        privacy_lang: window.lang,
      });
    }
    $("#cookieConfirmModal").hide();
    showCookieNotice();
  });
  $("#submitAccpetAll").on("click", function () {
    $(".cookie-item__warpper input[type=checkbox]").each(function () {
      $(this).attr("checked", true);
    });
    allPrivacyClick();
  });
  $(".download-notice").on("click", function () {
    $(this).hide();
  });
};

const handleAddWindowLoad = () => {
  window.curFF = false;
  window.addEventListener("load", function () {
    helper.BILog("pc_page_view");
    if (helper.getOs() != "IE") {
      helper.log_realtime("pc_page_view");
    }
  });

  window.onerror = function (message) {
    helper.log_error("pc_page_view", 1001, message);
  };

  window.downloadPackage = () => {
    if (helper.getOs() === "Windows") {
      helper.defaultDownload();
    } else {
      // Not windows, but did not enable webgame
      // if (!enable_webgame) {
        helper.defaultDownload();
      // }
    }

    // Trigger BI logagent on download
    helper.BILog("pc_download");
    if (helper.getOs() != "IE") {
      helper.log_realtime("pc_download");
    }
  };
};

window.page_id = 'game-1'
window.project = "mo";
// 加载google tag
asyncLoadGoogleTag();
// 加载dom
const cookieAgreementEl = cookieAgreementInit();
const confirmModalEl = cookieConfirmModal();
const noticeEl = getNotice();
const downloadNoticeEl = downloadNotice();
$("body")
  .append(cookieAgreementEl)
  .append(confirmModalEl)
  .append(noticeEl)
  .append(downloadNoticeEl);
// 监听事件
handleAddEvents();
handleAddWindowLoad();

helper.ifUseCookieConsent().then((data) => {
  const currentCountry = data.data.data.location.country;
  // 如果没有包含国家
  if (
    !helper.bannerCountriesList.includes(currentCountry) ||
    helper.getCookie("fp_opt")
  ) {
    // 直接同意所有的协议
    if (helper.getCookie("fp_opt") === "all") {
      helper.consentAllGranted();
    }
  } else {
    // 包含欧盟协议,需要弹框
    $("#cookie-agreement").show();
    helper.BILog("privacy_protocol_lp", {
      privacy_action: "window_pop#_up",
      privacy_pop_style: 1,
      privacy_lang: window.lang,
    });
    const cookieOpt = helper.getCookie("fp_opt");
    if (cookieOpt === "all") {
      helper.consentAllGranted();
    }
  }
});