highmark-cli 0.0.144 → 0.0.146

package/src/createMethods.js

@@ -56,14 +56,16 @@ export default function createMethods(scheduler, model, view) {
 
   function exitFullScreen() {
     view.exitFullScreen();
-
-    view.updateFullScreenCheckboxDiv();
   }
 
   function enterFullScreen() {
-    view.enterFullScreen(() => {
-      view.updateFullScreenCheckboxDiv();
-    });
+    view.enterFullScreen();
+  }
+
+  function updateFullScreen() {
+    view.closeMenu();
+
+    view.updateFullScreenCheckboxDiv();
   }
 
   function restoreNativeGestures() {
@@ -96,6 +98,7 @@ export default function createMethods(scheduler, model, view) {
     revertColours,
     exitFullScreen,
     enterFullScreen,
+    updateFullScreen,
     restoreNativeGestures,
     suppressNativeGestures
   });

package/src/mixins/fullsrean.js

@@ -16,11 +16,10 @@ function exitFullScreen() {
   document.exitFullscreen();
 }
 
-function requestFullScreen(callback) {
+function requestFullScreen() {
   const domElement = this.getDOMElement();
 
   domElement.requestFullscreen()
-    .then(callback)
     .catch(alert);
 }
 

package/src/selectors.js

@@ -1,4 +1,5 @@
 "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/utilities/element.js

@@ -1,5 +1,7 @@
 "use strict";
 
+import { DIV_SELECTOR } from "../selectors";
+
 export function elementsFromDOMElements(domElements, Element) {
   const elements = domElements.map((domElement) => {
     const element = elementFromDOMElement(domElement, Element);
@@ -27,6 +29,29 @@ export function elementFromDOMElement(domElement, 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;
@@ -38,4 +63,4 @@ function addClassNameToDOMElement(domElement, className) {
   const { classList } = domElement;
 
   classList.add(className);
-}
+}

package/src/utilities/fragment.js

@@ -0,0 +1,20 @@
+"use strict";
+
+import { HASH, EMPTY_STRING } from "../constants";
+
+export function resetFragment() {
+  let { href } = location;
+
+  const index = href.indexOf(HASH);
+
+  if (index === -1) {
+    return;
+  }
+
+  const start = 0,
+    end = index;  ///
+
+  href = href.substring(start, end); ///
+
+  history.replaceState({}, EMPTY_STRING, href);
+}

package/src/view/div/overlay.js

@@ -3,7 +3,7 @@
 import withStyle from "easy-with-style";  ///
 
 import { window } from "easy";
-import { keyCodes, arrayUtilities } from "necessary";
+import { keyCodes } from "necessary";
 
 import Div from "../div";
 import Element from "../element";
@@ -11,12 +11,13 @@ import touchMixins from "../../mixins/touch";
 import fullScreenMixins from "../../mixins/fullsrean";
 
 import { isFullScreen } from "../../utilities/fullScreen";
+import { resetFragment } from "../../utilities/fragment";
 import { elementsFromDOMElements } from "../../utilities/element";
+import { scrollToAnchor, findDivByAnchorId } from "../../utilities/element";
 import { getOverlayZoom as getZoom, areColoursInverted, areNativeGesturesRestored } from "../../state";
 import { SCROLL_DELAY, UP_DIRECTION, DECELERATION, DOWN_DIRECTION, OPEN_MENU_TAP_AREA_HEIGHT } from "../../constants";
 
-const { first } = arrayUtilities,
-      { ENTER_KEY_CODE,
+const { ENTER_KEY_CODE,
         ESCAPE_KEY_CODE,
         BACKSPACE_KEY_CODE,
         ARROW_UP_KEY_CODE,
@@ -26,7 +27,7 @@ const { first } = arrayUtilities,
 
 class OverlayDiv extends Element {
   fullScreenChangeCustomHandler = (event, element) => {
-    controller.closeMenu();
+    controller.updateFullScreen();
 
     this.updateOverlayZoom();
   }
@@ -140,7 +141,13 @@ class OverlayDiv extends Element {
       }
 
       case ESCAPE_KEY_CODE: {
-        controller.exitFullScreen();
+        const fullScreen = isFullScreen();
+
+        if (fullScreen) {
+          controller.exitFullScreen();
+        }
+
+        controller.closeMenu();
 
         break;
       }
@@ -159,6 +166,26 @@ class OverlayDiv extends Element {
     }
   }
 
+  scrollToAnchor(anchorId) {
+    let div;
+
+    div = findDivByAnchorId(anchorId);
+
+    const nextDiv = div;  ///
+
+    div = this.findDiv();
+
+    const previousDiv = div;  ///
+
+    const divs = this.getDivs(),
+          nextIndex = divs.indexOf(nextDiv),  ///
+          previousIndex = divs.indexOf(previousDiv);  ///
+
+    this.showNextDiv(nextIndex, previousIndex, () => {
+      scrollToAnchor(anchorId);
+    });
+  }
+
   scrollToTop() {
     const scrollTop = 0;
 
@@ -211,8 +238,8 @@ class OverlayDiv extends Element {
     this.setInterval(interval);
   }
 
-  enterFullScreen(callback) {
-    this.requestFullScreen(callback);
+  enterFullScreen() {
+    this.requestFullScreen();
   }
 
   updateOverlayZoom() {
@@ -228,20 +255,18 @@ class OverlayDiv extends Element {
     coloursInverted ?
       this.addClass("inverted-colours") :
         this.removeClass("inverted-colours");
-
-    this.updateOverlayZoom();
   }
 
   updateNativeGestures() {
-    // const nativeGesturesRestored = areNativeGesturesRestored();
-    //
-    // nativeGesturesRestored ?
-    //   this.addClass("native-gestures") :
-    //     this.removeClass("native-gestures");
-    //
-    // nativeGesturesRestored ?
-    //   this.disableCustomGestures() :
-    //     this.enableCustomGestures();
+    const nativeGesturesRestored = areNativeGesturesRestored();
+
+    nativeGesturesRestored ?
+      this.addClass("native-gestures") :
+        this.removeClass("native-gestures");
+
+    nativeGesturesRestored ?
+      this.disableCustomGestures() :
+        this.enableCustomGestures();
   }
 
   areNativeGesturesRestored() {
@@ -282,53 +307,65 @@ class OverlayDiv extends Element {
   showLastDiv() {
     const div = this.findDiv(),
           divs = this.getDivs(),
-          index = divs.indexOf(div),
           divsLength = divs.length,
+          index = (div === null) ?
+                    -1 :
+                      divs.indexOf(div),
           nextIndex = divsLength - 1,
-          previousIndex = (index === -1) ?
-                            nextIndex : ///
-                              index;  ///
+          previousIndex = index;  ///
+
+    if (nextIndex === previousIndex) {
+      return;
+    }
 
     this.showNextDiv(nextIndex, previousIndex);
   }
 
-  showNextDiv(nextIndex, previousIndex) {
-    const zoom = getZoom(),
+  showFirstDiv() {
+    const div = this.findDiv(),
           divs = this.getDivs(),
-          nextDiv = divs[nextIndex],
-          previousDiv = divs[previousIndex];
-
-    this.stopScrolling();
+          index = (div === null) ?
+                    -1 :
+                      divs.indexOf(div),
+          nextIndex = 0,
+          previousIndex = index;  ///
 
-    this.scrollToTop();
+    if (nextIndex === previousIndex) {
+      return;
+    }
 
-    this.remove(previousDiv);
+    this.showNextDiv(nextIndex, previousIndex);
+  }
 
-    this.add(nextDiv);
+  showNextDiv(nextIndex, previousIndex, done = () => {}) {
+    resetFragment();
 
-    nextDiv.zoom(zoom);
+    const divs = this.getDivs();
 
-    setTimeout(() => {
-      const backgroundColour = nextDiv.getBackgroundColour();
+    if (previousIndex !== -1) {
+      const previousDiv = divs[previousIndex];
 
-      this.setBackgroundColour(backgroundColour);
-    }, 0);
-  }
+      previousDiv.hide();
+    }
 
-  showFirstDiv() {
     const zoom = getZoom(),
-          divs = this.getDivs(),
-          firstDiv = first(divs);
+          nextDiv = divs[nextIndex];
 
-    this.add(firstDiv);
+    this.stopScrolling();
 
-    firstDiv.zoom(zoom);
+    this.scrollToTop();
 
-    setTimeout(() => {
-      const backgroundColour = firstDiv.getBackgroundColour();
+    nextDiv.zoom(zoom);
+
+    nextDiv.show();
+
+    defer(() => {
+      const backgroundColour = nextDiv.getBackgroundColour();
 
       this.setBackgroundColour(backgroundColour);
-    }, 0);
+
+      done();
+    });
   }
 
   setBackgroundColour(backgroundColour) {
@@ -343,28 +380,23 @@ class OverlayDiv extends Element {
   findDiv() {
     const divs = this.getDivs(),
           div = divs.find((div) => {
-            const added = div.isAdded();
+            const showing = div.isShowing();
 
-            if (added) {
+            if (showing) {
               return true;
             }
-          });
+          }) || null;
 
     return div;
   }
 
   getDivs() {
-    const { divs } = this.getState();
+    const childElements = this.getChildElements(),
+          divs = childElements; ///
 
     return divs;
   }
 
-  setDivs(divs) {
-    this.updateState({
-      divs
-    });
-  }
-
   getInterval() {
     const { interval } = this.getState();
 
@@ -402,13 +434,11 @@ class OverlayDiv extends Element {
   }
 
   setInitialState() {
-    const divs = this.createDivs(),
-          interval = null,
+    const interval = null,
           startZoom = null,
           startScrollTop = null;
 
     this.setState({
-      divs,
       interval,
       startZoom,
       startScrollTop
@@ -459,21 +489,28 @@ class OverlayDiv extends Element {
     window.offKeyDown(this.keyDownHandler);
   }
 
-  createDivs() {
+  childElements() {
     const { divDOMElements } = this.properties,
-          divs = elementsFromDOMElements(divDOMElements, Div);
+          divs = elementsFromDOMElements(divDOMElements, Div),
+          childElements = [
+            ...divs
+          ];
 
-    return divs;
+    return childElements;
   }
 
   parentContext() {
-    const exitFullScreen = this.exitFullScreen.bind(this),
+    const showFirstDiv = this.showFirstDiv.bind(this),
+          scrollToAnchor = this.scrollToAnchor.bind(this),
+          exitFullScreen = this.exitFullScreen.bind(this),
           enterFullScreen = this.enterFullScreen.bind(this),
           updateOverlayZoom = this.updateOverlayZoom.bind(this),
           updateOverlayColours = this.updateOverlayColours.bind(this),
           updateNativeGestures = this.updateNativeGestures.bind(this);
 
     return ({
+      showFirstDiv,
+      scrollToAnchor,
       exitFullScreen,
       enterFullScreen,
       updateOverlayZoom,
@@ -486,8 +523,6 @@ class OverlayDiv extends Element {
     this.assignContext();
 
     this.setInitialState();
-
-    this.showFirstDiv();
   }
 
   static tagName = "div";
@@ -522,3 +557,7 @@ export default withStyle(OverlayDiv)`
   }
     
 `;
+
+function defer(func) {
+  setTimeout(func, 0);
+}

package/src/view/div.js

@@ -13,14 +13,6 @@ class Div extends Element {
     return backgroundColour;
   }
 
-  isAdded() {
-    const domElement = this.getDOMElement(),
-          { parentNode } = domElement,
-          added = (parentNode !== null);
-
-    return added;
-  }
-
   zoom(zoom) {
     const zoomRatio = 100 / zoom,
           width = `${zoomRatio}%`,
@@ -36,6 +28,14 @@ class Div extends Element {
     this.css(css);
   }
 
+  didMount() {
+    this.hide();
+  }
+
+  willUnmount() {
+    ///
+  }
+
   static tagName = "div";
 }
 

package/src/view.js

@@ -14,8 +14,8 @@ class View extends Element {
   }
 
   didMount() {
-    this.updateMenuZoom();
-    this.updateOverlayZoom();
+    this.show();
+
     this.updateOverlayColours();
     this.updateNativeGestures();
     this.updateFullScreenCheckboxDiv();
@@ -41,8 +41,6 @@ class View extends Element {
 
   initialise() {
     this.assignContext();
-
-    this.show();
   }
 
   static tagName = "div";