highmark-cli 0.0.138 → 0.0.140

package/src/view/div/overlay.js

@@ -0,0 +1,547 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { window } from "easy";
+import { keyCodes } from "necessary";
+
+import Div from "../div";
+import Element from "../element";
+import touchMixins from "../../mixins/touch";
+import fullScreenMixins from "../../mixins/fullsrean";
+
+import { isFullScreen } from "../../utilities/fullScreen";
+import { elementsFromDOMElements } from "../../utilities/element";
+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,
+        ESCAPE_KEY_CODE,
+        BACKSPACE_KEY_CODE,
+        ARROW_UP_KEY_CODE,
+        ARROW_DOWN_KEY_CODE,
+        ARROW_LEFT_KEY_CODE,
+        ARROW_RIGHT_KEY_CODE } = keyCodes;
+
+class OverlayDiv extends Element {
+  fullScreenChangeCustomHandler = (event, element) => {
+    controller.closeMenu();
+
+    this.updateZoom();
+  }
+
+  doubleTapCustomHandler = (event, element, top, left) => {
+    const fullScreen = isFullScreen();
+
+    if (fullScreen) {
+      controller.exitFullScreen();
+
+      return;
+    }
+
+    this.restoreNativeGestures();
+
+    controller.checkRestoreNativeGesturesCheckbox();
+  }
+
+  pinchStartCustomHandler = (event, element) => {
+    const zoom = getZoom(),
+          startZoom = zoom; ///
+
+    this.setStartZoom(startZoom);
+  }
+
+  pinchMoveCustomHandler = (event, element, ratio) => {
+    const startZoom = this.getStartZoom(),
+          zoom = startZoom * Math.sqrt(ratio);
+
+    setZoom(zoom);
+
+    this.updateZoom();
+  }
+
+  swipeRightCustomHandler = (event, element) => {
+    this.showLeftDiv();
+  }
+
+  swipeLeftCustomHandler = (event, element) => {
+    this.showRightDiv();
+  }
+
+  swipeDownCustomHandler = (event, element, top, left, speed) => {
+    const direction = DOWN_DIRECTION;
+
+    this.startScrolling(speed, direction);
+  }
+
+  swipeUpCustomHandler = (event, element, top, left, speed) => {
+    const direction = UP_DIRECTION;
+
+    this.startScrolling(speed, direction);
+  }
+
+  dragStartCustomHandler = (event, element, top, left) => {
+    const scrollTop = this.getScrollTop(),
+          startScrollTop = scrollTop; ///
+
+    this.setStartScrollTop(startScrollTop);
+  }
+
+  dragDownCustomHandler = (event, element, top, left) => {
+    const startScrollTop = this.getStartScrollTop();
+
+    if (startScrollTop === null) {
+      return;
+    }
+
+    const scrollTop = startScrollTop - top;
+
+    this.setScrollTop(scrollTop);
+  }
+
+  dragUpCustomHandler = (event, element, top, left) => {
+    const startScrollTop = this.getStartScrollTop();
+
+    if (startScrollTop === null) {
+      return;
+    }
+
+    const scrollTop = startScrollTop - top;
+
+    this.setScrollTop(scrollTop);
+  }
+
+  tapCustomHandler = (event, element, top, left) => {
+    const fullScreen = isFullScreen();
+
+    if (!fullScreen) {
+      const height = this.getHeight(),
+            bottom = height - top;
+
+      if (bottom < OPEN_MENU_TAP_AREA_HEIGHT) {
+        controller.openMenu();
+
+        return;
+      }
+    }
+
+    this.suppressNativeGestures();
+
+    controller.uncheckRestoreNativeGesturesCheckbox();
+  }
+
+  keyDownHandler = (event, element) => {
+    const { keyCode } = event;
+
+    switch (keyCode) {
+      case ENTER_KEY_CODE:
+      case ARROW_RIGHT_KEY_CODE: {
+        this.showRightDiv();
+
+        break;
+      }
+
+      case BACKSPACE_KEY_CODE:
+      case ARROW_LEFT_KEY_CODE: {
+        this.showLeftDiv();
+
+        break;
+      }
+
+      case ESCAPE_KEY_CODE: {
+        ///
+
+        break;
+      }
+
+      case ARROW_UP_KEY_CODE: {
+        this.showFirstDiv();
+
+        break;
+      }
+
+      case ARROW_DOWN_KEY_CODE: {
+        this.showLastDiv();
+
+        break;
+      }
+    }
+  }
+
+  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;
+
+    this.setScrollTop(scrollTop);
+  }
+
+  stopScrolling() {
+    let interval = this.getInterval();
+
+    if (interval !== null) {
+      clearInterval(interval);
+
+      interval = null;
+
+      this.setInterval(interval);
+    }
+  }
+
+  startScrolling(speed, direction) {
+    let scrollTop = this.getScrollTop();
+
+    scrollTop += speed * SCROLL_DELAY;
+
+    this.setScrollTop(scrollTop);
+
+    let interval = this.getInterval();
+
+    if (interval !== null) {
+      clearInterval(interval);
+    }
+
+    interval = setInterval(() => {
+      speed = speed - direction * DECELERATION;
+
+      if ((speed * direction) < 0) {
+        clearInterval(interval);
+
+        interval = null;
+
+        this.setInterval(interval);
+      }
+
+      let scrollTop = this.getScrollTop();
+
+      scrollTop += speed * SCROLL_DELAY;
+
+      this.setScrollTop(scrollTop);
+    }, SCROLL_DELAY);
+
+    this.setInterval(interval);
+  }
+
+  invertColours() {
+    const coloursInverted = true;
+
+    setColoursInverted(coloursInverted);
+
+    this.updateColours();
+  }
+
+  revertColours() {
+    const coloursInverted = false;
+
+    setColoursInverted(coloursInverted);
+
+    this.updateColours();
+  }
+
+  enterFullScreen() {
+    this.requestFullScreen();
+  }
+
+  restoreNativeGestures() {
+    this.addClass("native-gestures");
+
+    this.disableCustomGestures();
+  }
+
+  suppressNativeGestures() {
+    this.removeClass("native-gestures");
+
+    this.enableCustomGestures();
+  }
+
+  showRightDiv() {
+    const displayedDiv = this.findDisplayedDiv(),
+          divs = this.getDivs(),
+          divsLength = divs.length,
+          index = divs.indexOf(displayedDiv),
+          nextIndex = index + 1,
+          previousIndex = index;  ///
+
+    if (nextIndex === divsLength) {
+      return;
+    }
+
+    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(),
+          divs = this.getDivs(),
+          index = divs.indexOf(displayedDiv),
+          nextIndex = index - 1,
+          previousIndex = index;  ///
+
+    if (nextIndex === -1) {
+      return;
+    }
+
+    this.showNextDiv(nextIndex, previousIndex);
+  }
+
+  showLastDiv() {
+    const displayedDiv = this.findDisplayedDiv(),
+          divs = this.getDivs(),
+          index = divs.indexOf(displayedDiv),
+          divsLength = divs.length,
+          nextIndex = divsLength - 1,
+          previousIndex = (index === -1) ?
+                            nextIndex : ///
+                              index;  ///
+
+    this.showNextDiv(nextIndex, previousIndex);
+  }
+
+  showNextDiv(nextIndex, previousIndex) {
+    const divs = this.getDivs(),
+          nextDiv = divs[nextIndex],
+          previousDiv = divs[previousIndex],
+          backgroundColour = nextDiv.getBackgroundColour();
+
+    let zoom;
+
+    zoom = 1;
+
+    previousDiv.zoom(zoom);
+
+    zoom = getZoom();
+
+    nextDiv.zoom(zoom);
+
+    previousDiv.hide();
+
+    this.setBackgroundColour(backgroundColour);
+
+    this.stopScrolling();
+
+    this.scrollToTop();
+
+    nextDiv.show();
+  }
+
+  setBackgroundColour(backgroundColour) {
+    const backgroundColor = backgroundColour, ///
+          css = {
+            backgroundColor
+          };
+
+    this.css(css);
+  }
+
+  findDisplayedDiv() {
+    const divs = this.getDivs(),
+          displayedDiv = divs.find((div) => {
+            const displayed = div.isDisplayed();
+
+            if (displayed) {
+              return true;
+            }
+          });
+
+    return displayedDiv;
+  }
+
+  getDivs() {
+    const childElements = this.getChildElements(),
+          divs = childElements; ///
+
+    return divs;
+  }
+
+  getInterval() {
+    const { interval } = this.getState();
+
+    return interval;
+  }
+
+  setInterval(interval) {
+    this.updateState({
+      interval
+    });
+  }
+
+  getStartZoom() {
+    const { startZoom } = this.getState();
+
+    return startZoom;
+  }
+
+  setStartZoom(startZoom) {
+    this.updateState({
+      startZoom
+    });
+  }
+
+  getStartScrollTop() {
+    const { startScrollTop } = this.getState();
+
+    return startScrollTop;
+  }
+
+  setStartScrollTop(startScrollTop) {
+    this.updateState({
+      startScrollTop
+    });
+  }
+
+  setInitialState() {
+    const interval = null,
+          startZoom = null,
+          startScrollTop = null;
+
+    this.setState({
+      interval,
+      startZoom,
+      startScrollTop
+    });
+  }
+
+  didMount() {
+    window.onKeyDown(this.keyDownHandler);
+
+    this.onCustomTap(this.tapCustomHandler);
+    this.onCustomDragUp(this.dragUpCustomHandler);
+    this.onCustomDragDown(this.dragDownCustomHandler);
+    this.onCustomDragStart(this.dragStartCustomHandler);
+    this.onCustomSwipeUp(this.swipeUpCustomHandler);
+    this.onCustomSwipeDown(this.swipeDownCustomHandler);
+    this.onCustomSwipeLeft(this.swipeLeftCustomHandler);
+    this.onCustomSwipeRight(this.swipeRightCustomHandler);
+    this.onCustomPinchMove(this.pinchMoveCustomHandler);
+    this.onCustomPinchStart(this.pinchStartCustomHandler);
+    this.onCustomDoubleTap(this.doubleTapCustomHandler);
+
+    this.onCustomFullScreenChange(this.fullScreenChangeCustomHandler);
+
+    this.enableFullScreen();
+
+    this.enableTouch();
+
+    this.updateZoom();
+
+    this.updateColours();
+  }
+
+  willUnmount() {
+    this.disableTouch();
+
+    this.disableFullScreen();
+
+    this.offCustomTap(this.tapCustomHandler);
+    this.offCustomDragUp(this.dragUpCustomHandler);
+    this.offCustomDragDown(this.dragDownCustomHandler);
+    this.offCustomDragStart(this.dragStartCustomHandler);
+    this.offCustomSwipeUp(this.swipeUpCustomHandler);
+    this.offCustomSwipeDown(this.swipeDownCustomHandler);
+    this.offCustomSwipeLeft(this.swipeLeftCustomHandler);
+    this.offCustomSwipeRight(this.swipeRightCustomHandler);
+    this.offCustomPinchMove(this.pinchMoveCustomHandler);
+    this.offCustomPinchStart(this.pinchStartCustomHandler);
+    this.offCustomDoubleTap(this.doubleTapCustomHandler);
+
+    this.offCustomFullScreenChange(this.fullScreenChangeCustomHandler);
+
+    window.offKeyDown(this.keyDownHandler);
+  }
+
+  childElements() {
+    const { divDOMElements } = this.properties,
+          divs = elementsFromDOMElements(divDOMElements, Div),
+          childElements = [
+            ...divs
+          ];
+
+    return childElements;
+  }
+
+  parentContext() {
+    const invertColours = this.invertColours.bind(this),
+          revertColours = this.revertColours.bind(this),
+          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);
+
+    return ({
+      invertColours,
+      revertColours,
+      exitFullScreen,
+      enterFullScreen,
+      updateOverlayDivZoom,
+      restoreNativeGestures,
+      suppressNativeGestures
+    });
+  }
+
+  initialise() {
+    this.assignContext();
+
+    this.setInitialState();
+
+    this.showFirstDiv();
+  }
+
+  static tagName = "div";
+
+  static ignoredProperties = [
+    "divDOMElements"
+  ];
+
+  static defaultProperties = {
+    className: "overlay"
+  };
+}
+
+Object.assign(OverlayDiv.prototype, touchMixins);
+Object.assign(OverlayDiv.prototype, fullScreenMixins);
+
+export default withStyle(OverlayDiv)`
+  
+  width: 100%;
+  height: 100%;
+
+  overflow: hidden;
+  touch-action: none;
+    
+  .native-gestures {
+    overflow: scroll;
+    touch-action: auto;
+  }
+  
+  .inverted-colours {
+    filter: invert(1);
+  }
+    
+`;

package/src/view/div/preloader.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Element } from "easy";
+
+class PreloaderDiv extends Element {
+  childElements() {
+    return "PRELOAD";
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "preloader"
+  };
+}
+
+export default withStyle(PreloaderDiv)`
+
+  height: 0;
+  overflow: hidden;
+  background-image: url("checkmark.svg");
+    
+`;

package/src/view/{div/leaf.js → div.js}

@@ -1,47 +1,39 @@
 "use strict";
 
+import withStyle from "easy-with-style";  ///
+
 import { Element } from "easy";
 
-import withStyle from "easy-with-style";  ///
+import { BACKGROUND_COLOUR } from "../constants";
+
+class Div extends Element {
+  getBackgroundColour() {
+    const backgroundColour = this.css(BACKGROUND_COLOUR) || null;
+
+    return backgroundColour;
+  }
 
-class LeafDiv extends Element {
   zoom(zoom) {
     const width = `${100/zoom}%`,
-          minHeight = `${100/zoom}%`,
           transform = `scale(${zoom})`;
 
     const css = {
       width,
-      minHeight,
       transform
     };
 
     this.css(css);
   }
 
-  setInitialState() {
-    const zoom = 1;
-
-    this.setState({
-      zoom
-    });
-  }
-
-  initialise() {
-    this.setInitialState();
-  }
-
   static tagName = "div";
-
-  static defaultProperties = {
-    className: "leaf"
-  };
 }
 
-export default withStyle(LeafDiv)`
+export default withStyle(Div)`
 
   width: 100%;
+  display: none;
   min-height: 100%;
+  pointer-events: none;
   transform-origin: top left;
   
 `;

package/src/view/element.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Element } from "easy";
+
+export default withStyle(class extends Element {
+  ///
+})`
+
+  border: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  
+`;

package/src/view/span.js

@@ -0,0 +1,22 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Element from "./element";
+
+import { spanColour, spanFontSize } from "../styles";
+
+class Span extends Element {
+  static tagName = "span";
+}
+
+export default withStyle(Span)`
+
+  color: ${spanColour};
+  display: inline-block;
+  font-size: ${spanFontSize};
+  line-height: 1;
+  white-space: pre;
+  font-family: serif;
+  
+`;

package/src/view/svg/closeMenu.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import SVG from "../svg";
+
+export default class CloseMenuSVG extends SVG {
+  childElements() {
+    return (
+
+      <g>
+        <path d="M 18.156886,3.3074544 12.500012,8.9643288 6.8431375,3.3074544 3.307454,6.8431379 8.9643284,12.500012 3.3074544,18.156886 6.8431379,21.69257 12.500012,16.035696 18.156886,21.69257 21.69257,18.156886 16.035695,12.500012 21.69257,6.8431379 Z" />
+      </g>
+
+    );
+  }
+
+  static defaultProperties = {
+    className: "close-menu"
+  };
+}

package/src/view/svg/fullScreen.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import SVG from "../svg";
+
+export default class FullScreenSVG extends SVG {
+  childElements() {
+    return (
+
+      <g>
+        <path d="M 2.9998169 2.9998169 L 2.9998169 6.0001506 L 2.9998169 18.999874 L 2.9998169 22.000208 L 6.0001506 22.000208 L 18.999874 22.000208 L 22.000208 22.000208 L 22.000208 18.999874 L 22.000208 2.9998169 L 2.9998169 2.9998169 z M 6.0001506 6.0001506 L 18.999874 6.0001506 L 18.999874 18.999874 L 6.0001506 18.999874 L 6.0001506 6.0001506 z " />
+      </g>
+
+    );
+  }
+
+  static defaultProperties = {
+    className: "full-screen"
+  };
+}