Hotspots and JavaScript removeEventListener?

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
jpatten
Posts: 5
Joined: Thu Feb 02, 2017 2:01 pm
Location: Modesto, California
Contact:

Hi All,

How do you stop an hotspot EventListener from triggering by just clicking within a pano?

Image

I have a hotspot that triggers and EventListener for a function in an app, within a browser object. There are four hotspots in the pano. Three of the hotspots link to other web sites. The fourth triggers the javascript and a function that is sent and handled by the app. The function just presents some text in another field of the app. After the first time it is triggered by the hotspot, it can be retriggered just by navigating with the pano. It should only be triggered when the user clicks the specific hotspot.

Here’s my code from the specific hot spot:

Code: Select all

this.__div.onmousedown=function (e) {
document.addEventListener('click', function() {liveCode.myLiveCodeHandler();});
	me.skin.hotspotProxyClick(me.hotspot.id);
This is the standard javascript skin code that Pano2VR creates.

I am not sure why it is behaving like this?

I have tried to add a removeEventListener command even used a mouseUp trigger, thinking maybe if I use MouseDown the AddEventListener and mouseup up the removeEventListener I could get it to work. No dice. Anytime I try to use the removeEventListener the pano loads with no hotspots.

Here is the whole javascript for the hotspot in question:

Code: Select all

} else
		if (hotspot.skinid=='eye')
		{
			this.__div=document.createElement('div');
			this.__div.ggId="eye";
			this.__div.ggParameter={ rx:0,ry:0,a:0,sx:1,sy:1 };
			this.__div.ggVisible=true;
			this.__div.className='ggskin ggskin_hotspot ';
			this.__div.ggType='hotspot';
			hs ='';
			hs+='height : 5px;';
			hs+='left : 282px;';
			hs+='position : absolute;';
			hs+='top : 175px;';
			hs+='visibility : inherit;';
			hs+='width : 5px;';
			this.__div.setAttribute('style',hs);
			this.__div.style[domTransform + 'Origin']='50% 50%';
			me.__div.ggIsActive=function() {
				return me.player.getCurrentNode()==this.ggElementNodeId();
			}
			me.__div.ggElementNodeId=function() {
				return me.hotspot.url.substr(1, me.hotspot.url.length - 2);
			}
			this.__div.onmousedown=function (e) {
				document.addEventListener('click', function() {liveCode.myLiveCodeHandler();});
				me.skin.hotspotProxyClick(me.hotspot.id);
			}
			this.__div.onmouseover=function (e) {
				me.player.setActiveHotspot(me.hotspot);
				me.skin.hotspotProxyOver(me.hotspot.id);
			}
			
			//hotspot.eye.onmouseup=function (e) {
			this.__div.onmouseup=function (e) {
				removeEventListener('click', function() {liveCode.myLiveCodeHandler();});
				me.skin.hotspotProxyClick(me.hotspot.id);
			}
			this.__div.onmouseout=function (e) {
				me.player.setActiveHotspot(null);
				me.skin.hotspotProxyOut(me.hotspot.id);
			}
			
			this.__div.ggUpdatePosition=function (useTransition) {
			}
			this._svg_4=document.createElement('div');
			this._svg_4__img=document.createElement('img');
			this._svg_4__img.className='ggskin ggskin_svg';
			this._svg_4__img.setAttribute('src',basePath + 'images/svg_4.svg');
			this._svg_4__img.setAttribute('style','position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;-webkit-user-drag:none;pointer-events:none;');
			this._svg_4__img['ondragstart']=function() { return false; };
			this._svg_4.appendChild(this._svg_4__img);
			this._svg_4.ggId="Svg 4";
			this._svg_4.ggParameter={ rx:0,ry:0,a:0,sx:1,sy:1 };
			this._svg_4.ggVisible=true;
			this._svg_4.className='ggskin ggskin_svg ';
			this._svg_4.ggType='svg';
			hs ='';
			hs+='height : 48px;';
			hs+='left : -24px;';
			hs+='position : absolute;';
			hs+='top : -24px;';
			hs+='visibility : inherit;';
			hs+='width : 48px;';
			this._svg_4.setAttribute('style',hs);
			this._svg_4.style[domTransform + 'Origin']='50% 50%';
			me._svg_4.ggIsActive=function() {
				if ((this.parentNode) && (this.parentNode.ggIsActive)) {
					return this.parentNode.ggIsActive();
				}
				return false;
			}
			me._svg_4.ggElementNodeId=function() {
				if ((this.parentNode) && (this.parentNode.ggElementNodeId)) {
					return this.parentNode.ggElementNodeId();
				}
				return me.ggNodeId;
			}
			this._svg_4.ggUpdatePosition=function (useTransition) {
			}
			this.__div.appendChild(this._svg_4);
		}
	};
	this.addSkinHotspot=function(hotspot) {
		return new SkinHotspotClass(me,hotspot);
	}
	this.addSkin();
};
Thanks for any support you can share!

John Patten
SUSD
jpatten
Posts: 5
Joined: Thu Feb 02, 2017 2:01 pm
Location: Modesto, California
Contact:

Hi All,

Not sure if this will help explain my javascript removeEventListener challenge, but it may give other pano authors an idea of what is possible. I posted a mobile example here: https://dl.dropboxusercontent.com/u/676 ... vecode.zip
Image
You will also need the Community Edition (OpenSource) of LiveCode. Scroll down and select LiveCode 8.1.2 of the developer tool. (My project is not compiled so all of the code underneath the interface is accessible.) Link here: http://downloads.livecode.com/livecode/

The field at the top can be used to test javascript commands on the panorama. I have been attempting to use it to decipher the correct removeEventListener on the hotspot that triggers that alert and text. After the first click of the hotspot, the addEventListener is triggered, however, just navigating the pano triggers it then. It should only be triggered by the hotspot and the javascript associated to the hotspot.

I’m not sure the error?

Thank you!

John Patten
SUSD
Post Reply