make single hotspot text visible/hidden

almarass1 commented 11 months ago

Hi, I succeeded in implementing a clickHandlerFunc/clickHandlerArgs to click once in order to read the text and tap twice to execute the action associated to a hotspot.

The text appears/disappears setting visibility visible/hidden in div.pnlm-tooltip span {visibility: visible !important;}. This setting causes all the hotspots text to appear/disappear.

Is it possible to make visible just the clicked hotspot text, letting all the others unchanged? Thanks, Alex

Originally posted by @almarass1 in https://github.com/mpetroff/pannellum/issues/1158#issuecomment-1635528410

mpetroff commented 11 months ago

You can set the style for just the hot spot in question, since the hot spot DOM object is passed via the event passed to the click handler, e.g., a clickHandlerFunc such as

function clickHandler(evt, args) {
    evt.target.children[0].style.visibility = 'visible';
}

almarass1 commented 11 months ago

I tried to apply the clickHandler you suggested but it does not seem to cause hotspot visible effects although it changes visibility from 'hidden' to 'visible'

Thanks, Alex

mpetroff commented 10 months ago

Could it be due to an interaction with other parts of your code?

Here's a complete example that works in Firefox 116 and Chromium 115.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Example</title>
    <link rel="stylesheet" href="../src/css/pannellum.css"/>
    <script type="text/javascript" src="../src/js/pannellum.js"></script>
    <script type="text/javascript" src="../src/js/libpannellum.js"></script>
    <style>
    #panorama {
        width: 600px;
        height: 400px;
    }
    </style>
</head>
<body>

<div id="panorama"></div>

<script>
// Create viewer
viewer = pannellum.viewer('panorama', {
    "panorama": "examplepano.jpg",
    "hotSpots": [
        {
            "pitch": -12,
            "yaw": 170,
            "type": "info",
            "text": "Example text",
            "clickHandlerFunc": clickHandler,
        }
    ]
});

function clickHandler(evt, args) {
    evt.target.children[0].style.visibility = 'visible';
}
</script>

</body>
</html>

almarass1 commented 10 months ago

Hi, thank you: it works.

It was my fault; sorry for that

mpetroff / pannellum

make single hotspot text visible/hidden #1171