Skip to content

Commit 053aa66

Browse files
jscottsmithjscottsmith
committed
improve types
1 parent 78687e5 commit 053aa66

File tree

5 files changed

+58
-28
lines changed

5 files changed

+58
-28
lines changed

‎__tests__/ParallaxController.test.ts

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { VERTICAL } from '../src/constants';
77
const addEventListener = window.addEventListener;
88
const removeEventListener = window.removeEventListener;
99

10-
const options = {
10+
const OPTIONS = {
1111
elInner: document.createElement('div'),
1212
elOuter: document.createElement('div'),
1313
props: {
@@ -51,7 +51,7 @@ describe('Expect the ParallaxController', () => {
5151

5252
it('to create an element and return it', () => {
5353
const controller = ParallaxController.init({ scrollAxis: VERTICAL });
54-
const element = controller.createElement(options);
54+
const element = controller.createElement(OPTIONS);
5555
expect(element).toBeInstanceOf(Element);
5656

5757
const elInner = document.createElement('div');
@@ -90,7 +90,7 @@ describe('Expect the ParallaxController', () => {
9090

9191
it('to add created elements into the controller', () => {
9292
const controller = ParallaxController.init({ scrollAxis: VERTICAL });
93-
const element = controller.createElement(options);
93+
const element = controller.createElement(OPTIONS);
9494
const elements = controller.getElements();
9595

9696
expect(elements[0]).toEqual(element);
@@ -99,7 +99,7 @@ describe('Expect the ParallaxController', () => {
9999

100100
it('to remove elements from the controller', () => {
101101
const controller = ParallaxController.init({ scrollAxis: VERTICAL });
102-
const element = controller.createElement(options);
102+
const element = controller.createElement(OPTIONS);
103103
expect(controller.getElements()[0]).toEqual(element);
104104

105105
controller.removeElementById(element.id);
@@ -141,11 +141,7 @@ describe('Expect the ParallaxController', () => {
141141
controller.destroy();
142142
// @ts-ignore
143143
expect(window.removeEventListener.mock.calls[1]).toEqual(
144-
expect.arrayContaining([
145-
'scroll',
146-
expect.any(Function),
147-
{ passive: true },
148-
])
144+
expect.arrayContaining(['scroll', expect.any(Function), false])
149145
);
150146
// @ts-ignore
151147
expect(window.removeEventListener.mock.calls[2]).toEqual(

‎src/classes/ParallaxController.ts

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { Scroll } from './Scroll';
44
import { Element } from './Element';
55
import { VERTICAL } from '../constants';
66
import { testForPassiveScroll } from '../utils/testForPassiveScroll';
7+
import { ParallaxControllerType } from '../types';
8+
9+
type ViewElement = HTMLElement | Window;
710

811
/**
912
* -------------------------------------------------------
@@ -17,15 +20,26 @@ import { testForPassiveScroll } from '../utils/testForPassiveScroll';
1720
* based on x/y offsets and current scroll position.
1821
*
1922
*/
20-
export function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
23+
24+
export type ParallaxControllerOptions = {
25+
scrollAxis?: 'vertical' | 'horizontal';
26+
scrollContainer?: HTMLElement;
27+
};
28+
29+
export function ParallaxController({
30+
scrollAxis = VERTICAL,
31+
scrollContainer,
32+
}: ParallaxControllerOptions) {
2133
// All parallax elements to be updated
2234
let elements = [];
2335

2436
let hasScrollContainer = !!scrollContainer;
25-
let viewEl = scrollContainer || window;
37+
let viewEl: ViewElement = scrollContainer || window;
2638

2739
// Scroll and View
40+
// @ts-expect-error
2841
const x = hasScrollContainer ? viewEl.scrollLeft : window.pageXOffset;
42+
// @ts-expect-error
2943
const y = hasScrollContainer ? viewEl.scrollTop : window.pageYOffset;
3044
const scroll = new Scroll(x, y);
3145
let view = new View({ width: 0, height: 0, scrollContainer });
@@ -36,7 +50,7 @@ export function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
3650
// Passive support
3751
const supportsPassive = testForPassiveScroll();
3852

39-
function _addListeners(el) {
53+
function _addListeners(el: ViewElement) {
4054
el.addEventListener(
4155
'scroll',
4256
_handleScroll,
@@ -45,12 +59,8 @@ export function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
4559
window.addEventListener('resize', _handleResize, false);
4660
}
4761

48-
function _removeListeners(el) {
49-
el.removeEventListener(
50-
'scroll',
51-
_handleScroll,
52-
supportsPassive ? { passive: true } : false
53-
);
62+
function _removeListeners(el: ViewElement) {
63+
el.removeEventListener('scroll', _handleScroll, false);
5464
window.removeEventListener('resize', _handleResize, false);
5565
}
5666

@@ -64,7 +74,9 @@ export function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
6474
function _handleScroll() {
6575
// Save current scroll
6676
// Supports IE 9 and up.
77+
// @ts-expect-error
6778
const nx = hasScrollContainer ? viewEl.scrollLeft : window.pageXOffset;
79+
// @ts-expect-error
6880
const ny = hasScrollContainer ? viewEl.scrollTop : window.pageYOffset;
6981
scroll.setScroll(nx, ny);
7082

@@ -92,7 +104,7 @@ export function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
92104
* attributes, if so set the elements parallax styles.
93105
*/
94106
// @ts-ignore
95-
function _updateAllElements({ updateCache } = {}) {
107+
function _updateAllElements({ updateCache }: { updateCache: boolean } = {}) {
96108
if (elements) {
97109
elements.forEach((element) => {
98110
_updateElementPosition(element);
@@ -120,7 +132,9 @@ export function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
120132
*/
121133
function _setViewSize() {
122134
if (hasScrollContainer) {
135+
// @ts-ignore
123136
const width = viewEl.offsetWidth;
137+
// @ts-ignore
124138
const height = viewEl.offsetHeight;
125139
return view.setSize(width, height);
126140
}
@@ -142,7 +156,7 @@ export function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
142156
* Gets the parallax elements in the controller
143157
* @return {array} parallax elements
144158
*/
145-
this.getElements = function () {
159+
this.getElements = function (): Element[] {
146160
return elements;
147161
};
148162

@@ -231,7 +245,9 @@ export function ParallaxController({ scrollAxis = VERTICAL, scrollContainer }) {
231245
* Static method to instantiate the ParallaxController.
232246
* @returns {Object} ParallaxController
233247
*/
234-
ParallaxController.init = function (options) {
248+
ParallaxController.init = function (
249+
options: ParallaxControllerOptions
250+
): ParallaxControllerType {
235251
const hasWindow = typeof window !== 'undefined';
236252

237253
if (!hasWindow) {

‎src/hooks/useController.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useContext } from 'react';
22
import { ParallaxContext } from '../context/ParallaxContext';
3-
import { ParallaxController } from '../types';
3+
import { ParallaxControllerType } from '../types';
44

5-
export function useController(): ParallaxController {
5+
export function useController(): ParallaxControllerType {
66
const parallaxController = useContext(ParallaxContext);
77

88
if (!parallaxController) {

‎src/index.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,5 @@ import { Parallax } from './components/Parallax';
22
import { ParallaxBanner } from './components/ParallaxBanner';
33
import { ParallaxProvider } from './components/ParallaxProvider';
44
import { ParallaxContext } from './context/ParallaxContext';
5-
65
export { useController } from './hooks/useController';
7-
86
export { Parallax, ParallaxBanner, ParallaxProvider, ParallaxContext };

‎src/types.ts

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import { Element } from './classes/Element';
2+
import { ParallaxControllerOptions } from './classes/ParallaxController';
3+
14
export type ParallaxStartEndOffsets = {
25
xUnit: ValidUnits;
36
yUnit: ValidUnits;
@@ -19,9 +22,26 @@ export type OffsetShape = {
1922
unit: ValidUnits;
2023
};
2124

22-
export interface ParallaxController {
25+
type ParallaxElementProperties = {
26+
disabled: boolean;
27+
x0: string | number;
28+
x1: string | number;
29+
y0: string | number;
30+
y1: string | number;
31+
};
32+
33+
export interface ParallaxControllerType {
34+
init(options: ParallaxControllerOptions): ParallaxControllerType;
35+
getElements(): Element[];
2336
update(): void;
2437
destroy(): void;
25-
createElement(): void;
26-
removeElementById(): void;
38+
createElement(options: {
39+
elInner: HTMLElement;
40+
elOuter: HTMLElement;
41+
props: ParallaxElementProperties;
42+
}): Element;
43+
resetElementStyles(id: number): void;
44+
removeElementById(id: number): void;
45+
updateElementPropsById(id: number, props: ParallaxElementProperties): void;
46+
updateScrollContainer(el: HTMLElement): void;
2747
}

0 commit comments

Comments
 (0)