highmark-cli 0.0.174 → 0.0.175

package/src/migrate.js

@@ -1,19 +0,0 @@
-"use strict";
-
-import { versionUtilities } from "necessary";
-
-import { VERSION_1 } from "./versions";
-import { migrateStateToVersion_1 } from "./state/version_1";
-
-const { migrate } = versionUtilities;
-
-export function migrateState(state) {
-  const migrationMap = {
-          [VERSION_1]: migrateStateToVersion_1
-        },
-        latestVersion = VERSION_1;
-
-  state = migrate(state, migrationMap, latestVersion);
-
-  return state;
-}

package/src/selectors.js

@@ -1,5 +0,0 @@
-"use strict";
-
-export const DIV_SELECTOR = "div";
-export const DIVS_SELECTOR = "body > div:not(.loading)"; ///
-export const LOADING_DIV_SELECTOR = "body > div.loading";

package/src/state/version_1.js

@@ -1,32 +0,0 @@
-"use strict";
-
-import { VERSION_1 } from "../versions";
-import { PORTRAIT_ORIENTATION, LANDSCAPE_ORIENTATION } from "../constants";
-
-export function createState() {
-  const version = VERSION_1,
-        menuZoom = {
-          [PORTRAIT_ORIENTATION]: 1,
-          [LANDSCAPE_ORIENTATION]: 0.5
-        },
-        overlayZoom = {
-          [PORTRAIT_ORIENTATION]: 1,
-          [LANDSCAPE_ORIENTATION]: 1
-        },
-        fullScreenOverlayZoom = {
-          [PORTRAIT_ORIENTATION]: 1,
-          [LANDSCAPE_ORIENTATION]: 1
-        },
-        coloursInverted = false,
-        nativeGesturesRestored = false,
-        state = {
-          version,
-          menuZoom,
-          overlayZoom,
-          fullScreenOverlayZoom,
-          nativeGesturesRestored,
-          coloursInverted
-        };
-
-  return state;
-}

package/src/state.js

@@ -1,152 +0,0 @@
-"use strict";
-
-import { fullScreenUtilities } from "easy-mobile";
-
-import { getPersistentState, setPersistentState } from "./localStorage";
-
-const { isFullScreen } = fullScreenUtilities;
-
-const orientation = null,
-      state = {
-        orientation
-      };
-
-export function getOrientation() {
-  const { orientation } = state;
-
-  return orientation;
-}
-
-export function setOrientation(orientation) {
-  Object.assign(state, {
-    orientation
-  });
-}
-
-export function getMenuZoom() {
-  stateFromPersistentState();
-
-  let menuZoom;
-
-  ({ menuZoom } = state);
-
-  const { orientation } = state,
-        orientedMenuZoom = menuZoom[orientation]; ///
-
-  menuZoom = orientedMenuZoom;  ///
-
-  return menuZoom;
-}
-
-export function setMenuZoom(menuZoom) {
-  stateFromPersistentState();
-
-  const { orientation } = state,
-        orientedMenuZoom = menuZoom;  ///
-
-  ({ menuZoom } = state);
-
-  Object.assign(menuZoom, {
-    [orientation]: orientedMenuZoom
-  });
-
-  stateToPersistentState();
-}
-
-export function getOverlayZoom() {
-  stateFromPersistentState();
-
-  const fullScreen = isFullScreen(),
-        orientation = getOrientation();
-
-  let overlayZoom;
-
-  if (fullScreen) {
-    ({ fullScreenOverlayZoom: overlayZoom } = state);
-  } else {
-    ({ overlayZoom } = state);
-  }
-
-  const orientedOverlayZoom = overlayZoom[orientation]; ///
-
-  overlayZoom = orientedOverlayZoom;  ///
-
-  return overlayZoom;
-}
-
-export function setOverlayZoom(overlayZoom) {
-  stateFromPersistentState();
-
-  const fullScreen = isFullScreen(),
-        orientation = getOrientation();
-
-  const orientedOverlayZoom = overlayZoom;  ///
-
-  if (fullScreen) {
-    ({ fullScreenOverlayZoom: overlayZoom } = state);
-  } else {
-    ({ overlayZoom } = state);
-  }
-
-  Object.assign(overlayZoom, {
-    [orientation]: orientedOverlayZoom
-  });
-
-  stateToPersistentState();
-}
-
-export function areNativeGesturesRestored() {
-  stateFromPersistentState();
-
-  const { nativeGesturesRestored } = state;
-
-  return nativeGesturesRestored;
-}
-
-export function setNativeGesturesRestored(nativeGesturesRestored) {
-  stateFromPersistentState();
-
-  Object.assign(state, {
-    nativeGesturesRestored
-  });
-
-  stateToPersistentState();
-}
-
-export function areColoursInverted() {
-  stateFromPersistentState();
-
-  const { coloursInverted } = state;
-
-  return coloursInverted;
-}
-
-export function setColoursInverted(coloursInverted) {
-  stateFromPersistentState();
-
-  Object.assign(state, {
-    coloursInverted
-  });
-
-  stateToPersistentState();
-}
-
-function stateToPersistentState() {
-  const { version, menuZoom, overlayZoom, fullScreenOverlayZoom, nativeGesturesRestored, coloursInverted } = state,
-        persistentState = {
-          version,
-          menuZoom,
-          overlayZoom,
-          fullScreenOverlayZoom,
-          nativeGesturesRestored,
-          coloursInverted
-        };
-
-  setPersistentState(persistentState);
-}
-
-function stateFromPersistentState() {
-  const persistentState = getPersistentState();
-
-  Object.assign(state, persistentState);
-}

package/src/styles.js

@@ -1,19 +0,0 @@
-"use strict";
-
-export const svgFill = "#fff";
-export const buttonSize = "64px";
-export const spanColour = "#fff";
-export const menuDivGap = "32px";
-export const borderWidth = "4px";
-export const borderRadius = "8px"
-export const borderColour = "#fff";
-export const checkboxSize = "48px";
-export const spanFontSize = checkboxSize; ///
-export const buttonPadding = "8px";
-export const buttonsDivGap = "32px";
-export const menuDivPadding = "64px";
-export const checkboxDivGap = "32px";
-export const checkboxesDivGap = "48px";
-export const backgroundColour = "#222";
-export const checkboxBackgroundColour = "#000";
-export const fontSizeButtonBorderColour = "#fff";

package/src/utilities/element.js

@@ -1,66 +0,0 @@
-"use strict";
-
-import { DIV_SELECTOR } from "../selectors";
-
-export function elementsFromDOMElements(domElements, Element) {
-  const elements = domElements.map((domElement) => {
-    const element = elementFromDOMElement(domElement, Element);
-
-    return element;
-  });
-
-  return elements;
-}
-
-export function elementFromDOMElement(domElement, Element) {
-  const element =
-
-          <Element/>
-
-        ,
-        className = classNameFromElement(element);
-
-  addClassNameToDOMElement(domElement, className)
-
-  element.domElement = domElement;  ///
-
-  domElement.__element__ = element; ///
-
-  return element;
-}
-
-export function findDivByAnchorId(anchorId) {
-  const selector = DIV_SELECTOR,
-        anchorDOMElement = findAnchorDOMElement(anchorId),
-        divDOMElement = anchorDOMElement.closest(selector);
-
-  const { __element__: div } = divDOMElement;
-
-  return div;
-}
-
-export function scrollToAnchor(anchorId) {
-  const anchorDOMElement = findAnchorDOMElement(anchorId);
-
-  anchorDOMElement.scrollIntoView();
-}
-
-function findAnchorDOMElement(anchorId) {
-  const selector = `a#${anchorId}`,
-        anchorDOMElement = document.querySelector(selector);
-
-  return anchorDOMElement;
-}
-
-function classNameFromElement(element) {
-  const domElement = element.getDOMElement(),
-        { className } = domElement;
-
-  return className;
-}
-
-function addClassNameToDOMElement(domElement, className) {
-  const { classList } = domElement;
-
-  classList.add(className);
-}

package/src/utilities/orientation.js

@@ -1,34 +0,0 @@
-"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/versions.js

@@ -1,3 +0,0 @@
-"use strict";
-
-export const VERSION_1 = "1";

package/src/view/button/closeMenu.js

@@ -1,16 +0,0 @@
-"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/zoomMenuIn.js

@@ -1,16 +0,0 @@
-"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

@@ -1,16 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-"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

@@ -1,68 +0,0 @@
-"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

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

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

@@ -1,40 +0,0 @@
-"use strict";
-
-import { fullScreenUtilities } from "easy-mobile";
-
-import CheckboxDiv from "../../div/checkbox";
-
-const { isFullScreen } = fullScreenUtilities;
-
-export default class FullScreenCheckboxDiv extends CheckboxDiv {
-  changeHandler = (event, element) => {
-    const checkboxChecked = this.isCheckboxChecked();
-
-    checkboxChecked ?
-      controller.enterFullScreen() :
-        controller.exitFullScreen();
-  }
-
-  update() {
-    const fullScreen = isFullScreen();
-
-    fullScreen ?
-      this.checkCheckbox() :
-        this.uncheckCheckbox();
-  }
-
-  parentContext() {
-    const updateFullScreenCheckboxDiv = this.update.bind(this); ///
-
-    return ({
-      updateFullScreenCheckboxDiv
-    });
-  }
-
-  static message = `Full screen
-(double tap to exit)`;
-
-  static defaultProperties = {
-    className: "full-screen"
-  };
-}

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

@@ -1,37 +0,0 @@
-"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();
-  }
-
-  update() {
-    const coloursInverted = areColoursInverted();
-
-    coloursInverted ?
-      this.checkCheckbox() :
-        this.uncheckCheckbox();
-  }
-
-  parentContext() {
-    const updateInvertColoursCheckboxDiv = this.update.bind(this);
-
-    return ({
-      updateInvertColoursCheckboxDiv
-    });
-  }
-
-  static message = "Invert colours";
-
-  static defaultProperties = {
-    className: "invert-colours"
-  };
-}

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

@@ -1,38 +0,0 @@
-"use strict";
-
-import CheckboxDiv from "../../div/checkbox";
-
-import { areNativeGesturesRestored } from "../../../state";
-
-export default class NativeGesturesCheckboxDiv extends CheckboxDiv {
-  changeHandler = (event, element) => {
-    const checkboxChecked = this.isCheckboxChecked();
-
-    checkboxChecked ?
-      controller.restoreNativeGestures() :
-        controller.suppressNativeGestures();
-  }
-
-  update() {
-    const nativeGesturesRestored = areNativeGesturesRestored();
-
-    nativeGesturesRestored ?
-      this.checkCheckbox() :
-        this.uncheckCheckbox();
-  }
-
-  parentContext() {
-    const updateNativeGesturesCheckboxDiv = this.update.bind(this); ///
-
-    return ({
-      updateNativeGesturesCheckboxDiv
-    });
-  }
-
-  static message = `Native gestures
-(double tap to toggle)`;
-
-  static defaultProperties = {
-    className: "native-gestures"
-  };
-}

package/src/view/div/checkbox.js

@@ -1,45 +0,0 @@
-"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;  
-  
-`;