任意のJavaScriptが動作するようになりました。
イベント処理により、タグの見た目や動作を自由にカスタマイズすることが可能です。
カスタムJavaScriptマニュアルについては、赤枠で囲まれた「マニュアルはこちら」をクリックすると、ポップアップで表示されます。
<カスタムJavaScriptの例>
「リスト」タグで1週間以内に作成されたコンテンツにnew
クラスを追加する
Plaintext
// 現在の日付を取得
const now = new Date();
// 1週間(7日)をミリ秒に変換
const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
// onLeeepContentsRendered イベントをリッスン
document.addEventListener('onLeeepContentsRendered', function(event) {
// コンテンツ情報がイベントから渡される
const posts = event.detail.posts;
// 各コンテンツに対して処理を行う
posts.forEach((post) => {
// post.id に対応する LeeepPost 要素を取得
const postElement = document.querySelector(`.LeeepPost[data-id="${post.id}"]`);
// LeeepPost が存在する場合
if (postElement) {
// 作成日時を Date オブジェクトに変換
const createdAt = new Date(post.created_at);
// 作成日時が1週間以内かどうかを判定
if (createdAt >= oneWeekAgo) {
// 作成日時が1週間以内の場合、LeeepListDateに new クラスを追加
const listDateElement = postElement.querySelector('.LeeepListDate');
if (listDateElement) {
listDateElement.classList.add('new');
}
}
}
});
});