// ------------------------------------------------------------------------------------------------------------------------ // 〇〇向け(ohasa-cms)JavaScript // event ID : 〇〇 // https://tv-cms.eventos.tokyo/console // document.addEventListener("load", (event) => { // 変数を定義 let LOGIN_PATH = ""; let LOGOUT_PATH = ""; let TEXT_IN_LOGIN = ""; let TEXT_IN_NOT_LOGIN = ""; let PROFILE_BUTTON_LINK_URL = ""; let LOGOUT_LINK_URL = ""; let DOMAIN = ""; let PROFILE_SCREEN_DESCRIPTION = ""; let PROFILE_SCREEN_BUTTON = ""; let PROFILE_CHECK_CONTENT_ITEM = ""; let PROFILE_CHECK_VALUE = ""; let isCreatedItem = false; let isCreatedProfileButton = false; let token = localStorage.getItem("accessToken"); let menuButton = document.getElementsByClassName("layout menu__name")[0]; let menuButtonSp = document.getElementsByClassName("layout menu__name")[1]; return { LOGIN_PATH, LOGOUT_PATH, TEXT_IN_LOGIN, TEXT_IN_NOT_LOGIN, PROFILE_BUTTON_LINK_URL, LOGOUT_LINK_URL, DOMAIN, PROFILE_SCREEN_DESCRIPTION, PROFILE_SCREEN_BUTTON, PROFILE_CHECK_CONTENT_ITEM, PROFILE_CHECK_VALUE, isCreatedItem, isCreatedProfileButton, token, menuButton, menuButtonSp, }; }); // イベントごとに変更する必要のあるパラメータ -------------------------------------------------------------------------------------------------- var EVENT_ID = 14381; // プロフィール画面でボタンが表示される際のボタンのリンク先URL PROFILE_BUTTON_LINK_URL = "https://mypage.abcid.asahi.co.jp/ohaasa_park2025/join/input"; // 以下、基本固定のパラメータ -------------------------------------------------------------------------------------------------- // ログアウトに必要なABC ID側のドメイン DOMAIN = "ohaasa-evt.abcid.asahi.co.jp"; // ABC IDでのログアウトを行いつつ、eventosのイベントトップに戻るURL LOGOUT_LINK_URL = `https://abcid.asahi.co.jp/php/logout/eventosLogout.php?return_to=https%3A%2F%2F${DOMAIN}%2Fevent%2F${EVENT_ID}%2F`; // プロフィール画面の文言 PROFILE_SCREEN_DESCRIPTION = "「おは朝ふぁんくらぶ」に未入会のため、はじめに以下のボタンより入会をお願いします。"; PROFILE_SCREEN_BUTTON = "おは朝ふぁんくらぶに入会する"; PROFILE_CHECK_VALUE = "おは朝ふぁんくらぶ"; // プロフィール判定項目名 PROFILE_CHECK_CONTENT_ITEM = "おは朝入会済みフラグ"; // ------------------------------------------------------------------------------------------------------------------------ //　ログイン/ログアウトボタンのアイコン画像 LOGIN_PATH = "/images/789/738/menu_icon-2b750853-f96b-4cf7-a0c3-1365a218ab21.png"; LOGOUT_PATH = "/images/789/738/menu_icon-28388fae-c659-4e00-8a7f-7376d23d96f1.png"; //　ログイン/ログアウトボタンの表示名 TEXT_IN_LOGIN = "ログアウト"; //　ログイン状態の時 TEXT_IN_NOT_LOGIN = "ログイン"; //　未ログイン状態の時 // ------------------------------------------------------------------------------------------------------------------------ isCreatedItem = false; isCreatedProfileButton = false; // プロフィール画面の時の処理 if (location.href.includes(profileURL())) { // プロフィールの属性とボタンにクラスを設定 let profileContentList = document.getElementsByClassName("profile__content"); for (let i = 0; i < profileContentList.length; i++) { profileContentList[i].classList.add("eventos-content"); } let profileButton = document.getElementsByClassName("profile__button")[0]; profileButton.classList.add("eventos-content"); // eventosのプロフィールにクラスを追加＆おは朝専用ボタンの挿入 if (!isCreatedProfileButton) { appendProfileForm(); isCreatedProfileButton = true; } // 「入会済みフラグ」のValueに応じた処理をする let target; for (let i = 0; i < profileContentList.length; i++) { if (profileContentList[i].innerHTML.includes(PROFILE_CHECK_CONTENT_ITEM)) { target = profileContentList[i]; } } let profileContents = document.getElementsByClassName("eventos-content"); let OhaasaContents = document.getElementsByClassName("class-name-ohaasa"); let profileTtl = document.getElementsByClassName("profile__title")[0]; let langIcons = document.getElementsByClassName("register-lang")[0]; let profileSpacer = document.getElementsByClassName("profile__spacer")[0]; const eventMember = getEventMember(); if (eventMember === PROFILE_CHECK_VALUE) { for (let i = 0; i < profileContents.length; i++) { profileContents[i].style.display = "block"; } for (let i = 0; i < OhaasaContents.length; i++) { OhaasaContents[i].style.display = "none"; } profileTtl.style.display = "block"; langIcons.style.display = "flex"; } else { for (let i = 0; i < profileContents.length; i++) { profileContents[i].style.display = "none"; } for (let i = 0; i < OhaasaContents.length; i++) { OhaasaContents[i].style.display = "block"; } profileTtl.style.display = "none"; langIcons.style.display = "none"; profileSpacer.style.display = "none"; } } else if (!location.href.includes(loginURL())) { // ログイン画面の場合はイベントを呼び出さない // <追記>「おは朝入会済みフラグ」の内容が入力されているか確認する let isAddMenu = false; const getValue = setInterval(() => { eventMember = getEventMember(); if ( isLoginPage() && eventMember != PROFILE_CHECK_VALUE && eventMember != "notLogin" ) { clearInterval(getValue); location.href = profileURL(); } else { if (!document.getElementById("auth-button")) { isCreatedItem = false; // 「おは朝入会済みフラグ」の内容が「おは朝ふぁんくらぶ」場合はそのまま画面を表示して、メニューの「ログイン/ログアウト」項目を追加 if ( document.getElementsByClassName("layout menu__name").length > 0 || document.getElementsByClassName("layout menu__name").length > 0 ) { menuButton = document.getElementsByClassName("layout menu__name")[0]; menuButtonSp = document.getElementsByClassName("layout menu__name")[1]; menuButton.addEventListener("click", createItem); menuButtonSp.addEventListener("click", createItem); isAddMenu = true; } } else if (isAddMenu && isCreatedItem) { const customButton = document.getElementById("custom-button"); let customButtonText = document.getElementById("custom-button_text"); token = localStorage.getItem("accessToken"); if (token) { // ログイン状態の処理 customButton.removeEventListener("click", loginAction); customButtonText.innerHTML = TEXT_IN_LOGIN; customButton.addEventListener("click", createLogoutDialog); } else { // 未ログイン状態の処理 customButton.removeEventListener("click", createLogoutDialog); customButtonText.innerHTML = TEXT_IN_NOT_LOGIN; customButton.addEventListener("click", loginAction); } } } }, 100); } function loginAction() { sessionStorage.removeItem("destination_url"); location.href = loginURL(); } // メニュー項目にログイン/ログアウトを追加する function createItem() { if (isCreatedItem) return; // メニューの中にログアウトの項目を追加する let menuLists = document.getElementsByClassName( "v-list v-sheet v-sheet--tile" ); let menuList = menuLists[menuLists.length - 1]; const listItem = document.createElement("div"); listItem.classList.add("v-list-item"); listItem.setAttribute("id", "auth-button"); const anchorTag = document.createElement("a"); anchorTag.classList.add("v-list-item__title"); anchorTag.classList.add("menu__contents"); const tabIcon = document.createElement("div"); tabIcon.classList.add("tab-icon"); const divTag = document.createElement("div"); const imgTag = document.createElement("img"); let spanTag = document.createElement("span"); spanTag.setAttribute("id", "custom-button_text"); spanTag.innerHTML = "loading"; // ログイン / ログアウトのボタンを追加 imgTag.src = LOGOUT_PATH; imgTag.classList.add("tab-icon__img"); divTag.appendChild(imgTag); tabIcon.appendChild(divTag); tabIcon.appendChild(spanTag); tabIcon.setAttribute("id", "custom-button"); anchorTag.appendChild(tabIcon); listItem.appendChild(anchorTag); menuList.appendChild(listItem); isCreatedItem = true; } // LiveホームURL function liveHomeURL() { const eventInfo = getInfo(); let linkUrl = "https://" + eventInfo[0] + "/event/" + eventInfo[1]; if (eventInfo[eventInfo.length - 1] === "?isDraft=true") { linkUrl = linkUrl + "?isDraft=true"; } return linkUrl; } // ログイン画面のURL // function loginURL() { // const eventInfo = getInfo(); // let linkUrl = // 'https://' + eventInfo[0] + '/web/portal/' + eventInfo[1] // + '/event/' + eventInfo[2] + '/users/login' // return linkUrl; // } // ログイン画面へのURLを作成（独自ドメインの場合） function loginURL() { const eventInfo = getInfo(); let linkUrl = "https://" + eventInfo[0] + "/event/" + eventInfo[1] + "/users/login"; if (eventInfo[eventInfo.length - 1] === "?isDraft=true") { linkUrl = linkUrl + "?isDraft=true"; } return linkUrl; } // プロフィール画面のURL // function profileURL() { // const eventInfo = getInfo(); // let profileUrl = // 'https://' + eventInfo[0] + '/web/portal/' // + eventInfo[1] + '/event/' + eventInfo[2] + '/users/mypage/profile' // return profileUrl; // } // ログイン画面へのURLを作成（独自ドメインの場合） function profileURL() { const eventInfo = getInfo(); let createdProfileUrl = "https://" + eventInfo[0] + "/event/" + eventInfo[1] + "/users/mypage/profile"; if (location.href.includes("?isDraft=true")) { createdProfileUrl = createdProfileUrl + "?isDraft=true"; } return createdProfileUrl; } // 現在のURLからドメイン名、ポータルID、イベントIDを取得 function getInfo() { const infoLists = []; const url = location.href; let list = []; list = url.split("/"); // 通常ドメイン // infoLists.push(list[2], list[5], list[7]); //　独自ドメインの場合 list[4] = list[4].match(/\d[0-9]+/g)[0]; infoLists.push(list[2], list[4]); return infoLists; } // ログアウト用のダイアログを表示 function createLogoutDialog() { // ダイアログの作成 const page = document.getElementsByClassName("v-application")[0]; const dialog = document.createElement("div"); dialog.setAttribute("id", "logout-dialog"); const dialogWrap = document.createElement("div"); dialogWrap.setAttribute("id", "logout-dialog-wrap"); const dialogTitle = document.createElement("span"); dialogTitle.setAttribute("id", "logout-dialog-ttl"); dialogTitle.innerHTML = "ログアウトしますか？"; const buttonWrap = document.createElement("div"); buttonWrap.setAttribute("id", "logout-dialog-buttons-wrap"); const cancelButton = document.createElement("button"); cancelButton.setAttribute("id", "logout-dialog-cancel-btn"); cancelButton.classList.add("v-btn"); cancelButton.innerHTML = 'キャンセル'; cancelButton.addEventListener("click", closeLogoutDialog); const logoutButton = document.createElement("button"); logoutButton.setAttribute("id", "logout-dialog-execute-btn"); logoutButton.classList.add("v-btn"); logoutButton.innerHTML = 'ログアウト'; logoutButton.addEventListener("click", executeLogout); buttonWrap.appendChild(cancelButton); buttonWrap.appendChild(logoutButton); dialogWrap.appendChild(dialogTitle); dialogWrap.appendChild(buttonWrap); dialog.appendChild(dialogWrap); page.appendChild(dialog); // layerを挟む const layer = document.createElement("div"); layer.setAttribute("id", "dialog-back-layer"); layer.style.width = "100vw"; layer.style.height = "100vh"; layer.style.zIndex = 105; layer.style.background = "rgb(33, 33, 33, 0.46)"; layer.style.position = "fixed"; layer.style.top = 0; layer.style.left = 0; page.appendChild(layer); } // ダイアログを閉じるときの処理 function closeLogoutDialog() { // layerとdialogの要素を削除する let dialog = document.getElementById("logout-dialog-wrap"); let layer = document.getElementById("dialog-back-layer"); dialog.remove(); layer.remove(); } // ダイアログでログアウトを実行するときの処理 function executeLogout() { //ログアウトするためのAPIを叩く localStorage.removeItem("accessToken"); localStorage.removeItem("refreshToken"); location.href = LOGOUT_LINK_URL; } // プロフィール登録画面で function appendProfileForm() { let newSection = document.getElementsByClassName("v-form")[0]; let sectionDiv = document.createElement("div"); sectionDiv.classList.add("profile-contents", "class-name-ohaasa"); sectionDiv.style.display = "none"; let innerSection = document.createElement("section"); let contentSection = document.createElement("section"); let ttlDiv = document.createElement("div"); ttlDiv.classList.add("layout", "item__label", "v-inline-block"); let ttlName = document.createElement("span"); ttlName.classList.add("item__label__text"); ttlName.innerText = PROFILE_SCREEN_DESCRIPTION; ttlDiv.appendChild(ttlName); let contentDiv = document.createElement("div"); contentDiv.classList.add("layout", "item__name"); let contentBtnWrap = document.createElement("div"); contentBtnWrap.classList.add("layout", "btn-wrap"); let contentBtn = document.createElement("button"); contentBtn.classList.add("layout", "btn"); contentBtn.type = "button"; contentBtn.onclick = () => { // URLリンクへ飛ばす location.href = PROFILE_BUTTON_LINK_URL; }; let contentBtnTxt = document.createElement("span"); contentBtnTxt.innerHTML = PROFILE_SCREEN_BUTTON; contentBtn.appendChild(contentBtnTxt); contentBtnWrap.appendChild(contentBtn); contentDiv.appendChild(contentBtnWrap); contentSection.appendChild(ttlDiv); contentSection.appendChild(contentDiv); innerSection.appendChild(contentSection); sectionDiv.appendChild(innerSection); newSection.appendChild(sectionDiv); return; } function isLoginPage() { let flagValue = getEventMember(); if (__NUXT__.state.personal.data.profile === undefined) { return false; } let currentURL = location.href; const parameterIndex = currentURL.indexOf("?"); if (parameterIndex != -1) currentURL = currentURL.substring(0, parameterIndex); if (currentURL[currentURL.length - 1] === "/") currentURL = currentURL.slice(0, -1); // 通常ドメインn // const moduleCode = currentURL.split('/')[9] // const urlContentId = Number(currentURL.split('/')[10]) // 独自ドメインの場合 const moduleCode = currentURL.split("/")[6]; const urlContentId = Number(currentURL.split("/")[7]); let isNeedLogin = false; const isRequiredRegistration = __NUXT__.state.userdata.module.login.data[0].base.isRequiredAtStartup; if (!isRequiredRegistration) { let loginLockContents = []; __NUXT__.state.userdata.data.login[0].base.lock.forEach((content) => { loginLockContents.push(content.contentId); }); loginLockContents.forEach((contentId) => { if (urlContentId === contentId) { isNeedLogin = true; } }); if (moduleCode === "mypage" && !urlContentId) isNeedLogin = true; if (location.href === liveHomeURL()) { isNeedLogin = false; } } else { if (localStorage.getItem("accessToken") && flagValue === "") { return true; } } return isNeedLogin; } function getEventMember() { if (__NUXT__.state.personal.data.profile === undefined) { return "notLogin"; } let profileContentsAttribute = __NUXT__.state.userdata.module.profile.data[0].shareProfileContents; let profileContentsPersonal = __NUXT__.state.personal.data.profile[0].shareProfile; let entryFormKey; let flagValue; profileContentsAttribute.forEach((content) => { if (content.label === PROFILE_CHECK_CONTENT_ITEM) { entryFormKey = content.entryFormKey; } }); profileContentsPersonal.forEach((content) => { if (entryFormKey === content.entryFormKey) { flagValue = content.textValue; } }); return flagValue; }