react-zoom-children/lib/target.js

react-zoom-children for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _utils = require("./utils");

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var TRANSLATE_Z = 0;

var Target =
/*#__PURE__*/
function () {
  function Target(targetDom, instance) {
    _classCallCheck(this, Target);

    this.rect = targetDom.getBoundingClientRect();
    this.el = targetDom;
    this.instance = instance;
    this.translate = null;
    this.scale = null;
  }

  _createClass(Target, [{
    key: "zoomIn",
    value: function zoomIn() {
      var _this$instance$option = this.instance.options,
          zIndex = _this$instance$option.zIndex,
          transitionDuration = _this$instance$option.transitionDuration,
          transitionTimingFunction = _this$instance$option.transitionTimingFunction;
      this.translate = this.calculateTranslate();
      this.scale = this.calculateScale();
      var styleOpen = {
        position: 'relative',
        zIndex: zIndex + 1,
        cursor: _utils.cursor.zoomOut,
        transition: "transform\n        ".concat(transitionDuration, "s\n        ").concat(transitionTimingFunction),
        transform: "translate3d(".concat(this.translate.x, "px, ").concat(this.translate.y, "px, ").concat(TRANSLATE_Z, "px)\n        scale(").concat(this.scale.x, ",").concat(this.scale.y, ")"),
        height: "".concat(this.rect.height, "px"),
        width: "".concat(this.rect.width, "px")
      };

      if (this.instance.contentRef) {
        this.instance.contentRef.style.cssText = "\n        top: ".concat(this.rect.top, "px;\n        left: ").concat(this.rect.left, "px;\n        width: ").concat(this.rect.width, "px;\n        height: ").concat(this.rect.height, "px;\n        cursor: zoom-out;\n      ");
        (0, _utils.setStyle)(this.instance.contentRef, styleOpen, true);
      }
    }
  }, {
    key: "zoomOut",
    value: function zoomOut() {
      if (this.instance.contentRef) (0, _utils.setStyle)(this.instance.contentRef, {
        transform: 'none'
      });
    }
  }, {
    key: "calculateTranslate",
    value: function calculateTranslate() {
      var windowCenter = getWindowCenter();
      var targetCenter = {
        x: this.rect.left + this.rect.width / 2,
        y: this.rect.top + this.rect.height / 2
      }; // The vector to translate div to the window center

      return {
        x: windowCenter.x - targetCenter.x,
        y: windowCenter.y - targetCenter.y
      };
    }
  }, {
    key: "calculateScale",
    value: function calculateScale() {
      var _this$instance$option2 = this.instance.options,
          customSize = _this$instance$option2.customSize,
          scaleBase = _this$instance$option2.scaleBase;

      if ((0, _utils.getType)(customSize) === 'object') {
        return {
          x: customSize.width / this.rect.width,
          y: customSize.height / this.rect.height
        };
      } else {
        var targetHalfWidth = this.rect.width / 2;
        var targetHalfHeight = this.rect.height / 2;
        var windowCenter = getWindowCenter(); // The distance between target edge and window edge

        var targetEdgeToWindowEdge = {
          x: windowCenter.x - targetHalfWidth,
          y: windowCenter.y - targetHalfHeight
        };
        var scaleHorizontally = targetEdgeToWindowEdge.x / targetHalfWidth;
        var scaleVertically = targetEdgeToWindowEdge.y / targetHalfHeight; // The additional scale is based on the smaller value of
        // scaling horizontally and scaling vertically

        var scale = scaleBase + Math.min(scaleHorizontally, scaleVertically);

        if ((0, _utils.getType)(customSize) === 'string') {
          // Use zoomingWidth and zoomingHeight if available
          var _getWindowCenter = getWindowCenter(),
              windowWidth = _getWindowCenter.windowWidth,
              windowHeight = _getWindowCenter.windowHeight;

          var maxZoomingWidth = parseFloat(customSize) * windowWidth / (100 * this.rect.width);
          var maxZoomingHeight = parseFloat(customSize) * windowHeight / (100 * this.rect.height); // Only scale image up to the specified customSize percentage

          if (scale > maxZoomingWidth || scale > maxZoomingHeight) {
            return {
              x: maxZoomingWidth,
              y: maxZoomingHeight
            };
          }
        }

        return {
          x: scale,
          y: scale
        };
      }
    }
  }]);

  return Target;
}();

exports.default = Target;

function getWindowCenter() {
  var docEl = document.documentElement;
  var windowWidth = Math.min(docEl.clientWidth, window.innerWidth);
  var windowHeight = Math.min(docEl.clientHeight, window.innerHeight);
  return {
    x: windowWidth / 2,
    y: windowHeight / 2,
    windowWidth: windowWidth,
    windowHeight: windowHeight
  };
}