Skip to content

Instantly share code, notes, and snippets.

@altintx

altintx/swipe_to_delete.js

Created April 20, 2012 19:26
Download ZIP

Revisions

  1. altintx revised this gist Apr 25, 2012. 1 changed file with 19 additions and 8 deletions.
    27 changes: 19 additions & 8 deletions swipe_to_delete.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    * dataview is a { xtype: "list" }
    * dataview.itemTpl includes a <div class="deleteplaceholder"></div>
    *
    * Also note this delete button fades after 5 seconds, but not after a non-confirming touch
    * Delete button will disappear as soon as something is touched
    */

    dataview.on("itemswipe", function(dataview, ix, target, record, event, options) {
    @@ -16,13 +16,24 @@ dataview.on("itemswipe", function(dataview, ix, target, record, event, options)
    record.stores[0].sync();
    }
    });
    var removeDeleteButton = function() {
    Ext.Anim.run(del, 'fade', {
    after: function() {
    del.destroy();
    },
    out: true
    });
    };
    del.renderTo(Ext.DomQuery.selectNode(".deleteplaceholder", target.dom));
    Ext.Anim.run(del, 'fade', {
    after: function() {
    del.destroy();
    },
    out: true,
    delay: 5000
    })
    dataview.on({
    single: true,
    buffer: 250,
    itemtouchstart: removeDeleteButton
    });
    dataview.element.on({
    single: true,
    buffer: 250,
    touchstart: removeDeleteButton
    });
    }
    }));
  2. altintx revised this gist Apr 24, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions swipe_to_delete.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    * Also note this delete button fades after 5 seconds, but not after a non-confirming touch
    */

    function onItemSwipe(dataview, ix, target, record, event, options) {
    dataview.on("itemswipe", function(dataview, ix, target, record, event, options) {
    if (event.direction == "left") {
    var del = Ext.create("Ext.Button", {
    ui: "decline",
    @@ -25,4 +25,4 @@ function onItemSwipe(dataview, ix, target, record, event, options) {
    delay: 5000
    })
    }
    }
    }));
  3. altintx created this gist Apr 20, 2012.
    28 changes: 28 additions & 0 deletions swipe_to_delete.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    /* Assuming:
    * dataview is a { xtype: "list" }
    * dataview.itemTpl includes a <div class="deleteplaceholder"></div>
    *
    * Also note this delete button fades after 5 seconds, but not after a non-confirming touch
    */

    function onItemSwipe(dataview, ix, target, record, event, options) {
    if (event.direction == "left") {
    var del = Ext.create("Ext.Button", {
    ui: "decline",
    text: "Delete",
    style: "position:absolute;right:0.125in;",
    handler: function() {
    record.stores[0].remove(record);
    record.stores[0].sync();
    }
    });
    del.renderTo(Ext.DomQuery.selectNode(".deleteplaceholder", target.dom));
    Ext.Anim.run(del, 'fade', {
    after: function() {
    del.destroy();
    },
    out: true,
    delay: 5000
    })
    }
    }