Skip to content

Commit

Permalink
- feature - added 'all' postion to spotGlarePosition + tests
Browse files Browse the repository at this point in the history 
- bugfix - removed the line glare blur applied to the spot glare element
  • Loading branch information
@rashidshamloo
rashidshamloo committed Aug 22, 2023
1 parent 59cc433 commit 644e306
Show file tree
Hide file tree
Showing 7 changed files with 206 additions and 11 deletions.
2 changes: 1 addition & 1 deletion README.md
View file

Large diffs are not rendered by default.

Binary file modified cypress/videos/index.cy.tsx.mp4
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,7 +1,7 @@
{
"name": "react-next-tilt",
"private": false,
"version": "0.0.3",
"version": "0.0.4",
"description": "A Performant Customizable Tilt Component for React",
"main": "./dist/react-next-tilt.umd.cjs",
"module": "./dist/react-next-tilt.js",
Expand Down
171 changes: 171 additions & 0 deletions src/lib/__test__/index.cy.tsx
View file
Expand Up @@ -1398,6 +1398,161 @@ describe('<Tilt />', () => {
.should('contain', 'opacity: 1');
});
});
describe('Testing "all" position', () => {
it('Testing with pointer at center, transform should be "translateX(0%) translateY(0%)", opacity should be "0"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlarePosition="all"
spotGlareMaxOpacity={1}
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.center
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(0%) translateY(0%)')
.should('contain', 'opacity: 0');
});
it('Testing with pointer at top right, transform should be "translateX(-25%) translateY(25%)", opacity should be "1"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlarePosition="all"
spotGlareMaxOpacity={1}
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.topRight
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(-25%) translateY(25%)')
.should('contain', 'opacity: 1');
});
it('Testing with pointer at right, transform should be translateX(-25%) translateY(0%)", opacity should be "1"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlarePosition="all"
spotGlareMaxOpacity={1}
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.right
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(-25%) translateY(0%)')
.should('contain', 'opacity: 1');
});
it('Testing with pointer at bottom right, transform should be "translateX(-25%) translateY(-25%)", opacity should be "1"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlarePosition="all"
spotGlareMaxOpacity={1}
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.bottomRight
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(-25%) translateY(-25%)')
.should('contain', 'opacity: 1');
});
it('Testing with pointer at bottom, transform should be "translateX(0%) translateY(-25%)", opacity should be "1"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlarePosition="all"
spotGlareMaxOpacity={1}
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.bottom
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(0%) translateY(-25%)')
.should('contain', 'opacity: 1');
});
it('Testing with pointer at bottom left, transform should be "translateX(25%) translateY(-25%)", opacity should be "1"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlarePosition="all"
spotGlareMaxOpacity={1}
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.bottomLeft
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(25%) translateY(-25%)')
.should('contain', 'opacity: 1');
});
it('Testing with pointer at left, transform should be "translateX(25%) translateY(0%)", opacity should be "1"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlarePosition="all"
spotGlareMaxOpacity={1}
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.left
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(25%) translateY(0%)')
.should('contain', 'opacity: 1');
});
it('Testing with pointer at top left, transform should be "translateX(25%) translateY(25%)", opacity should be "1"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlarePosition="all"
spotGlareMaxOpacity={1}
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.topLeft
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(25%) translateY(25%)')
.should('contain', 'opacity: 1');
});
it('Testing with pointer at top, transform should be "translateX(0%) translateY(25%)", opacity should be "1"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlarePosition="all"
spotGlareMaxOpacity={1}
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.top
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(0%) translateY(25%)')
.should('contain', 'opacity: 1');
});
});
});
describe('Testing spotGlareReverse', () => {
it('Testing with pointer at center, transform should be "translateX(25%)"', () => {
Expand Down Expand Up @@ -1480,6 +1635,22 @@ describe('<Tilt />', () => {
.should('have.attr', 'style')
.should('contain', 'transform: translateX(50%)');
});
it('Testing with spotGlarePosition="all" and pointer at bottom right, transform should be "translateX(25%) translateY(25%)"', () => {
cy.mount(
<MockTilt
spotGlareEnable={true}
spotGlareReverse={true}
spotGlarePosition="all"
/>
);
cy.get('[data-testid="container"]').trigger(
'mousemove',
position.bottomRight
);
cy.get('[data-testid="spot-glare"]')
.should('have.attr', 'style')
.should('contain', 'transform: translateX(25%) translateY(25%)');
});
});
});
describe('Testing callback functions', () => {
Expand Down
12 changes: 5 additions & 7 deletions src/lib/index.tsx
View file
Expand Up @@ -268,7 +268,8 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
})`;
}
if (spotGlareRef.current) {
spotGlareRef.current.style.transform = `translateX(0%)`;
spotGlareRef.current.style.transform =
'translateX(0%) translateY(0%)';
spotGlareRef.current.style.opacity = '0';
}
if (tiltRef.current)
Expand Down Expand Up @@ -654,16 +655,13 @@ const NextTilt = forwardRef<TiltRef, TiltProps>(
data-testid={testIdEnable ? 'spot-glare' : undefined}
style={{
position: 'absolute',
left: '-100%',
top: '-100%',
left: spotGlarePosition === 'all' ? '-50%' : '-100%',
top: spotGlarePosition === 'all' ? '-50%' : '-100%',
width: '200%',
height: '200%',
filter: lineGlareBlurEnable
? `blur(${lineGlareBlurAmount})`
: undefined,
transition: CSSTransition,
backgroundImage: `radial-gradient(${spotGlareColor}, transparent)`,
transform: 'translateX(0%)',
transform: 'translateX(0%) translateY(0%)',
opacity: '0',
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/types/types.ts
View file
Expand Up @@ -14,7 +14,7 @@ import {
import { Property } from 'csstype';

// types
export type SpotGlarePosition = 'top' | 'right' | 'bottom' | 'left';
export type SpotGlarePosition = 'top' | 'right' | 'bottom' | 'left' | 'all';
export type LineGlareDirection = 'to-bottom-right' | 'to-bottom-left';
export type LineGlareHoverPosition =
| 'top-left'
Expand Down
28 changes: 27 additions & 1 deletion src/lib/utility/utility.ts
View file
Expand Up @@ -59,6 +59,20 @@ export const getSpotGlareOpacity = (
* - 0.5 = [0.5 - 0] -> * 2 = [1 - 0]
*/
opacityNum = (offset.offsetX - 0.5) * 2;
else if (spotGlarePosition === 'all')
/*
* when hovering from the center (offsetX = 0.5) to the edges (offsetX = 0 or 1)
* the opacity should be going from transparent (0) to fully visible (1)
* for both offsetX = 0 and offsetX = 1, abs(offsetX - 0.5) is 0.5
* so we need to map abs(offsetX - 0.5) to [0 - 1]
* - 0.5 = [-0.5 - 0.5] => abs() = [0 - 0.5] => * 2 = [0 - 1]
* after doing similar mapping for offsetY, we set the maximum
* of the two numbers as the opacity.
*/
opacityNum = Math.max(
Math.abs(offset.offsetX - 0.5) * 2,
Math.abs(offset.offsetY - 0.5) * 2
);

// limit opacity to spotGlareMaxOpacity
return (opacityNum * spotGlareMaxOpacity).toFixed(2);
Expand All @@ -79,7 +93,7 @@ export const getSpotGlareTransform = (
offsetY = 1 - offsetY;
}

let transform = 'translateX(0deg) translateY(0deg)';
let transform = 'translateX(0%) translateY(0%)';

if (spotGlarePosition === 'top')
/*
Expand All @@ -105,6 +119,18 @@ export const getSpotGlareTransform = (
else if (spotGlarePosition === 'right')
// similar to above but translateX should be 50% to move it to the right
transform = `translateX(50%) translateY( ${offsetY * 50}% ) `;
else if (spotGlarePosition === 'all')
/*
* for the 'all' postition, starting position is at the center
* and when hovering from top to bottom (offsetY = [0 - 1]),
* translateY should be chnaging from [-25% - 25%]
* mapping [0 - 1] to [-25 - 25]
* * -0.5 = [-0.5 - 0.5] => * 50 = [-25 - 25]
* and similar mapping is applied to offsetX
* */
transform = `translateX(${(offsetX - 0.5) * 50}%) translateY(${
(offsetY - 0.5) * 50
}%) `;

return transform;
};
Expand Down

0 comments on commit 644e306

Please sign in to comment.