Nesting _onGroupClick interference with html content

[marcortw]

The _onGroupClick in ItemSet.js is bound to the whole (parent) group's div (vis-nesting-group), when nesting is enabled. In my case, I am supplying html content to display an edit and delete icon next to the plain text content:

The rendered div looks like the following (ignore the "undefined" data attribute):

<div class="vis-label vis-nesting-group expanded dotdotdot" title="" style="height: 30px;">
   <div class="vis-inner">
      <div class="fixededitlabel">
         <p><span class="js-edit" data-resource-id="undefined"><img src="images/ic_mode_edit_black_18dp_1x.png"></span><span class="js-delete" data-resource-id="undefined"><img src="images/ic_delete_black_18dp_1x.png"></span>Resource X</p>
      </div>
   </div>
</div>

Is there any way to have the click be bound to the dropdown symbol only? Or any suggestions how I can ensure that my icons take precendence over the group click?

[marcortw]

After debugging for quite a while, I figured out that pointer events are used. I'd also like to point out that I was using @yotamberk's branch from https://github.com/yotamberk/vis/tree/nested-groups-order to get the dynamic nested groups order (#3206) which was not yet in the main branch. Nevertheless, I was able to catch my click/pointerdown event on my element with the following jquery:

$(document).on('click pointerdown', '.js-edit', function () {...}

[marcbc]

Hi @marcortw , I'm facing the same issue, where I want to trigger the expand/collapse from an element inside the nesting-group, but not all of it.

I see how you can detect the event triggered by the specific element you want to monitor... but did you find a way to override the default behaviour which is expanding/collapsing the group when clicking anywhere inside it? Otherwise... how are you avoiding the event from being processed twice?
thanks!

[marcortw]

Hi @marcbc

I didn't completely implement a proper solution at the time I closed this issue and ran into that problem again, previously not aware of the things which happen in the background as you mentioned. I now gave it another try and came up with a different approach, which actually turns off the default _onGroupClick event handler in ItemSet. It's not nice to fiddle around with this vis internal use of Hammer events, but couldn't find a more elegant way at the moment. Not to say that this solution is proper, but it seems to work (didn't do any extensive tests yet). Take a look at this example:

// Create a Timeline
timeline = new vis.Timeline(timelineDiv, items, groups, visOptions);

// turn off the internal hammer tap event listener
timeline.itemSet.groupHammer.off('tap');

// use my own fake internal hammer tap event listener
timeline.itemSet.groupHammer.on('tap', function (event) {
	let target = event.target; // target is in my case an img
	let $parent = $(target).parent(); // parent is a div

	if ($parent.hasClass('js-edit') || $parent.hasClass('js-delete')) { // parent has my classes
		console.log('going to edit or delete a group'); // my own code
	} else {
		// if none of my business, forward the event to the vis event handler
		timeline.itemSet._onGroupClick(event);
	}
}

With this, you don't need the jquery to catch the click/pointerdown event anymore.

[marcbc]

thanks for taking the time to share this @marcortw , I'll give it a try!

cheers