highmark-cli 0.0.133 → 0.0.135

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "highmark-cli",
   "author": "James Smith",
-  "version": "0.0.133",
+  "version": "0.0.135",
   "license": "MIT, Anti-996",
   "homepage": "https://github.com/djalbat/highmark-cli",
   "description": "Extensible, styleable Markdown.",
@@ -19,10 +19,10 @@
     "occam-entities": "^1.0.90"
   },
   "devDependencies": {
-    "@swc/core": "^1.2.50",
+    "@swc/core": "1.2.52",
     "easy": "^16.0.19",
-    "easy-layout": "^6.0.143",
-    "easy-with-style": "^3.0.343",
+    "easy-layout": "^6.0.144",
+    "easy-with-style": "^3.0.348",
     "esbuild": "^0.9.2",
     "juxtapose": "^4.0.80",
     "watchful-cli": "^1.7.44"

package/src/client.js

@@ -4,18 +4,27 @@ import "juxtapose";
 
 import withStyle from "easy-with-style";  ///
 
-import { Body } from "easy";
+import { Body, Element } from "easy";
 
 import View from "./view";
 
+import { elementFromDOMElement } from "./utilities/element";
+import { LOADING_DIV_SELECTOR, VIEW_DIV_SELECTOR } from "./constants";
+
 const { renderStyles } = withStyle;
 
 renderStyles();
 
-const body = new Body();
+const viewDOMElement = document.querySelector(VIEW_DIV_SELECTOR),
+      body = new Body(),
+      view = elementFromDOMElement(viewDOMElement, () =>
+
+        <View/>
+
+      ); ///
 
-body.mount(
+body.mount(view);
 
-  <View />
+const loadingDiv = new Element(LOADING_DIV_SELECTOR);
 
-);
+loadingDiv.hide();

package/src/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+export const { PI } = Math;
+
+export const SINGLE_SPACE = " ";
+export const MAXIMUM_TAP_TIME = 125;
+export const VIEW_DIV_SELECTOR = "body > div:not(.loading)";  ///
+export const ENABLE_SWIPES_DELAY = 500;
+export const MINIMUM_SWIPE_SPEED = 1.25;
+export const LOADING_DIV_SELECTOR = "body > div.loading";
+export const ONE_HUNDRED_AND_EIGHTY = 180;
+export const VIEW_CHILD_DIVS_SELECTOR = "body > div:not(.loading) div"; ///
+export const MAXIMUM_CLICK_WIDTH_RATIO = 0.3;
+export const MAXIMUM_SWIPE_ABSOLUTE_DIRECTION = 30;

package/src/customEventTypes.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export const TAP_CUSTOM_EVENT_TYPE = "tap";
+export const SWIPE_LEFT_CUSTOM_EVENT_TYPE = "swipe-left";
+export const SWIPE_RIGHT_CUSTOM_EVENT_TYPE = "swipe-right";
+export const ARROW_KEY_DOWN_CUSTOM_EVENT_TYPE = "arrow-key-down";

package/src/eventTypes.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export const TOUCHSTART_EVENT_TYPE = "touchstart";
+export const TOUCHMOVE_EVENT_TYPE = "touchmove";
+export const TOUCHEND_EVENT_TYPE = "touchend";

package/src/mixins/event.js

@@ -0,0 +1,56 @@
+"use strict";
+
+import { TOUCHSTART_EVENT_TYPE, TOUCHMOVE_EVENT_TYPE, TOUCHEND_EVENT_TYPE } from "../eventTypes";
+
+function onTouchStart(touchStartHandler) {
+  const eventType = TOUCHSTART_EVENT_TYPE,
+        handler = touchStartHandler;  ///
+
+  this.onEvent(eventType, handler);
+}
+
+function offTouchStart(touchStartHandler) {
+  const eventType = TOUCHSTART_EVENT_TYPE,
+        handler = touchStartHandler;  ///
+
+  this.offEvent(eventType, handler);
+}
+
+function onTouchMove(touchStartHandler) {
+  const eventType = TOUCHMOVE_EVENT_TYPE,
+        handler = touchStartHandler;  ///
+
+  this.onEvent(eventType, handler);
+}
+
+function offTouchMove(touchStartHandler) {
+  const eventType = TOUCHMOVE_EVENT_TYPE,
+        handler = touchStartHandler;  ///
+
+  this.offEvent(eventType, handler);
+}
+
+function onTouchEnd(touchStartHandler) {
+  const eventType = TOUCHEND_EVENT_TYPE,
+        handler = touchStartHandler;  ///
+
+  this.onEvent(eventType, handler);
+}
+
+function offTouchEnd(touchStartHandler) {
+  const eventType = TOUCHEND_EVENT_TYPE,
+        handler = touchStartHandler;  ///
+
+  this.offEvent(eventType, handler);
+}
+
+const eventMixins = {
+  onTouchStart,
+  offTouchStart,
+  onTouchMove,
+  offTouchMove,
+  onTouchEnd,
+  offTouchEnd
+};
+
+export default eventMixins;

package/src/mixins/touch.js

@@ -0,0 +1,240 @@
+"use strict";
+
+import { window } from "easy";
+
+import Position from "../position";
+import Velocity from "../velocity";
+
+import { TAP_CUSTOM_EVENT_TYPE, SWIPE_LEFT_CUSTOM_EVENT_TYPE, SWIPE_RIGHT_CUSTOM_EVENT_TYPE } from "../customEventTypes";
+import { MAXIMUM_TAP_TIME, MINIMUM_SWIPE_SPEED, ONE_HUNDRED_AND_EIGHTY, MAXIMUM_SWIPE_ABSOLUTE_DIRECTION } from "../constants";
+
+function enableTouch() {
+  const startPosition = null;
+
+  this.updateState({
+    startPosition
+  });
+
+  this.onMouseDown(this.mouseDownHandler);
+  this.onMouseMove(this.mouseMoveHandler);
+
+  window.onMouseUp(this.mouseUpHandler, this);
+
+  this.onTouchStart(this.touchStartHandler);
+  this.onTouchMove(this.touchMoveHandler);
+  this.onTouchEnd(this.touchEndHandler);
+}
+
+function disableTouch() {
+  this.offMouseDown(this.mouseDownHandler);
+  this.offMouseMove(this.mouseMoveHandler);
+
+  window.offMouseUp(this.mouseUpHandler, this);
+
+  this.offTouchStart(this.touchStartHandler);
+  this.offTouchMove(this.touchMoveHandler);
+  this.offTouchEnd(this.touchEndHandler);
+}
+
+function onCustomTap(tapCustomHandler, element) {
+  const customEventType = TAP_CUSTOM_EVENT_TYPE,
+        customHandler = tapCustomHandler; ///
+
+  this.onCustomEvent(customEventType, customHandler, element);
+}
+
+function offCustomTap(tapCustomHandler, element) {
+  const customEventType = TAP_CUSTOM_EVENT_TYPE,
+        customHandler = tapCustomHandler; ///
+
+  this.offCustomEvent(customEventType, customHandler, element);
+}
+
+function onCustomSwipeLeft(swipeLeftCustomHandler, element) {
+  const customEventType = SWIPE_LEFT_CUSTOM_EVENT_TYPE,
+        customHandler = swipeLeftCustomHandler; ///
+
+  this.onCustomEvent(customEventType, customHandler, element);
+}
+
+function offCustomSwipeLeft(swipeLeftCustomHandler, element) {
+  const customEventType = SWIPE_LEFT_CUSTOM_EVENT_TYPE,
+        customHandler = swipeLeftCustomHandler; ///
+
+  this.offCustomEvent(customEventType, customHandler, element);
+}
+
+function onCustomSwipeRight(swipeRightCustomHandler, element) {
+  const customEventType = SWIPE_RIGHT_CUSTOM_EVENT_TYPE,
+        customHandler = swipeRightCustomHandler; ///
+
+  this.onCustomEvent(customEventType, customHandler, element);
+}
+
+function offCustomSwipeRight(swipeRightCustomHandler, element) {
+  const customEventType = SWIPE_RIGHT_CUSTOM_EVENT_TYPE,
+        customHandler = swipeRightCustomHandler; ///
+
+  this.offCustomEvent(customEventType, customHandler, element);
+}
+
+function getStartPosition() {
+  const { startPosition } = this.getState();
+
+  return startPosition;
+}
+
+function setStartPosition(startPosition) {
+  this.updateState({
+    startPosition
+  });
+}
+
+function touchStartHandler(event, element) {
+  this.startHandler(event, element, (event) => {
+    const touchEvent = event, ///
+          position = Position.fromTouchEvent(touchEvent);
+
+    return position;
+  });
+}
+
+function mouseDownHandler(event, element) {
+  this.startHandler(event, element, (event) => {  ///
+    const mouseEvent = event, ///
+          position = Position.fromMouseEvent(mouseEvent);
+
+    return position;
+  });
+}
+
+function touchMoveHandler(event, element) {
+  this.moveHandler(event, element, (event) => {
+    const touchEvent = event, ///
+          position = Position.fromTouchEvent(touchEvent);
+
+    return position;
+  });
+}
+
+function mouseMoveHandler(event, element) {
+  this.moveHandler(event, element, (event) => {
+    const mouseEvent = event, ///
+          position = Position.fromMouseEvent(mouseEvent);
+
+    return position;
+  });
+}
+
+function touchEndHandler(event, element) {
+  this.endHandler(event, element, (event) => {
+    const touchEvent = event, ///
+          position = Position.fromTouchEvent(touchEvent);
+
+    return position;
+  });
+}
+
+function mouseUpHandler(event, element) {
+  this.endHandler(event, element, (event) => {  ///
+    const mouseEvent = event, ///
+          position = Position.fromMouseEvent(mouseEvent);
+
+    return position;
+  });
+}
+
+function startHandler(event, element, positionFromEvent) {
+  const position = positionFromEvent(event),
+        startPosition = position;  ///
+
+  this.setStartPosition(startPosition);
+}
+
+function moveHandler(event, element, positionFromEvent) {
+  let startPosition = this.getStartPosition();
+
+  if (startPosition !== null) {
+    const position = positionFromEvent(event);
+
+    if (position !== null) {
+      const positionMatchesStartPosition = position.match(startPosition);
+
+      if (positionMatchesStartPosition) {
+        const velocity = Velocity.fromPositionAndStartPosition(position, startPosition),
+              speed = velocity.getSpeed();
+
+        if (speed > MINIMUM_SWIPE_SPEED) {
+          const absoluteDirection = velocity.getAbsoluteDirection();
+
+          let customEventType = null;
+
+          if (absoluteDirection < MAXIMUM_SWIPE_ABSOLUTE_DIRECTION) {
+            customEventType = SWIPE_RIGHT_CUSTOM_EVENT_TYPE;
+          }
+
+          if ((ONE_HUNDRED_AND_EIGHTY - absoluteDirection) < MAXIMUM_SWIPE_ABSOLUTE_DIRECTION) {
+            customEventType = SWIPE_LEFT_CUSTOM_EVENT_TYPE;
+          }
+
+          if (customEventType !== null) {
+            this.callCustomHandlers(customEventType, event, element);
+          }
+        }
+      }
+    }
+  }
+}
+
+function endHandler(event, element, positionFromEvent) {
+  let startPosition;
+
+  startPosition = this.getStartPosition();
+
+  if (startPosition !== null) {
+    const position = positionFromEvent(event);
+
+    if (position !== null) {
+      const positionMatchesStartPosition = position.match(startPosition);
+
+      if (positionMatchesStartPosition) {
+        const velocity = Velocity.fromPositionAndStartPosition(position, startPosition),
+              speed = velocity.getSpeed();
+
+        if (speed === 0) {
+          const time = velocity.getTime();
+
+          if (time < MAXIMUM_TAP_TIME) {
+            const customEventType = TAP_CUSTOM_EVENT_TYPE;
+
+            this.callCustomHandlers(customEventType, event, element);
+          }
+        }
+      }
+    }
+  }
+}
+
+const customEventMixins = {
+  enableTouch,
+  disableTouch,
+  onCustomTap,
+  offCustomTap,
+  onCustomSwipeLeft,
+  offCustomSwipeLeft,
+  onCustomSwipeRight,
+  offCustomSwipeRight,
+  getStartPosition,
+  setStartPosition,
+  touchStartHandler,
+  mouseDownHandler,
+  touchMoveHandler,
+  mouseMoveHandler,
+  touchEndHandler,
+  mouseUpHandler,
+  startHandler,
+  moveHandler,
+  endHandler
+};
+
+export default customEventMixins;

package/src/position.js

@@ -0,0 +1,112 @@
+"use strict";
+
+import { arrayUtilities } from "necessary";
+
+import { PI, ONE_HUNDRED_AND_EIGHTY } from "./constants";
+
+const { first } = arrayUtilities;
+
+export default class Position {
+  constructor(top, left, time, identifier) {
+    this.top = top;
+    this.left = left;
+    this.time = time;
+    this.identifier = identifier;
+  }
+
+  getTop() {
+    return this.top;
+  }
+
+  getLeft() {
+    return this.left;
+  }
+
+  getTime() {
+    return this.time;
+  }
+
+  getIdentifier() {
+    return this.identifier;
+  }
+
+  getMagnitude() {
+    const magnitude = Math.sqrt(this.top * this.top + this.left * this.left);
+
+    return magnitude;
+  }
+
+  getDirection() {
+    let direction = 0;
+
+    if (this.left === 0) {
+      direction = (this.top < 0) ?
+                   +PI / 2 :
+                     -PI / 2;
+    } else {
+      direction = Math.atan2(-this.top, this.left);
+    }
+
+    direction = direction * ONE_HUNDRED_AND_EIGHTY / PI;
+
+    return direction;
+  }
+
+  minus(position) {
+    const positionTop = position.getTop(),
+          positionLeft = position.getLeft(),
+          positionTime = position.getTime(),
+          top = this.top - positionTop,
+          left = this.left - positionLeft,
+          time = this.time - positionTime,
+          identifier = null;  ///
+
+    position = new Position(top, left, time, identifier); ///
+
+    return position;
+  }
+
+  match(position) {
+    const identifier = position.getIdentifier(),
+          matches = (this.identifier === identifier);
+
+    return matches;
+  }
+
+  static fromMouseEvent(mouseEvent) {
+    const { pageX, pageY } = mouseEvent,
+          top = pageY,  ///
+          left = pageX, ///
+          time = getTime(),
+          identifier = null,
+          position = new Position(top, left, time, identifier);
+
+    return position;
+  }
+
+  static fromTouchEvent(touchEvent) {
+    let position = null;
+
+    const { touches } = touchEvent,
+          touchesLength = touches.length;
+
+    if (touchesLength === 1) {
+      const firstTouch = first(touches),
+            touch = firstTouch, ///
+            { pageX, pageY, identifier } = touch,
+            top = pageY,
+            left = pageX,
+            time = getTime();
+
+      position = new Position(top, left, time, identifier);
+    }
+
+    return position;
+  }
+}
+
+function getTime() {
+  const time = Date.now();  ///
+
+  return time;
+}

package/src/utilities/element.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { SINGLE_SPACE } from "../constants";
+
+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();  ///
+
+  const { domElement: temporaryDOMElement } = element,
+        { className: classNamesString } = temporaryDOMElement,
+        classNames = classNamesString.split(SINGLE_SPACE);
+
+  const { classList } = domElement;
+
+  classNames.forEach((className) => {
+    classList.add(className);
+  });
+
+  element.domElement = domElement;  ///
+
+  domElement.__element__ = element; ///
+
+  return element;
+}

package/src/utilities/tree.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { arrayUtilities } from "necessary";
+
+const { filter } = arrayUtilities;
+
+export function leafNodesFromNodeList(nodeList) {
+  const nodes = [ ...nodeList ];
+
+  filter(nodes, (node) => {
+    const { childNodes: childNodeList } = node,
+          childNodes = [ ...childNodeList ],
+          childNodesIncludesNodes = nodes.some((node) => {
+            const childNodesIncludesNode = childNodes.includes(node);
+
+            if (childNodesIncludesNode) {
+              return true;
+            }
+          });
+
+    if (!childNodesIncludesNodes) {
+      return true;
+    }
+  });
+
+  const leafNodes = nodes;  ///
+
+  return leafNodes;
+}

package/src/velocity.js

@@ -0,0 +1,45 @@
+"use strict";
+
+export default class Velocity {
+  constructor(time, magnitude, direction) {
+    this.time = time;
+    this.magnitude = magnitude;
+    this.direction = direction;
+  }
+
+  getTime() {
+    return this.time;
+  }
+
+  getMagnitude() {
+    return this.magnitude;
+  }
+
+  getDirection() {
+    return this.direction;
+  }
+
+  getSpeed() {
+    const speed = (this.time === 0) ?
+                    0 : ///
+                      this.magnitude / this.time;
+
+    return speed;
+  }
+
+  getAbsoluteDirection() {
+    const absoluteDirection = Math.abs(this.direction);
+
+    return absoluteDirection;
+  }
+
+  static fromPositionAndStartPosition(position, startPosition) {
+    const relativePosition = position.minus(startPosition),
+          time = relativePosition.getTime(),
+          magnitude = relativePosition.getMagnitude(),
+          direction = relativePosition.getDirection(),
+          velocity = new Velocity(time, magnitude, direction);
+
+    return velocity;
+  }
+}

package/src/view/div/leaf.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import { Element } from "easy";
+
+import withStyle from "easy-with-style";  ///
+
+import eventMixins from "../../mixins/event";
+import touchMixins from "../../mixins/touch";
+
+class LeafDiv extends Element {
+  wiggle() {
+    this.removeClass("wiggle");
+    this.addClass("wiggle");
+  }
+
+  didMount() {
+    this.enableTouch();
+  }
+
+  willUnmount() {
+    this.disableTouch();
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "leaf"
+  };
+}
+
+Object.assign(LeafDiv.prototype, eventMixins);
+Object.assign(LeafDiv.prototype, touchMixins);
+
+export default withStyle(LeafDiv)`
+
+  width: 100vw;
+  position: absolute;
+  min-height: 100vh;
+  
+  @keyframes wiggle {
+    0% { transform: translateX(-5px); }
+    50% { transform: translateX(5px); }
+    100% { transform: translateX(-5px); }
+  }
+  
+  .wiggle {
+    animation: wiggle 0.5s ease-in-out 1;
+  }
+
+`;