highmark-cli 0.0.138 → 0.0.140

package/src/utilities/orientation.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { eventTypes } from "easy";
+
+import { PORTRAIT_ORIENTATION, LANDSCAPE_ORIENTATION, ORIENTATION_PORTRAIT_QUERY } from "../constants";
+
+const { CHANGE_EVENT_TYPE } = eventTypes;
+
+var mediaQueryList = matchMedia(ORIENTATION_PORTRAIT_QUERY);
+
+export function getOrientation(callback) {
+  const orientation = orientationFromMediaQueryList(mediaQueryList);
+
+  callback(orientation);
+}
+
+export function onOrientationChange(handler) {
+  const eventType = CHANGE_EVENT_TYPE;
+
+  mediaQueryList.addEventListener(eventType, (mediaQueryList) => {
+    const orientation = orientationFromMediaQueryList(mediaQueryList);
+
+    handler(orientation);
+  });
+}
+
+function orientationFromMediaQueryList(mediaQueryList) {
+  const { matches = false } = mediaQueryList,
+        orientation = matches ?
+          PORTRAIT_ORIENTATION :
+            LANDSCAPE_ORIENTATION;
+
+  return orientation;
+}

package/src/view/button/closeMenu.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import Button from "../button";
+import CloseMenuSVG from "../svg/closeMenu";
+
+export default class CloseMenuButton extends Button {
+  clickHandler = (event, element) => {
+    controller.closeMenu();
+  }
+
+  static SVG = CloseMenuSVG;
+
+  static defaultProperties = {
+    className: "close-menu"
+  };
+}

package/src/view/button/fullScreen.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import Button from "../button";
+import FullScreenSVG from "../svg/fullScreen";
+
+export default class FullScreenButton extends Button {
+  clickHandler = (event, element) => {
+    controller.enterFullScreen();
+  }
+
+  static SVG = FullScreenSVG;
+
+  static defaultProperties = {
+    className: "full-screen"
+  };
+}

package/src/view/button/zoomMenuIn.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import Button from "../button";
+import ZoomMenuInSVG from "../svg/zoomMenuIn";
+
+export default class ZoomMenuInButton extends Button {
+  clickHandler = (event, element) => {
+    controller.zoomMenuIn();
+  }
+
+  static SVG = ZoomMenuInSVG;
+
+  static defaultProperties = {
+    className: "zoom-menu-in"
+  };
+}

package/src/view/button/zoomMenuOut.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import Button from "../button";
+import ZoomMenuOutSVG from "../svg/zoomMenuOut";
+
+export default class ZoomMenuOutButton extends Button {
+  clickHandler = (event, element) => {
+    controller.zoomMenuOut();
+  }
+
+  static SVG = ZoomMenuOutSVG;
+
+  static defaultProperties = {
+    className: "zoom-menu-out"
+  };
+}

package/src/view/button.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Button } from "easy";
+
+import { buttonSize, borderWidth, borderRadius, borderColour, buttonPadding } from "../styles";
+
+export default withStyle(class extends Button {
+  didMount() {
+    this.onClick(this.clickHandler);
+  }
+
+  willUnmount() {
+    this.offClick(this.clickHandler);
+  }
+
+  childElements() {
+    const { SVG } = this.constructor;
+
+    return (
+
+      <SVG/>
+
+    );
+  }
+})`
+
+  width: ${buttonSize};
+  height: ${buttonSize};
+  cursor: pointer;
+  border: ${borderWidth} solid ${borderColour};
+  margin: 0;
+  padding: ${buttonPadding};
+  background: transparent;
+  border-radius: ${borderRadius};   
+  
+`;

package/src/view/checkbox.js

@@ -0,0 +1,68 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Checkbox } from "easy";
+
+import { borderWidth, borderRadius, borderColour, checkboxSize, checkboxBackgroundColour } from "../styles";
+
+export default withStyle(class extends Checkbox {
+  check() {
+    const checked = true;
+
+    super.check(checked);
+  }
+
+  uncheck() {
+    const checked = false;
+
+    super.check(checked);
+  }
+
+  parentContext() {
+    const checkCheckbox = this.check.bind(this),  ///
+          uncheckCheckbox = this.uncheck.bind(this),  ///
+          isCheckboxChecked = this.isChecked.bind(this);  ///
+
+    return ({
+      checkCheckbox,
+      uncheckCheckbox,
+      isCheckboxChecked
+    });
+  }
+})`
+
+  width: ${checkboxSize};
+  height: ${checkboxSize};
+  cursor: pointer;  
+  display: block;
+  outline: none;
+  position: relative;
+  appearance: none;
+  
+  ::before {
+    width: ${checkboxSize};
+    height: ${checkboxSize};
+    border: ${borderWidth} solid ${borderColour};
+    content: " ";
+    position: absolute;
+    border-radius: ${borderRadius};
+    background-color: ${checkboxBackgroundColour};
+  }
+  
+  ::after {
+    top: 0;
+    left: 0;
+    width: ${checkboxSize};
+    height: ${checkboxSize};
+    content: " ";
+    position: absolute;
+    background-size: 0;
+    background-image: url("checkmark.svg");
+  }
+
+  :checked::after {
+    background-size: 100%;
+  }
+  
+`;

package/src/view/div/buttons.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Element from "../element";
+import CloseMenuButton from "../button/closeMenu";
+import FullScreenButton from "../button/fullScreen";
+import ZoomMenuInButton from "../button/zoomMenuIn";
+import ZoomMenuOutButton from "../button/zoomMenuOut";
+
+import { buttonsDivGap } from "../../styles";
+
+class ButtonsDiv extends Element {
+  childElements() {
+    return ([
+
+      <ZoomMenuInButton/>,
+      <CloseMenuButton/>,
+      <ZoomMenuOutButton/>,
+      <FullScreenButton/>
+
+    ]);
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "buttons"
+  };
+}
+
+export default withStyle(ButtonsDiv)`
+
+  gap: ${buttonsDivGap};
+  display: grid;
+  grid-template-rows: min-content min-content;
+  grid-template-columns: min-content min-content;
+  
+`;

package/src/view/div/checkbox/invertColours.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import CheckboxDiv from "../../div/checkbox";
+
+import { areColoursInverted } from "../../../state";
+
+export default class InvertColoursCheckboxDiv extends CheckboxDiv {
+  changeHandler = (event, element) => {
+    const checkboxChecked = this.isCheckboxChecked();
+
+    checkboxChecked ?
+      controller.invertColours() :
+        controller.revertColours();
+  }
+
+  didMount() {
+    const coloursInverted = areColoursInverted();
+
+    coloursInverted ?
+      this.checkCheckbox() :
+        this.uncheckCheckbox();
+  }
+
+  willUnmount() {
+    ///
+  }
+
+  static message = "Invert colours";
+
+  static defaultProperties = {
+    className: "invert-colours"
+  };
+}

package/src/view/div/checkbox/restoreNativeGestures.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import CheckboxDiv from "../../div/checkbox";
+
+export default class RestoreNativeGesturesCheckboxDiv extends CheckboxDiv {
+  changeHandler = (event, element) => {
+    const checkboxChecked = this.isCheckboxChecked();
+
+    checkboxChecked ?
+      controller.restoreNativeGestures() :
+        controller.suppressNativeGestures();
+  }
+
+  parentContext() {
+    const checkRestoreNativeGesturesCheckbox = this.checkCheckbox.bind(this), ///
+          uncheckRestoreNativeGesturesCheckbox = this.uncheckCheckbox.bind(this); ///
+
+    return ({
+      checkRestoreNativeGesturesCheckbox,
+      uncheckRestoreNativeGesturesCheckbox
+    });
+  }
+
+  static message = "Restore native gestures";
+
+  static defaultProperties = {
+    className: "restore-native-gestures"
+  };
+}

package/src/view/div/checkbox.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Element from "../element";
+
+import Span from "../span";
+import Checkbox from "../checkbox";
+
+import { checkboxDivGap } from "../../styles";
+
+class CheckboxDiv extends Element {
+  childElements() {
+    const { message } = this.constructor;
+
+    return ([
+
+      <Checkbox onChange={this.changeHandler} />,
+      <Span>
+        {message}
+      </Span>
+
+    ]);
+  }
+
+  initialise() {
+    this.assignContext();
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "checkbox"
+  };
+}
+
+export default withStyle(CheckboxDiv)`
+  
+  gap: ${checkboxDivGap};
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  justify-content: flex-start;  
+  
+`;

package/src/view/div/checkboxes.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Element from "../element";
+import InvertColoursCheckboxDiv from "./checkbox/invertColours";
+import RestoreNativeGesturesCheckboxDiv from "./checkbox/restoreNativeGestures";
+
+import { checkboxesDivGap } from "../../styles";
+
+class CheckboxesDiv extends Element {
+  childElements() {
+    return ([
+
+      <InvertColoursCheckboxDiv/>,
+      <RestoreNativeGesturesCheckboxDiv/>
+
+    ]);
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "checkboxes"
+  };
+}
+
+export default withStyle(CheckboxesDiv)`
+
+  gap: ${checkboxesDivGap};
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+
+`;

package/src/view/div/menu.js

@@ -1,46 +1,101 @@
 "use strict";
 
-import withStyle from "easy-with-style";
+import withStyle from "easy-with-style";  ///
 
-import { Element } from "easy";
+import Element from "../element";
+import ButtonsDiv from "../div/buttons";
+import CheckboxesDiv from "../div/checkboxes";
 
-import touchMixins from "../../mixins/touch";
-
-import { menuDivHeight } from "../../style";
+import { GRID, ZOOM_RATIO } from "../../constants";
+import { borderColour, menuDivPadding, backgroundColour } from "../../styles";
+import { getMenuDivZoom as getZoom, setMenuDivZoom as setZoom } from "../../state";
 
 class MenuDiv extends Element {
-  customTapHandler = (event, element) => {
-    alert("MENU DIV TAP!")
+  zoomMenuOut() {
+    let zoom = getZoom();
+
+    zoom /= ZOOM_RATIO;
+
+    setZoom(zoom);
+
+    this.updateZoom();
   }
 
-  didMount() {
-    this.enableTouch();
+  zoomMenuIn() {
+    let zoom = getZoom();
+
+    zoom *= ZOOM_RATIO;
 
-    this.onCustomTap(this.customTapHandler);
+    setZoom(zoom);
+
+    this.updateZoom();
   }
 
-  willUnmount() {
-    this.disableTouch();
+  updateZoom() {
+    const zoom = getZoom(),
+          width = `${100/zoom}%`,
+          transform = `scale(${zoom})`,
+          css = {
+            width,
+            transform
+          };
 
-    this.offCustomTap(this.customTapHandler);
+    this.css(css);
   }
 
-  initialise() {
+  show() {
+    const display = GRID;
+
+    this.display(display);
+  }
+
+  openMenu() {
+    this.show();
+  }
+
+  closeMenu() {
     this.hide();
   }
 
+  didMount() {
+    this.updateZoom();
+  }
+
+  willUnmount() {
+    ///
+  }
+
+  childElements() {
+    return ([
+
+      <CheckboxesDiv/>,
+      <ButtonsDiv/>
+
+    ]);
+  }
+
   parentContext() {
-    const showMenuDiv = this.show.bind(this),  ///
-          hideMenuDiv = this.hide.bind(this),  ///
-          isMenuDivDisplayed = this.isDisplayed.bind(this);  ///
+    const context = this.getContext(),
+          openMenu = this.openMenu.bind(this),
+          closeMenu = this.closeMenu.bind(this),
+          zoomMenuIn = this.zoomMenuIn.bind(this),
+          zoomMenuOut = this.zoomMenuOut.bind(this),
+          updateMenuDivZoom = this.updateZoom.bind(this); ///
 
     return ({
-      showMenuDiv,
-      hideMenuDiv,
-      isMenuDivDisplayed
+      ...context,
+      openMenu,
+      closeMenu,
+      zoomMenuIn,
+      zoomMenuOut,
+      updateMenuDivZoom
     });
   }
 
+  initialise() {
+    this.hide();
+  }
+
   static tagName = "div";
 
   static defaultProperties = {
@@ -48,15 +103,17 @@ class MenuDiv extends Element {
   };
 }
 
-Object.assign(MenuDiv.prototype, touchMixins);
-
 export default withStyle(MenuDiv)`
 
   left: 0;
-  width: 100%;
-  height: ${menuDivHeight};
   bottom: 0;
+  display: grid;
+  padding: ${menuDivPadding};
   position: fixed;
-  background-color: black;
-  
+  border-top: 1px solid ${borderColour};
+  background-color: ${backgroundColour};
+  transform-origin: bottom left;
+  grid-template-rows: auto;
+  grid-template-columns: auto min-content;
+    
 `;