Ember Slide Toggle

component.js

import Ember from "ember";

export default Ember.Component.extend({

  tagName : 'slide-toggle',

  classNames : ['slideToggle'],
  
  params: null,
  action: null,

  classNameBindings : ['value:isOn:isOff'],

  layoutName : 'components/slide-toggle',

  value : false,

  _updateCSS : function (value) {

    if (!value) {

      this.$('.slideToggleButton').removeAttr('style');

    } else {

      var maxMovement = this.$('.slideToggleButton').get(0).clientWidth * 0.75;
      if (Math.abs(value) > maxMovement) {
        value = (value < 0) ? 0 : maxMovement;
      } else if (value < 0) {
        value = maxMovement + value;
      }

      this.$('.slideToggleButton').css({
        'transform' : 'translate(' + value + 'px , 0)',
        '-o-transform' : 'translate(' + value + 'px , 0)',
        '-moz-transform' : 'translate(' + value + 'px , 0)',
        '-webkit-transform' : 'translate(' + value + 'px , 0)'
      });
    }
  },

  _trigger : function (dX) {

    this._updateCSS();

    if ((dX && dX > 8) || (!dX && dX !== 0)) {
      this.set('value', !this.get('value'));
      var parmas = {
        context : this.get('params') || this,
        value : this.get('value')
      };
      this.sendAction('action', this.get('params'));
    }
    return false;
  },

  pan : function (e) {

    var allowPanRight = !this.get('value');
    var dX = e.originalEvent.gesture.deltaX;

    if (allowPanRight) {
      if (dX < 0) { dX = 0; }
    } else {
      if (dX > 0) { dX = 0; }
    }
    this._updateCSS(dX);

    //schedule the dismissal
    Ember.run.debounce(this, this._trigger, Math.abs(dX), 250);
    return false;
  },

  tap : function () {
    return this._trigger();
  },

  press : function () {
    return this._trigger();
  }
});

component.styl

@require '../helpers/colors.styl'
@require '../helpers/functions.styl'
@require '../helpers/hardware-acceleration.styl'

slideToggle(ht, un, c)
  overlappingElement
  background #f0f0f0
  border 2px solid #e0e0e0
  cursor pointer
  width unit(1.8 * ht, un)
  height unit(ht, un)
  //margin: 0 unit(ht / 2, un)
  display inline-block
  border-radius unit(ht / 2, un)
  /.slideToggleButton
    enableAcceleration
    preserveAcceleration
    background #f8f8f8
    border-radius unit(ht / 2, un)
    height unit(ht, un)
    position relative
    left 0
    top -2px
    width unit(ht, un)
    box-shadow 1px 0 2px 0 #bbb
    acceleratedTransition .1s ease-out
  &.isOn
    bg-gradient-dark darken(c, 20%) c
    border-color c
  &.isOn .slideToggleButton
    acceleratedPositionAnimation unit(.75 * ht, un) 0
    box-shadow -1px 0 2px 0 rgb(63, 121, 82)

// green slide-toggle
.slideToggle-green
  slideToggle(40, 'px', t2d_green)

template.hbs

<div class="slideToggleButton"></div>