Ember 0.9.8.1 Template

by rsaccon

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script src="http://dl.dropbox.com/u/31117668/ember-touch.js"></script>
<div id="app">
    
    
</div>

<script type="text/x-handlebars">
    FlipSwitchButton1:, <b>{{App.settings.property1}}</b><br/>
    FlipSwitchButton2: <b>{{App.settings.property2}}</b>
</script>

CSS

.switch-button {
  margin: 10px auto;   
}

.switch-button {
  overflow: visible;
  position: relative;
  height: 42px;
  width: 80px;
  -webkit-background-clip: padding-box;
  -webkit-border-radius: 21px;
  border: 1px solid #BBB;
  background: #D6D6D6;
  background-image: -webkit-linear-gradient(#d0d0d0, #dfdfdf);
}
.switch-button > .sb-label-left {
  z-index: 1;
  left: 0;
  border: 1px solid #2373A5;
  background: #5393C5;
  background-image: -webkit-linear-gradient(#5393c5, #6facd5);
}
.switch-button > .sb-label-right {
  z-index: 0;
  right: 0;
  border: 1px solid #BBB;
  background: #D6D6D6;
  background-image: -webkit-linear-gradient(#d0d0d0, #dfdfdf);
}
.switch-button > .sb-label {
  position: absolute;
  min-height: 100%;
  overflow: hidden;
  border-width: 0;
  -webkit-background-clip: padding-box;
  -webkit-border-radius: 21px;
}
.switch-button > .sb-inner {
  margin: 0 21px;
  position: relative;
  z-index: 1;
}
.switch-button > .sb-inner > .sb-inner-button {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: 1px;
  margin-left: -20px;
  -webkit-background-clip: padding-box;
  -webkit-border-radius: 21px;
  border: 1px solid #CCC;
  background: #EEE;
  background-image: -webkit-linear-gradient(#ffffff, #f1f1f1);
  -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
}

JavaScript

App = Ember.Application.create();



App.SwitchButtonView = Em.ContainerView.extend({
  classNames: ['switch-button'],
  childViews: ['left','right','button'],

  isOn: null,

  left: Em.View.extend({
    classNames: ['sb-label', 'sb-label-left']
  }),

  right: Em.View.extend({
    classNames: ['sb-label', 'sb-label-right']
  }),

  button: Em.ContainerView.extend({

    classNames: ['sb-inner'],
    childViews: ['child'],

    child: Em.View.extend({

      classNames: ['sb-inner-button'],
      percent:null,

      // twoWayBinding
      isOnBinding: 'parentView.parentView.isOn',

      _leftChanged: Em.observer(function() {

        var percent = this.get('percent');
        if ( percent !== null ) {
            console.log('here..');

          var handlePercent = this.width / this.switchButtonWidth * 100,
            aPercent = percent && handlePercent + ( 100 - handlePercent ) * percent / 100,
            bPercent = percent === 100 ? 0 : Math.min( handlePercent + 100 - aPercent, 100 );

          this.$().css( "left", percent+"%");
          this.leftView.$().css("width", aPercent+"%");
          this.rightView.$().css("width", bPercent+"%");
        } 

      }, 'percent' ),

      _isOnChanged: Em.observer(function() {
          
        if ( this.leftView ) { // isInsertedInDOM
          var percent = this.get('isOn') ? 100 : 0;
          this.set('percent', percent);
        }

      }, 'isOn' ),


      panOptions: {
        initThreshold: 10
      },

      didInsertElement: function(){

        this._super();

        this.switchButtonView = this.getPath('parentView.parentView');
        this.switchButtonWidth = this.switchButtonView.$().width();
        this.width = this.$().width();

        this.leftView = this.switchButtonView.left;
        this.rightView = this.switchButtonView.right;      

        this._isOnChanged();

      },

      panChange: function(recognizer) {

        var changed =...