Mix Image Implementation

by AntonLapshin

HTML

<div id="mix_panel">

</div>

CSS

#mix_panel {
  width: 600px;
  height: 310px;
}

.mix-panel {
  display: none;
  position: relative;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}

.mix-panel > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.mix-panel .img-left {
  z-index: 1;
}

.mix-panel .img-right {
  width: 100%;
  height: 100%;
}

.mix-panel .slider {
  z-index: 2;
  width: 20px;
  cursor: pointer;
  opacity: 0.7;
  background-color: rgb(253, 136, 0);
}

.mix-panel .slider.active {
  opacity: 0.8;
}

JavaScript

;(function(){
	
  var TEMPLATE = 
    '<div class="mix-panel">' +
      '<div class="img-left"></div>' +
      '<img class="img-right" />' + 
      '<div class="slider"></div>' +
    '</div>';

	function loadImage(url){
  	var defer = $.Deferred();
    
    var $img = $('<img />').on('load', function(){
    	defer.resolve();
    }).attr('src', url);
    
    return defer;
  }

  window.MixPanel = {
  	/**
     * Adds a mixed panel on a page
     * @container {string} Selector of the container for a new mixed panel
     * @options {object} Input parameters
		 *   @imgLeft {string} Url of the left image
     *   @imgRight {string} Url of the right image
     *   @padding {number} Left/Right padding value
     *   @onLoad {function} Fires when mix panel is rendered
     */  
  	add: function(container, options){
    	
    	var $container = $(container);
      $container.append(TEMPLATE);
      var $mixPanel = $container.find('.mix-panel');
      var $slider = $mixPanel.find('.slider');
      var $imgLeft = $mixPanel.find('.img-left');
      var $imgRight = $mixPanel.find('.img-right');
      var height = $container.height();
      var minX = options.padding;

			$.when.apply(this, [loadImage(options.imgLeft), loadImage(options.imgRight)]).then(function(){
      	if (options.onLoad)
        	options.onLoad();
        $imgLeft.css('background-image', 'url(' + options.imgLeft + ')');
        $imgRight.attr('src', options.imgRight);
        $mixPanel.show();
      });

      function setPosition(x){
      	x = x || minX;
        $imgLeft.css('width', x + 'px');
        $slider.css('left', x + 'px');
      }

      setPosition();

      var drag = false;
      function start(){
        drag = true;
        $slider.toggleClass('active', true);
      }
      function end(){
        drag = false;
        $slider.toggleClass('active', false);
      }
      function move(e){
        if (!drag)
          return;

        var width = $container.width();
        var maxX = width...