Swipe on Ons-List via Ons-GestureDetector

munsterlander

So, there was a question regarding implementing swipe to delete on the ons-list elements. I started working on this as I was curious and I have swipe working, but I am having issues getting the id of the element to delete. Here is a mix of two code sets:

ons.ready(function(){
ons.GestureDetector(document.getElementById('myList')).on('swipeleft',function(e){
     alert('swiped - '+e.target.id);
    });
 });

 ons.ready(function(){
    var swipeItems = document.querySelectorAll('.swipeable');
    for (var i = 0; i < swipeItems.length; i++) {
        swipeItems[i].addEventListener('swipeleft', function(e) {   
            alert('swiped - '+e.target.id);
        });

    }
});

<ons-gesture-detector>
  <ons-list id="myList">
    <ons-list-item id="itm1" class="swipeable">Item A</ons-list-item>
    <ons-list-item id="itm2" class="swipeable">Item B</ons-list-item>
    <ons-list-item id="itm3" class="swipeable">Item C</ons-list-item>
    <ons-list-item id="itm4" class="swipeable">Item D</ons-list-item>
  </ons-list>
</ons-gesture-detector>

You can choose either ons.ready function and you get the same result. If you go with the first one, my preferred method, you do not need the ons-gesture-detector element nor do you need a class. The second way, would be good if you are wanting to make it easier to implement into a built in function I would think.

Either way results in the same problem. e.target.id returns nothing. Any thoughts?

misterjunio

@munsterlander I don’t understand much about the Gesture Detector but I looked into your issue and it seems like the target of the event is actually the div created inside ons-list-item rather than the element itself, hence the null id value.

Fran Diox

In that case, I guess you need to check the parent elements until ons-list-item appears. This is something we want to implement in the core lib but, unfortunately, it cannot be a priority right now :/

munsterlander

@Fran-Diox @misterjunio Thanks for the info. I will keep plodding along with this a bit and hopefully come up with some code that can at least help out a bit for an eventual PR. Restructuring the core code is beyond my level of knowledge. I have been able to make some changes, but I experienced unanticipated issues with other components, so I figure I will leave the awesome behind the scenes magic to you guys! :+1:

iqmeta

I would love to have this in core as well with nice animations. List Handling is on of the main uses in mobile apps.

Code above almost did it. I use this to handle UI and data:

<ons-page>
  <ons-toolbar>
    <div class="center">Lists</div>
  </ons-toolbar>
  <ons-list id="mylist">
  </ons-list>
</ons-page>

ons.ready(function() {
  for (var i = 0; i < 11; i++) {
    var item = $(
      "<ons-list-item data-id='" +
        i +
        "' tappable>Test " +
        i +
        "</ons-list-item>"
    );
    item[0].addEventListener("swipeleft", function(e) {
      var data = $(this).data("id");
      alert(data);
      $(this).remove();
    });
    $("#mylist").append(item);
  }
});

Sure if you prefere VanillaJS. Replace the jQuery with the corresponding alternatives… Cheers.

gabrielarquetipo

@iqmeta
Just in case anyone need it, it’s working, i just added class “itemlist” to ons-list item and below code (i know it’s not efficient but it works.

  ons.getScriptPage().onInit = function() {
      // Hooks are bound to the page element
  var divGD = ons.GestureDetector(document.querySelector('#myList'));
  divGD.on('swipeleft', function(event) {
  console.log(event.target);
  if(event.target.classList.contains('itemlist'))
  removeFadeOut(event.target,500);// event.target.parentNode.removeChild(event.target);
  else if (event.target.parentNode.classList.contains('itemlist')){
              // console.log('swiped - '+event.target.parentNode.id);
              var el=event.target.parentNode;
              removeFadeOut(el,500);// el.parentNode.removeChild(el);
              console.log("es list-item");

            }
            else{
              var el=event.target.parentNode;
              // console.log('superpadre'+el.parentNode.id);
              console.log(el.parentNode.classList);
              if(el.parentNode.classList.contains('itemlist'))
              removeFadeOut(el.parentNode,500);// el.parentNode.parentNode.removeChild(el.parentNode);
              else{
                var el=event.target.parentNode.parentNode;
                if(el.parentNode.classList.contains('itemlist'))
                removeFadeOut(el.parentNode,500);// el.parentNode.parentNode.removeChild(el.parentNode);
              }
            }
});
      
      this.onShow = function() {
  
      };
    };
    function removeFadeOut( el, speed ) {
    var seconds = speed/1000;
    el.style.transition = "opacity "+seconds+"s ease";

    el.style.opacity = 0;
    setTimeout(function() {
        el.parentNode.removeChild(el);
    }, speed);
}

Bradley12345