Swipe Gesture Help

How-to Discussions
1

Ok, so I have a situation here. Here’s what I got. (I’ve trimmed out most of the code)

<JavaScript>
  var Observable = require('FuseJS/Observable');
  var items = Observable(
    { title: 'Foo' },
    { title: 'Bar' },
    { title: 'Baz' }
  );

  module.exports = {
    items: items
  };
</JavaScript>

<ScrollView>
  <StackPanel>
    <Each Items="{items}">
      <Panel ux:Name="itemNode" Color="#fff" Padding="10">
        <!-- Swipe -->
        <SwipeGesture ux:Name="swipeItem" Direction="Left" LengthNode="itemNode" Type="Active" />
        <SwipingAnimation Source="swipeItem">
          <Move X="-0.8" RelativeTo="Size" Duration="0.5" />
        </SwipingAnimation>

        <Panel Alignment="VerticalCenter">
          <Text Value="{title}" FontSize="13" TextColor="#555" />
        </Panel>
      </Panel>
    </Each>
  </StackPanel>
</ScrollView>

Oh yeah! Swiping works as expected.

Oh no! What I want to achieve is, when the user swipes another item, I want the "previous swiped" item to close back. How do I go about doing this? I greatly appreciate anyone who can help me with this. Thanks!
2

The swipe status is controlled by the IsActive property of the SwipeGesture, so you can manipulate that. Here I simply iterate over all the items and reset them all except the currently active one:

<App>
    <JavaScript>
      var Observable = require('FuseJS/Observable');
      var items = Observable(
        { title: 'Foo', active: Observable(false) },
        { title: 'Bar', active: Observable(false) },
        { title: 'Baz', active: Observable(false) }
      );

      function resetSwipe(arg){
        for(i=0; i<items.length; i++){
            e = items.getAt(i);
            if(e != arg.data) e.active.value = false;
        }
      }

      module.exports = {
        items: items, resetSwipe: resetSwipe
      };
    </JavaScript>

    <ScrollView>
      <StackPanel>
        <Each Items="{items}">
          <Panel ux:Name="itemNode" Color="#fff" Padding="10">
            <!-- Swipe -->
            <SwipeGesture ux:Name="swipeItem" Direction="Left" LengthNode="itemNode" Type="Active" IsActive="{active}"/>
            <SwipingAnimation Source="swipeItem">
                <Callback Handler="{resetSwipe}"/>
                <Move X="-0.8" RelativeTo="Size" Duration="0.5" />
            </SwipingAnimation>
            <Panel Alignment="VerticalCenter">
              <Text Value="{title}" FontSize="13" TextColor="#555" />
            </Panel>
          </Panel>
        </Each>
      </StackPanel>
    </ScrollView>
</App>
3

Damn, I was just testing that before posting :slight_smile:
Thanks, Remi, I was at the point where I needed to do this too.
Works perfectly.

4

Awesome! Works like a charm. Thanks so much Remi!

5

Happy to be of assistance. :slight_smile: