Tutorial do Velo: como criar um mega menu expansível

1//-------------Importações-------------//
2import wixData from 'wix-data';
3
4//-------------Variáveis Globais-------------//
5
6//Número de repetidores do Submenu 2.
7const subLevel2RepeaterCount = 2;
8
9//Objeto que contém todos os dados do menu da coleção do banco de dados de subTitles.
10let menuData;

1$w.onReady(async () => {
2  //Obtém os dados do menu da coleção.
3  menuData = await wixData.query("subTitles").find().then(result => result.items);
4
5  //Configura cada repetidor do Submenu 2 assim que são carregados.
6  for (let i = 1; i <= subLevel2RepeaterCount; i++) {
7    $w(`#repeaterSubSub${i}`).onItemReady(($item, itemData, index) => {
8      //Obtém o botão do repetidor de seu ID.
9      const repeaterButton = $item(`#buttonSubLevelTwo${i}`)
10      //Define a etiqueta do item.
11      repeaterButton.label = itemData.label;
12      //Define o link do item.
13      repeaterButton.link = itemData.url;
14    });
15  }
16});

1//Define as ações que ocorrem quando o botão do menu principal é clicado.
2export function buttonMainMenu_click(event) {
3    $w("#title").show();
4    $w("#title").text = event.target.label
5 $w("#boxSubSubMenu").hide();
6 //Obtém o ID do botão que foi clicado no menu principal.
7 const selectedMainMenuId = event.context.itemId;
8 //Obtém todos os dados do Submenu 1 referentes à seleção do menu principal.
9 const repeaterData = menuData.filter(item => item.menu === selectedMainMenuId);
10 //Define os dados do repetidor do Submenu 1.
11 $w('#repeaterSubLevelOne').data = repeaterData;
12 //Mostra o repetidor do Submenu 1.
13 $w('#repeaterSubLevelOne').show();
14}

1//Define uma ação que ocorre quando o ponteiro do mouse passa sobre um botão do Submenu 1.
2export function buttonSub_mouseIn(event) {
3 //Obtém o ID do botão do Submenu 1 sobre o qual o ponteiro do mouse passa.
4 const selectedRootId = event.context.itemId;
5 //Obtém todos os dados do Submenu 2 referentes ao Submenu 1.
6 const repeaterData = menuData.filter(item => item._id === selectedRootId)[0];
7 //Configura o elemento de caixa que corresponde ao botão selecionado no Submenu 2.
8 setSubSubMenu(repeaterData); 
9 //Mostra a caixa do Submenu 2.
10 $w('#boxSubSubMenu').show();
11    }

1//Define uma ação que ocorre quando o ponteiro do mouse se afasta da caixa do Submenu 2.
2
3export function boxSubSubMenu_mouseOut(event) {
4 $w('#boxSubSubMenu').hide();
5}

1//Configura cada item no repetidor do Submenu 1 assim que são carregados.
2export function repeaterSubLevelOne_itemReady($item, itemData, index) {
3 $item('#buttonSub').label = itemData.subTitles;
4}

1//-------------Funções de Utilidade para Configuração de Repetidores-------------//
2
3function createUniqueId() {
4 //Criar um ID único para cada sub-item do menu obtendo o milissegundo atual e adicionando um número aleatório de 1 a 1.000.
5 let id = String(+new Date() + Math.floor(Math.random() * 1000))
6 return id;
7}

1function setSubSubMenu(repeaterData) {
2 //Define a imagem do Submenu 1.
3 $w('#image1').src = repeaterData.img1;
4 for (let i = 1; i <= subLevel2RepeaterCount; i++) {
5  //Converte a string do Submenu 2 em um objeto Javascript.
6  const dataSubSub = JSON.parse(repeaterData[`subSubItems${i}`]);
7  //Define um ID único para cada item.
8  dataSubSub.forEach(subSubItem => {
9   subSubItem._id = createUniqueId();
10  })
11  //Define os dados do Submenu 2 no repetidor.
12  $w(`#repeaterSubSub${i}`).data = dataSubSub;
13 }
14}