Neoanthropic Preternatural Murmurings

    swipe-to-delete

    0.1.6 • Public • Published

    Swipe-to-delete Marionette View

    Implement the "swipe to delete" UI-pattern in the Marionette framework.

    Example

    You may see an example here.

    Usage

    This is a plugin built on top of the base Marionette LayoutView. It contains two regions: "content" and "delete". A content region show your a view. A delete region show a decoration view under the content view. It's showed when content view is swiped.

    Usually, the swipe-to-delete view is used in the Marionette CollectionView.

    var collectionView = Backbone.Marionette.CollectionView.extend({
        childView: SwipeToDeleteView.default,
        childViewOptions: function () {
            return {
                View: MessageView
            };
        }
    });
    
    • childView contains the swipe-to-delete Marionette view.
    • childViewOptions returns its options.

    Include lib

    It's available on SwipeToDeleteView.default.

    CommonJS

    var SwipeToDeleteView = require('swipe-to-delete');
    // SwipeToDeleteView.default
    

    AMD

    define(['swipe-to-delete'], function(SwipeToDeleteView) {
        // SwipeToDeleteView.default
    });
    

    Global

    <script src="node_modules/swipe-to-delete/dist/swipe-to-delete.min.js"></script>
    <script>
    // SwipeToDeleteView.default
    </script>
    

    Options

    • View - This must be your a view object definition, not an instance. It can be any Backbone.View or be derived from Marionette.ItemView. Required.
    • DeleteView - This is a decoration view object definition under a content view. By default, showed red element with trash icons. Optional.
    • deleteSwipe - This is a number. If a content view is swiped more this the number than a swipe-to-delete view will start a delete animation. By default, it's equal "0.5". Optional.

    Events

    The swipe-to-delete view triggers following events on a content view:

    • swipe:delete - when a delete animation is ended. It's used to destroy entity.
    onSwipeDelete: function () {
        this.model.destroy();
    }
    
    • swipe:cancel - when a cancel animation is ended.

    Styles

    You may set up styles in "swipe-to-delete.css" under the comment "Custom styles". The class js-content is content region, js-delete is delete region. Classes js-transition-delete-right and js-transition-delete-left are added on a content view when it's swiped more than "deleteSwipe" options. Class js-transition-cancel is added when a content view swiped less than "deleteSwipe" options. Animations are made by CSS3 transition.

    Downloads

    Swipe-to-delete is available via bower and npm. Else you can download the latest builds directly from the "dist" folder above.

    Contributing

    From opening a bug report to creating a pull request: every contribution is appreciated and welcome. If you're planing to implement a new feature or change the api please create an issue first.

    License

    MIT

    Install

    npm i swipe-to-delete

    DownloadsWeekly Downloads

    0

    Version

    0.1.6

    License

    MIT

    Last publish

    Collaborators

    • avatar