<!-- ※fractalで他のパーツとJSを共有している関係上記載。サイト全体で有効にする想定のため、本来は不要-->
<div id="js-utility-03"></div>
// ※fractalで他のパーツとJSを共有している関係上記載。サイト全体で有効にする想定のため、本来は不要
#js-utility-03
//- .modal.is-active
//- .modal-background
//- .modal-content
//- a.utility-03__banner(href='#')
//- .image.is-square
//- img(src='https://bulma.io/images/placeholders/256x256.png')
//- button.modal-close.is-large(aria-label='close')
/* No context defined. */
'use strict';
/**
* クッキーの設定・取得関数
*/
export const U_COOKIE = {
/**
* 取得
* @param key 取得するキー
* @returns string | null キーに対応する値
*/
get: (key: string = ''): string | null => {
let result = null;
const cookies = document.cookie;
const cookiesArr = cookies.split(';');
cookiesArr.forEach(cookie => {
const cookieKey = cookie.split('=')[0];
const cookieVal = cookie.split('=')[1];
// 対応するキーが存在する場合
if (cookieKey === key) {
result = cookieVal;
}
});
return result;
},
/**
* 全て取得
* @returns Array 全てのキーと値の配列
*/
getAll: (): {key: string, val: string}[] => {
const result = new Array();
const cookies = document.cookie;
const cookiesArr = cookies.split('; ');
cookiesArr.forEach(cookie => {
result.push({
key: cookie.split('=')[0],
val: cookie.split('=')[1],
});
});
return result;
},
/**
* 設定
* @param key 設定するキー
* @param val 設定する値
* @param maxAge クッキーを保持する期間（秒）
*/
set: (key: string = '', val: string = '', maxAge: number | null = null): void => {
if (!key) return;
if (maxAge) {
document.cookie = `${key}=${val}; max-age=${maxAge}`;
} else {
document.cookie = `${key}=${val}`;
}
},
/**
* クリア
* @param key クリアするキー
*/
clear: (key: string = ''): void => {
if (!key) return;
const cookies = document.cookie;
const cookiesArr = cookies.split('; ');
cookiesArr.forEach(cookie => {
const cookieKey = cookie.split('=')[0];
// 対応するキーが存在する場合
if (cookieKey === key) {
document.cookie = `${key}=; expires=0`;
}
});
}
}
$BLOCK_NAME: '.utility-03';
// 変数
#{ $BLOCK_NAME } {
&__content {
max-width: 256px;
}
&__banner {
display: block;
transition: 0.3s;
&:hover {
opacity: 0.7;
}
}
}
'use strict';
import { U_COOKIE } from './utilities';
export const utility03 = () => {
const utility = new Utility03();
utility.init();
}
class Utility03 {
el: HTMLElement;
cookieKey: string;
cookieMaxAge: number;
bannerLink: string;
bannerImg: string;
bannerCloseEls: HTMLCollection;
constructor() {
this.el = document.createElement('div');
this.cookieKey = 'utility-03';
this.cookieMaxAge = 2592000; // 30（日） * 24（時間） * 60（分） * 60（秒）
this.bannerLink = '#';
this.bannerImg = 'https://bulma.io/images/placeholders/256x256.png';
this.bannerCloseEls = document.getElementsByClassName('js-utility-03-banner-close');
}
/**
* 初期化
*/
init(): void {
// NOTE: 対応する要素がない場合、処理を終了
// ※fractalで他のパーツとJSを共有している関係上記載。サイト全体で有効にする想定のため、本来は不要
const el = document.getElementById('js-utility-03');
if (!el) return;
// クッキーが有効でない場合、処理を終了
if (!navigator.cookieEnabled) return;
this.onLoad();
}
/**
* ロード完了時のイベント設定
*/
onLoad(): void {
window.onload = () => {
const checkCookie = U_COOKIE.get(this.cookieKey);
// 未チェックの場合、チェックフォームを表示
if (!checkCookie) {
this.showBanner();
}
};
}
/**
* バナーを表示
*/
showBanner(): void {
// 要素の作成
const markup = `
<div class="modal is-active">
<div class="js-utility-03-banner-close modal-background"></div>
<div class="modal-content utility-03__content">
<a class="utility-03__banner" href="${this.bannerLink}">
<div class="image is-square">
<img src="${this.bannerImg}" />
</div>
</a>
</div>
<button class="js-utility-03-banner-close modal-close is-large" aria-label="close"></button>
</div>
`;
this.el.insertAdjacentHTML('beforeend', markup);
// 要素の挿入
document.body.appendChild(this.el);
this.onClickBannerClose();
}
/**
* バナーを非表示
*/
hideBanner(): void {
// NOTE: maxAgeの引数を設定しない場合、セッション中のみクッキーを保持
U_COOKIE.set(this.cookieKey, 'true');
// U_COOKIE.set(this.cookieKey, 'true', this.cookieMaxAge);
document.body.removeChild(this.el);
}
/**
* バナー非表示要素クリック時のイベント設定
*/
onClickBannerClose():void {
if (!this.bannerCloseEls.length) return;
[...this.bannerCloseEls].forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
this.hideBanner();
});
});
}
}
サイトアクセス時にバナーを表示するスクリプト。
一度非表示にされると、設定した期間中はページ遷移してもバナーが表示されない。