Backbone.js: Swipe Controls

Swipe Controls with Backbone.js and Hammer.md

Swipe Controls with Backbone.js

Requires

Hammer.js http://eightmedia.github.com/hammer.js/

swipe-controls.less

.swipe-control-width(@width){
  &.controls-open {
		.top {
			left: -@width;
		}
	}
	
	.bottom {
		width: @width;
	}
}

li.swipe-controls {
	position: relative;
	padding: 0 !important;
	
	.top {
		position: relative;
		.transition(120ms);
		padding: 15px;
		z-index: 1;
		background: #fff;
	}
	
	.bottom {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		background: url(http://subtlepatterns.com/patterns/fabric_plaid.png) repeat;
		.box-shadow(#ccc 1px 1px 4px inset);
		padding: 15px;
		.box-sizing();
	}
	
	.swipe-control-width(50px); // default is 50, perfect for one delete button
	
}

SwipeControlLi.js

var SwipeControlsLi = SimpleLi.extend({

  tagName: 'li',
	
	className: 'clearfix swipe-controls',
	
	defaultEvents: {
		'swipe': 'swipeControls',
		'dragEnd': 'swipeControls'
	},
	
	initialize: function(){
	
		this.events = _.extend({}, this.defaultEvents, this.events||{});
		
		this.controlsOpen = false;
	},
	
	swipeControls: function(e){
		if(e.direction == 'right')
			this.closeControls()
		else if(e.direction == 'left')
			this.openControls();
	},
	
	toggleControls: function(){
		if(this.controlsOpen)
			this.closeControls()
		else
			this.openControls();
	},
	
	openControls: function(){
		this.controlsOpen = true;
		this.$el.addClass('controls-open')
	},
	
	closeControls: function(){
		this.controlsOpen = false;
		this.$el.removeClass('controls-open');
	}
	
});

Template.html

<script type="text/html" id="swipe-controls-li">
  <div class="top">
		<h4>{{label}}</h4>
	</div>
	<div class="bottom">
		<a class="button icon-only clear icon-trash"></a>
	</div>
</script>