image-comparison-slider/index.js

Compare two images in a slider with mouse move effect

'use strict';

function __$styleInject(css, returnValue) {
  if (typeof document === 'undefined') {
    return returnValue;
  }
  css = css || '';
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);
  return returnValue;
}

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var _classCallCheck = _interopDefault(require('babel-runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('babel-runtime/helpers/createClass'));

__$styleInject(".comparison-slider{position:relative;height:0;width:100%}.comparison-slider div{position:absolute;top:0;bottom:0;background-repeat:no-repeat;background-size:cover}.comparison-slider div.before{background-position:0;left:0;width:50%}.comparison-slider div.after{background-position:100%;right:0;width:50%}", undefined);

var Comparison = function () {
  function Comparison() {
    _classCallCheck(this, Comparison);

    var comparisons = document.querySelectorAll('.comparison-slider');
    if (comparisons != null && comparisons.length > 0) this.init(comparisons);
  }

  _createClass(Comparison, [{
    key: 'init',
    value: function init(comparisons) {
      var _this = this;

      comparisons.forEach(function (comparison) {
        comparison.style.paddingTop = _this.decimal('ceil', comparison.dataset.imageHeight / comparison.dataset.imageWidth * 100, -2) + '%';
        comparison.addEventListener('mousemove', function (e) {
          _this.slide(comparison.querySelector('.before'), comparison.querySelector('.after'), e.clientX, comparison);
        });
      });
    }
  }, {
    key: 'slide',
    value: function slide(before, after, position, container) {
      var width = position - container.offsetLeft;
      before.style.width = width + 'px';
      after.style.width = container.offsetWidth - width + 'px';
    }
  }, {
    key: 'decimal',
    value: function decimal(type, value, exp) {
      if (typeof exp === 'undefined' || +exp === 0) {
        return Math[type](value);
      }
      value = +value;
      exp = +exp;
      if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
        return NaN;
      }
      if (value < 0) {
        return -this.decimal(type, -value, exp);
      }
      value = value.toString().split('e');
      value = Math[type](+(value[0] + 'e' + (value[1] ? +value[1] - exp : -exp)));
      value = value.toString().split('e');
      return +(value[0] + 'e' + (value[1] ? +value[1] + exp : exp));
    }
  }]);

  return Comparison;
}();

module.exports = Comparison;
//# sourceMappingURL=index.js.map