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

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Swipe on Ons-List via Ons-GestureDetector