highmark-cli 0.0.140 → 0.0.142

package/src/view/div/overlay.js

@@ -3,7 +3,7 @@
 import withStyle from "easy-with-style";  ///
 
 import { window } from "easy";
-import { keyCodes } from "necessary";
+import { keyCodes, arrayUtilities } from "necessary";
 
 import Div from "../div";
 import Element from "../element";
@@ -12,10 +12,11 @@ import fullScreenMixins from "../../mixins/fullsrean";
 
 import { isFullScreen } from "../../utilities/fullScreen";
 import { elementsFromDOMElements } from "../../utilities/element";
+import { getOverlayZoom as getZoom, areColoursInverted, areNativeGesturesRestored } from "../../state";
 import { SCROLL_DELAY, UP_DIRECTION, DECELERATION, DOWN_DIRECTION, OPEN_MENU_TAP_AREA_HEIGHT } from "../../constants";
-import { getViewZoom as getZoom, setViewZoom as setZoom, setColoursInverted, areColoursInverted } from "../../state";
 
-const { ENTER_KEY_CODE,
+const { first } = arrayUtilities,
+      { ENTER_KEY_CODE,
         ESCAPE_KEY_CODE,
         BACKSPACE_KEY_CODE,
         ARROW_UP_KEY_CODE,
@@ -27,21 +28,15 @@ class OverlayDiv extends Element {
   fullScreenChangeCustomHandler = (event, element) => {
     controller.closeMenu();
 
-    this.updateZoom();
+    this.updateOverlayZoom();
   }
 
   doubleTapCustomHandler = (event, element, top, left) => {
     const fullScreen = isFullScreen();
 
-    if (fullScreen) {
-      controller.exitFullScreen();
-
-      return;
-    }
-
-    this.restoreNativeGestures();
-
-    controller.checkRestoreNativeGesturesCheckbox();
+    fullScreen ?
+      controller.exitFullScreen() :
+        controller.enterFullScreen();
   }
 
   pinchStartCustomHandler = (event, element) => {
@@ -53,11 +48,9 @@ class OverlayDiv extends Element {
 
   pinchMoveCustomHandler = (event, element, ratio) => {
     const startZoom = this.getStartZoom(),
-          zoom = startZoom * Math.sqrt(ratio);
-
-    setZoom(zoom);
+          overlayZoom = startZoom * Math.sqrt(ratio);  ///
 
-    this.updateZoom();
+    controller.zoomOverlay(overlayZoom);
   }
 
   swipeRightCustomHandler = (event, element) => {
@@ -112,22 +105,20 @@ class OverlayDiv extends Element {
   }
 
   tapCustomHandler = (event, element, top, left) => {
-    const fullScreen = isFullScreen();
-
-    if (!fullScreen) {
-      const height = this.getHeight(),
-            bottom = height - top;
+    const height = this.getHeight(),
+          bottom = height - top;
 
-      if (bottom < OPEN_MENU_TAP_AREA_HEIGHT) {
-        controller.openMenu();
+    if (bottom < OPEN_MENU_TAP_AREA_HEIGHT) {
+      controller.openMenu();
 
-        return;
-      }
+      return;
     }
 
-    this.suppressNativeGestures();
+    const nativeGesturesRestored = areNativeGesturesRestored();
 
-    controller.uncheckRestoreNativeGesturesCheckbox();
+    nativeGesturesRestored ?
+      controller.suppressNativeGestures() :
+        controller.restoreNativeGestures();
   }
 
   keyDownHandler = (event, element) => {
@@ -149,7 +140,7 @@ class OverlayDiv extends Element {
       }
 
       case ESCAPE_KEY_CODE: {
-        ///
+        controller.exitFullScreen();
 
         break;
       }
@@ -168,23 +159,6 @@ class OverlayDiv extends Element {
     }
   }
 
-  updateColours() {
-    const coloursInverted = areColoursInverted();
-
-    coloursInverted ?
-      this.addClass("inverted-colours") :
-        this.removeClass("inverted-colours");
-
-    this.updateZoom();
-  }
-
-  updateZoom() {
-    const zoom = getZoom(),
-          displayedDiv = this.findDisplayedDiv();
-
-    displayedDiv.zoom(zoom);
-  }
-
   scrollToTop() {
     const scrollTop = 0;
 
@@ -237,43 +211,50 @@ class OverlayDiv extends Element {
     this.setInterval(interval);
   }
 
-  invertColours() {
-    const coloursInverted = true;
+  enterFullScreen(callback) {
+    this.requestFullScreen(callback);
+  }
 
-    setColoursInverted(coloursInverted);
+  updateOverlayZoom() {
+    const div = this.findDiv(),
+          zoom = getZoom();
 
-    this.updateColours();
+    div.zoom(zoom);
   }
 
-  revertColours() {
-    const coloursInverted = false;
-
-    setColoursInverted(coloursInverted);
+  updateOverlayColours() {
+    const coloursInverted = areColoursInverted();
 
-    this.updateColours();
-  }
+    coloursInverted ?
+      this.addClass("inverted-colours") :
+        this.removeClass("inverted-colours");
 
-  enterFullScreen() {
-    this.requestFullScreen();
+    this.updateOverlayZoom();
   }
 
-  restoreNativeGestures() {
-    this.addClass("native-gestures");
-
-    this.disableCustomGestures();
+  updateNativeGestures() {
+    // const nativeGesturesRestored = areNativeGesturesRestored();
+    //
+    // nativeGesturesRestored ?
+    //   this.addClass("native-gestures") :
+    //     this.removeClass("native-gestures");
+    //
+    // nativeGesturesRestored ?
+    //   this.disableCustomGestures() :
+    //     this.enableCustomGestures();
   }
 
-  suppressNativeGestures() {
-    this.removeClass("native-gestures");
+  areNativeGesturesRestored() {
+    const nativeGesturesRestored = this.hasClass("native-gestures");
 
-    this.enableCustomGestures();
+    return nativeGesturesRestored;
   }
 
   showRightDiv() {
-    const displayedDiv = this.findDisplayedDiv(),
+    const div = this.findDiv(),
           divs = this.getDivs(),
           divsLength = divs.length,
-          index = divs.indexOf(displayedDiv),
+          index = divs.indexOf(div),
           nextIndex = index + 1,
           previousIndex = index;  ///
 
@@ -284,22 +265,10 @@ class OverlayDiv extends Element {
     this.showNextDiv(nextIndex, previousIndex);
   }
 
-  showFirstDiv() {
-    const displayedDiv = this.findDisplayedDiv(),
-          divs = this.getDivs(),
-          index = divs.indexOf(displayedDiv),
-          nextIndex = 0,
-          previousIndex = (index === -1) ?
-                            nextIndex : ///
-                              index;  ///
-
-    this.showNextDiv(nextIndex, previousIndex);
-  }
-
   showLeftDiv() {
-    const displayedDiv = this.findDisplayedDiv(),
+    const div = this.findDiv(),
           divs = this.getDivs(),
-          index = divs.indexOf(displayedDiv),
+          index = divs.indexOf(div),
           nextIndex = index - 1,
           previousIndex = index;  ///
 
@@ -311,9 +280,9 @@ class OverlayDiv extends Element {
   }
 
   showLastDiv() {
-    const displayedDiv = this.findDisplayedDiv(),
+    const div = this.findDiv(),
           divs = this.getDivs(),
-          index = divs.indexOf(displayedDiv),
+          index = divs.indexOf(div),
           divsLength = divs.length,
           nextIndex = divsLength - 1,
           previousIndex = (index === -1) ?
@@ -324,30 +293,42 @@ class OverlayDiv extends Element {
   }
 
   showNextDiv(nextIndex, previousIndex) {
-    const divs = this.getDivs(),
+    const zoom = getZoom(),
+          divs = this.getDivs(),
           nextDiv = divs[nextIndex],
-          previousDiv = divs[previousIndex],
-          backgroundColour = nextDiv.getBackgroundColour();
+          previousDiv = divs[previousIndex];
 
-    let zoom;
+    this.stopScrolling();
 
-    zoom = 1;
+    this.scrollToTop();
 
-    previousDiv.zoom(zoom);
+    this.remove(previousDiv);
 
-    zoom = getZoom();
+    this.add(nextDiv);
 
     nextDiv.zoom(zoom);
 
-    previousDiv.hide();
+    setTimeout(() => {
+      const backgroundColour = nextDiv.getBackgroundColour();
 
-    this.setBackgroundColour(backgroundColour);
+      this.setBackgroundColour(backgroundColour);
+    }, 0);
+  }
 
-    this.stopScrolling();
+  showFirstDiv() {
+    const zoom = getZoom(),
+          divs = this.getDivs(),
+          firstDiv = first(divs);
 
-    this.scrollToTop();
+    this.add(firstDiv);
+
+    firstDiv.zoom(zoom);
+
+    setTimeout(() => {
+      const backgroundColour = firstDiv.getBackgroundColour();
 
-    nextDiv.show();
+      this.setBackgroundColour(backgroundColour);
+    }, 0);
   }
 
   setBackgroundColour(backgroundColour) {
@@ -359,26 +340,31 @@ class OverlayDiv extends Element {
     this.css(css);
   }
 
-  findDisplayedDiv() {
+  findDiv() {
     const divs = this.getDivs(),
-          displayedDiv = divs.find((div) => {
-            const displayed = div.isDisplayed();
+          div = divs.find((div) => {
+            const added = div.isAdded();
 
-            if (displayed) {
+            if (added) {
               return true;
             }
           });
 
-    return displayedDiv;
+    return div;
   }
 
   getDivs() {
-    const childElements = this.getChildElements(),
-          divs = childElements; ///
+    const { divs } = this.getState();
 
     return divs;
   }
 
+  setDivs(divs) {
+    this.updateState({
+      divs
+    });
+  }
+
   getInterval() {
     const { interval } = this.getState();
 
@@ -416,11 +402,13 @@ class OverlayDiv extends Element {
   }
 
   setInitialState() {
-    const interval = null,
+    const divs = this.createDivs(),
+          interval = null,
           startZoom = null,
           startScrollTop = null;
 
     this.setState({
+      divs,
       interval,
       startZoom,
       startScrollTop
@@ -447,10 +435,6 @@ class OverlayDiv extends Element {
     this.enableFullScreen();
 
     this.enableTouch();
-
-    this.updateZoom();
-
-    this.updateColours();
   }
 
   willUnmount() {
@@ -475,33 +459,26 @@ class OverlayDiv extends Element {
     window.offKeyDown(this.keyDownHandler);
   }
 
-  childElements() {
+  createDivs() {
     const { divDOMElements } = this.properties,
-          divs = elementsFromDOMElements(divDOMElements, Div),
-          childElements = [
-            ...divs
-          ];
+          divs = elementsFromDOMElements(divDOMElements, Div);
 
-    return childElements;
+    return divs;
   }
 
   parentContext() {
-    const invertColours = this.invertColours.bind(this),
-          revertColours = this.revertColours.bind(this),
-          exitFullScreen = this.exitFullScreen.bind(this),
+    const exitFullScreen = this.exitFullScreen.bind(this),
           enterFullScreen = this.enterFullScreen.bind(this),
-          updateOverlayDivZoom = this.updateZoom.bind(this),  ///
-          restoreNativeGestures = this.restoreNativeGestures.bind(this),
-          suppressNativeGestures = this.suppressNativeGestures.bind(this);
+          updateOverlayZoom = this.updateOverlayZoom.bind(this),
+          updateOverlayColours = this.updateOverlayColours.bind(this),
+          updateNativeGestures = this.updateNativeGestures.bind(this);
 
     return ({
-      invertColours,
-      revertColours,
       exitFullScreen,
       enterFullScreen,
-      updateOverlayDivZoom,
-      restoreNativeGestures,
-      suppressNativeGestures
+      updateOverlayZoom,
+      updateOverlayColours,
+      updateNativeGestures
     });
   }
 

package/src/view/div.js

@@ -13,12 +13,23 @@ class Div extends Element {
     return backgroundColour;
   }
 
+  isAdded() {
+    const domElement = this.getDOMElement(),
+          { parentNode } = domElement,
+          added = (parentNode !== null);
+
+    return added;
+  }
+
   zoom(zoom) {
-    const width = `${100/zoom}%`,
+    const zoomRatio = 100 / zoom,
+          width = `${zoomRatio}%`,
+          minHeight = `${zoomRatio}%`,
           transform = `scale(${zoom})`;
 
     const css = {
       width,
+      minHeight,
       transform
     };
 
@@ -31,9 +42,6 @@ class Div extends Element {
 export default withStyle(Div)`
 
   width: 100%;
-  display: none;
-  min-height: 100%;
-  pointer-events: none;
   transform-origin: top left;
   
 `;

package/src/view.js

@@ -9,8 +9,22 @@ import PreloaderDiv from "./view/div/preloader";
 
 class View extends Element {
   updateZoom() {
-    this.updateMenuDivZoom();
-    this.updateOverlayDivZoom();
+    this.updateMenuZoom();
+    this.updateOverlayZoom();
+  }
+
+  didMount() {
+    this.updateMenuZoom();
+    this.updateOverlayZoom();
+    this.updateOverlayColours();
+    this.updateNativeGestures();
+    this.updateFullScreenCheckboxDiv();
+    this.updateInvertColoursCheckboxDiv();
+    this.updateNativeGesturesCheckboxDiv();
+  }
+
+  willUnmount() {
+    ///
   }
 
   childElements() {

package/lib/view/button/fullScreen.js

@@ -1,121 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return FullScreenButton;
-    }
-});
-var _button = /*#__PURE__*/ _interop_require_default(require("../button"));
-var _fullScreen = /*#__PURE__*/ _interop_require_default(require("../svg/fullScreen"));
-function _assert_this_initialized(self) {
-    if (self === void 0) {
-        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self;
-}
-function _class_call_check(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-        throw new TypeError("Cannot call a class as a function");
-    }
-}
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _get_prototype_of(o) {
-    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
-        return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _get_prototype_of(o);
-}
-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
-        }
-    });
-    if (superClass) _set_prototype_of(subClass, superClass);
-}
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _possible_constructor_return(self, call) {
-    if (call && (_type_of(call) === "object" || typeof call === "function")) {
-        return call;
-    }
-    return _assert_this_initialized(self);
-}
-function _set_prototype_of(o, p) {
-    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
-        o.__proto__ = p;
-        return o;
-    };
-    return _set_prototype_of(o, p);
-}
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-function _is_native_reflect_construct() {
-    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 _create_super(Derived) {
-    var hasNativeReflectConstruct = _is_native_reflect_construct();
-    return function _createSuperInternal() {
-        var Super = _get_prototype_of(Derived), result;
-        if (hasNativeReflectConstruct) {
-            var NewTarget = _get_prototype_of(this).constructor;
-            result = Reflect.construct(Super, arguments, NewTarget);
-        } else {
-            result = Super.apply(this, arguments);
-        }
-        return _possible_constructor_return(this, result);
-    };
-}
-var FullScreenButton = /*#__PURE__*/ function(Button) {
-    _inherits(FullScreenButton, Button);
-    var _super = _create_super(FullScreenButton);
-    function FullScreenButton() {
-        _class_call_check(this, FullScreenButton);
-        var _this;
-        _this = _super.apply(this, arguments);
-        _define_property(_assert_this_initialized(_this), "clickHandler", function(event, element) {
-            controller.enterFullScreen();
-        });
-        return _this;
-    }
-    return FullScreenButton;
-}(_button.default);
-_define_property(FullScreenButton, "SVG", _fullScreen.default);
-_define_property(FullScreenButton, "defaultProperties", {
-    className: "full-screen"
-});
-
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy92aWV3L2J1dHRvbi9mdWxsU2NyZWVuLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5pbXBvcnQgQnV0dG9uIGZyb20gXCIuLi9idXR0b25cIjtcbmltcG9ydCBGdWxsU2NyZWVuU1ZHIGZyb20gXCIuLi9zdmcvZnVsbFNjcmVlblwiO1xuXG5leHBvcnQgZGVmYXVsdCBjbGFzcyBGdWxsU2NyZWVuQnV0dG9uIGV4dGVuZHMgQnV0dG9uIHtcbiAgY2xpY2tIYW5kbGVyID0gKGV2ZW50LCBlbGVtZW50KSA9PiB7XG4gICAgY29udHJvbGxlci5lbnRlckZ1bGxTY3JlZW4oKTtcbiAgfVxuXG4gIHN0YXRpYyBTVkcgPSBGdWxsU2NyZWVuU1ZHO1xuXG4gIHN0YXRpYyBkZWZhdWx0UHJvcGVydGllcyA9IHtcbiAgICBjbGFzc05hbWU6IFwiZnVsbC1zY3JlZW5cIlxuICB9O1xufVxuIl0sIm5hbWVzIjpbIkZ1bGxTY3JlZW5CdXR0b24iLCJjbGlja0hhbmRsZXIiLCJldmVudCIsImVsZW1lbnQiLCJjb250cm9sbGVyIiwiZW50ZXJGdWxsU2NyZWVuIiwiQnV0dG9uIiwiU1ZHIiwiRnVsbFNjcmVlblNWRyIsImRlZmF1bHRQcm9wZXJ0aWVzIiwiY2xhc3NOYW1lIl0sInJhbmdlTWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7IiwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7O2VBS3FCQTs7OzZEQUhGO2lFQUNPOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFWCxJQUFBLEFBQU1BLGlDQUFELEFBQUw7Y0FBTUE7K0JBQUFBO2FBQUFBO2dDQUFBQTs7O1FBQ25CQyxrREFBQUEsZ0JBQWUsU0FBQ0MsT0FBT0M7WUFDckJDLFdBQVdDLGVBQWU7UUFDNUI7OztXQUhtQkw7RUFBeUJNLGVBQU07QUFLbEQsaUJBTG1CTixrQkFLWk8sT0FBTUMsbUJBQWE7QUFFMUIsaUJBUG1CUixrQkFPWlMscUJBQW9CO0lBQ3pCQyxXQUFXO0FBQ2IifQ==