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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
export default class Shadow {
zIndex = '1000'
isOpen = false
/**
* ============
* Constructors
* ============
*/
constructor(image) {
this.create(image);
return this;
}
create(image) {
// create shadow image
const shadowImage = document.createElement('img');
shadowImage.src = image.src;
shadowImage.id = `libra-shadow-${image.id}`;
shadowImage.classList.add('libra-shadow');
// style and position shadow image
shadowImage.style.top = image.offsetTop;
shadowImage.style.left = image.offsetLeft;
shadowImage.style.width = image.offsetWidth;
shadowImage.style.height = image.offsetHeight;
shadowImage.style.zIndex = this.zIndex;
document.body.appendChild(shadowImage);
this.element = shadowImage;
}
calculateStartsAndFinals() {
// snapshot current state
const starts = {
top: this.element.offsetTop,
left: this.element.offsetLeft,
width: this.element.offsetWidth,
height: this.element.offsetHeight
};
let finals = {}
const margin = 50
const ratio = this.element.naturalWidth / this.element.naturalHeight;
const ww = window.innerWidth - 2*margin;
const wh = window.innerHeight - 2*margin;
if (this.element.naturalWidth > ww) {
finals.width = ww;
finals.height = ww / ratio;
if (finals.height > wh) {
finals.height = wh;
finals.width = wh * ratio;
}
} else {
finals.width = this.element.offsetWidth;
finals.height = this.element.offsetHeight;
}
finals.top = (wh - finals.height) / 2 + window.scrollY + margin;
finals.left = (ww - finals.width) / 2 + window.scrollX + margin;
this.startingState = starts;
this.finalState = finals;
return { starts, finals };
}
/**
* ============
* Actions
* ============
*/
open() {
this.isOpen = true;
this.calculateStartsAndFinals();
this.animate(this.startingState, this.finalState)
}
close() {
this.isOpen = false;
this.element.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
this.calculateStartsAndFinals();
this.animate(this.finalState, this.startingState)
setTimeout(() => {
this.destroyItself();
}, 300);
}
animate(starts, finals) {
// Calculate scaling factors based on width and height interpolation
const scaleX = finals.width / starts.width;
const scaleY = finals.height / starts.height;
// Calculate the center of the starting and final positions
const startCenterX = starts.left + starts.width / 2;
const startCenterY = starts.top + starts.height / 2;
const finalCenterX = finals.left + finals.width / 2;
const finalCenterY = finals.top + finals.height / 2;
const translateX = finalCenterX - startCenterX;
const translateY = finalCenterY - startCenterY;
// Apply the transform with matrix (scale + translate)
this.element.style.transform = `matrix(${scaleX}, 0, 0, ${scaleY}, ${translateX}, ${translateY})`;
}
placeItself() {
document.body.appendChild(this.element);
}
destroyItself() {
if (!document.body.contains(this.element)) return;
document.body.removeChild(this.element);
}
}
|
