Programatically adding on:click and use:popup to existing ID

[3goats]

Hi I'm experimenting with the floating-ui popups and have this working nicely:

<button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-800 m-2 text-sm" on:click={clear} use:popup={popupCloseQuery}>CMD</button>

However I need to add the on:click and use:popup to an existing inline SVG element. I'm struggling to work out how to do this. Is this possible and if so how ?

So I have these elements in my SVG:

<g id="overlay">
	<circle id="be1" class="circle st18" cx="50" cy="87" r="5.4"/>
	<circle id="fe2" class="circle st18" cx="49" cy="135" r="5.4"/>
	<circle id="fe1" class="circle st18" cx="218.2" cy="110" r="5.4"/>
</g>

Is it possible to programatically bind the on:click={clear} use:popup={popupCloseQuery} attributes to the existing circle elements in the SVG ?

[endigo9740]

Hey @3goats I'm going to go ahead and link to your previous issue on the other project, for full context here. Sometimes folks refer to old issues so I want to ensure we include this:

skeletonlabs/floating-ui-svelte#135

The info I provided about trying to make SVGs interactive is still relevant here. However, you mentioned you had built your own event listeners per each id. In your case, you'll want to use the popup action in a programmatic fashion. This is technically possible with Svelte Actions.

Typically actions are triggered using the use: directive. This does two things:

1. Triggers the function
2. Passes (at minimum) an element node reference to the tag it's attached to in the template

As long as you satisfy number 2, you can still use the popup as intended. Here's the Popup action source so you can see what I mean:

https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/Popup/popup.ts#L7

It takes in two parameters:

1. The triggerNode: HTMLElement -> the reference to the trigger element the use: directive would have been applied to. (ex: a button in your first snippet)
2. The args -> which are our PopupSettings values, which you typically pass as the value in the key/value pair.

So if we want to trigger the popup action (the function) programmatically, I believe you can do something like this. Though, please keep in mind this is not tested...

First, create element references we can bind to:

let elementCircleOne: HTMLElement;
let elementCircleTwo: HTMLElement;
let elementCircleThree: HTMLElement;

Then, bind to each element using the bind:this syntax:

<g id="overlay">
    <circle bind:this={elementCircleOne} class="circle st18" cx="50" cy="87" r="5.4"/>
    <circle bind:this={elementCircleTwo} class="circle st18" cx="49" cy="135" r="5.4"/>
    <circle bind:this={elementCircleThree} class="circle st18" cx="218.2" cy="110" r="5.4"/>
</g>

Finally, trigger each popup reference as soon as possible, as if they were normal functions. Since we're interfacing with DOM elements, we'll need to await the DOM to be active, so we'll opt for the onMount lifecycle event.

onMount(() => {
    popup(elementCircleOne,{ /* ...popup settings here... */ });
    // .. repeat for circle two/three
})

This will programmatically run popup when the page/component mounts, pass a reference to the element node, and allow you to pass the popup configuration settings per element.

Again, this is untested, but this hopefully this should help. Ideally though, you find a way to break up and make the interactive elements their own standalone DOM elements that are not contained within the SVG. That way you can use a proper interactive element, such as a button. This will provide the best a11y solution for your users.

[3goats]

Hi thanks very much for this. I will try it out over the next couple of days.

[3goats]

OK so I did some testing based on the above suggestion. So my +page.svelte looks like this:

<script lang="ts">

    import { onMount } from "svelte";
	import { popup, } from '@skeletonlabs/skeleton';

	import svg from '$lib/images/diagram2.svg?raw';

	let elementCircleOne: HTMLElement;
	let elementCircleTwo: HTMLElement;		

onMount(async () => {
	
 popup(elementCircleOne,{
  event: 'click',
  target: 'demo_popup',
  placement: 'right',
});

popup(elementCircleTwo,{
  event: 'click',
  target: 'demo_popup',
  placement: 'right',
});

});	
		
	
</script>
		
		{@html svg}
		  
  <div class="card p-4 w-72 shadow-xl" data-popup="demo_popup">
	<div><p>Demo Content</p></div>
	<div class="arrow bg-surface-100-800-token" />
</div>

My SVG includes this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.8.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 496.6 165.6" style="enable-background:new 0 0 496.6 165.6;" xml:space="preserve">

.....

<g id="overlay">
    <circle bind:this={elementCircleOne} class="circle st18" cx="50" cy="87" r="5.4"/>
    <circle bind:this={elementCircleTwo} class="circle st18" cx="49" cy="135" r="5.4"/>
    <circle bind:this={elementCircleThree} class="circle st18" cx="218.2" cy="110" r="5.4"/>
</g>
</svg>

However, I get an unhandled promise rejection

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'triggerNode.addEventListener') when I add the popup.

[endigo9740]

You have two issues here:

1. Those bind:this directives are out of scope will never resolve (and will only work in .svelte files)
2. The contents of the @html rendered element may occur after the onMount event. Causing a race condition.

You'll need to embed your SVG directly in the component template, rather than importing it from an external source. Something like this:

<script lang="ts">
  import { onMount } from "svelte";
  import { popup, } from '@skeletonlabs/skeleton';

  let elementCircleOne: HTMLElement;
  let elementCircleTwo: HTMLElement;		

  onMount(async () => {
    
    popup(elementCircleOne,{
      event: 'click',
      target: 'demo_popup',
      placement: 'right',
    });

    popup(elementCircleTwo,{
      event: 'click',
      target: 'demo_popup',
      placement: 'right',
    });

  });	
</script>
		
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 496.6 165.6" style="enable-background:new 0 0 496.6 165.6;" xml:space="preserve">
  // ...
  <g id="overlay">
  <circle bind:this={elementCircleOne} class="circle st18" cx="50" cy="87" r="5.4"/>
  <circle bind:this={elementCircleTwo} class="circle st18" cx="49" cy="135" r="5.4"/>
  <circle bind:this={elementCircleThree} class="circle st18" cx="218.2" cy="110" r="5.4"/>
  </g>
</svg>
		  
<div class="card p-4 w-72 shadow-xl" data-popup="demo_popup">
	<div><p>Demo Content</p></div>
	<div class="arrow bg-surface-100-800-token" />
</div>

[3goats]

Thanks very much that did the trick and gives me something I work with. 👍