Velo チュートリアル：拡張メガメニューを作成する

1//-------------インポート-------------//
2import wixData from 'wix-data';
3
4//-------------グローバル変数-------------//
5
6//サブメニュー 2 のリピーターの数。
7const subLevel2RepeaterCount = 2;
8
9//subTitles データベースコレクションのすべてのメニューデータから成るオブジェクト。
10let menuData;

1$w.onReady(async () => {
2  //メニューデータをコレクションから取得します。
3  menuData = await wixData.query("subTitles").find().then(result => result.items);
4
5  //サブメニュー 2 の各リピーターを読み込み時に設定します。
6  for (let i = 1; i <= subLevel2RepeaterCount; i++) {
7    $w(`#repeaterSubSub${i}`).onItemReady(($item, itemData, index) => {
8      //リピーターのボタンをその ID から取得します。
9      const repeaterButton = $item(`#buttonSubLevelTwo${i}`)
10      //アイテムのラベルを設定します。
11      repeaterButton.label = itemData.label;
12      //アイテムのリンクを設定します。
13      repeaterButton.link = itemData.url;
14    });
15  }
16});

1//「メインメニュー」ボタンをクリックしたときに実行される動作を設定します。
2export function buttonMainMenu_click(event) {
3    $w("#title").show();
4    $w("#title").text = event.target.label
5 $w("#boxSubSubMenu").hide();
6 //クリックされた「メインメニュー」ボタンの ID を取得します。
7 const selectedMainMenuId = event.context.itemId;
8 //メインメニューでの選択に関連するサブメニュー 1 のすべてのデータを取得します。
9 const repeaterData = menuData.filter(item => item.menu === selectedMainMenuId);
10 //データをサブメニュー 1 のリピーターに設定します。
11 $w('#repeaterSubLevelOne').data = repeaterData;
12 //サブメニュー 1 のリピーターを表示します。
13 $w('#repeaterSubLevelOne').show();
14}

1//マウスポインターをサブメニュー 1 のボタンに合わせると実行される動作を設定します。
2export function buttonSub_mouseIn(event) {
3 //マウスポインターを合わせたときのサブメニュー 1 のボタンの ID を取得します。
4 const selectedRootId = event.context.itemId;
5 //サブメニュー 1 に関連するサブメニュー 2 のすべてのデータを取得します。
6 const repeaterData = menuData.filter(item => item._id === selectedRootId)[0];
7 //サブメニュー 2 で選択したボタンに対応するボックス要素を設定します。
8 setSubSubMenu(repeaterData); 
9 //サブメニュー  2 のボックスを表示します。
10 $w('#boxSubSubMenu').show();
11    }

1//サブメニュー 2 ボックスからマウスポインターを遠ざけたときに実行される動作を設定します。
2export function boxSubSubMenu_mouseOut(event) {
3 $w('#boxSubSubMenu').hide();
4}

1//読み込み時のサブメニュー 1 のリピーター内の各アイテムを設定します。
2export function repeaterSubLevelOne_itemReady($item, itemData, index) {
3 $item('#buttonSub').label = itemData.subTitles;
4}

1//-------------リピーター設定のためのユーティリティ関数-------------//
2
3function createUniqueId() {
4 //現在のミリ秒を取得し、1～1000 の間の乱数を追加して、各メニューのサブアイテムの固有 ID を作成します。
5 let id = String(+new Date() + Math.floor(Math.random() * 1000))
6 return id;
7}

1function setSubSubMenu(repeaterData) {
2 //サブメニュー 1 の画像を設定します
3 $w('#image1').src = repeaterData.img1;
4 for (let i = 1; i <= subLevel2RepeaterCount; i++) {
5  //サブメニュー 2 の文字列を Javascript のオブジェクトに変換します。
6  const dataSubSub = JSON.parse(repeaterData[`subSubItems${i}`]);
7  //各アイテムの固有 ID を設定します。
8  dataSubSub.forEach(subSubItem => {
9   subSubItem._id = createUniqueId();
10  })
11  //リピ－ターにサブメニュー 2 のデータを設定します。
12  $w(`#repeaterSubSub${i}`).data = dataSubSub;
13 }
14}