designer

designer.html

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="switch-radio" role="checkbox" tabindex="0" attributes="checked captionOn captionOff" touch-action="pan-y" aria-label="Always" aria-checked="false">

  <template>
    <style>    
      :host {
        display: inline-block;
        position: relative;
      }
      :host(:focus) {
        outline: none;
      }
      .switchRadio {
        font-family: Consolas, 'Liberation Mono', Courier, monospace;
        width: 60px;
        height: 26px;
        position: relative;
        z-index: 10;
        border-top-left-radius: 50em;
        border-top-right-radius: 50em;
        border-bottom-right-radius: 50em;
        border-bottom-left-radius: 50em;
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px;
        background: rgb(51, 51, 51);
      }
      .switchRadio__caption{
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        position: absolute;
        width: 50%;
        height: 100%;
        line-height: 25px;
        text-align: center;
        color: white;
      }
      
      .switchRadio__caption--checked{
        z-index: 1;
        /* -webkit-transform: translate3d(-40%, 0, 0); */
      }
      
      .switchRadio__caption--unchecked{
        z-index: 2;
        left: 50%;
        /* -webkit-transform: translate3d(40%, 0, 0); */
      }
      
      .switchRadio__knob {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 0px;
        z-index: 3;
        border-radius: 50%;
        -webkit-transform: translate3d(3px, 0, 0);
        transform: translate3d(3px, 0, 0);
        transition: -webkit-transform 0.08s linear;
        -webkit-transition: -webkit-transform 0.08s linear;
        background: linear-gradient(rgb(246, 248, 249) 0%, rgb(229, 235, 238) 50%, rgb(215, 222, 227) 51%, rgb(245, 247, 249) 100%);
      }
      .switchRadio__knob[checked] {
        -webkit-transform: translate3d(37px, 0, 0);
        transform: translate3d(37px, 0, 0);
      }
      .switchRadio__knob.dragging {
        transition: none;
        -webkit-transition: none;
      }
    </style>
    <div id="switchRadio" class="switchRadio">
      <div id="switchRadioChecked"class="switchRadio__caption switchRadio__caption--checked">{{captionOn}}</div>
      <div id="switchRadioUnChecked"class="switchRadio__caption switchRadio__caption--unchecked">{{captionOff}}</div>
      <div id="switchRadioKnob" class="switchRadio__knob" checked?="{{checked}}" on-trackstart="{{ trackStart }}" on-track="{{ track }}" on-trackend="{{ trackEnd }}">
      </div>
    </div>
  </template>

  <script>

    Polymer('switch-radio', {
      
      ready: function() {
    	  this.checked =  this.checked || true;
  	    this.captionOn = this.captionOn || 'Sim';
	      this.captionOff = this.captionOff || 'Não';
        this.min = 3;
        this.max = this.$.switchRadio.offsetLeft + this.$.switchRadio.offsetWidth - this.$.switchRadioKnob.clientWidth - this.min;
        this.captionPosition();
      },
      trackStart: function (e) {
        this._w = this.max;
        e.preventTap();
    },
      track: function (e) {
        var $knob = this.$.switchRadioKnob;
        var s = $knob.style;
        this._x = Math.min(this.max, Math.max(this.min, this.checked ? this.max + e.dx : e.dx));
        $knob.classList.add('dragging');
        s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
        this.updatePosition();
    },
      trackEnd: function () {
        var $knob = this.$.switchRadioKnob;
        var s = $knob.style;
        s.webkitTransform = s.transform = null;
        $knob.classList.remove('dragging');
        this.checked = Boolean(Math.abs(this._x) > this._w / 2);
        
        this.captionPosition();
        
    },
      checkedChanged: function () {
        console.log('checkedChanged');
        this.setAttribute('aria-checked', Boolean(this.checked));
        //this.fire('change');
    },
      captionPosition: function() {
        var sc = this.$.switchRadioChecked.style;
        var su = this.$.switchRadioUnChecked.style;
        
        if(this.checked) {
	        sc.webkitTransform = sc.transform = 'translate3d(0%,0,0)';
  	      su.webkitTransform = su.transform = 'translate3d(100%,0,0)'; 
        } else {
        	sc.webkitTransform = sc.transform = 'translate3d(-100%,0,0)';
	        su.webkitTransform = su.transform = 'translate3d(0%,0,0)'; 
        }
      },
      updatePosition: function() {
        var sc = this.$.switchRadioChecked.style;
        var su = this.$.switchRadioUnChecked.style;
        
        var percent = ((this._x - this.min) / (this.max - this.min)) * 100;
        
        console.log(this.min, this.max, this._x, percent);
        
	      sc.webkitTransform = sc.transform = 'translate3d(' + (percent - 100) +'%,0,0)';
  	    su.webkitTransform = su.transform = 'translate3d(' + (percent) +'%,0,0)';
      }
    });

  </script>

</polymer-element>