highmark-cli 0.0.140 → 0.0.142

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "highmark-cli",
   "author": "James Smith",
-  "version": "0.0.140",
+  "version": "0.0.142",
   "license": "MIT, Anti-996",
   "homepage": "https://github.com/djalbat/highmark-cli",
   "description": "Extensible, styleable Markdown.",
@@ -24,6 +24,7 @@
     "easy-layout": "^6.0.145",
     "easy-with-style": "^3.0.349",
     "esbuild": "^0.9.2",
+    "fragmented": "^2.1.3",
     "juxtapose": "^4.0.81",
     "sufficient": "^2.0.55",
     "watchful-cli": "^1.7.44"

package/src/client.js

@@ -6,6 +6,7 @@ import withStyle from "easy-with-style";  ///
 
 import { controller } from "sufficient";
 import { Body, Element } from "easy";
+import { onFragmentChange } from "fragmented";
 
 import View from "./view";
 import createMethods from "./createMethods";
@@ -43,6 +44,10 @@ onOrientationChange((orientation) => {
   view.updateZoom();
 });
 
+onFragmentChange(() => {
+  debugger
+});
+
 getOrientation((orientation) => {
   setOrientation(orientation);
 

package/src/constants.js

@@ -5,13 +5,13 @@ export const { PI } = Math;
 export const GRID = "grid";
 export const STATE_KEY = "state";
 export const TAP_DELAY = 250;
-export const ZOOM_RATIO = 1.1;
 export const PI_OVER_TWO = PI / 2;
 export const SCROLL_DELAY = 10;
 export const DECELERATION = 0.0333333;
 export const UP_DIRECTION = +1;
 export const DOWN_DIRECTION = -1;
 export const MAXIMUM_SPREAD = PI / 4;
+export const MENU_ZOOM_RATIO = 1.1;
 export const MAXIMUM_TAP_TIME = 125;
 export const BACKGROUND_COLOUR = "background-color"; ///
 export const MINIMUM_SWIPE_SPEED = 1;

package/src/createMethods.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import { MENU_ZOOM_RATIO } from "./constants";
+import { getMenuZoom, setMenuZoom, setOverlayZoom, setColoursInverted, setNativeGesturesRestored } from "./state";
+
 export default function createMethods(scheduler, model, view) {
   function openMenu() {
     view.openMenu();
@@ -10,43 +13,77 @@ export default function createMethods(scheduler, model, view) {
   }
 
   function zoomMenuIn() {
-    view.zoomMenuIn();
+    let menuZoom = getMenuZoom();
+
+    menuZoom *= MENU_ZOOM_RATIO;
+
+    setMenuZoom(menuZoom);
+
+    view.updateMenuZoom();
   }
 
   function zoomMenuOut() {
-    view.zoomMenuOut();
+    let menuZoom = getMenuZoom();
+
+    menuZoom /= MENU_ZOOM_RATIO;
+
+    setMenuZoom(menuZoom);
+
+    view.updateMenuZoom();
+  }
+
+  function zoomOverlay(overlayZoom) {
+    setOverlayZoom(overlayZoom);
+
+    view.updateOverlayZoom();
   }
 
   function invertColours() {
-    view.invertColours();
+    const coloursInverted = true;
+
+    setColoursInverted(coloursInverted);
+
+    view.updateOverlayColours();
   }
 
   function revertColours() {
-    view.revertColours();
+    const coloursInverted = false;
+
+    setColoursInverted(coloursInverted);
+
+    view.updateOverlayColours();
   }
 
   function exitFullScreen() {
     view.exitFullScreen();
+
+    view.updateFullScreenCheckboxDiv();
   }
 
   function enterFullScreen() {
-    view.enterFullScreen();
+    view.enterFullScreen(() => {
+      view.updateFullScreenCheckboxDiv();
+    });
   }
 
   function restoreNativeGestures() {
-    view.restoreNativeGestures();
+    const nativeGesturesRestored = true;
+
+    setNativeGesturesRestored(nativeGesturesRestored);
+
+    view.updateNativeGestures();
+
+    view.updateNativeGesturesCheckboxDiv();
   }
 
   function suppressNativeGestures() {
-    view.suppressNativeGestures();
-  }
+    const nativeGesturesRestored = false;
 
-  function checkRestoreNativeGesturesCheckbox(checked) {
-    view.checkRestoreNativeGesturesCheckbox(checked);
-  }
+    setNativeGesturesRestored(nativeGesturesRestored);
+
+    view.updateNativeGestures();
 
-  function uncheckRestoreNativeGesturesCheckbox(checked) {
-    view.uncheckRestoreNativeGesturesCheckbox(checked);
+    view.updateNativeGesturesCheckboxDiv();
   }
 
   return ({
@@ -54,13 +91,12 @@ export default function createMethods(scheduler, model, view) {
     closeMenu,
     zoomMenuIn,
     zoomMenuOut,
+    zoomOverlay,
     invertColours,
     revertColours,
     exitFullScreen,
     enterFullScreen,
     restoreNativeGestures,
-    suppressNativeGestures,
-    checkRestoreNativeGesturesCheckbox,
-    uncheckRestoreNativeGesturesCheckbox
+    suppressNativeGestures
   });
 }

package/src/localStorage.js

@@ -2,23 +2,25 @@
 
 import { STATE_KEY, LANDSCAPE_ORIENTATION, PORTRAIT_ORIENTATION } from "./constants";
 
-const viewZoom = {
+const menuZoom = {
         [PORTRAIT_ORIENTATION]: 1,
         [LANDSCAPE_ORIENTATION]: 1
       },
-      menuDivZoom = {
+      overlayZoom = {
         [PORTRAIT_ORIENTATION]: 1,
         [LANDSCAPE_ORIENTATION]: 1
       },
-      fullScreenViewZoom = {
+      fullScreenOverlayZoom = {
         [PORTRAIT_ORIENTATION]: 1,
         [LANDSCAPE_ORIENTATION]: 1
       },
       coloursInverted = false,
+      nativeGesturesRestored = false,
       defaultPersistentState = {
-        viewZoom,
-        menuDivZoom,
-        fullScreenViewZoom,
+        menuZoom,
+        overlayZoom,
+        fullScreenOverlayZoom,
+        nativeGesturesRestored,
         coloursInverted
       };
 
@@ -46,3 +48,4 @@ export function setPersistentState(persistentState) {
 
   localStorage.setItem(key, value);
 }
+

package/src/mixins/fullsrean.js

@@ -16,13 +16,12 @@ function exitFullScreen() {
   document.exitFullscreen();
 }
 
-function requestFullScreen() {
+function requestFullScreen(callback) {
   const domElement = this.getDOMElement();
 
   domElement.requestFullscreen()
-    .catch((error) => {
-      alert(error);
-    });
+    .then(callback)
+    .catch(alert);
 }
 
 function onFullscreenchange(fullscreenchangeHandler) {

package/src/state.js

@@ -2,95 +2,112 @@
 
 import { isFullScreen } from "./utilities/fullScreen";
 import { getPersistentState, setPersistentState } from "./localStorage";
-import {PORTRAIT_ORIENTATION} from "./constants";
 
 const orientation = null,
       state = {
         orientation
       };
 
-export function getViewZoom() {
-  stateFromPersistentState();
+export function getOrientation() {
+  const { orientation } = state;
 
-  const fullScreen = isFullScreen(),
-        orientation = getOrientation();
+  return orientation;
+}
 
-  let viewZoom;
+export function setOrientation(orientation) {
+  Object.assign(state, {
+    orientation
+  });
+}
 
-  if (fullScreen) {
-    ({ fullScreenViewZoom: viewZoom } = state);
-  } else {
-    ({ viewZoom } = state);
-  }
+export function getMenuZoom() {
+  stateFromPersistentState();
 
-  const orientedViewZoom = viewZoom[orientation]; ///
+  let menuZoom;
 
-  viewZoom = orientedViewZoom;  ///
+  ({ menuZoom } = state);
 
-  return viewZoom;
+  const { orientation } = state,
+        orientedMenuZoom = menuZoom[orientation]; ///
+
+  menuZoom = orientedMenuZoom;  ///
+
+  return menuZoom;
 }
 
-export function setViewZoom(viewZoom) {
+export function setMenuZoom(menuZoom) {
   stateFromPersistentState();
 
-  const fullScreen = isFullScreen(),
-        orientation = getOrientation();
-
-  const orientedViewZoom = viewZoom;  ///
+  const { orientation } = state,
+        orientedMenuZoom = menuZoom;  ///
 
-  if (fullScreen) {
-    ({ fullScreenViewZoom: viewZoom } = state);
-  } else {
-    ({ viewZoom } = state);
-  }
+  ({ menuZoom } = state);
 
-  Object.assign(viewZoom, {
-    [orientation]: orientedViewZoom
+  Object.assign(menuZoom, {
+    [orientation]: orientedMenuZoom
   });
 
   stateToPersistentState();
 }
 
-export function getMenuDivZoom() {
+export function getOverlayZoom() {
   stateFromPersistentState();
 
-  let menuDivZoom;
+  const fullScreen = isFullScreen(),
+        orientation = getOrientation();
 
-  ({ menuDivZoom } = state);
+  let overlayZoom;
 
-  const { orientation } = state,
-        orientedMenuDivZoom = menuDivZoom[orientation]; ///
+  if (fullScreen) {
+    ({ fullScreenOverlayZoom: overlayZoom } = state);
+  } else {
+    ({ overlayZoom } = state);
+  }
+
+  const orientedOverlayZoom = overlayZoom[orientation]; ///
 
-  menuDivZoom = orientedMenuDivZoom;  ///
+  overlayZoom = orientedOverlayZoom;  ///
 
-  return menuDivZoom;
+  return overlayZoom;
 }
 
-export function setMenuDivZoom(menuDivZoom) {
+export function setOverlayZoom(overlayZoom) {
   stateFromPersistentState();
 
-  const { orientation } = state,
-        orientedMenuDivZoom = menuDivZoom;  ///
+  const fullScreen = isFullScreen(),
+        orientation = getOrientation();
 
-  ({ menuDivZoom } = state);
+  const orientedOverlayZoom = overlayZoom;  ///
 
-  Object.assign(menuDivZoom, {
-    [orientation]: orientedMenuDivZoom
+  if (fullScreen) {
+    ({ fullScreenOverlayZoom: overlayZoom } = state);
+  } else {
+    ({ overlayZoom } = state);
+  }
+
+  Object.assign(overlayZoom, {
+    [orientation]: orientedOverlayZoom
   });
 
   stateToPersistentState();
 }
 
-export function getOrientation() {
-  const { orientation } = state;
+export function areNativeGesturesRestored() {
+  stateFromPersistentState();
 
-  return orientation;
+  const { nativeGesturesRestored } = state;
+
+  return nativeGesturesRestored;
 }
 
-export function setOrientation(orientation) {
+export function setNativeGesturesRestored(nativeGesturesRestored) {
+  stateFromPersistentState();
+
   Object.assign(state, {
-    orientation
+    nativeGesturesRestored
   });
+
+  stateToPersistentState();
 }
 
 export function areColoursInverted() {
@@ -112,11 +129,12 @@ export function setColoursInverted(coloursInverted) {
 }
 
 function stateToPersistentState() {
-  const { viewZoom, menuDivZoom, fullScreenViewZoom, coloursInverted } = state,
+  const { menuZoom, overlayZoom, fullScreenOverlayZoom, nativeGesturesRestored, coloursInverted } = state,
         persistentState = {
-          viewZoom,
-          menuDivZoom,
-          fullScreenViewZoom,
+          menuZoom,
+          overlayZoom,
+          fullScreenOverlayZoom,
+          nativeGesturesRestored,
           coloursInverted
         };
 

package/src/view/div/buttons.js

@@ -4,7 +4,6 @@ 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";
 
@@ -14,10 +13,9 @@ class ButtonsDiv extends Element {
   childElements() {
     return ([
 
-      <ZoomMenuInButton/>,
-      <CloseMenuButton/>,
       <ZoomMenuOutButton/>,
-      <FullScreenButton/>
+      <ZoomMenuInButton/>,
+      <CloseMenuButton/>
 
     ]);
   }
@@ -33,7 +31,7 @@ export default withStyle(ButtonsDiv)`
 
   gap: ${buttonsDivGap};
   display: grid;
-  grid-template-rows: min-content min-content;
-  grid-template-columns: min-content min-content;
+  grid-template-rows: min-content;
+  grid-template-columns: min-content min-content min-content;
   
 `;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+import CheckboxDiv from "../../div/checkbox";
+
+import { isFullScreen } from "../../../utilities/fullScreen";
+
+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 toggle)`;
+
+  static defaultProperties = {
+    className: "full-screen"
+  };
+}

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

@@ -13,7 +13,7 @@ export default class InvertColoursCheckboxDiv extends CheckboxDiv {
         controller.revertColours();
   }
 
-  didMount() {
+  update() {
     const coloursInverted = areColoursInverted();
 
     coloursInverted ?
@@ -21,8 +21,12 @@ export default class InvertColoursCheckboxDiv extends CheckboxDiv {
         this.uncheckCheckbox();
   }
 
-  willUnmount() {
-    ///
+  parentContext() {
+    const updateInvertColoursCheckboxDiv = this.update.bind(this);
+
+    return ({
+      updateInvertColoursCheckboxDiv
+    });
   }
 
   static message = "Invert colours";

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

@@ -0,0 +1,38 @@
+"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
+(tap to toggle)`;
+
+  static defaultProperties = {
+    className: "native-gestures"
+  };
+}

package/src/view/div/checkboxes.js

@@ -3,8 +3,9 @@
 import withStyle from "easy-with-style";  ///
 
 import Element from "../element";
+import FullScreenCheckboxDiv from "./checkbox/fullScreen";
 import InvertColoursCheckboxDiv from "./checkbox/invertColours";
-import RestoreNativeGesturesCheckboxDiv from "./checkbox/restoreNativeGestures";
+import NativeGesturesCheckboxDiv from "./checkbox/nativeGestures";
 
 import { checkboxesDivGap } from "../../styles";
 
@@ -13,7 +14,8 @@ class CheckboxesDiv extends Element {
     return ([
 
       <InvertColoursCheckboxDiv/>,
-      <RestoreNativeGesturesCheckboxDiv/>
+      <NativeGesturesCheckboxDiv/>,
+      <FullScreenCheckboxDiv/>
 
     ]);
   }

package/src/view/div/menu.js

@@ -6,43 +6,11 @@ import Element from "../element";
 import ButtonsDiv from "../div/buttons";
 import CheckboxesDiv from "../div/checkboxes";
 
-import { GRID, ZOOM_RATIO } from "../../constants";
+import { GRID } from "../../constants";
+import { getMenuZoom as getZoom } from "../../state";
 import { borderColour, menuDivPadding, backgroundColour } from "../../styles";
-import { getMenuDivZoom as getZoom, setMenuDivZoom as setZoom } from "../../state";
 
 class MenuDiv extends Element {
-  zoomMenuOut() {
-    let zoom = getZoom();
-
-    zoom /= ZOOM_RATIO;
-
-    setZoom(zoom);
-
-    this.updateZoom();
-  }
-
-  zoomMenuIn() {
-    let zoom = getZoom();
-
-    zoom *= ZOOM_RATIO;
-
-    setZoom(zoom);
-
-    this.updateZoom();
-  }
-
-  updateZoom() {
-    const zoom = getZoom(),
-          width = `${100/zoom}%`,
-          transform = `scale(${zoom})`,
-          css = {
-            width,
-            transform
-          };
-
-    this.css(css);
-  }
-
   show() {
     const display = GRID;
 
@@ -57,12 +25,16 @@ class MenuDiv extends Element {
     this.hide();
   }
 
-  didMount() {
-    this.updateZoom();
-  }
+  updateMenuZoom() {
+    const zoom = getZoom(),
+          width = `${100/zoom}%`,
+          transform = `scale(${zoom})`,
+          css = {
+            width,
+            transform
+          };
 
-  willUnmount() {
-    ///
+    this.css(css);
   }
 
   childElements() {
@@ -78,17 +50,13 @@ class MenuDiv extends Element {
     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); ///
+          updateMenuZoom = this.updateMenuZoom.bind(this);
 
     return ({
       ...context,
       openMenu,
       closeMenu,
-      zoomMenuIn,
-      zoomMenuOut,
-      updateMenuDivZoom
+      updateMenuZoom
     });
   }