ログイン状態に応じて表示・非表示を制御する
会員制サイトの制作時に活用できる、ログイン状態に応じて要素の表示・非表示を制御するためのJavaScriptです。
会員制サイトの制作時に、読者ユーザーがログインしている状態でページキャッシュを有効にした設定をしている場合、タッチモジュールやグローバル変数での制御だけでは、意図しないユーザー情報がキャッシュされ、読者ユーザーがログインしているにも関わらず、ログインしていない状態のHTMLが表示されることがあります。
この問題を解決するため、JavaScriptでログイン状態を判定するプログラムの記述が必要です。この組み込みJSを利用することで、ログイン状態に基づいた表示・非表示の制御が可能です。
使い方
ログイン状態に応じて、表示・非表示の制御をしたい要素に以下のクラスを追加してください。
ログイン状態に応じて、display: none 及び display: block のCSSが適用されます。
| クラス名 | 説明 |
|---|---|
| js-login-hidden | ログイン状態の時、非表示にする |
| js-login-show | ログイン状態の時、表示する |
| js-logout-hidden | ログアウト状態の時、非表示にする |
| js-logout-show | ログアウト状態の時、表示する |
<div class="js-login-hidden"> <!-- ログイン時に非表示になります --> </div> <div class="js-login-show"> <!-- ログイン時に表示されます --> </div> <div class="js-logout-hidden"> <!-- ログアウト時に非表示になります --> </div> <div class="js-logout-show"> <!-- ログアウト時に表示されます --> </div>
表示時に適用される display プロパティの値を変更する
js-login-show や js-logout-show といったクラスは、ログイン状態に応じて要素を表示する機能として、デフォルトで display: block のスタイルが適用されます。しかし、display: flex など、別の値を適用したい場合があるかもしれません。
そういった場合には、data-display 属性を用いて適用する値を変更することができます。
<div class="js-login-show" data-display="flex"> <!-- ログイン時にdisplay: flexのスタイルが適用されます --> </div> <div class="js-logout-show" data-display="grid"> <!-- ログアウト時にdisplay: gridのスタイルが適用されます --> </div>
デフォルトの設定
この機能の設定は、/js/config.jsの以下の箇所にあります。
//---------------------------- // ログイン状態による表示・非表示 loginHiddenMark: '.js-login-hidden', // ログイン状態の時、非表示にする loginShowMark: '.js-login-show', // ログイン状態の時、表示する logoutHiddenMark: '.js-logout-hidden', // ログアウト状態の時、非表示にする logoutShowMark: '.js-logout-show', // ログアウト状態の時、表示する