Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kjantzer/4279025 to your computer and use it in GitHub Desktop.
Save kjantzer/4279025 to your computer and use it in GitHub Desktop.
Backbone.js: Swipe Controls
.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
}
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');
}
});
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment