highmark-cli 0.0.138 → 0.0.140

package/src/createMethods.js

@@ -0,0 +1,66 @@
+"use strict";
+
+export default function createMethods(scheduler, model, view) {
+  function openMenu() {
+    view.openMenu();
+  }
+
+  function closeMenu() {
+    view.closeMenu();
+  }
+
+  function zoomMenuIn() {
+    view.zoomMenuIn();
+  }
+
+  function zoomMenuOut() {
+    view.zoomMenuOut();
+  }
+
+  function invertColours() {
+    view.invertColours();
+  }
+
+  function revertColours() {
+    view.revertColours();
+  }
+
+  function exitFullScreen() {
+    view.exitFullScreen();
+  }
+
+  function enterFullScreen() {
+    view.enterFullScreen();
+  }
+
+  function restoreNativeGestures() {
+    view.restoreNativeGestures();
+  }
+
+  function suppressNativeGestures() {
+    view.suppressNativeGestures();
+  }
+
+  function checkRestoreNativeGesturesCheckbox(checked) {
+    view.checkRestoreNativeGesturesCheckbox(checked);
+  }
+
+  function uncheckRestoreNativeGesturesCheckbox(checked) {
+    view.uncheckRestoreNativeGesturesCheckbox(checked);
+  }
+
+  return ({
+    openMenu,
+    closeMenu,
+    zoomMenuIn,
+    zoomMenuOut,
+    invertColours,
+    revertColours,
+    exitFullScreen,
+    enterFullScreen,
+    restoreNativeGestures,
+    suppressNativeGestures,
+    checkRestoreNativeGesturesCheckbox,
+    uncheckRestoreNativeGesturesCheckbox
+  });
+}

package/src/customEventTypes.js

@@ -6,6 +6,7 @@ export const DRAG_DOWN_CUSTOM_EVENT_TYPE = "drag-down";
 export const DRAG_LEFT_CUSTOM_EVENT_TYPE = "drag-left";
 export const DRAG_RIGHT_CUSTOM_EVENT_TYPE = "drag-right";
 export const DRAG_START_CUSTOM_EVENT_TYPE = "drag-start";
+export const DRAG_END_CUSTOM_EVENT_TYPE = "drag-end";
 export const SWIPE_UP_CUSTOM_EVENT_TYPE = "swipe-up";
 export const SWIPE_DOWN_CUSTOM_EVENT_TYPE = "swipe-down";
 export const SWIPE_LEFT_CUSTOM_EVENT_TYPE = "swipe-left";
@@ -13,3 +14,4 @@ export const SWIPE_RIGHT_CUSTOM_EVENT_TYPE = "swipe-right";
 export const PINCH_MOVE_CUSTOM_EVENT_TYPE = "pinch-move";
 export const PINCH_START_CUSTOM_EVENT_TYPE = "pinch-start";
 export const DOUBLE_TAP_CUSTOM_EVENT_TYPE = "double-tap";
+export const FULL_SCREEN_CHANGE_CUSTOM_EVENT_TYPE = "full-screen-change";

package/src/eventTypes.js

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

package/src/localStorage.js

@@ -0,0 +1,48 @@
+"use strict";
+
+import { STATE_KEY, LANDSCAPE_ORIENTATION, PORTRAIT_ORIENTATION } from "./constants";
+
+const viewZoom = {
+        [PORTRAIT_ORIENTATION]: 1,
+        [LANDSCAPE_ORIENTATION]: 1
+      },
+      menuDivZoom = {
+        [PORTRAIT_ORIENTATION]: 1,
+        [LANDSCAPE_ORIENTATION]: 1
+      },
+      fullScreenViewZoom = {
+        [PORTRAIT_ORIENTATION]: 1,
+        [LANDSCAPE_ORIENTATION]: 1
+      },
+      coloursInverted = false,
+      defaultPersistentState = {
+        viewZoom,
+        menuDivZoom,
+        fullScreenViewZoom,
+        coloursInverted
+      };
+
+export function getPersistentState() {
+  let persistentState;
+
+  const key = STATE_KEY,
+        value = localStorage.getItem(key);
+
+  if (value === null) {
+    persistentState = defaultPersistentState; ///
+  } else {
+    const persistentStateString = value;  ///
+
+    persistentState = JSON.parse(persistentStateString);
+  }
+
+  return persistentState;
+}
+
+export function setPersistentState(persistentState) {
+  const persistentStateString = JSON.stringify(persistentState),
+        key = STATE_KEY,
+        value = persistentStateString;  ///
+
+  localStorage.setItem(key, value);
+}

package/src/mixins/fullsrean.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import { isFullScreen } from "../utilities/fullScreen";
+import { FULLSCREENCHANGE_EVENT_TYPE } from "../eventTypes";
+import { FULL_SCREEN_CHANGE_CUSTOM_EVENT_TYPE } from "../customEventTypes";
+
+function enableFullScreen() {
+  this.onFullscreenchange(this.fullscreenchangeHandler);
+}
+
+function disableFullScreen() {
+  this.offFullscreenchange(this.fullscreenchangeHandler);
+}
+
+function exitFullScreen() {
+  document.exitFullscreen();
+}
+
+function requestFullScreen() {
+  const domElement = this.getDOMElement();
+
+  domElement.requestFullscreen()
+    .catch((error) => {
+      alert(error);
+    });
+}
+
+function onFullscreenchange(fullscreenchangeHandler) {
+  const eventType = FULLSCREENCHANGE_EVENT_TYPE,
+        handler = fullscreenchangeHandler;  ///
+
+  this.onEvent(eventType, handler);
+}
+
+function offFullscreenchange(fullscreenchangeHandler) {
+  const eventType = FULLSCREENCHANGE_EVENT_TYPE,
+        handler = fullscreenchangeHandler;  ///
+
+  this.offEvent(eventType, handler);
+}
+
+function fullscreenchangeHandler(event, element) {
+  const customEventType = FULL_SCREEN_CHANGE_CUSTOM_EVENT_TYPE;
+
+  this.callCustomHandlers(customEventType, event, element);
+}
+
+function onCustomFullScreenChange(fullScreenChangeCustomHandler, element) {
+  const customEventType = FULL_SCREEN_CHANGE_CUSTOM_EVENT_TYPE,
+        customHandler = fullScreenChangeCustomHandler; ///
+
+  this.onCustomEvent(customEventType, customHandler, element);
+}
+
+function offCustomFullScreenChange(fullScreenChangeCustomHandler, element) {
+  const customEventType = FULL_SCREEN_CHANGE_CUSTOM_EVENT_TYPE,
+        customHandler = fullScreenChangeCustomHandler; ///
+
+  this.offCustomEvent(customEventType, customHandler, element);
+}
+
+const fullScreenMixins = {
+  enableFullScreen,
+  disableFullScreen,
+  isFullScreen,
+  exitFullScreen,
+  requestFullScreen,
+  onFullscreenchange,
+  offFullscreenchange,
+  fullscreenchangeHandler,
+  onCustomFullScreenChange,
+  offCustomFullScreenChange
+};
+
+export default fullScreenMixins;

package/src/mixins/touch.js

@@ -14,6 +14,7 @@ import { TAP_CUSTOM_EVENT_TYPE,
          DRAG_LEFT_CUSTOM_EVENT_TYPE,
          DRAG_RIGHT_CUSTOM_EVENT_TYPE,
          DRAG_START_CUSTOM_EVENT_TYPE,
+         DRAG_END_CUSTOM_EVENT_TYPE,
          SWIPE_UP_CUSTOM_EVENT_TYPE,
          SWIPE_DOWN_CUSTOM_EVENT_TYPE,
          SWIPE_LEFT_CUSTOM_EVENT_TYPE,
@@ -28,13 +29,15 @@ function enableTouch() {
   const tapInterval = null,
         startMagnitude = null,
         startPositions = [],
-        movingPositions = [];
+        movingPositions = [],
+        customGesturesEnabled = true;
 
   this.updateState({
     tapInterval,
     startMagnitude,
     startPositions,
-    movingPositions
+    movingPositions,
+    customGesturesEnabled
   });
 
   this.onMouseDown(this.mouseDownHandler);
@@ -184,6 +187,20 @@ function offCustomDragStart(dragStartCustomHandler, element) {
   this.offCustomEvent(customEventType, customHandler, element);
 }
 
+function onCustomDragEnd(dragEndCustomHandler, element) {
+  const customEventType = DRAG_END_CUSTOM_EVENT_TYPE,
+        customHandler = dragEndCustomHandler; ///
+
+  this.onCustomEvent(customEventType, customHandler, element);
+}
+
+function offCustomDragEnd(dragEndCustomHandler, element) {
+  const customEventType = DRAG_END_CUSTOM_EVENT_TYPE,
+        customHandler = dragEndCustomHandler; ///
+
+  this.offCustomEvent(customEventType, customHandler, element);
+}
+
 function onCustomSwipeUp(swipeUpCustomHandler, element) {
   const customEventType = SWIPE_UP_CUSTOM_EVENT_TYPE,
         customHandler = swipeUpCustomHandler; ///
@@ -306,6 +323,18 @@ function setStartMagnitude(startMagnitude) {
   });
 }
 
+function areCustomGesturesEnabled() {
+  const { customGesturesEnabled } = this.getState();
+
+  return customGesturesEnabled;
+}
+
+function setCustonGesturesEnabled(customGesturesEnabled) {
+  this.updateState({
+    customGesturesEnabled
+  });
+}
+
 function getStartPositions() {
   const { startPositions } = this.getState();
 
@@ -442,12 +471,16 @@ function endHandler(event, element, positionsFromEvent) {
     const startPositionsLength = startPositions.length,
           movingPositionsLength = movingPositions.length;
 
-    if (movingPositionsLength === 0) {
-      this.tapOrDoubleTap(event, element);
-    } else if (startPositionsLength === 1) {
-      this.possibleTap(event, element);
+    if (startPositionsLength === 1) {
+      if (movingPositionsLength === 0) {
+        this.tapOrDoubleTap(event, element);
+      } else {
+        this.dragEnd(event, element);
+
+        this.possibleTap(event, element);
 
-      this.possibleSwipe(event, element);
+        this.possibleSwipe(event, element);
+      }
     }
   }
 
@@ -456,16 +489,10 @@ function endHandler(event, element, positionsFromEvent) {
   filterPositions(movingPositions, positions);
 }
 
-function tap(event, element) {
-  const elementTarget = isElementTarget(event, element);
-
-  if (!elementTarget) {
-    return;
-  }
-
+function tap(event, element, top, left) {
   const customEventType = TAP_CUSTOM_EVENT_TYPE;
 
-  this.callCustomHandlers(customEventType, event, element);
+  this.callCustomHandlers(customEventType, event, element, top, left); ///
 }
 
 function drag(event, element) {
@@ -499,7 +526,7 @@ function drag(event, element) {
   }
 
   if (customEventType !== null) {
-    this.callCustomHandlers(customEventType, event, element, top, left);
+    this.callCustomHandlersConditionally(customEventType, event, element, top, left);
   }
 }
 
@@ -513,7 +540,7 @@ function pinch(event, element) {
         magnitude = relativeMovingPosition.getMagnitude(),
         ratio = magnitude / startMagnitude;
 
-  this.callCustomHandlers(customEventType, event, element, ratio);
+  this.callCustomHandlersConditionally(customEventType, event, element, ratio);
 }
 
 function swipe(event, element, speed, direction) {
@@ -550,20 +577,31 @@ function swipe(event, element, speed, direction) {
           top = startPosition.getTop(),
           left = startPosition.getLeft();
 
-    this.callCustomHandlers(customEventType, event, element, top, left, speed);
+    this.callCustomHandlersConditionally(customEventType, event, element, top, left, speed);
   }
 }
 
-function doubleTap(event, element) {
+function doubleTap(event, element, top, left) {
   const customEventType = DOUBLE_TAP_CUSTOM_EVENT_TYPE;
 
-  this.callCustomHandlers(customEventType, event, element);
+  this.callCustomHandlersConditionally(customEventType, event, element, top, left);
+}
+
+function dragEnd(event, element) {
+  const customEventType = DRAG_END_CUSTOM_EVENT_TYPE;
+
+  this.callCustomHandlersConditionally(customEventType, event, element);
 }
 
 function dragStart(event, element) {
-  const customEventType = DRAG_START_CUSTOM_EVENT_TYPE;
+  const customEventType = DRAG_START_CUSTOM_EVENT_TYPE,
+        startPositions = this.getStartPositions(),
+        firstStartPosition = first(startPositions),
+        startPosition = firstStartPosition,  ///
+        top = startPosition.getTop(),
+        left = startPosition.getLeft();
 
-  this.callCustomHandlers(customEventType, event, element);
+  this.callCustomHandlersConditionally(customEventType, event, element, top, left);
 }
 
 function pinchStart(event, element) {
@@ -577,7 +615,7 @@ function pinchStart(event, element) {
 
   this.setStartMagnitude(startMagnitude);
 
-  this.callCustomHandlers(customEventType, event, element);
+  this.callCustomHandlersConditionally(customEventType, event, element);
 }
 
 function possibleTap(event, element) {
@@ -613,6 +651,12 @@ function possibleSwipe(event, element) {
 }
 
 function tapOrDoubleTap(event, element) {
+  const startPositions = this.getStartPositions(),
+        firstStartPosition = first(startPositions),
+        startPosition = firstStartPosition, ///
+        top = startPosition.getTop(),
+        left = startPosition.getLeft();
+
   let tapInterval = this.getTapInterval();
 
   if (tapInterval !== null) {
@@ -622,7 +666,7 @@ function tapOrDoubleTap(event, element) {
 
     this.setTapInterval(tapInterval);
 
-    this.doubleTap(event, element);
+    this.doubleTap(event, element, top, left);
 
     return;
   }
@@ -632,12 +676,32 @@ function tapOrDoubleTap(event, element) {
 
     this.setTapInterval(tapInterval);
 
-    this.tap(event, element);
+    this.tap(event, element, top, left);
   }, TAP_DELAY);
 
   this.setTapInterval(tapInterval);
 }
 
+function enableCustomGestures() {
+  const customGesturedEnabled = true;
+
+  this.setCustonGesturesEnabled(customGesturedEnabled);
+}
+
+function disableCustomGestures() {
+  const customGesturedEnabled = false;
+
+  this.setCustonGesturesEnabled(customGesturedEnabled);
+}
+
+function callCustomHandlersConditionally(customEventType, event, element, ...remainingArguments) {
+  const customGesturesEnabled = this.areCustomGesturesEnabled();
+
+  if (customGesturesEnabled) {
+    this.callCustomHandlers(customEventType, event, element, ...remainingArguments);
+  }
+}
+
 const touchMixins = {
   enableTouch,
   disableTouch,
@@ -659,6 +723,8 @@ const touchMixins = {
   offCustomDragRight,
   onCustomDragStart,
   offCustomDragStart,
+  onCustomDragEnd,
+  offCustomDragEnd,
   onCustomSwipeUp,
   offCustomSwipeUp,
   onCustomSwipeDown,
@@ -679,6 +745,8 @@ const touchMixins = {
   setStartMagnitude,
   getStartPositions,
   setStartPositions,
+  areCustomGesturesEnabled,
+  setCustonGesturesEnabled,
   getMovingPositions,
   setMovingPositions,
   touchStartHandler,
@@ -695,24 +763,15 @@ const touchMixins = {
   pinch,
   swipe,
   doubleTap,
+  dragEnd,
   dragStart,
   pinchStart,
   possibleTap,
   possibleSwipe,
-  tapOrDoubleTap
+  tapOrDoubleTap,
+  enableCustomGestures,
+  disableCustomGestures,
+  callCustomHandlersConditionally
 };
 
 export default touchMixins;
-
-function isElementTarget(event, element) {
-  if (element === window) {
-    debugger
-  }
-
-  const { target } = event,
-        domElement = element.getDOMElement(),
-        domElementTarget = (domElement === target),
-        elementTarget = domElementTarget;  ///
-
-  return elementTarget;
-}

package/src/selectors.js

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

package/src/state.js

@@ -0,0 +1,130 @@
+"use strict";
+
+import { isFullScreen } from "./utilities/fullScreen";
+import { getPersistentState, setPersistentState } from "./localStorage";
+import {PORTRAIT_ORIENTATION} from "./constants";
+
+const orientation = null,
+      state = {
+        orientation
+      };
+
+export function getViewZoom() {
+  stateFromPersistentState();
+
+  const fullScreen = isFullScreen(),
+        orientation = getOrientation();
+
+  let viewZoom;
+
+  if (fullScreen) {
+    ({ fullScreenViewZoom: viewZoom } = state);
+  } else {
+    ({ viewZoom } = state);
+  }
+
+  const orientedViewZoom = viewZoom[orientation]; ///
+
+  viewZoom = orientedViewZoom;  ///
+
+  return viewZoom;
+}
+
+export function setViewZoom(viewZoom) {
+  stateFromPersistentState();
+
+  const fullScreen = isFullScreen(),
+        orientation = getOrientation();
+
+  const orientedViewZoom = viewZoom;  ///
+
+  if (fullScreen) {
+    ({ fullScreenViewZoom: viewZoom } = state);
+  } else {
+    ({ viewZoom } = state);
+  }
+
+  Object.assign(viewZoom, {
+    [orientation]: orientedViewZoom
+  });
+
+  stateToPersistentState();
+}
+
+export function getMenuDivZoom() {
+  stateFromPersistentState();
+
+  let menuDivZoom;
+
+  ({ menuDivZoom } = state);
+
+  const { orientation } = state,
+        orientedMenuDivZoom = menuDivZoom[orientation]; ///
+
+  menuDivZoom = orientedMenuDivZoom;  ///
+
+  return menuDivZoom;
+}
+
+export function setMenuDivZoom(menuDivZoom) {
+  stateFromPersistentState();
+
+  const { orientation } = state,
+        orientedMenuDivZoom = menuDivZoom;  ///
+
+  ({ menuDivZoom } = state);
+
+  Object.assign(menuDivZoom, {
+    [orientation]: orientedMenuDivZoom
+  });
+
+  stateToPersistentState();
+}
+
+export function getOrientation() {
+  const { orientation } = state;
+
+  return orientation;
+}
+
+export function setOrientation(orientation) {
+  Object.assign(state, {
+    orientation
+  });
+}
+
+export function areColoursInverted() {
+  stateFromPersistentState();
+
+  const { coloursInverted } = state;
+
+  return coloursInverted;
+}
+
+export function setColoursInverted(coloursInverted) {
+  stateFromPersistentState();
+
+  Object.assign(state, {
+    coloursInverted
+  });
+
+  stateToPersistentState();
+}
+
+function stateToPersistentState() {
+  const { viewZoom, menuDivZoom, fullScreenViewZoom, coloursInverted } = state,
+        persistentState = {
+          viewZoom,
+          menuDivZoom,
+          fullScreenViewZoom,
+          coloursInverted
+        };
+
+  setPersistentState(persistentState);
+}
+
+function stateFromPersistentState() {
+  const persistentState = getPersistentState();
+
+  Object.assign(state, persistentState);
+}

package/src/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+export const svgFill = "#fff";
+export const buttonSize = "64px";
+export const spanColour = "#fff";
+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,7 +1,5 @@
 "use strict";
 
-import { SINGLE_SPACE } from "../constants";
-
 export function elementsFromDOMElements(domElements, Element) {
   const elements = domElements.map((domElement) => {
     const element = elementFromDOMElement(domElement, Element);
@@ -13,22 +11,14 @@ export function elementsFromDOMElements(domElements, Element) {
 }
 
 export function elementFromDOMElement(domElement, Element) {
-  const element = <Element/>;
+  const element =
 
-  const { domElement: temporaryDOMElement } = element,
-        { className: classNamesString } = temporaryDOMElement,
-        classNames = classNamesString.split(SINGLE_SPACE);
+          <Element/>
 
-  const { classList } = domElement,
-        { childNodes } = temporaryDOMElement;
+        ,
+        className = classNameFromElement(element);
 
-  childNodes.forEach((childNode) => {
-    domElement.appendChild(childNode);
-  });
-
-  classNames.forEach((className) => {
-    classList.add(className);
-  });
+  addClassNameToDOMElement(domElement, className)
 
   element.domElement = domElement;  ///
 
@@ -36,3 +26,16 @@ export function elementFromDOMElement(domElement, Element) {
 
   return element;
 }
+
+function classNameFromElement(element) {
+  const domElement = element.getDOMElement(),
+        { className } = domElement;
+
+  return className;
+}
+
+function addClassNameToDOMElement(domElement, className) {
+  const { classList } = domElement;
+
+  classList.add(className);
+}

package/src/utilities/fullScreen.js

@@ -0,0 +1,8 @@
+"use strict";
+
+export function isFullScreen() {
+  const { fullscreenElement } = document,
+        fullScreen =(fullscreenElement !== null);
+
+  return fullScreen;
+}