Skip to content

Commit ed0484a

Browse files
nateplusplusnateplusplus
authored
Merge pull request #366 from nateplusplus/v6
Version 6 release
2 parents 587e8d9 + 09d99c0 commit ed0484a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+2094
-889
lines changed

‎.storybook/preview.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import './style.css';
2+
13
export const parameters = {
24
actions: { argTypesRegex: '^on[A-Z].*' },
35
controls: {

‎.storybook/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.sb-show-main.sb-main-padded {
2+
padding-top: 0;
3+
padding-bottom: 0;
4+
}

‎README.md‎

Lines changed: 5 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -14,131 +14,15 @@ Check out the [live demo](http://pushinjs.com/) for a working example.
1414

1515
## Compatibility
1616

17-
PushIn.js supports all browsers that are [ES5-compliant](http://kangax.github.io/compat-table/es5/) (IE8 and below are not supported).
17+
PushIn.js supports all browsers that are [ES5-compliant](http://kangax.github.io/compat-table/es5/).
1818

19-
## Getting started
19+
## Installation
2020

21-
### 1. Install pushin with NPM or a CDN
21+
PushIn is available via NPM or a CDN. Follow the detailed instructions in the documentation site: https://pushinjs.com/installation.
2222

23-
If you're using npm, you can install the package by running:
23+
## Configuration
2424

25-
```
26-
npm install --save pushin
27-
```
28-
29-
Import assets into your javascript (if using Webpack) or directly into your CSS files.
30-
31-
```js
32-
// webpack
33-
import 'pushin/dist/pushin.css';
34-
```
35-
36-
~ _or_ ~
37-
38-
```css
39-
/* css */
40-
@import 'node_modules/pushin/dist/pushin.css';
41-
```
42-
43-
**Alternatively, you can use the CDN:**
44-
45-
```html
46-
<link rel="stylesheet" href="https://unpkg.com/pushin/dist/pushin.min.css" />
47-
<script
48-
type="text/javascript"
49-
src="https://unpkg.com/pushin/dist/umd/pushin.min.js"
50-
></script>
51-
```
52-
53-
### 2. Required HTML structure
54-
55-
At the most basic level, there are a few things you need to set up on your page in order for this to work properly.
56-
57-
Use the following example snippet to create a "scene" for the pushin effect.
58-
59-
**Example:**
60-
61-
```html
62-
<div class="pushin">
63-
<div class="pushin-scene">
64-
<div class="pushin-layer">This is the first layer you'll see.</div>
65-
<div class="pushin-layer">
66-
This is a second layer, which will be positioned behind the first one.
67-
</div>
68-
</div>
69-
</div>
70-
```
71-
72-
Each div with the class `pushin-layer` can hold the content that you want to grow or shrink when scrolling.
73-
74-
### 3. Initialize the effect
75-
76-
Once you have your HTML set up, there are two ways to initialize the effect:
77-
78-
- call `new PushIn().start()`:
79-
80-
```js
81-
import { PushIn } from 'pushin';
82-
83-
const container = document.querySelector('.pushin');
84-
new PushIn(container).start();
85-
```
86-
87-
- call `pushInStart()` function (which is exported onto the global scope):
88-
89-
```js
90-
import 'pushin';
91-
92-
pushInStart();
93-
```
94-
95-
To assist in setting up your effect, you can use the debug tool to easily deterimine where you want effects to begin and end when scrolling down your page. To enable this feature, simply pass a config object with `debug: true` into the helper function.
96-
97-
See a working demo of this tool here: [Responsive design](https://pushinjs.com/examples/responsive)
98-
99-
```js
100-
import 'pushin';
101-
102-
// initialize push-in effect
103-
pushInStart({ debug: true });
104-
```
105-
106-
### 4. Destroying the effect
107-
108-
The `PushIn` has a `destroy()` method that may be called to do all cleanups once the view is destroyed. For instance, this is how you would want to do this in React:
109-
110-
```jsx
111-
import React, { useLayoutEffect, useRef } from 'react';
112-
import { PushIn } from 'pushin';
113-
114-
export default function PushInComponent() {
115-
const pushInContainer = useRef();
116-
117-
useLayoutEffect(() => {
118-
const pushIn = new PushIn(pushInContainer.current);
119-
pushIn.start();
120-
121-
return () => pushIn.destroy();
122-
});
123-
124-
return (
125-
<div className="pushin" ref={pushInContainer}>
126-
<div className="pushin-scene">
127-
<div className="pushin-layer">This is the first layer you'll see.</div>
128-
<div className="pushin-layer">
129-
This is a second layer, which will be positioned behind the first one.
130-
</div>
131-
</div>
132-
</div>
133-
);
134-
}
135-
```
136-
137-
### 5. Configuration
138-
139-
There are several plugin configurations you can use to customize for your unique project.
140-
141-
**Refer to [https://pushinjs.com/api](https://pushinjs.com/api) for a detailed breakdown of all available configurations.**
25+
There are several plugin configurations you can use to customize for your unique project. Refer to [https://pushinjs.com/api](https://pushinjs.com/api) for a detailed breakdown of all available configurations.
14226

14327
## Contributing
14428

‎dist/esm/constants.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export declare const PUSH_IN_DEFAULT_BREAKPOINTS: number[];
77
export declare const PUSH_IN_LAYER_INDEX_ATTRIBUTE = "data-pushin-layer-index";
88
export declare const PUSH_IN_DEFAULT_ASPECT_RATIO: number[];
99
export declare const PUSH_IN_DEFAULT_TRANSITION_LENGTH = 200;
10+
export declare const PUSH_IN_DEFAULT_LAYER_DEPTH = 1000;

‎dist/esm/pushInBase.d.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
export default abstract class PushInBase {
2-
container: HTMLElement;
3-
options: {
2+
container?: HTMLElement | null;
3+
settings: {
44
[key: string]: any;
55
};
66
/**
77
* Get the value for an option from either HTML markup or the JavaScript API.
88
* Return a string or array of strings.
99
*/
10-
getStringOption(name: string): string | string[];
10+
getStringOption(name: string, container?: HTMLElement | null | undefined): string | string[];
1111
/**
1212
* Get the value for an option from either HTML markup or the JavaScript API.
1313
* Returns a number or array of numbers.
1414
* If nothing found, returns null.
1515
*/
16-
getNumberOption(name: string): number | number[] | null;
16+
getNumberOption(name: string, container?: HTMLElement | null | undefined): number | number[] | null;
1717
/**
1818
* Get the value for an option from either HTML markup or the JavaScript API.
1919
* Returns a boolean or array of booleans.
2020
* If nothing found, returns null.
2121
*/
22-
getBoolOption(name: string): boolean | boolean[] | null;
22+
getBoolOption(name: string, container?: HTMLElement | null | undefined): boolean | boolean[] | null;
2323
getAttributeName(name: string): string;
2424
}

‎dist/esm/pushInComposition.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ export declare class PushInComposition extends PushInBase {
55
scene: PushInScene;
66
options: CompositionOptions;
77
constructor(scene: PushInScene, options: CompositionOptions);
8+
start(): void;
9+
setContainer(): void;
810
/**
911
* Set the aspect ratio based setting.
1012
*/

‎dist/esm/pushInLayer.d.ts‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
import { PushInScene } from './pushInScene';
22
import PushInBase from './pushInBase';
3-
import { LayerOptions, LayerParams } from './types';
3+
import { LayerOptions, LayerSettings, LayerParams } from './types';
44
export declare class PushInLayer extends PushInBase {
55
container: HTMLElement;
66
private index;
77
scene: PushInScene;
8-
options: LayerOptions;
98
params: LayerParams;
109
private originalScale;
1110
private ref;
11+
settings: LayerSettings;
12+
isFirst: boolean;
13+
isLast: boolean;
1214
constructor(container: HTMLElement, index: number, scene: PushInScene, options: LayerOptions);
15+
/**
16+
* Set Accessibility features.
17+
* Ensures layers are tabbable and their role is understood by screenreaders.
18+
*/
19+
private setA11y;
1320
/**
1421
* Get the transitions setting, either from the API or HTML attributes.
1522
*
@@ -63,7 +70,7 @@ export declare class PushInLayer extends PushInBase {
6370
*/
6471
private getElementScaleX;
6572
/**
66-
* Whether or not a layer should currently be zooming.
73+
* Whether or not a layer should currently be animated.
6774
*/
6875
private isActive;
6976
/**
@@ -91,8 +98,23 @@ export declare class PushInLayer extends PushInBase {
9198
* as the user scrolls.
9299
*/
93100
setLayerStyle(): void;
101+
/**
102+
* Check if the layer should be visible.
103+
*
104+
* @returns boolean
105+
*/
106+
isVisible(): boolean;
94107
/**
95108
* Set a css class depending on current opacity.
96109
*/
97110
setLayerVisibility(): void;
111+
/**
112+
* Set tabInpoints for this layer.
113+
*/
114+
getTabInpoints(inpoints: number[]): number[];
115+
/**
116+
* Get the current tabInpoint for a layer,
117+
* depending on window breakpoint.
118+
*/
119+
private getTabInpoint;
98120
}

‎dist/esm/pushInScene.d.ts‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,34 @@ import { PushInComposition } from './pushInComposition';
22
import { PushInLayer } from './pushInLayer';
33
import { PushIn } from './pushin';
44
import PushInBase from './pushInBase';
5-
import { SceneOptions } from './types';
5+
import { SceneSettings } from './types';
66
export declare class PushInScene extends PushInBase {
77
pushin: PushIn;
88
layers: PushInLayer[];
99
layerDepth: number;
10-
options: SceneOptions;
10+
settings: SceneSettings;
1111
composition?: PushInComposition;
12+
layerCount: number;
1213
constructor(pushin: PushIn);
14+
start(): void;
15+
/**
16+
* If there is not a pushin-scene element, create one.
17+
*/
18+
setContainer(): void;
19+
/**
20+
* Get the AutoStart option if provided.
21+
*
22+
* Choices:
23+
* - scroll (default) Start effect on scroll.
24+
* - screen-bottom Start effect when target element top at viewport bottom.
25+
* - screen-top Start effect when target element top at viewport top.
26+
*/
27+
setAutoStart(): void;
28+
setLayerDepth(): void;
29+
/**
30+
* Setup composition for the scene.
31+
*/
32+
setComposition(): void;
1333
/**
1434
* Set scene class names.
1535
*/
@@ -46,4 +66,15 @@ export declare class PushInScene extends PushInBase {
4666
* @returns {number[]}
4767
*/
4868
getInpoints(): number[];
69+
/**
70+
* Get the mode setting.
71+
*
72+
* @returns string
73+
*/
74+
getMode(): string;
75+
/**
76+
* Update outpoints to match container height
77+
* if using continuous mode and outpoint not specified.
78+
*/
79+
updateOutpoints(): void;
4980
}

‎dist/esm/pushInStyles.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
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;}";
2+
export default pushInStyles;

‎dist/esm/pushInTarget.d.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import PushInBase from './pushInBase';
2+
import { PushIn } from './pushin';
3+
import { TargetSettings } from './types';
4+
export declare class PushInTarget extends PushInBase {
5+
pushin: PushIn;
6+
settings: TargetSettings;
7+
container: HTMLElement | null;
8+
scrollTarget: HTMLElement | string;
9+
height: number;
10+
constructor(pushin: PushIn, settings: TargetSettings);
11+
start(): void;
12+
/**
13+
* Set the target parameter and make sure
14+
* pushin is always a child of that target.
15+
*
16+
* @param options
17+
*/
18+
setTargetElement(): void;
19+
/**
20+
* Get scrollTarget option from data attribute
21+
* or JavaScript API.
22+
*/
23+
setScrollTarget(): void;
24+
/**
25+
* Set the target height on initialization.
26+
*
27+
* This will be used to calculate scroll length.
28+
*
29+
* @see setScrollLength
30+
*/
31+
setTargetHeight(): void;
32+
/**
33+
* Set overflow-y and scroll-behavior styles
34+
* on the provided target element.
35+
*/
36+
private setTargetOverflow;
37+
}

0 commit comments

Comments
 (0)