Skip to content

Commit 8d87e29

Browse files
glenn2223glenn2223
authored
Fix overflow not adjusting position - PR#10 from glenn2223
- Overflow is once again adjusting the position - Changes to tests - Updated the original tests and helpers, to accommodate new test - Added a simple test for collisions - Added a hidden check that returns 0 for sizes (to help catch future overflow issues)
2 parents d622e11 + 70c7257 commit 8d87e29

File tree

6 files changed

+98
-52
lines changed

6 files changed

+98
-52
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,16 @@ All notable changes to this project will be documented in this file.
2626
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
2727
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
2828

29+
## Unpublished
30+
31+
### Fixed
32+
33+
- Position is once again changed if there's overflow (settings permitted)
34+
35+
### Changed
36+
37+
- Added new overflow test and tweaked other tests
38+
2939
## [1.0.2] - 2024-07-30
3040

3141
<small>[Compare to previous release][comp:1.0.2]</small>

‎eslint.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export default [
8888
'no-floating-decimal': 'warn',
8989
'no-global-assign': 'warn',
9090
'no-implicit-coercion': 'warn',
91-
'no-implicit-globals': 'warn',
91+
'no-implicit-globals': 'off',
9292
'no-implied-eval': 'warn',
9393
'no-invalid-this': 'off',
9494
'no-iterator': 'warn',

‎src/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,10 @@ function position(options: IOptions): PositionData {
7979
},
8080
}
8181
: options.anchor.getBoundingClientRect(),
82-
originalDisplay = options.target.style.display,
83-
_targetRect = options.target.getBoundingClientRect();
82+
originalDisplay = options.target.style.display;
8483

8584
options.target.style.display = 'block';
85+
const _targetRect = options.target.getBoundingClientRect();
8686
options.target.style.display = originalDisplay;
8787

8888
// Adjust to scrollable regions

‎tests/Helpers.ts‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -63,13 +63,15 @@ export class Helper {
6363
div.style.height = `${this.targetSize.height}px`;
6464
div.style.width = `${this.targetSize.width}px`;
6565
div.style.position = 'absolute';
66+
div.style.display = 'none';
6667
document.body.insertAdjacentElement('beforeend', div);
6768
}
6869

6970
getLeft(
7071
tP: CombinedAlignment,
7172
my?: CombinedAlignment,
7273
at?: CombinedAlignment,
74+
onCollision?: (input: number) => number,
7375
) {
7476
let left = 0;
7577

@@ -116,18 +118,16 @@ export class Helper {
116118
}
117119
}
118120

119-
if (this.collision === CollisionHandler.ignore) {
120-
return left;
121-
}
122-
123-
// Work on collision
124-
return left;
121+
return this.collision !== CollisionHandler.ignore && onCollision
122+
? onCollision(left)
123+
: left;
125124
}
126125

127126
getTop(
128127
tP: CombinedAlignment,
129128
my?: CombinedAlignment,
130129
at?: CombinedAlignment,
130+
onCollision?: (input: number) => number,
131131
) {
132132
let top = 0;
133133

@@ -180,12 +180,9 @@ export class Helper {
180180
}
181181
}
182182

183-
if (this.collision === CollisionHandler.ignore) {
184-
return top;
185-
}
186-
187-
// Work on collision
188-
return top;
183+
return this.collision !== CollisionHandler.ignore && onCollision
184+
? onCollision(top)
185+
: top;
189186
}
190187

191188
/**
@@ -216,16 +213,17 @@ export class Helper {
216213

217214
targetEl!.getBoundingClientRect = jest.fn(() => {
218215
const top = 0,
219-
left = 0;
216+
left = 0,
217+
hiddenSize = targetEl?.style.display === 'none' ? 0 : null;
220218

221219
return {
222220
x: left,
223221
y: top,
224-
width: this.targetSize.width,
225-
height: this.targetSize.height,
222+
width: hiddenSize ?? this.targetSize.width,
223+
height: hiddenSize ?? this.targetSize.height,
226224
top: top,
227-
right: left + this.targetSize.width,
228-
bottom: top + this.targetSize.height,
225+
right: left + (hiddenSize ?? this.targetSize.width),
226+
bottom: top + (hiddenSize ?? this.targetSize.height),
229227
left: left,
230228
toJSON: () => '{}',
231229
};

‎tests/collision.test.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { CollisionHandler, position } from '../src/index';
2+
import { allData, Helper, SizeData } from './Helpers';
3+
4+
const windowSize: SizeData = {
5+
height: 1000,
6+
width: 1000,
7+
},
8+
anchorSize: SizeData = {
9+
height: 100,
10+
width: 100,
11+
},
12+
targetSize: SizeData = {
13+
height: 100,
14+
width: 200,
15+
},
16+
helper = new Helper(CollisionHandler.bestFit, anchorSize, targetSize),
17+
leftCollision: (input: number) => number = () => 800;
18+
19+
helper.setupEnvironment(windowSize);
20+
21+
test('Collision changes the output', () => {
22+
const tP = 'center right',
23+
myA = 'top center',
24+
atA = 'bottom center';
25+
26+
helper.setupTest(tP);
27+
28+
const pData = position({
29+
...{ debug: true },
30+
...{
31+
my: myA,
32+
at: atA,
33+
target: document.querySelector<HTMLDivElement>('.target')!,
34+
anchor: document.querySelector<HTMLElement>('.anchor')!,
35+
},
36+
}) as allData;
37+
38+
expect({
39+
left: parseInt(pData.left, 10),
40+
top: parseInt(pData.top, 10),
41+
}).toStrictEqual({
42+
left: helper.getLeft(tP, myA, atA, leftCollision),
43+
top: helper.getTop(tP, myA, atA),
44+
});
45+
});

‎tests/index.test.ts‎

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { CollisionHandler, CombinedAlignment, position } from '../src/index';
2-
// @ts-ignore
32
import { allData, Helper, SizeData } from './Helpers';
43

54
const windowSize: SizeData = {
@@ -30,74 +29,68 @@ const windowSize: SizeData = {
3029
helper.setupEnvironment(windowSize);
3130

3231
describe('HoverPosition (collisions ignored)', () => {
33-
// Add base style
34-
3532
describe.each(positionArray)('Target Position: %s', (tP) => {
36-
describe.each(positionArray)('options.my: %s', (myAlignment) => {
37-
test.each(positionArray)('options.at: %s', (atAlignment) => {
33+
describe.each(positionArray)('options.my: %s', (myPlacement) => {
34+
test.each(positionArray)('options.at: %s', (atPlacement) => {
3835
helper.setupTest(tP);
3936

4037
const pData = position({
4138
...{ debug: true },
4239
...{
43-
my: myAlignment,
44-
at: atAlignment,
40+
my: myPlacement,
41+
at: atPlacement,
4542
target: document.querySelector<HTMLDivElement>(
4643
'.target',
4744
)!,
4845
anchor: document.querySelector<HTMLElement>('.anchor')!,
4946
collision: CollisionHandler.ignore,
5047
},
5148
}) as allData;
52-
/*
53-
console.log(
54-
`${tP}|${myAlignment}|${atAlignment}`,
55-
pData,
56-
);
57-
*/
49+
5850
expect({
5951
left: parseInt(pData.left, 10),
6052
top: parseInt(pData.top, 10),
6153
}).toStrictEqual({
62-
left: helper.getLeft(tP, myAlignment, atAlignment),
63-
top: helper.getTop(tP, myAlignment, atAlignment),
54+
left: helper.getLeft(tP, myPlacement, atPlacement),
55+
top: helper.getTop(tP, myPlacement, atPlacement),
6456
});
6557
});
6658
});
6759
});
6860
});
6961

7062
test('Window scroll adjusts output', () => {
63+
// Set the window scroll position
7164
window.scrollX = 50;
7265
window.scrollY = 50;
73-
74-
const tP = 'top left',
75-
myA = 'top center',
76-
atA = 'bottom center';
77-
78-
helper.setupTest(tP);
66+
67+
const targetWindowPosition = 'top left',
68+
myPlacement = 'top center',
69+
atPlacement = 'bottom center';
70+
71+
helper.setupTest(targetWindowPosition);
7972

8073
const pData = position({
8174
...{ debug: true },
8275
...{
83-
my: myA,
84-
at: atA,
85-
target: document.querySelector<HTMLDivElement>(
86-
'.target',
87-
)!,
76+
my: myPlacement,
77+
at: atPlacement,
78+
target: document.querySelector<HTMLDivElement>('.target')!,
8879
anchor: document.querySelector<HTMLElement>('.anchor')!,
8980
collision: CollisionHandler.ignore,
9081
},
9182
}) as allData;
92-
83+
9384
expect({
9485
left: parseInt(pData.left, 10),
9586
top: parseInt(pData.top, 10),
9687
}).toStrictEqual({
97-
left: helper.getLeft(tP, myA, atA) + 50,
98-
top: helper.getTop(tP, myA, atA) + 50,
88+
left:
89+
helper.getLeft(targetWindowPosition, myPlacement, atPlacement) + 50,
90+
top: helper.getTop(targetWindowPosition, myPlacement, atPlacement) + 50,
9991
});
100-
101-
window.scrollX = 50;
102-
window.scrollY = 50;
92+
93+
// Reset the window scroll position
94+
window.scrollX = 0;
95+
window.scrollY = 0;
10396
});

0 commit comments

Comments
 (0)