Nested swipeout

Questions
1

So, I’m trying to have an accordion where a swipe on it, while closed will give the option to add all to the list, or expanding it, will allow you to do it on a one on one basis. I’ve gone from it being an accordion with a working swipeout menu to the pics below. (top 2 are without the nested swipeout, the bottom 2 are with my attempt at a nested swipeout)

image

Ideally, I’d like to be able to control which of the nested swipeout lists the swipeout-actions act on, as at the moment it seems like they go for the parent, which is why they are all pulled out rather than just one at a time.

If that isn’t possiable, is is possiable to make the colors line up? As the blue option can change to red (for remove) and because when red they have a slightly different % of the bar with grey to red/blue it looks a little jarring when they all come out but are not all in sync.

image

2

Heres an idea of how it looks atm:

<div class="list">
 <ul>
  <li class="accordion-item swipeout">
   <a href="#" class="item-content item-link swipeout-content">
    <div class="item-inner">
      <div class="item-title">title</div>
    </div>
   </a>
   <div class="accordion-item-content">
    <div class="list">
     <ul>
      <li class="swipeout">
       <div class="item-content swipeout-content">
        <div class="item-inner">
         <div class="item-title">Swipable</div>
        </div>
       </div>
       <div class="swipeout-actions-left">
        <a href="#" class="open-more-actions">Single</a>
       </div>
      </li>
      <li class="swipeout">
       <div class="item-content swipeout-content">
        <div class="item-inner">
         <div class="item-title">Swipable</div>
        </div>
       </div>
       <div class="swipeout-actions-left">
        <a href="#" class="open-more-actions">Single</a>
       </div>
      </li>
     </ul>
    </div>
   </div>
   <div class="swipeout-actions-left">
    <a href="#" class="open-more-actions">ALL</a>
   </div>
  </li>
  <li class="accordion-item">
    <a href="#" class="item-content item-link">
     <div class="item-inner">
      <div class="item-title">None-swipe item</div>
     </div>
    </a>
    <div class="accordion-item-content">
    <div class="card"><div class="card-content">t21</div></div>
    <div class="card"><div class="card-content">t22</div></div>
    <div class="card"><div class="card-content">t23</div></div>
    <div class="card"><div class="card-content">t24</div></div>
   </div>
  </li>
 </ul>
</div>
3

Hi, being trying for a while.
This is the best i could do with the little time i have.

jsfiddle

Let me know if it was helpful.

PD: If you have open ALL, the i prevent the child swipes to ‘swipe’, if they swipe they overlap with the parent.
the code is just an example. change it as you wish/need

4

Thank you for your help! That seems to be working perfectly on yours, but I’m still struggling to get it working outside of jsfiddle. I made a few changes to the jsfiddle to match my environment (mainly my dom using $ instead of $$) but confirmed that it still workes as expected there with those changes, then copied the whole route object over, set swipeout noFollow to true (not sure if that mattered, but trying to eliminate issues) then created a link in my menu to '/test/, but it doesn’t prevent all of them sliding out.

Any idea why it’s working differently on jsfiddle to my system?

5

Now that I test it on my phone it doesn’t work. You need to bind touch events. Not mouse as I did. Try with that.

6

Thanks for the tip.

I managed to get it working, but for anyone searching this out in the future, using touch did introduce a new problem. While the touch swipes worked perfectly as seen in that jsfiddle, having touch prevent defaults meant that you couldn’t scroll when on that area, which for a page that was 90% list often left you with no was to navigate on that page. Also it meant that the buttons didn’t work as it didn’t detect those touches as being different from any other touch in that area.

In the end I had touchstart set a listener for touchend (that was then removed) and store the xy coordinates of the start, then the end worked out if it was a swipe or a touch. If it was a swipe it would open/close the swipeout depending on direction. If it was a touch it would check to see if the event targets closest li had the class color-blue (or w/e) and perform the action for that color swipeout. This meant I didn’t need to prevent default (and removed the onclick events as these were now handled by my touch events) so the scroll function still works :slight_smile:

1 Like