JavaScript Event Listener

Hi all,

I’m hoping someone reads this who has a little bit of JavaScript experience wouldn’t mind helping us out here. I was going to ask the question on Stackoverflow, but thought I might as well explain here first since I’ll only get comments asking why you doing it like that and have to explain the whole Bubble thing so here it is…

I want to hide a few elements on the page when jumping into Street View mode using @AliFarahat’s Google Maps Extended plugin, but unfortunately all the event listeners which you can attach to the map are only designed for the normal map type and not the panorama Street View type, so I’ve been trying to find a value which might change in the DOM (upon entering/leaving Street View mode) and then triggering a workflow using the toolbox plugin.

Now, I found a value (tabIndex) and it looks to be the only thing that changes when switching views but I’m not sure what you can do in Bubble to listen for that value changing, does anyone have any ideas?

If you look at the screenshot below, it shows this.

From what I can see, the value is either 0 or -1

Normal map types show: tabIndex=“0”
Street View will show: tabIndex=“-1”

You can see it here: https://paul-testing-5.bubbleapps.io/version-test?debug_mode=true
Editor: https://bubble.io/page?name=index&id=paul-testing-5&tab=tabs-1

I can retrieve the value in a few ways. If I setup a simple “Run javascript” action and add either of the three code snippets to it, it gives me the value.

a = document.getElementsByClassName(‘gm-style’)[0]
x = a.getElementsByTagName(“div”)[0];
alert (x.tabIndex);

tabIndex = document.querySelector(“div.gm-style div”).tabIndex;
alert (tabIndex);

var innerHTML = document.getElementsByClassName(‘gm-style’)[0].innerHTML
tabIndex = innerHTML.match(/“([^”]+)"/)[1];
alert (tabIndex);

Does anyone know if it’s possible to monitor values upon changes? I tried adding an HTML element and putting the below into it but nothing I try really works. I was just trying to find a bit of a work around that was all.

<html>
  <body>
	<script>
	  a = document.getElementsByClassName('gm-style')[0]
	  x = a.getElementsByTagName("div")[0];
	  x.tabIndex.addEventListener("change", function(){
	    alert ("done");
	  });
	</script>
  </body>
</html>

@mishav @jarrad tagging you guys just in case you can help in anyway.

Thanks
Paul

2 Likes

I would use a mutation observer to monitor the child list for the class your looking for. Then when it’s found to do something

You can ready more here

Perfect, managed to make it work using the below JavaScript when things were loaded.

// target element that we will observe
const target = document.getElementsByClassName('gm-style')[0].getElementsByTagName('div')[0];

// config object
const config = {
  attributes: true,
  attributeOldValue: true
};

// subscriber function
function subscriber(mutations) {
  mutations.forEach((mutation) => {
    // handle mutations here

    if (mutation.oldValue == "0" || mutation.oldValue == "-1") {
      console.log(mutation);
      bubble_fn_2(mutation.oldValue);
    }

  });
}

// instantiating observer
const observer = new MutationObserver(subscriber);

// observing target
observer.observe(target, config);

Thanks very much

2 Likes

@AliFarahat have you ever noticed that the map sometimes just decides to reload by itself and if you have any markers placed (like a list of them) they all disappear?

Hmm. No I didn’t, if you can reproduce this this maybe I can solve it

I believe I can, check this out, you’ll have to just use it for a bit, click around, add a few markers etc and after a bit the map just occasionally refreshes. Sometimes it does a lot, other times not so much… zoom right out and then zoom right in, that’ll trigger it!

editor: https://bubble.io/page?name=index&id=paul-testing-5&tab=tabs-1
preview: https://paul-testing-5.bubbleapps.io/version-test?debug_mode=true

Have made it editable, I forgot to do that earlier.

No joy in figuring it out Ali?

This topic was automatically closed after 70 days. New replies are no longer allowed.