Custom coded menu needs additional feature

Ask the community
1

Hello,

I’ve coded a menu that controls the html source of an iframe Matterport Scan. There are many pages that use the same type of coded menu for different buildings. The user can move around in the Matterport Scan (iframe), similar to google maps street view. But once they click a button, they cannot click the same button in the menu to reload the matterport to the original location. I need to give the button the ability to be clicked again after it was already clicked to do the same action as originally.

Essentially:
I can’t seem to figure out a way to ensure the button remains active even after activated. I need the buttons to be clickable, even after they have already been clicked. So if you click the button, play around with the Matterport scan(iframe), and click the button again it will reset and do the same action as the first time the button was clicked.

Notes:
-The P2 and P3 font class is to show the button hover effect and changes the color of the font.
-Every click is recorded in the wix storage, this is for a button that opens a lightbox fullscreen and shows the last clicked html source.
-The example below is a page that only has one button. A couple of the pages only have one button.

Please help!

Thank you for your time,

import {local} from 'wix-storage';

let lastClicked;

$w.onReady(function () {
    $w("#html2").src = 'https://XXXXX';
    local.setItem('lightBoxSrc', 'https://XXXXX');
});

export function boxmenu1_click(event) {
    srollHTML(event.target.id);
    lastClicked = event.target.id;
}

export function switchImages(id){

 if(id === "boxmenu1"){
        console.log(id);
        $w("#html2").src = "https://XXXXX";
        local.setItem('lightBoxSrc', 'https://XXXX');
        $w("#imagemenu1").src = "https://XXXX.png"; 
        $w("#textmenu1").html =  `<p class="p2"> ${$w("#textmenu1").text}</p>`;     
    }

 
}

export async function srollHTML(id){
 await switchImages(id);
 if($w("#html2").rendered){
         $w("#html2").scrollTo();
    }else{
        srollHTML(id);
    }
 
}

export function onMouseIn(id){

}

export function boxmenu1_mouseIn(event) {
    console.log(event);
    $w('#textmenu1').html = '<a target=""><p class="p2">'+ $w("#textmenu1").text +'</p></a>'
    $w('#imagemenu1').src = 'https://XXXXX.png'
}

export function boxmenu1_mouseOut(event) {
 if (event.target.id !== lastClicked){
        $w('#textmenu1').html = `<p class="p3"> ${$w("#textmenu1").text}</p>` 
        $w('#imagemenu1').src = 'https://XXXXX.png'
    }

}