Merge pull request #368 from nateplusplus/staging

Version 6 release

Author: nateplusplus

.eslintrc

@@ -33,7 +33,8 @@
       {
         "devDependencies": [
           "stories/**/*",
-          "**/*.spec.js"
+          "**/*.spec.js",
+          "rollup.config.js"
         ]
       }
     ]

.storybook/preview.js

@@ -1,3 +1,5 @@
+import './style.css';
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {

.storybook/style.css

@@ -0,0 +1,4 @@
+.sb-show-main.sb-main-padded {
+  padding-top: 0;
+  padding-bottom: 0;
+}

build/banner.js

@@ -7,3 +7,4 @@ export declare const PUSH_IN_DEFAULT_BREAKPOINTS: number[];
 export declare const PUSH_IN_LAYER_INDEX_ATTRIBUTE = "data-pushin-layer-index";
 export declare const PUSH_IN_DEFAULT_ASPECT_RATIO: number[];
 export declare const PUSH_IN_DEFAULT_TRANSITION_LENGTH = 200;
+export declare const PUSH_IN_DEFAULT_LAYER_DEPTH = 1000;

dist/esm/constants.d.ts

@@ -1,24 +1,24 @@
 export default abstract class PushInBase {
-    container: HTMLElement;
-    options: {
+    container?: HTMLElement | null;
+    settings: {
         [key: string]: any;
     };
     /**
      * Get the value for an option from either HTML markup or the JavaScript API.
      * Return a string or array of strings.
      */
-    getStringOption(name: string): string | string[];
+    getStringOption(name: string, container?: HTMLElement | null | undefined): string | string[];
     /**
      * Get the value for an option from either HTML markup or the JavaScript API.
      * Returns a number or array of numbers.
      * If nothing found, returns null.
      */
-    getNumberOption(name: string): number | number[] | null;
+    getNumberOption(name: string, container?: HTMLElement | null | undefined): number | number[] | null;
     /**
      * Get the value for an option from either HTML markup or the JavaScript API.
      * Returns a boolean or array of booleans.
      * If nothing found, returns null.
      */
-    getBoolOption(name: string): boolean | boolean[] | null;
+    getBoolOption(name: string, container?: HTMLElement | null | undefined): boolean | boolean[] | null;
     getAttributeName(name: string): string;
 }

dist/esm/pushInBase.d.ts

@@ -5,6 +5,8 @@ export declare class PushInComposition extends PushInBase {
     scene: PushInScene;
     options: CompositionOptions;
     constructor(scene: PushInScene, options: CompositionOptions);
+    start(): void;
+    setContainer(): void;
     /**
      * Set the aspect ratio based setting.
      */

dist/esm/pushInComposition.d.ts

@@ -1,15 +1,22 @@
 import { PushInScene } from './pushInScene';
 import PushInBase from './pushInBase';
-import { LayerOptions, LayerParams } from './types';
+import { LayerOptions, LayerSettings, LayerParams } from './types';
 export declare class PushInLayer extends PushInBase {
     container: HTMLElement;
     private index;
     scene: PushInScene;
-    options: LayerOptions;
     params: LayerParams;
     private originalScale;
     private ref;
+    settings: LayerSettings;
+    isFirst: boolean;
+    isLast: boolean;
     constructor(container: HTMLElement, index: number, scene: PushInScene, options: LayerOptions);
+    /**
+     * Set Accessibility features.
+     * Ensures layers are tabbable and their role is understood by screenreaders.
+     */
+    private setA11y;
     /**
      * Get the transitions setting, either from the API or HTML attributes.
      *
@@ -63,7 +70,7 @@ export declare class PushInLayer extends PushInBase {
      */
     private getElementScaleX;
     /**
-     * Whether or not a layer should currently be zooming.
+     * Whether or not a layer should currently be animated.
      */
     private isActive;
     /**
@@ -91,8 +98,23 @@ export declare class PushInLayer extends PushInBase {
      * as the user scrolls.
      */
     setLayerStyle(): void;
+    /**
+     * Check if the layer should be visible.
+     *
+     * @returns boolean
+     */
+    isVisible(): boolean;
     /**
      * Set a css class depending on current opacity.
      */
     setLayerVisibility(): void;
+    /**
+     * Set tabInpoints for this layer.
+     */
+    getTabInpoints(inpoints: number[]): number[];
+    /**
+     * Get the current tabInpoint for a layer,
+     * depending on window breakpoint.
+     */
+    private getTabInpoint;
 }

dist/esm/pushInLayer.d.ts

@@ -2,14 +2,34 @@ import { PushInComposition } from './pushInComposition';
 import { PushInLayer } from './pushInLayer';
 import { PushIn } from './pushin';
 import PushInBase from './pushInBase';
-import { SceneOptions } from './types';
+import { SceneSettings } from './types';
 export declare class PushInScene extends PushInBase {
     pushin: PushIn;
     layers: PushInLayer[];
     layerDepth: number;
-    options: SceneOptions;
+    settings: SceneSettings;
     composition?: PushInComposition;
+    layerCount: number;
     constructor(pushin: PushIn);
+    start(): void;
+    /**
+     * If there is not a pushin-scene element, create one.
+     */
+    setContainer(): void;
+    /**
+     * Get the AutoStart option if provided.
+     *
+     * Choices:
+     * - scroll (default)    Start effect on scroll.
+     * - screen-bottom       Start effect when target element top at viewport bottom.
+     * - screen-top          Start effect when target element top at viewport top.
+     */
+    setAutoStart(): void;
+    setLayerDepth(): void;
+    /**
+     * Setup composition for the scene.
+     */
+    setComposition(): void;
     /**
      * Set scene class names.
      */
@@ -46,4 +66,15 @@ export declare class PushInScene extends PushInBase {
      * @returns {number[]}
      */
     getInpoints(): number[];
+    /**
+     * Get the mode setting.
+     *
+     * @returns string
+     */
+    getMode(): string;
+    /**
+     * Update outpoints to match container height
+     * if using continuous mode and outpoint not specified.
+     */
+    updateOutpoints(): void;
 }

dist/esm/pushInScene.d.ts

@@ -0,0 +1,2 @@
+declare const pushInStyles = ".pushin {position: relative;}.pushin-scene {display: flex;align-items: center;position: fixed;left: 0;top: 0;width: 100%;height: 100vh;}.pushin-scene--with-target {top: 0;left: auto;height: auto;width: auto;pointer-events: none;overflow: hidden;position: sticky;}.pushin-scene--scroll-target-window {height: 100vh;}.pushin-composition {flex: 0 0 100%;padding-top: 201%;position: relative;}.pushin-layer {display: flex;align-items: center;flex-direction: column;justify-content: center;opacity: 0;pointer-events: none;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}.pushin-layer--visible * {pointer-events: auto;}.pushin-debug {background-color: white;border: 0;border-bottom: 1px;box-shadow: -2px 8px 19px 2px rgba(0, 0, 0, 0.26);padding: 1em;position: fixed;top: 0;width: 100%;-webkit-box-shadow: -2px 8px 19px 2px rgba(0, 0, 0, 0.26);z-index: 10;}@media (min-width: 768px) {.pushin-debug {border: 1px solid black;border-radius: 15px 0 0 15px;border-right: 0;right: 0;top: 50px;width: 250px;}}.pushin-debug__title {font-weight: bold;}";
+export default pushInStyles;