swipe-to-delete
v0.1.6
Published
Implement the 'swipe to delete' UI-pattern in the Marionette framework.
Downloads
19
Maintainers
Readme
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.