Skip to content

Commit 95d0533

Browse files
goldstgoldst
committed
button shadow
1 parent 2762cee commit 95d0533

File tree

10 files changed

+166
-4
lines changed

10 files changed

+166
-4
lines changed

‎blocks/button/Button.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import ButtonAbstract from './ButtonAbstract.js';
2+
3+
/**
4+
* automates event based effects for card blocks without modifiers
5+
* @extends CardAbstract
6+
*/
7+
export default class Card extends ButtonAbstract {
8+
/**
9+
* @returns {void}
10+
*/
11+
constructor() {
12+
// in buttons without modifiers, nothing happens
13+
// after the shadowing, thus the empty function
14+
super('', () => {});
15+
}
16+
}

‎blocks/button/ButtonAbstract.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,71 @@
1+
import BM from './ButtonMouseShadowed.js';
2+
13
/**
24
* Base for the event controllers for button blocks, which automate
35
* mouse pointer shadows
46
*/
57
export default class ButtonAbstract {
8+
/**
9+
* @param {String} [modifier = ''] Modifier of the card block.
10+
* Default '' means mo modifier.
11+
* @param {function} postTransformFunction for examples, see
12+
* {js/transformation/TransformableElement/
13+
* PostTransformFunctions.js}
14+
* @returns {void}
15+
*/
16+
constructor(
17+
modifier = '',
18+
postShadowFunction,
19+
shadowFunction = ButtonAbstract._shadowFunction
20+
) {
21+
22+
this._throwIfAbstractClass();
23+
24+
this._bm = new BM(
25+
modifier,
26+
postShadowFunction,
27+
shadowFunction
28+
);
29+
}
30+
31+
/**
32+
* function which takes an object args which contains e mousemove
33+
* event (event) and returns css changes
34+
* @param {object} args
35+
* @returns {object} object of css properties and their values
36+
*/
37+
static _shadowFunction(args) {
38+
const
39+
rect = args.eventControlElement.domElement.getBoundingClientRect(),
40+
hover = [
41+
args.event.clientX - rect.left,
42+
args.event.clientY - rect.top
43+
];
44+
45+
return {
46+
'--button--mouse-shadow-left': hover[0] + 'px',
47+
'--button--mouse-shadow-top': hover[1] + 'px'
48+
};
49+
}
50+
51+
/**
52+
* @todo what does this do in simple words
53+
* @see TransformationController
54+
* @returns {void}
55+
*/
56+
mousemoveEvent() {
57+
this._bm.mousemoveEventShadow();
58+
}
659

60+
/**
61+
* helper function that throws if class name ends with 'Abstract'
62+
* @private
63+
* @throws {Error} 'cannot call functions in abstract class'
64+
* @returns {void}
65+
*/
66+
_throwIfAbstractClass() {
67+
if((typeof new.target).endsWith('Abstract')) {
68+
throw new Error('cannot call functions in abstract class');
69+
}
70+
}
771
}

‎blocks/button/ButtonMouseShadowed.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import MC from '../../js/mouseShadow/MouseShadowController.js';
2+
3+
/**
4+
* Base for the mouse shadow controller for button blocks, which automates
5+
* the mouse shadow effect
6+
* @abstract
7+
* @extends MouseShadowController
8+
*/
9+
export default class ButtonMouseShadowed extends MC {
10+
/**
11+
* @param {String} [modifier = ''] Modifier of the button block.
12+
* Default '' means mo modifier.
13+
* @returns {void}
14+
*/
15+
constructor(
16+
modifier = '',
17+
postShadowFunction,
18+
shadowFunction) {
19+
20+
super(
21+
document.body,
22+
['button'],
23+
`.button${modifier}`
24+
);
25+
26+
this._postShadowFunction = postShadowFunction;
27+
this._shadowFunction = shadowFunction;
28+
}
29+
30+
/**
31+
* more specific version of {MouseShadowController}'s
32+
* mousemoveEventShadow that already specifies where to find the
33+
* passed shadow functions and what elements it applies to
34+
* @see MouseShadowController
35+
* @returns {void}
36+
*/
37+
mousemoveEventShadow() {
38+
super.mousemoveEventShadow(
39+
this._shadowFunction,
40+
'*',
41+
this._postShadowFunction
42+
);
43+
}
44+
}

‎blocks/button/button.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,21 @@
6464

6565
.button:hover,
6666
.button:focus {
67+
background-image:
68+
var(--_add-background),
69+
radial-gradient(
70+
circle at
71+
calc(
72+
var(--button--mouse-shadow-left, -100%)
73+
/ var(--_hover-scale)
74+
)
75+
calc(
76+
var(--button--mouse-shadow-top, -100%) /
77+
var(--_hover-scale)
78+
),
79+
var(--_c1) 0,
80+
transparent calc(0.5 * var(--_w))
81+
);
6782
box-shadow: 0 0 calc(0.015 * var(--_w)) 0 var(--_c0);
6883
outline: none;
6984
transform: scale(1.05);
@@ -108,6 +123,21 @@
108123

109124
.button--s:hover,
110125
.button--s:focus {
126+
background-image:
127+
var(--_add-background),
128+
radial-gradient(
129+
circle at
130+
calc(
131+
var(--button--mouse-shadow-left, -100%)
132+
/ var(--_hover-scale)
133+
)
134+
calc(
135+
var(--button--mouse-shadow-top, -100%) /
136+
var(--_hover-scale)
137+
),
138+
var(--_c1) 0,
139+
transparent calc(0.1 * var(--_w))
140+
);
111141
box-shadow: 0 0 calc(0.025 * var(--_w)) 0 var(--_c0);
112142
max-width: var(--_w);
113143
outline: none;

‎blocks/button/button.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Button from './Button.js';
2+
3+
window.addEventListener('load', () => {
4+
new Button().mousemoveEvent();
5+
});

‎blocks/card/CardMouseShadowed.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default class CardMouseShadowed extends MC {
1919

2020
super(
2121
document.body,
22+
['card'],
2223
`.card${modifier} > .card__inner`
2324
);
2425

‎blocks/card/CardTransformable.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default class CardTransformable extends TC {
1919

2020
super(
2121
document.body,
22+
['card'],
2223
`.card${modifier} > .card__inner`
2324
);
2425

‎blocks/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import './card/card.js';
2+
import './button/button.js';
23
import projects from './projects/projects.js';
34
import projectCard from './project-card/project-card.js';
45
import tags from './tags/tags.js';

‎js/mouseShadow/MouseShadowController.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export default class MouseShadowController extends EC {
2525
* doesn't do anything, delete it.
2626
* @returns {void}
2727
*/
28-
constructor(baseElement, queryFilter = '*', onlyNewElements = true) {
29-
super(baseElement, queryFilter, ['mouse-shadow-element'], onlyNewElements, ME);
28+
constructor(baseElement, blocks = [], queryFilter = '*', onlyNewElements = true) {
29+
super(baseElement, queryFilter, ['mouse-shadow-element', ...blocks.map(b => 'mouse-shadow-element-' + b)], onlyNewElements, ME);
3030
}
3131

3232
/**

‎js/transformation/TransformationController.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export default class TransformationController extends EC {
2424
* doesn't do anything, delete it.
2525
* @returns {void}
2626
*/
27-
constructor(baseElement, queryFilter = '*', onlyNewElements = true) {
28-
super(baseElement, queryFilter, ['transformable-element'], onlyNewElements, TE);
27+
constructor(baseElement, block, queryFilter = '*', onlyNewElements = true) {
28+
super(baseElement, queryFilter, ['transformable-element', ...block.map(b => 'transformable-element-' + b)], onlyNewElements, TE);
2929
}
3030

3131
/**

0 commit comments

Comments
 (0)