Image Compare

import $ from 'jquery';
import * as nodeDecorationService from '@coremedia/js-node-decoration-service';
import {EVENT_LAYOUT_CHANGED} from '@coremedia/js-basic';

const IMAGE_COMPARE_SELECTOR = '.image-compare';
const IMAGE_SELECTOR = '.media';
const SECOND_BLOCK_SELECTOR = '.second-image';
const HANDLE_SELECTOR = '.handle';
const $document = $(document);

$(function() {
  nodeDecorationService.addNodeDecoratorBySelector(IMAGE_COMPARE_SELECTOR, function ($target) {
    $.each($target, function () {
      const options = {
        $element: $target
      };

      init();

      function init() {
        options.vertical = options.$element.data('vertical') || false;
        options.vertical && getSecondBlock().addClass('vertical');
        options.dimension = 50;
        options.mousePosition = {x: 0, y: 0};
        options.proxyFunction = null;
        getSecondBlock().show();
        resize();
        bindEvents();
        $document.trigger(EVENT_LAYOUT_CHANGED);
      }
      function bindEvents() {
        let comparator = getHandle()[0];
        comparator.addEventListener('mousedown', function(e) {
          options.mousePosition = {x: e.x, y: e.y};
          options.proxyFunction = mouseMove;
          getHandle().addClass('active');
          document.addEventListener('mousemove', options.proxyFunction, false);
        }, false);
        document.addEventListener("mouseup", function(e) {
          options.proxyFunction && (document.removeEventListener('mousemove', options.proxyFunction, false), options.proxyFunction = null, getHandle().removeClass('active'));
        }, false);
        comparator.addEventListener('touchstart', function(e) {
          e.preventDefault();
          if (e.touches.length > 1) { // skip multitouch
            return;
          }
          const touch = e.touches[0];
          options.mousePosition = {x: touch.clientX, y: touch.clientY};
          options.proxyFunction = touchMove;
          getHandle().addClass('active');
          document.addEventListener("touchmove", options.proxyFunction, false);
        }, false);
        document.addEventListener("touchend", function(e) {
          options.proxyFunction && (document.removeEventListener("touchmove", options.proxyFunction, false), options.proxyFunction = null, getHandle().removeClass('active'));
        }, false);
      }
      function mouseMove(e) {
        e && e.preventDefault();
        moveComparator({x: e.x, y: e.y});
      }
      function touchMove(e) {
        e.preventDefault();
        if (e.touches.length > 1) {
          return;
        }
        var touch = e.touches[0];
        moveComparator({x: touch.clientX, y: touch.clientY});
      }
      function moveComparator(newPosition) {
        const delta = (options.mousePosition[options.vertical ? 'y' : 'x'] - newPosition[options.vertical ? 'y' : 'x']) / options.$element[options.vertical ? 'height' : 'width']() * 100;
        options.dimension += delta;
        options.dimension < 0 && (options.dimension = 0);
        options.dimension > 100 && (options.dimension = 100);
        options.mousePosition = newPosition;
        getSecondBlock()[options.vertical ? 'height' : 'width'](getSecondImage()[options.vertical ? 'height' : 'width']() * options.dimension / 100);
      }
      function getHandle() {
        return options.$handle || (options.$handle = $(HANDLE_SELECTOR, options.$element));
      }
      function getFirstImage() {
        return options.$firstImage || (options.$firstImage = $(IMAGE_SELECTOR + ':first', options.$element));
      }
      function getSecondBlock() {
        return options.$secondBlock || (options.$secondBlock = $(SECOND_BLOCK_SELECTOR, options.$element));
      }
      function getSecondImage() {
        return options.$secondImage || (options.$secondImage = $(IMAGE_SELECTOR, getSecondBlock()));
      }
      function resize() {
        getSecondImage().width(getFirstImage().width());
        getSecondBlock()[options.vertical ? 'height' : 'width'](options.dimension + '%');
      }

      $document.on(EVENT_LAYOUT_CHANGED, function() {
        resize();
      });
    });
  });
});