MINI Sh3ll

import $ from 'jquery';

import Zoomer from './Zoomer';
import { CLASS_NAMES, ERRORS, EVENTS } from './constants';
import { loadDefaults } from './options';
import { exists, round } from './utils';

class Cropit {
  constructor(jQuery, element, options) {
    this.$el = $(element);

    const defaults = loadDefaults(this.$el);
    this.options = $.extend({}, defaults, options);

    this.init();
  }

  init() {
    this.image = new Image();
    this.preImage = new Image();
    this.image.onload = this.onImageLoaded.bind(this);
    this.preImage.onload = this.onPreImageLoaded.bind(this);
    this.image.onerror = this.preImage.onerror = () => {
      this.onImageError.call(this, ERRORS.IMAGE_FAILED_TO_LOAD);
    };

    this.$preview = this.options.$preview.css('position', 'relative');
    this.$fileInput = this.options.$fileInput.attr({ accept: 'image/*' });
    this.$zoomSlider = this.options.$zoomSlider.attr({ min: 0, max: 1, step: 0.01 });

    this.previewSize = {
      width: this.options.width || this.$preview.innerWidth(),
      height: this.options.height || this.$preview.innerHeight(),
    };

    this.$image = $('<img />')
      .addClass(CLASS_NAMES.PREVIEW_IMAGE)
      .attr('alt', '')
      .css({
        transformOrigin: 'top left',
        webkitTransformOrigin: 'top left',
        willChange: 'transform',
      });
    this.$imageContainer = $('<div />')
      .addClass(CLASS_NAMES.PREVIEW_IMAGE_CONTAINER)
      .css({
        position: 'absolute',
        overflow: 'hidden',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
      })
      .append(this.$image);
    this.$preview.append(this.$imageContainer);

    if (this.options.imageBackground) {
      if ($.isArray(this.options.imageBackgroundBorderWidth)) {
        this.bgBorderWidthArray = this.options.imageBackgroundBorderWidth;
      }
      else {
        this.bgBorderWidthArray = [0, 1, 2, 3].map(() => this.options.imageBackgroundBorderWidth);
      }

      this.$bg = $('<img />')
        .addClass(CLASS_NAMES.PREVIEW_BACKGROUND)
        .attr('alt', '')
        .css({
          position: 'relative',
          left: this.bgBorderWidthArray[3],
          top: this.bgBorderWidthArray[0],
          transformOrigin: 'top left',
          webkitTransformOrigin: 'top left',
          willChange: 'transform',
        });
      this.$bgContainer = $('<div />')
        .addClass(CLASS_NAMES.PREVIEW_BACKGROUND_CONTAINER)
        .css({
          position: 'absolute',
          zIndex: 0,
          top: -this.bgBorderWidthArray[0],
          right: -this.bgBorderWidthArray[1],
          bottom: -this.bgBorderWidthArray[2],
          left: -this.bgBorderWidthArray[3],
        })
        .append(this.$bg);
      if (this.bgBorderWidthArray[0] > 0) {
        this.$bgContainer.css('overflow', 'hidden');
      }
      this.$preview.prepend(this.$bgContainer);
    }

    this.initialZoom = this.options.initialZoom;

    this.imageLoaded = false;

    this.moveContinue = false;

    this.zoomer = new Zoomer();

    if (this.options.allowDragNDrop) {
      $.event.props.push('dataTransfer');
    }

    this.bindListeners();

    if (this.options.imageState && this.options.imageState.src) {
      this.loadImage(this.options.imageState.src);
    }
  }

  bindListeners() {
    this.$fileInput.on('change.cropit', this.onFileChange.bind(this));
    this.$imageContainer.on(EVENTS.PREVIEW, this.onPreviewEvent.bind(this));
    this.$zoomSlider.on(EVENTS.ZOOM_INPUT, this.onZoomSliderChange.bind(this));

    if (this.options.allowDragNDrop) {
      this.$imageContainer.on('dragover.cropit dragleave.cropit', this.onDragOver.bind(this));
      this.$imageContainer.on('drop.cropit', this.onDrop.bind(this));
    }
  }

  unbindListeners() {
    this.$fileInput.off('change.cropit');
    this.$imageContainer.off(EVENTS.PREVIEW);
    this.$imageContainer.off('dragover.cropit dragleave.cropit drop.cropit');
    this.$zoomSlider.off(EVENTS.ZOOM_INPUT);
  }

  onFileChange(e) {
    this.options.onFileChange(e);

    if (this.$fileInput.get(0).files) {
      this.loadFile(this.$fileInput.get(0).files[0]);
    }
  }

  loadFile(file) {
    const fileReader = new FileReader();
    if (file && file.type.match('image')) {
      fileReader.readAsDataURL(file);
      fileReader.onload = this.onFileReaderLoaded.bind(this);
      fileReader.onerror = this.onFileReaderError.bind(this);
    }
    else if (file) {
      this.onFileReaderError();
    }
  }

  onFileReaderLoaded(e) {
    this.loadImage(e.target.result);
  }

  onFileReaderError() {
    this.options.onFileReaderError();
  }

  onDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
    this.$preview.toggleClass(CLASS_NAMES.DRAG_HOVERED, e.type === 'dragover');
  }

  onDrop(e) {
    e.preventDefault();
    e.stopPropagation();

    const files = Array.prototype.slice.call(e.dataTransfer.files, 0);
    files.some((file) => {
      if (!file.type.match('image')) { return false; }

      this.loadFile(file);
      return true;
    });

    this.$preview.removeClass(CLASS_NAMES.DRAG_HOVERED);
  }

  loadImage(imageSrc) {
    if (!imageSrc) { return; }

    this.options.onImageLoading();
    this.setImageLoadingClass();

    if (imageSrc.indexOf('data') === 0) {
      this.preImage.src = imageSrc;
    }
    else {
      const xhr = new XMLHttpRequest();
      xhr.onload = (e) => {
        if (e.target.status >= 300) {
          this.onImageError.call(this, ERRORS.IMAGE_FAILED_TO_LOAD);
          return;
        }

        this.loadFile(e.target.response);
      };
      xhr.open('GET', imageSrc);
      xhr.responseType = 'blob';
      xhr.send();
    }
  }

  onPreImageLoaded() {
    if (this.shouldRejectImage({
      imageWidth: this.preImage.width,
      imageHeight: this.preImage.height,
      previewSize: this.previewSize,
      maxZoom: this.options.maxZoom,
      exportZoom: this.options.exportZoom,
      smallImage: this.options.smallImage,
    })) {
      this.onImageError(ERRORS.SMALL_IMAGE);
      if (this.image.src) { this.setImageLoadedClass(); }
      return;
    }

    this.image.src = this.preImage.src;
  }

  onImageLoaded() {
    this.rotation = 0;
    this.setupZoomer(this.options.imageState && this.options.imageState.zoom || this._initialZoom);
    if (this.options.imageState && this.options.imageState.offset) {
      this.offset = this.options.imageState.offset;
    }
    else {
      this.centerImage();
    }

    this.options.imageState = {};

    this.$image.attr('src', this.image.src);
    if (this.options.imageBackground) {
      this.$bg.attr('src', this.image.src);
    }

    this.setImageLoadedClass();

    this.imageLoaded = true;

    this.options.onImageLoaded();
  }

  onImageError() {
    this.options.onImageError.apply(this, arguments);
    this.removeImageLoadingClass();
  }

  setImageLoadingClass() {
    this.$preview
      .removeClass(CLASS_NAMES.IMAGE_LOADED)
      .addClass(CLASS_NAMES.IMAGE_LOADING);
  }

  setImageLoadedClass() {
    this.$preview
      .removeClass(CLASS_NAMES.IMAGE_LOADING)
      .addClass(CLASS_NAMES.IMAGE_LOADED);
  }

  removeImageLoadingClass() {
    this.$preview
      .removeClass(CLASS_NAMES.IMAGE_LOADING);
  }

  getEventPosition(e) {
    if (e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0]) {
      e = e.originalEvent.touches[0];
    }
    if (e.clientX && e.clientY) {
      return { x: e.clientX, y: e.clientY };
    }
  }

  onPreviewEvent(e) {
    if (!this.imageLoaded) { return; }

    this.moveContinue = false;
    this.$imageContainer.off(EVENTS.PREVIEW_MOVE);

    if (e.type === 'mousedown' || e.type === 'touchstart') {
      this.origin = this.getEventPosition(e);
      this.moveContinue = true;
      this.$imageContainer.on(EVENTS.PREVIEW_MOVE, this.onMove.bind(this));
    }
    else {
      $(document.body).focus();
    }

    e.stopPropagation();
    return false;
  }

  onMove(e) {
    const eventPosition = this.getEventPosition(e);

    if (this.moveContinue && eventPosition) {
      this.offset = {
        x: this.offset.x + eventPosition.x - this.origin.x,
        y: this.offset.y + eventPosition.y - this.origin.y,
      };
    }

    this.origin = eventPosition;

    e.stopPropagation();
    return false;
  }

  set offset(position) {
    if (!position || !exists(position.x) || !exists(position.y)) { return; }

    this._offset = this.fixOffset(position);
    this.renderImage();

    this.options.onOffsetChange(position);
  }

  fixOffset(offset) {
    if (!this.imageLoaded) { return offset; }

    const ret = { x: offset.x, y: offset.y };

    if (!this.options.freeMove) {
      if (this.imageWidth * this.zoom >= this.previewSize.width) {
        ret.x = Math.min(0, Math.max(ret.x,
          this.previewSize.width - this.imageWidth * this.zoom));
      }
      else {
        ret.x = Math.max(0, Math.min(ret.x,
          this.previewSize.width - this.imageWidth * this.zoom));
      }

      if (this.imageHeight * this.zoom >= this.previewSize.height) {
        ret.y = Math.min(0, Math.max(ret.y,
          this.previewSize.height - this.imageHeight * this.zoom));
      }
      else {
        ret.y = Math.max(0, Math.min(ret.y,
          this.previewSize.height - this.imageHeight * this.zoom));
      }
    }

    ret.x = round(ret.x);
    ret.y = round(ret.y);

    return ret;
  }

  centerImage() {
    if (!this.image.width || !this.image.height || !this.zoom) { return; }

    this.offset = {
      x: (this.previewSize.width - this.imageWidth * this.zoom) / 2,
      y: (this.previewSize.height - this.imageHeight * this.zoom) / 2,
    };
  }

  onZoomSliderChange() {
    if (!this.imageLoaded) { return; }

    this.zoomSliderPos = Number(this.$zoomSlider.val());
    const newZoom = this.zoomer.getZoom(this.zoomSliderPos);
    if (newZoom === this.zoom) { return; }
    this.zoom = newZoom;
  }

  enableZoomSlider() {
    this.$zoomSlider.removeAttr('disabled');
    this.options.onZoomEnabled();
  }

  disableZoomSlider() {
    this.$zoomSlider.attr('disabled', true);
    this.options.onZoomDisabled();
  }

  setupZoomer(zoom) {
    this.zoomer.setup({
      imageSize: this.imageSize,
      previewSize: this.previewSize,
      exportZoom: this.options.exportZoom,
      maxZoom: this.options.maxZoom,
      minZoom: this.options.minZoom,
      smallImage: this.options.smallImage,
    });
    this.zoom = exists(zoom) ? zoom : this._zoom;

    if (this.isZoomable()) {
      this.enableZoomSlider();
    }
    else {
      this.disableZoomSlider();
    }
  }

  set zoom(newZoom) {
    newZoom = this.fixZoom(newZoom);

    if (this.imageLoaded) {
      const oldZoom = this.zoom;

      const newX = this.previewSize.width / 2 - (this.previewSize.width / 2 - this.offset.x) * newZoom / oldZoom;
      const newY = this.previewSize.height / 2 - (this.previewSize.height / 2 - this.offset.y) * newZoom / oldZoom;

      this._zoom = newZoom;
      this.offset = { x: newX, y: newY }; // Triggers renderImage()
    }
    else {
      this._zoom = newZoom;
    }

    this.zoomSliderPos = this.zoomer.getSliderPos(this.zoom);
    this.$zoomSlider.val(this.zoomSliderPos);

    this.options.onZoomChange(newZoom);
  }

  fixZoom(zoom) {
    return this.zoomer.fixZoom(zoom);
  }

  isZoomable() {
    return this.zoomer.isZoomable();
  }

  get rotatedOffset() {
    return {
      x: this.offset.x +
          (this.rotation === 90 ? this.image.height * this.zoom : 0) +
          (this.rotation === 180 ? this.image.width * this.zoom : 0),
      y: this.offset.y +
          (this.rotation === 180 ? this.image.height * this.zoom : 0) +
          (this.rotation === 270 ? this.image.width * this.zoom : 0),
    };
  }

  renderImage() {
    const transformation = `
      translate(${this.rotatedOffset.x}px, ${this.rotatedOffset.y}px)
      scale(${this.zoom})
      rotate(${this.rotation}deg)`;

    this.$image.css({
      transform: transformation,
      webkitTransform: transformation,
    });
    if (this.options.imageBackground) {
      this.$bg.css({
        transform: transformation,
        webkitTransform: transformation,
      });
    }
  }

  set rotation(newRotation) {
    this._rotation = newRotation;

    if (this.imageLoaded) {
      // Change in image size may lead to change in zoom range
      this.setupZoomer();
    }
  }

  get rotation() {
    return this._rotation;
  }

  rotateCW() {
    if (this.shouldRejectImage({
      imageWidth: this.image.height,
      imageHeight: this.image.width,
      previewSize: this.previewSize,
      maxZoom: this.options.maxZoom,
      exportZoom: this.options.exportZoom,
      smallImage: this.options.smallImage,
    })) {
      this.rotation = (this.rotation + 180) % 360;
    }
    else {
      this.rotation = (this.rotation + 90) % 360;
    }
  }

  rotateCCW() {
    if (this.shouldRejectImage({
      imageWidth: this.image.height,
      imageHeight: this.image.width,
      previewSize: this.previewSize,
      maxZoom: this.options.maxZoom,
      exportZoom: this.options.exportZoom,
      smallImage: this.options.smallImage,
    })) {
      this.rotation = (this.rotation + 180) % 360;
    }
    else {
      this.rotation = (this.rotation + 270) % 360;
    }
  }

  shouldRejectImage({ imageWidth, imageHeight, previewSize, maxZoom, exportZoom, smallImage }) {
    if (smallImage !== 'reject') { return false; }

    return imageWidth * maxZoom < previewSize.width * exportZoom ||
           imageHeight * maxZoom < previewSize.height * exportZoom;
  }

  getCroppedImageData(exportOptions) {
    if (!this.image.src) { return; }

    const exportDefaults = {
      type: 'image/png',
      quality: 0.75,
      originalSize: false,
      fillBg: '#fff',
    };
    exportOptions = $.extend({}, exportDefaults, exportOptions);

    const exportZoom = exportOptions.originalSize ? 1 / this.zoom : this.options.exportZoom;

    const zoomedSize = {
      width: this.zoom * exportZoom * this.image.width,
      height: this.zoom * exportZoom * this.image.height,
    };

    const canvas = $('<canvas />')
      .attr({
        width: this.previewSize.width * exportZoom,
        height: this.previewSize.height * exportZoom,
      })
      .get(0);
    const canvasContext = canvas.getContext('2d');

    if (exportOptions.type === 'image/jpeg') {
      canvasContext.fillStyle = exportOptions.fillBg;
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);
    }

    canvasContext.translate(
      this.rotatedOffset.x * exportZoom,
      this.rotatedOffset.y * exportZoom);
    canvasContext.rotate(this.rotation * Math.PI / 180);
    canvasContext.drawImage(this.image,
      0, 0,
      zoomedSize.width,
      zoomedSize.height);

    return canvas.toDataURL(exportOptions.type, exportOptions.quality);
  }

  get imageState() {
    return {
      src: this.image.src,
      offset: this.offset,
      zoom: this.zoom,
    };
  }

  get imageSrc() {
    return this.image.src;
  }

  set imageSrc(imageSrc) {
    this.loadImage(imageSrc);
  }

  get offset() {
    return this._offset;
  }

  get zoom() {
    return this._zoom;
  }

  get imageWidth() {
    return this.rotation % 180 === 0 ? this.image.width : this.image.height;
  }

  get imageHeight() {
    return this.rotation % 180 === 0 ? this.image.height : this.image.width;
  }

  get imageSize() {
    return {
      width: this.imageWidth,
      height: this.imageHeight,
    };
  }

  get initialZoom() {
    return this.options.initialZoom;
  }

  set initialZoom(initialZoomOption) {
    this.options.initialZoom = initialZoomOption;
    if (initialZoomOption === 'min') {
      this._initialZoom = 0; // Will be fixed when image loads
    }
    else if (initialZoomOption === 'image') {
      this._initialZoom = 1;
    }
    else {
      this._initialZoom = 0;
    }
  }

  get exportZoom() {
    return this.options.exportZoom;
  }

  set exportZoom(exportZoom) {
    this.options.exportZoom = exportZoom;
    this.setupZoomer();
  }

  get minZoom() {
    return this.options.minZoom;
  }

  set minZoom(minZoom) {
    this.options.minZoom = minZoom;
    this.setupZoomer();
  }

  get maxZoom() {
    return this.options.maxZoom;
  }

  set maxZoom(maxZoom) {
    this.options.maxZoom = maxZoom;
    this.setupZoomer();
  }

  get previewSize() {
    return this._previewSize;
  }

  set previewSize(size) {
    if (!size || size.width <= 0 || size.height <= 0) { return; }

    this._previewSize = {
      width: size.width,
      height: size.height,
    };
    this.$preview
      .innerWidth(this.previewSize.width)
      .innerHeight(this.previewSize.height);

    if (this.imageLoaded) {
      this.setupZoomer();
    }
  }

  disable() {
    this.unbindListeners();
    this.disableZoomSlider();
    this.$el.addClass(CLASS_NAMES.DISABLED);
  }

  reenable() {
    this.bindListeners();
    this.enableZoomSlider();
    this.$el.removeClass(CLASS_NAMES.DISABLED);
  }

  $(selector) {
    if (!this.$el) { return null; }
    return this.$el.find(selector);
  }
}

export default Cropit;