var HORIZONTAL_MARGIN = 16;
var VERTICAL_MARGIN = 8;

var page = tabris.create("Page", {
  title: "Swipe to dismiss",
  topLevel: true
});

var items = [
  {title: "Up for lunch?", sender: "John Smith", time: "11:35"},
  {title: "JavaScript for mobile applications", sender: "JavaScript Newsletter", time: "08:03"},
  {title: "This is just a spam message", sender: "Spammer", time: "04:32"},
  {title: "CoolGrocery Discount Newsletter", sender: "Local CoolGrocery", time: "yesterday"},
  {title: "Cinema this weekend?", sender: "Robert J. Schmidt", time: "yesterday"},
  {title: "Coffee Club Newsletter", sender: "Coffee Club", time: "yesterday"},
  {title: "Fraud mail", sender: "Unsuspicious Jack", time: "yesterday"}
];

var collectionView = tabris.create("CollectionView", {
  layoutData: {left: 0, right: 0, top: 0, bottom: 0},
  itemHeight: 64,
  items: items,
  initializeCell: function(cell) {
    cell.set("background", "#d0d0d0");
    var container = tabris.create("Composite", {
      background: "white",
      layoutData: {left: 0, top: 0, bottom: 0, right: 0}
    }).on("pan:horizontal", function(event) {
      handlePan(event, container);
    }).appendTo(cell);
    var senderView = tabris.create("TextView", {
      font: "bold 18px",
      layoutData: {top: VERTICAL_MARGIN, left: HORIZONTAL_MARGIN}
    }).appendTo(container);
    var titleView = tabris.create("TextView", {
      layoutData: {bottom: VERTICAL_MARGIN, left: HORIZONTAL_MARGIN}
    }).appendTo(container);
    var timeView = tabris.create("TextView", {
      foreground: "#b8b8b8",
      layoutData: {top: VERTICAL_MARGIN, right: HORIZONTAL_MARGIN}
    }).appendTo(container);
    tabris.create("Composite", {
      background: "#b8b8b8",
      layoutData: {left: 0, bottom: 0, right: 0, height: 1}
    }).appendTo(cell);
    cell.on("itemchange", function(message) {
      container.set({transform: {}, message: message});
      senderView.set("text", message.sender);
      titleView.set("text", message.title);
      timeView.set("text", message.time);
    });
  }
}).appendTo(page);

function handlePan(event, container) {
  container.set("transform", {translationX: event.translation.x});
  if (event.state === "end") {
    handlePanFinished(event, container);
  }
}

function handlePanFinished(event, container) {
  var translation = Math.abs(event.translation.x);
  var velocity = Math.abs(event.velocity.x);
  var consistentDirection = sign(event.translation.x) === sign(event.velocity.x);
  var bounds = container.get("bounds");
  if ((translation > bounds.width / 2 || velocity > 700) && consistentDirection) {
    animateDismiss(event, container, bounds);
  } else {
    animateCancel(event, container);
  }
}

function animateDismiss(event, container, bounds) {
  container.animate({
    transform: {translationX: sign(event.velocity.x) * bounds.width}
  }, {duration: 200, easing: "ease-out"}).once("animationend", function() {
    var index = collectionView.get("items").indexOf(container.get("message"));
    collectionView.remove(index);
  });
}

function animateCancel(event, container) {
  container.animate({transform: {translationX: 0}}, {duration: 200, easing: "ease-out"});
}

function sign(number) {
  return number ? number < 0 ? -1 : 1 : 0;
}

page.open();

@@ -2304,27 +2304,28 @@
 %7B%0A  var 
-translation
+beyondCenter
  = Math.
@@ -2352,24 +2352,57 @@
 n.x)
-;%0A  var velocity
+ %3E container.get(%22bounds%22).width / 2;%0A  var fling
  = M
@@ -2426,24 +2426,30 @@
 ocity.x)
+ %3E 200
 ;%0A  var 
 consiste
@@ -2440,26 +2440,20 @@
 ;%0A  var 
-consistent
+same
 Directio
@@ -2463,35 +2463,32 @@
  sign(event.
-translation
+velocity
 .x) === sign
@@ -2498,140 +2498,286 @@
 ent.
-velocity.x);%0A  var bounds = container.get(%22bounds%22);%0A  if ((translation %3E bounds.width / 2 %7C%7C velocity %3E 700) && consistentDirection
+translation.x);%0A  // When swiped beyond the center, trigger dismiss if flinged in the same direction or let go.%0A  // Otherwise, detect a dismiss only if flinged in the same direction.%0A  var dismiss = beyondCenter ? sameDirection %7C%7C !fling : sameDirection && fling;%0A  if (dismiss
 ) %7B%0A
@@ -2811,24 +2811,16 @@
 ontainer
-, bounds
 );%0A  %7D e
@@ -2913,19 +2913,51 @@
 iner
-, bounds) %7B
+) %7B%0A  var bounds = container.get(%22bounds%22);
 %0A  c
@@ -3012,32 +3012,35 @@
  sign(event.
-velocity
+translation
 .x) * bounds

Improve swipe-to-dismiss example UX