@cu-mkp/editioncrafter 1.0.2 → 1.0.4-beta.1

package/dist/es/src/component/SplitPaneView.js

@@ -1,184 +1,165 @@
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-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, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-var SplitPaneView = /*#__PURE__*/function (_Component) {
-  _inherits(SplitPaneView, _Component);
-  var _super = _createSuper(SplitPaneView);
-  function SplitPaneView(props) {
-    var _this;
-    _classCallCheck(this, SplitPaneView);
-    _this = _super.call(this);
-    // On drag, update the UI continuously
-    _this.onDrag = function (e) {
-      if (_this.dragging) {
-        var whole = window.innerWidth - 2 * _this.dividerWidth;
-        var left_viewWidth;
-        var right_viewWidth;
-        var third_viewWidth;
-        if (_this.activeDivider === 1) {
-          left_viewWidth = e.clientX - _this.dividerWidth / 2;
-          third_viewWidth = whole * _this.splitFractionRight;
-          right_viewWidth = whole - left_viewWidth - third_viewWidth;
-        } else {
-          third_viewWidth = whole - e.clientX - _this.dividerWidth / 2;
-          left_viewWidth = whole * _this.splitFraction;
-          right_viewWidth = whole - left_viewWidth - third_viewWidth;
-        }
-        // Update as long as we're within limits
-        if (left_viewWidth >= _this.leftPaneMinWidth && right_viewWidth >= _this.rightPaneMinWidth && third_viewWidth >= _this.thirdPaneMinWidth) {
-          console.log(whole, left_viewWidth, third_viewWidth);
-          _this.splitFraction = whole === 0 ? 0.0 : left_viewWidth / whole;
-          _this.splitFractionRight = whole === 0 ? 0.0 : third_viewWidth / whole;
-          _this.updateUI();
-        }
-        _this.updatePaneSize();
-      }
-    };
-    // Drag start: mark it
-    _this.onStartDrag = function (position) {
-      _this.dragging = true;
-      _this.activeDivider = position === 'first' ? 1 : 2;
-    };
-    // Drag end
-    _this.onEndDrag = function (e) {
-      _this.dragging = false;
-      _this.activeDivider = 0;
-    };
-    // On window resize
-    _this.onResize = function (e) {
-      _this.updatePaneSize();
-    };
-    _this.firstFolio = props.document.folios[0];
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+class SplitPaneView extends Component {
+  constructor(props) {
+    super()
+    this.firstFolio = props.document.folios[0]
     // Initialize the splitter
-    _this.rightPaneMinWidth = props.rightPane.props.documentView.right.transcriptionType === "glossary" ? 450 : 200;
-    _this.leftPaneMinWidth = props.leftPane.props.documentView.left.transcriptionType === "glossary" ? 450 : 200;
-    _this.thirdPaneMinWidth = props.thirdPane.props.documentView.third.transcriptionType === "glossary" ? 450 : props.thirdPane.props.documentView.third.transcriptionType === "g" ? 0 : 200;
-    _this.splitFraction = props.threePanel ? 0.49 : 0.5;
-    _this.splitFractionRight = props.threePanel ? 0.01 : 0;
-    _this.dividerWidth = 16;
-    var _whole = window.innerWidth;
-    var leftW = _whole / 3;
-    var split_left = leftW / _whole;
-    var split_right = (1 - split_left) / 2;
-    var split_third = 1 - split_left - split_right;
-    _this.state = {
+    this.rightPaneMinWidth = props.rightPane.props.documentView.right.transcriptionType === 'glossary' ? 450 : 200
+    this.leftPaneMinWidth = props.leftPane.props.documentView.left.transcriptionType === 'glossary' ? 450 : 200
+    this.thirdPaneMinWidth = props.thirdPane.props.documentView.third.transcriptionType === 'glossary' ? 450 : props.thirdPane.props.documentView.third.transcriptionType === 'g' ? 0 : 200
+    this.splitFraction = props.threePanel ? 0.49 : 0.5
+    this.splitFractionRight = props.threePanel ? 0.01 : 0
+    this.dividerWidth = 16
+    const whole = window.innerWidth
+    const leftW = whole / 3
+
+    const split_left = (leftW / whole)
+    const split_right = (1 - split_left) / 2
+    const split_third = 1 - split_left - split_right
+    this.state = {
       style: {
-        gridTemplateColumns: "".concat(_this.splitFraction, "fr ").concat(_this.dividerWidth, "px ").concat(1 - _this.splitFraction - _this.splitFractionRight, "fr ").concat(_this.dividerWidth, "px ").concat(_this.splitFractionRight, "fr")
-      }
-    };
+        gridTemplateColumns: `${this.splitFraction}fr ${this.dividerWidth}px ${1 - this.splitFraction - this.splitFractionRight}fr ${this.dividerWidth}px ${this.splitFractionRight}fr`,
+      },
+    }
 
     // event handlers
-    _this.dragging = false;
-    _this.activeDivider = 0;
-    _this.onDrag = _this.onDrag.bind(_assertThisInitialized(_this));
-    _this.onResize = _this.onResize.bind(_assertThisInitialized(_this));
-    _this.onEndDrag = _this.onEndDrag.bind(_assertThisInitialized(_this));
-    _this.updatePaneSize = _this.updatePaneSize.bind(_assertThisInitialized(_this));
-    _this.updatePaneSize = _this.updatePaneSize.bind(_assertThisInitialized(_this));
-    return _this;
+    this.dragging = false
+    this.activeDivider = 0
+    this.onDrag = this.onDrag.bind(this)
+    this.onResize = this.onResize.bind(this)
+    this.onEndDrag = this.onEndDrag.bind(this)
+    this.updatePaneSize = this.updatePaneSize.bind(this)
+    this.updatePaneSize = this.updatePaneSize.bind(this)
   }
-  _createClass(SplitPaneView, [{
-    key: "updateUI",
-    value:
-    // Update the screen with the new split info
-    function updateUI() {
-      var left = this.splitFraction;
-      var third = this.splitFractionRight;
-      var right = 1.0 - left - third;
-      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
-        style: _objectSpread(_objectSpread({}, this.state.style), {}, {
-          gridTemplateColumns: "".concat(left, "fr ").concat(this.dividerWidth, "px ").concat(right, "fr ").concat(this.dividerWidth, "px ").concat(third, "fr")
-        })
-      }));
-    }
 
-    // Update the sizes of the panes
-  }, {
-    key: "updatePaneSize",
-    value: function updatePaneSize() {
-      // Record state change
-      var left_px = Math.floor(Math.abs(window.innerWidth * this.splitFraction));
-      var third_px = Math.floor(Math.abs(window.innerWidth * this.splitFractionRight));
-      var right_px = Math.floor(window.innerWidth * (1.0 - this.splitFraction - this.splitFractionRight));
-      if (this.props.onWidth && left_px >= this.leftPaneMinWidth && right_px >= this.rightPaneMinWidth && third_px >= this.thirdPaneMinWidth) {
-        this.props.onWidth(left_px, right_px, third_px);
+  // On drag, update the UI continuously
+  onDrag = (e) => {
+    if (this.dragging) {
+      const whole = window.innerWidth - 2 * this.dividerWidth
+      let left_viewWidth
+      let right_viewWidth
+      let third_viewWidth
+      if (this.activeDivider === 1) {
+        left_viewWidth = e.clientX - this.dividerWidth / 2
+        third_viewWidth = whole * this.splitFractionRight
+        right_viewWidth = whole - left_viewWidth - third_viewWidth
       }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.updateUI();
-      window.addEventListener('pointermove', this.onDrag);
-      window.addEventListener('pointerup', this.onEndDrag);
-      window.addEventListener('resize', this.onResize);
-      console.log(this.props);
-      // Set the default width on mount
-      if (this.props.onWidth) {
-        var left_px = Math.floor(Math.abs(window.innerWidth * this.splitFraction));
-        var right_px = Math.floor(window.innerWidth * (1.0 - this.splitFraction));
-        var third_px = Math.floor(window.innerWidth * (1.0 - this.splitFraction));
-        this.props.onWidth(left_px, right_px, third_px);
+      else {
+        third_viewWidth = whole - e.clientX - this.dividerWidth / 2
+        left_viewWidth = whole * this.splitFraction
+        right_viewWidth = whole - left_viewWidth - third_viewWidth
       }
+      // Update as long as we're within limits
+      if (left_viewWidth >= this.leftPaneMinWidth
+        && right_viewWidth >= this.rightPaneMinWidth
+        && third_viewWidth >= this.thirdPaneMinWidth) {
+        this.splitFraction = (whole === 0) ? 0.0 : left_viewWidth / whole
+        this.splitFractionRight = (whole === 0) ? 0.0 : third_viewWidth / whole
+        this.updateUI()
+      }
+
+      this.updatePaneSize()
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      this.rightPaneMinWidth = this.props.rightPane.props.documentView.right.transcriptionType === "glossary" ? 450 : 200;
-      this.leftPaneMinWidth = this.props.leftPane.props.documentView.left.transcriptionType === "glossary" ? 450 : 200;
-      this.thirdPaneMinWidth = this.props.thirdPane.props.documentView.third.transcriptionType === "glossary" ? 450 : this.props.thirdPane.props.documentView.third.transcriptionType === "g" ? 0 : 200;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('pointermove', this.onDrag);
-      window.removeEventListener('pointerup', this.onEndDrag);
-      window.removeEventListener('resize', this.onResize);
-    }
-  }, {
-    key: "renderDivider",
-    value: function renderDivider(position) {
-      var _this2 = this;
-      var drawerIconClass = 'drawer-icon fas fa-caret-left fa-2x';
-      return /*#__PURE__*/React.createElement("div", {
-        className: "divider ".concat(position, "_divider"),
-        onPointerDown: function onPointerDown() {
-          return _this2.onStartDrag(position);
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "drawer-button hidden",
-        onClick: this.onDrawerButton
-      }, /*#__PURE__*/React.createElement("i", {
-        className: drawerIconClass
-      }, " ")));
+  }
+
+  // Drag start: mark it
+  onStartDrag = (position) => {
+    this.dragging = true
+    this.activeDivider = position === 'first' ? 1 : 2
+  }
+
+  // Drag end
+  onEndDrag = (e) => {
+    this.dragging = false
+    this.activeDivider = 0
+  }
+
+  // On window resize
+  onResize = (e) => {
+    this.updatePaneSize()
+  }
+
+  // Update the screen with the new split info
+  updateUI() {
+    const left = this.splitFraction
+    const third = this.splitFractionRight
+    const right = 1.0 - left - third
+    this.setState({
+      ...this.state,
+      style: {
+        ...this.state.style,
+        gridTemplateColumns: `${left}fr ${this.dividerWidth}px ${right}fr ${this.dividerWidth}px ${third}fr`,
+      },
+    })
+  }
+
+  // Update the sizes of the panes
+  updatePaneSize() {
+    // Record state change
+    const left_px = Math.floor(Math.abs(window.innerWidth * this.splitFraction))
+    const third_px = Math.floor(Math.abs(window.innerWidth * this.splitFractionRight))
+    const right_px = Math.floor(window.innerWidth * (1.0 - this.splitFraction - this.splitFractionRight))
+    if (this.props.onWidth && left_px >= this.leftPaneMinWidth && right_px >= this.rightPaneMinWidth && third_px >= this.thirdPaneMinWidth) {
+      this.props.onWidth(left_px, right_px, third_px)
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "split-pane-view three-pane",
-        style: _objectSpread({}, this.state.style)
-      }, this.props.leftPane, this.renderDivider('first'), this.props.rightPane, this.props.threePanel && this.renderDivider('second'), this.props.threePanel && this.props.thirdPane);
+  }
+
+  componentDidMount() {
+    this.updateUI()
+    window.addEventListener('pointermove', this.onDrag)
+    window.addEventListener('pointerup', this.onEndDrag)
+    window.addEventListener('resize', this.onResize)
+    // Set the default width on mount
+    if (this.props.onWidth) {
+      const left_px = Math.floor(Math.abs(window.innerWidth * this.splitFraction))
+      const right_px = Math.floor(window.innerWidth * (1.0 - this.splitFraction))
+      const third_px = Math.floor(window.innerWidth * (1.0 - this.splitFraction))
+      this.props.onWidth(left_px, right_px, third_px)
     }
-  }]);
-  return SplitPaneView;
-}(Component);
+  }
+
+  componentDidUpdate(prevProps) {
+    this.rightPaneMinWidth = this.props.rightPane.props.documentView.right.transcriptionType === 'glossary' ? 450 : 200
+    this.leftPaneMinWidth = this.props.leftPane.props.documentView.left.transcriptionType === 'glossary' ? 450 : 200
+    this.thirdPaneMinWidth = this.props.thirdPane.props.documentView.third.transcriptionType === 'glossary' ? 450 : this.props.thirdPane.props.documentView.third.transcriptionType === 'g' ? 0 : 200
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('pointermove', this.onDrag)
+    window.removeEventListener('pointerup', this.onEndDrag)
+    window.removeEventListener('resize', this.onResize)
+  }
+
+  renderDivider(position) {
+    const drawerIconClass = 'drawer-icon fas fa-caret-left fa-2x'
+
+    return (
+      <div className={`divider ${position}_divider`} onPointerDown={() => this.onStartDrag(position)}>
+        <div className="drawer-button hidden" onClick={this.onDrawerButton}>
+          <i className={drawerIconClass}> </i>
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div className="split-pane-view three-pane" style={{ ...this.state.style }}>
+        { this.props.leftPane }
+        { this.renderDivider('first') }
+        { this.props.rightPane }
+        { this.props.threePanel && this.renderDivider('second') }
+        { this.props.threePanel && this.props.thirdPane }
+      </div>
+    )
+  }
+}
+
 function mapStateToProps(state) {
   return {
-    document: state.document
-  };
+    document: state.document,
+  }
 }
-export default connect(mapStateToProps)(SplitPaneView);
+export default connect(mapStateToProps)(SplitPaneView)