Controlling scroll-view or tile-list from javascript

[Wollum]

Hi Fitbit Devs,

I want to make the tile-view snap to the nearest tile so it never stops half way between. Just like it does when scrolling between app screens in the OS. I figure the best way to do this is to set the tile-view scroll position to the nearest multiple of screen height on a mouseup event. 

To do this I need to be able to get and set the scroll position from javascript. Any idea if this is possible?

Cheers,

Willem

[JonFitbit]

More info coming on Tile List soon, meanwhile enjoy this little gem!

align-mode='0' selects no alignment, i.e. the default behavior.

align-mode='1' selects aligning the nearest item to the top of the view after the scroll ends.

[Wollum]

Ah that brilliant moment when something you think is going to be hard turns out to be super easy. Thanks Jon! 

[Wollum]

Hmm now I've had a chance to try this out it doesn't seem to work. I have tried it both as 

<use href="#tile-list" height="100%" width="100%">
  <var id="align-mode" value="1"/>

  <use href="#tile-list-item"/>
  ...
</use>

and

<use href="#tile-list" height="100%" width="100%" align-mode="1">
  <use href="#tile-list-item"/>
  ...
</use>

without much luck. The second one gives an error as well

    "Error 22 Unknown attribute 'align-mode' in align-mode".

Is it not implemented yet?

Cheers,

Willem

[JonFitbit · Accepted solution]

It should be:

<use id="blah" href='#tile-list'>
   <var id="align-mode" value="1"/>

It's not clear to me, but you may also need this:

  <var id="peek-enabled" value="0"/>

[Wollum]

Still no luck. Here is my code 

  <use id="tileList" href="#tile-list">
<!--     <var id="reorder-enabled" value="1"/> -->
    <var id="align-mode" value="1"/>
    <var id="peek-enabled" value="0"/>

    <use id="tile-0" href="#tile-list-item" class="tile">
      <use href="#price-tile" />
    </use>   
    <use id="tile-1" href="#tile-list-item" class="tile">
      <use href="#price-tile" />
    </use>   
    <use id="tile-2" href="#tile-list-item" class="tile">
      <use href="#price-tile" />
    </use> 
  </use>

[Wollum]

This is working now after updating to developer preview 3 🙂

[Pietero]

The Reference guide is not updated yet!

For those who wish to know how to import the tile-list widget

 <link rel="import" href="/mnt/sysassets/widgets/tile_list_widget.gui"/>