blob: 7e034511d9730dce934b28f878459904b946f1e2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import type Swup from '../Swup.js';
import { queryAll } from '../utils.js';
export class Classes {
protected swup: Swup;
protected swupClasses = [
'to-',
'is-changing',
'is-rendering',
'is-popstate',
'is-animating',
'is-leaving'
];
constructor(swup: Swup) {
this.swup = swup;
}
protected get selectors(): string[] {
const { scope } = this.swup.visit.animation;
if (scope === 'containers') return this.swup.visit.containers;
if (scope === 'html') return ['html'];
if (Array.isArray(scope)) return scope;
return [];
}
protected get selector(): string {
return this.selectors.join(',');
}
protected get targets(): HTMLElement[] {
if (!this.selector.trim()) return [];
return queryAll(this.selector);
}
add(...classes: string[]): void {
this.targets.forEach((target) => target.classList.add(...classes));
}
remove(...classes: string[]): void {
this.targets.forEach((target) => target.classList.remove(...classes));
}
clear(): void {
this.targets.forEach((target) => {
const remove = target.className.split(' ').filter((c) => this.isSwupClass(c));
target.classList.remove(...remove);
});
}
protected isSwupClass(className: string): boolean {
return this.swupClasses.some((c) => className.startsWith(c));
}
}
|
