cycleview button (Unhandled TypeError: Expected a function.)

[NicholasConrad]

The cycleview element is itself clickable, but I want a button that triggers the cycle instead.

document.getElementById("myButton").onactivate = function(evt) {
  document.getElementById("cycleview").click();
};

produces: Unhandled TypeError: Expected a function.

I see "click" in the document API guide, but there is no usage example.

Would this be a place to use sendevent() instead? what would be a usage example for sendevent?

Thanks!

[JonFitbit]

There is a click event, not a function, you could try:

let myButton = document.getElementById("myButton");
let cycleView = document.getElementById("cycleview");
myButton.onactivate = function(evt) {
  cycleView.sendEvent({type: 'click'});
}

If that doesn't work, try the mouse events, such as `mousedown`. I know there's no mouse 🙂

[JasonShort]

The click event seems to require screenX, and screenY. However, after adding those fields to the hash, the cycleview doesn't trigger. Can you look into the event handler of the cycle-view? 

Also, who gets sent the click event? The cycle-view id? The cycle-View Href? or the cycle items themselves? 

Thanks, Jason

[VTi-R]

I've been digging into this because I have the same desire (timed rotation of the cycleView) and I found that it's the content within the #cycleview-item that gets the click event. For example with this cycleView:

<use id="cv1" href="#cycleview"  ...>
  <use id="cv1_item1" href="#cycleview-item" class="cycle-item" pointer-events="visible" ...>
    <rect id="cv1_item1_content" pointer-events="visible" ...></rect>
  </use>
  <use id="cv1_item2" href="#cycleview-item" class="cycle-item" pointer-events="visible" ...>
    <rect id="cv1_item2_content" pointer-events="visible" ...></rect>
  </use>

It's the rect objects that receive the click event. Theoretically (I'm still testing myself) fire the event off somewhere with:

  cv1_item2_content.sendEvent({type: 'click', screenX: XXX, screenY: YYY});

where XXX and YYY are valid co-ordinates within your cycleView.

[VTi-R]

Yeah that doesn't work. Back to the drawing board.

[BHamRunner]

You don't actually need to trigger a click or mouse event to the cycle view.  If you look a the panorama view, you'll see how how it suggests cycling through it.

Basically, you'll get the current value from the container and set the value of the index you want to display.

<use id="cv1" href="#cycleview"  ...>
  <use id="cv1_item1" href="#cycleview-item" class="cycle-item" pointer-events="visible" ...>
    <rect id="cv1_item1_content" pointer-events="visible" ...></rect>
...

//JavaScript
let cycleViewContainer = document.getElementById("cv1"); 
console.log(cycleViewContainer.value); //this will give you the current value 

//set the new value 
cycleViewContainer.value = cycleViewContainer.value + 1;

[VTi-R]

Thank you! That worked perfectly.