@hh.ru/magritte-ui-media-viewer 1.2.7 → 1.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.css +64 -64
- package/index.js +1 -1
- package/internal/Counter.js +2 -2
- package/internal/Counter.js.map +1 -1
- package/internal/GalleryItemBody.js +2 -2
- package/internal/GalleryItemBody.js.map +1 -1
- package/internal/PreviewItem.js +1 -1
- package/internal/PreviewItemBody.js +1 -1
- package/internal/PreviewZoomControl.js +3 -3
- package/internal/PreviewZoomControl.js.map +1 -1
- package/media-viewer-CAu8AQyY.js +5 -0
- package/media-viewer-CAu8AQyY.js.map +1 -0
- package/package.json +8 -8
- package/public/Footer.js +1 -1
- package/public/Gallery.js +1 -1
- package/public/GalleryItem.js +1 -1
- package/public/Header.js +1 -1
- package/public/MediaViewer.js +1 -1
- package/public/Preview.js +1 -1
- package/public/Toolbar.js +1 -1
- package/media-viewer-DNMFYzkg.js +0 -5
- package/media-viewer-DNMFYzkg.js.map +0 -1
package/index.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
.magritte-night-theme{
|
|
14
14
|
--magritte-color-component-skeleton-background-content-v24-5-0:#5e5e5e3d;
|
|
15
15
|
}
|
|
16
|
-
.magritte-media-viewer___KnrXP_1-2-
|
|
16
|
+
.magritte-media-viewer___KnrXP_1-2-9{
|
|
17
17
|
position:fixed;
|
|
18
18
|
inset:0;
|
|
19
19
|
display:grid;
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
--media-viewer-background-opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress));
|
|
26
26
|
--magritte-ui-nav-bar-background-color-override:var(--magritte-color-background-overlay-toolbar-v24-5-0);
|
|
27
27
|
}
|
|
28
|
-
.magritte-media-viewer___KnrXP_1-2-
|
|
28
|
+
.magritte-media-viewer___KnrXP_1-2-9::before{
|
|
29
29
|
content:'';
|
|
30
30
|
position:absolute;
|
|
31
31
|
inset:0;
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
opacity:var(--media-viewer-background-opacity);
|
|
34
34
|
pointer-events:none;
|
|
35
35
|
}
|
|
36
|
-
.magritte-gallery-placeholder___rUoGL_1-2-
|
|
36
|
+
.magritte-gallery-placeholder___rUoGL_1-2-9{
|
|
37
37
|
display:flex;
|
|
38
38
|
align-items:stretch;
|
|
39
39
|
grid-row:2;
|
|
40
40
|
min-height:0;
|
|
41
41
|
}
|
|
42
|
-
.magritte-media-viewer-gallery___P0SnN_1-2-
|
|
42
|
+
.magritte-media-viewer-gallery___P0SnN_1-2-9{
|
|
43
43
|
display:grid;
|
|
44
44
|
flex-grow:1;
|
|
45
45
|
contain:layout size;
|
|
@@ -48,16 +48,16 @@
|
|
|
48
48
|
inset:0;
|
|
49
49
|
}
|
|
50
50
|
@media (min-width: 1020px){
|
|
51
|
-
body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-2-
|
|
51
|
+
body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-2-9{
|
|
52
52
|
position:relative;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
@media (min-width: 1024px){
|
|
56
|
-
body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-2-
|
|
56
|
+
body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-2-9{
|
|
57
57
|
position:relative;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
.magritte-gallery-item___Js0Z5_1-2-
|
|
60
|
+
.magritte-gallery-item___Js0Z5_1-2-9{
|
|
61
61
|
position:relative;
|
|
62
62
|
grid-area:1 / 1;
|
|
63
63
|
contain:size;
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
overflow-y:visible;
|
|
67
67
|
opacity:calc(1 - var(--magritte-ui-media-viewer-image-close-progress, 0));
|
|
68
68
|
}
|
|
69
|
-
.magritte-gallery-item-transform-container___N8-sA_1-2-
|
|
69
|
+
.magritte-gallery-item-transform-container___N8-sA_1-2-9{
|
|
70
70
|
position:absolute;
|
|
71
71
|
top:50%;
|
|
72
72
|
left:50%;
|
|
@@ -74,44 +74,44 @@
|
|
|
74
74
|
will-change:transform;
|
|
75
75
|
touch-action:none;
|
|
76
76
|
}
|
|
77
|
-
.magritte-preview-counter___uP2Hc_1-2-
|
|
77
|
+
.magritte-preview-counter___uP2Hc_1-2-9{
|
|
78
78
|
min-width:0;
|
|
79
79
|
text-align:center;
|
|
80
80
|
}
|
|
81
81
|
@media (min-width: 1020px){
|
|
82
|
-
body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-2-
|
|
82
|
+
body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-2-9{
|
|
83
83
|
text-align:left;
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
@media (min-width: 1024px){
|
|
87
|
-
body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-2-
|
|
87
|
+
body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-2-9{
|
|
88
88
|
text-align:left;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
.magritte-preview-counter___uP2Hc_1-2-
|
|
91
|
+
.magritte-preview-counter___uP2Hc_1-2-9.magritte-with-description___-w7ld_1-2-9{
|
|
92
92
|
cursor:pointer;
|
|
93
93
|
}
|
|
94
|
-
.magritte-counter-number___gUpMp_1-2-
|
|
94
|
+
.magritte-counter-number___gUpMp_1-2-9{
|
|
95
95
|
display:block;
|
|
96
96
|
transform:translateY(calc(18px * 0.5));
|
|
97
97
|
transition:transform var(--magritte-semantic-animation-time-m-duration-v24-5-0) var(--magritte-semantic-animation-ease-base-timing-function-v24-5-0);
|
|
98
98
|
}
|
|
99
|
-
.magritte-with-description___-w7ld_1-2-
|
|
99
|
+
.magritte-with-description___-w7ld_1-2-9 .magritte-counter-number___gUpMp_1-2-9{
|
|
100
100
|
transform:translateY(0);
|
|
101
101
|
}
|
|
102
|
-
.magritte-no-description-placeholder___qc6h2_1-2-
|
|
102
|
+
.magritte-no-description-placeholder___qc6h2_1-2-9{
|
|
103
103
|
display:block;
|
|
104
104
|
height:18px;
|
|
105
105
|
padding:0;
|
|
106
106
|
}
|
|
107
|
-
.magritte-preview-zoom-control___026jA_1-2-
|
|
107
|
+
.magritte-preview-zoom-control___026jA_1-2-9{
|
|
108
108
|
display:flex;
|
|
109
109
|
flex-direction:row;
|
|
110
110
|
gap:2px;
|
|
111
111
|
align-items:center;
|
|
112
112
|
justify-self:end;
|
|
113
113
|
}
|
|
114
|
-
.magritte-preview-container___nwjNY_1-2-
|
|
114
|
+
.magritte-preview-container___nwjNY_1-2-9{
|
|
115
115
|
display:grid;
|
|
116
116
|
grid-template-columns:1fr auto 1fr;
|
|
117
117
|
gap:16px;
|
|
@@ -122,16 +122,16 @@
|
|
|
122
122
|
z-index:10;
|
|
123
123
|
}
|
|
124
124
|
@media (min-width: 1020px){
|
|
125
|
-
body.magritte-old-layout .magritte-preview-container___nwjNY_1-2-
|
|
125
|
+
body.magritte-old-layout .magritte-preview-container___nwjNY_1-2-9{
|
|
126
126
|
padding:16px 24px;
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
@media (min-width: 1024px){
|
|
130
|
-
body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-2-
|
|
130
|
+
body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-2-9{
|
|
131
131
|
padding:16px 24px;
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
|
-
.magritte-preview___0Ge4C_1-2-
|
|
134
|
+
.magritte-preview___0Ge4C_1-2-9{
|
|
135
135
|
display:flex;
|
|
136
136
|
flex-direction:row;
|
|
137
137
|
touch-action:none;
|
|
@@ -139,18 +139,18 @@
|
|
|
139
139
|
min-width:0;
|
|
140
140
|
}
|
|
141
141
|
@media (min-width: 1020px){
|
|
142
|
-
body.magritte-old-layout .magritte-preview___0Ge4C_1-2-
|
|
142
|
+
body.magritte-old-layout .magritte-preview___0Ge4C_1-2-9{
|
|
143
143
|
max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
|
|
144
144
|
overflow:hidden;
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
147
|
@media (min-width: 1024px){
|
|
148
|
-
body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-2-
|
|
148
|
+
body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-2-9{
|
|
149
149
|
max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
|
|
150
150
|
overflow:hidden;
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
|
-
.magritte-preview-list___SAXLZ_1-2-
|
|
153
|
+
.magritte-preview-list___SAXLZ_1-2-9{
|
|
154
154
|
margin-left:50%;
|
|
155
155
|
contain:layout paint;
|
|
156
156
|
display:flex;
|
|
@@ -160,18 +160,18 @@
|
|
|
160
160
|
flex:0 0 auto;
|
|
161
161
|
}
|
|
162
162
|
@media (min-width: 1020px){
|
|
163
|
-
body.magritte-old-layout .magritte-preview-list___SAXLZ_1-2-
|
|
163
|
+
body.magritte-old-layout .magritte-preview-list___SAXLZ_1-2-9{
|
|
164
164
|
margin:0;
|
|
165
165
|
gap:8px;
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
@media (min-width: 1024px){
|
|
169
|
-
body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-2-
|
|
169
|
+
body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-2-9{
|
|
170
170
|
margin:0;
|
|
171
171
|
gap:8px;
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
|
-
.magritte-preview-item___gz5f2_1-2-
|
|
174
|
+
.magritte-preview-item___gz5f2_1-2-9{
|
|
175
175
|
contain:layout paint size;
|
|
176
176
|
position:relative;
|
|
177
177
|
flex-shrink:0;
|
|
@@ -185,33 +185,33 @@
|
|
|
185
185
|
background-color:var(--magritte-color-component-skeleton-background-content-v24-5-0);
|
|
186
186
|
}
|
|
187
187
|
@media (min-width: 1020px){
|
|
188
|
-
body.magritte-old-layout .magritte-preview-item___gz5f2_1-2-
|
|
188
|
+
body.magritte-old-layout .magritte-preview-item___gz5f2_1-2-9{
|
|
189
189
|
height:80px;
|
|
190
190
|
border-radius:8px;
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
@media (min-width: 1024px){
|
|
194
|
-
body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-2-
|
|
194
|
+
body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-2-9{
|
|
195
195
|
height:80px;
|
|
196
196
|
border-radius:8px;
|
|
197
197
|
}
|
|
198
198
|
}
|
|
199
|
-
.magritte-preview-item-container___JDVsk_1-2-
|
|
199
|
+
.magritte-preview-item-container___JDVsk_1-2-9{
|
|
200
200
|
contain:layout paint size;
|
|
201
201
|
overflow:hidden;
|
|
202
202
|
scale:1;
|
|
203
203
|
}
|
|
204
204
|
@media (min-width: 1020px){
|
|
205
|
-
body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-2-
|
|
205
|
+
body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-2-9{
|
|
206
206
|
scale:1.66666667;
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
209
|
@media (min-width: 1024px){
|
|
210
|
-
body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-2-
|
|
210
|
+
body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-2-9{
|
|
211
211
|
scale:1.66666667;
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
|
-
.magritte-preview-item-container___JDVsk_1-2-
|
|
214
|
+
.magritte-preview-item-container___JDVsk_1-2-9 *{
|
|
215
215
|
touch-action:none;
|
|
216
216
|
position:absolute;
|
|
217
217
|
top:0;
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
height:100%;
|
|
222
222
|
user-select:none;
|
|
223
223
|
}
|
|
224
|
-
.magritte-media-viewer-toolbar___2C8nr_1-2-
|
|
224
|
+
.magritte-media-viewer-toolbar___2C8nr_1-2-9{
|
|
225
225
|
background:var(--magritte-color-background-overlay-toolbar-v24-5-0);
|
|
226
226
|
padding:0 8px;
|
|
227
227
|
display:grid;
|
|
@@ -232,30 +232,30 @@
|
|
|
232
232
|
grid-row:4;
|
|
233
233
|
z-index:10;
|
|
234
234
|
}
|
|
235
|
-
.magritte-media-viewer-toolbar___2C8nr_1-2-
|
|
235
|
+
.magritte-media-viewer-toolbar___2C8nr_1-2-9.magritte-no-description___NebrT_1-2-9{
|
|
236
236
|
display:flex;
|
|
237
237
|
justify-content:space-between;
|
|
238
238
|
}
|
|
239
239
|
@media (min-width: 1020px){
|
|
240
|
-
body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-2-
|
|
240
|
+
body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-2-9{
|
|
241
241
|
display:none;
|
|
242
242
|
}
|
|
243
243
|
}
|
|
244
244
|
@media (min-width: 1024px){
|
|
245
|
-
body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-2-
|
|
245
|
+
body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-2-9{
|
|
246
246
|
display:none;
|
|
247
247
|
}
|
|
248
248
|
}
|
|
249
|
-
.magritte-media-viewer-toolbar-left___YzkJt_1-2-
|
|
250
|
-
.magritte-media-viewer-toolbar-right___kBER9_1-2-
|
|
249
|
+
.magritte-media-viewer-toolbar-left___YzkJt_1-2-9,
|
|
250
|
+
.magritte-media-viewer-toolbar-right___kBER9_1-2-9{
|
|
251
251
|
display:flex;
|
|
252
252
|
gap:4px;
|
|
253
253
|
}
|
|
254
|
-
.magritte-media-viewer-toolbar-right___kBER9_1-2-
|
|
254
|
+
.magritte-media-viewer-toolbar-right___kBER9_1-2-9{
|
|
255
255
|
justify-content:end;
|
|
256
256
|
}
|
|
257
|
-
.magritte-prev-button___WMYjR_1-2-
|
|
258
|
-
.magritte-next-button___f8hJT_1-2-
|
|
257
|
+
.magritte-prev-button___WMYjR_1-2-9,
|
|
258
|
+
.magritte-next-button___f8hJT_1-2-9{
|
|
259
259
|
cursor:pointer;
|
|
260
260
|
position:absolute;
|
|
261
261
|
top:0;
|
|
@@ -263,40 +263,40 @@
|
|
|
263
263
|
width:48px;
|
|
264
264
|
opacity:var(--media-viewer-background-opacity);
|
|
265
265
|
}
|
|
266
|
-
.magritte-prev-button___WMYjR_1-2-
|
|
267
|
-
.magritte-next-button___f8hJT_1-2-
|
|
266
|
+
.magritte-prev-button___WMYjR_1-2-9:active,
|
|
267
|
+
.magritte-next-button___f8hJT_1-2-9:active{
|
|
268
268
|
background:linear-gradient(90deg, var(--magritte-gradient-component-media-viewer-background-fade-v24-5-0));
|
|
269
269
|
}
|
|
270
270
|
@media (min-width: 1020px){
|
|
271
|
-
body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-
|
|
272
|
-
body.magritte-old-layout .magritte-next-button___f8hJT_1-2-
|
|
271
|
+
body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-9,
|
|
272
|
+
body.magritte-old-layout .magritte-next-button___f8hJT_1-2-9{
|
|
273
273
|
width:88px;
|
|
274
274
|
}
|
|
275
|
-
body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-
|
|
276
|
-
body.magritte-old-layout .magritte-next-button___f8hJT_1-2-
|
|
275
|
+
body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-9:active,
|
|
276
|
+
body.magritte-old-layout .magritte-next-button___f8hJT_1-2-9:active{
|
|
277
277
|
background:none;
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
280
|
@media (min-width: 1024px){
|
|
281
|
-
body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-
|
|
282
|
-
body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-
|
|
281
|
+
body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-9,
|
|
282
|
+
body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-9{
|
|
283
283
|
width:88px;
|
|
284
284
|
}
|
|
285
|
-
body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-
|
|
286
|
-
body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-
|
|
285
|
+
body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-9:active,
|
|
286
|
+
body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-9:active{
|
|
287
287
|
background:none;
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
|
-
.magritte-prev-button___WMYjR_1-2-
|
|
290
|
+
.magritte-prev-button___WMYjR_1-2-9{
|
|
291
291
|
left:0;
|
|
292
292
|
}
|
|
293
|
-
.magritte-prev-button___WMYjR_1-2-
|
|
293
|
+
.magritte-prev-button___WMYjR_1-2-9:active{
|
|
294
294
|
background:linear-gradient(270deg, var(--magritte-gradient-component-media-viewer-background-fade-v24-5-0));
|
|
295
295
|
}
|
|
296
|
-
.magritte-next-button___f8hJT_1-2-
|
|
296
|
+
.magritte-next-button___f8hJT_1-2-9{
|
|
297
297
|
right:0;
|
|
298
298
|
}
|
|
299
|
-
.magritte-slide-button___sY8LB_1-2-
|
|
299
|
+
.magritte-slide-button___sY8LB_1-2-9{
|
|
300
300
|
display:flex;
|
|
301
301
|
background:none;
|
|
302
302
|
padding:0;
|
|
@@ -306,7 +306,7 @@
|
|
|
306
306
|
position:absolute;
|
|
307
307
|
inset:0;
|
|
308
308
|
}
|
|
309
|
-
.magritte-preview-placeholder___yuhW1_1-2-
|
|
309
|
+
.magritte-preview-placeholder___yuhW1_1-2-9{
|
|
310
310
|
--magritte-media-viewer-preview-width:24px;
|
|
311
311
|
--magritte-media-viewer-preview-gap:2px;
|
|
312
312
|
flex:0 0 auto;
|
|
@@ -315,24 +315,24 @@
|
|
|
315
315
|
flex-grow:0;
|
|
316
316
|
}
|
|
317
317
|
@media (min-width: 1020px){
|
|
318
|
-
body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-2-
|
|
318
|
+
body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-2-9{
|
|
319
319
|
--magritte-media-viewer-preview-width:40px;
|
|
320
320
|
--magritte-media-viewer-preview-gap:8px;
|
|
321
321
|
}
|
|
322
322
|
}
|
|
323
323
|
@media (min-width: 1024px){
|
|
324
|
-
body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-2-
|
|
324
|
+
body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-2-9{
|
|
325
325
|
--magritte-media-viewer-preview-width:40px;
|
|
326
326
|
--magritte-media-viewer-preview-gap:8px;
|
|
327
327
|
}
|
|
328
328
|
}
|
|
329
|
-
.magritte-gallery-item-loader___70TDe_1-2-
|
|
329
|
+
.magritte-gallery-item-loader___70TDe_1-2-9{
|
|
330
330
|
position:absolute;
|
|
331
331
|
top:50%;
|
|
332
332
|
left:50%;
|
|
333
333
|
transform:translate(-50%, -50%);
|
|
334
334
|
}
|
|
335
|
-
.magritte-gallery-item-error-container___Z-HyZ_1-2-
|
|
335
|
+
.magritte-gallery-item-error-container___Z-HyZ_1-2-9{
|
|
336
336
|
display:flex;
|
|
337
337
|
flex-direction:column;
|
|
338
338
|
align-items:center;
|
|
@@ -346,22 +346,22 @@
|
|
|
346
346
|
width:100%;
|
|
347
347
|
box-sizing:border-box;
|
|
348
348
|
}
|
|
349
|
-
.magritte-description-bottom-sheet-content___swnEV_1-2-
|
|
349
|
+
.magritte-description-bottom-sheet-content___swnEV_1-2-9{
|
|
350
350
|
padding:8px 0;
|
|
351
351
|
}
|
|
352
|
-
.magritte-header___egZXt_1-2-
|
|
352
|
+
.magritte-header___egZXt_1-2-9{
|
|
353
353
|
grid-row:1;
|
|
354
354
|
z-index:2;
|
|
355
355
|
opacity:var(--media-viewer-toolbars-opacity);
|
|
356
356
|
transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * -100%));
|
|
357
357
|
}
|
|
358
|
-
.magritte-footer___rOH-M_1-2-
|
|
358
|
+
.magritte-footer___rOH-M_1-2-9{
|
|
359
359
|
grid-row:3;
|
|
360
360
|
z-index:2;
|
|
361
361
|
opacity:var(--media-viewer-toolbars-opacity);
|
|
362
362
|
transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * 100%));
|
|
363
363
|
}
|
|
364
|
-
.magritte-description___dYc-E_1-2-
|
|
364
|
+
.magritte-description___dYc-E_1-2-9{
|
|
365
365
|
display:inline-block;
|
|
366
366
|
max-width:100%;
|
|
367
367
|
}
|
package/index.js
CHANGED
|
@@ -17,7 +17,7 @@ import './internal/utils.js';
|
|
|
17
17
|
import './internal/hooks/useTapToToggleTools.js';
|
|
18
18
|
import './internal/hooks/useVirtualization.js';
|
|
19
19
|
import './public/Footer.js';
|
|
20
|
-
import './media-viewer-
|
|
20
|
+
import './media-viewer-CAu8AQyY.js';
|
|
21
21
|
import './public/Gallery.js';
|
|
22
22
|
import '@hh.ru/magritte-common-resize';
|
|
23
23
|
import '@hh.ru/magritte-ui-icon/icon';
|
package/internal/Counter.js
CHANGED
|
@@ -8,7 +8,7 @@ import { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
|
|
|
8
8
|
import { useMediaViewerContext } from './context.js';
|
|
9
9
|
import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
|
|
10
10
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
11
|
-
import { s as styles } from '../media-viewer-
|
|
11
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
12
12
|
import './ImagesLoader.js';
|
|
13
13
|
import './utils.js';
|
|
14
14
|
import '@hh.ru/magritte-design-tokens/types';
|
|
@@ -30,7 +30,7 @@ const Counter = ({ items }) => {
|
|
|
30
30
|
}
|
|
31
31
|
return (jsxs("div", { className: classNames(styles.previewCounter, { [styles.withDescription]: !!description }), onClick: () => {
|
|
32
32
|
setShowDescription(!!description);
|
|
33
|
-
}, children: [jsx("span", { className: styles.counterNumber, "aria-atomic": "true", "aria-live": "polite", children: jsx(Text, { style: "
|
|
33
|
+
}, children: [jsx("span", { className: styles.counterNumber, "aria-atomic": "true", "aria-live": "polite", children: jsx(Text, { style: "constant", typography: "subtitle-1-semibold", ellipsis: true, children: `${currentItemIndex + 1} ${ofTrl} ${items.length}` }) }), !!description && (jsxs(Fragment, { children: [jsx("span", { ref: elementRef, className: styles.description, children: jsx(Text, { style: "constant-secondary", typography: "label-4-regular", ellipsis: true, children: description }) }), jsx(TooltipHover, { placement: 'top-center', activatorRef: elementRef, size: "small", onClose: () => setShowDescription(false), ignoreIntersections: false, children: description }), jsx(BottomSheet, { visible: showDescription, onClose: () => setShowDescription(false), children: jsx("div", { className: styles.descriptionBottomSheetContent, children: jsx(Text, { style: "primary", typography: "paragraph-2-regular", children: description }) }) })] })), !description && jsx("span", { className: styles.noDescriptionPlaceholder })] }));
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
export { Counter };
|
package/internal/Counter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Counter.js","sources":["src/internal/Counter.tsx"],"sourcesContent":["import { type FC, type ReactElement, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValueEvent } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport type { GalleryItemProps } from '@hh.ru/magritte-ui-media-viewer/internal/GalleryItemBody';\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { TooltipHover } from '@hh.ru/magritte-ui-tooltip';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\nexport const Counter: FC<{ items: ReactElement<GalleryItemProps>[] }> = ({ items }) => {\n const globalContext = useMediaViewerContext();\n const [currentItemIndex, setCurrentItemIndex] = useState(Math.round(globalContext.currentSlideIndex.get()));\n const [showDescription, setShowDescription] = useState(false);\n const description = items[currentItemIndex]?.props.description;\n const elementRef = useRef<HTMLDivElement>(null);\n\n useMotionValueEvent(globalContext.currentSlideIndex, 'change', (newIndex) => {\n setShowDescription(false);\n setCurrentItemIndex(Math.round(newIndex));\n });\n\n const ofTrl = useTranslation('MediaViewer', 'of');\n\n if (items.length <= 1) {\n return null;\n }\n\n return (\n <div\n className={classNames(styles.previewCounter, { [styles.withDescription]: !!description })}\n onClick={() => {\n setShowDescription(!!description);\n }}\n >\n <span className={styles.counterNumber} aria-atomic=\"true\" aria-live=\"polite\">\n <Text\n style=\"
|
|
1
|
+
{"version":3,"file":"Counter.js","sources":["src/internal/Counter.tsx"],"sourcesContent":["import { type FC, type ReactElement, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValueEvent } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport type { GalleryItemProps } from '@hh.ru/magritte-ui-media-viewer/internal/GalleryItemBody';\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { TooltipHover } from '@hh.ru/magritte-ui-tooltip';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\nexport const Counter: FC<{ items: ReactElement<GalleryItemProps>[] }> = ({ items }) => {\n const globalContext = useMediaViewerContext();\n const [currentItemIndex, setCurrentItemIndex] = useState(Math.round(globalContext.currentSlideIndex.get()));\n const [showDescription, setShowDescription] = useState(false);\n const description = items[currentItemIndex]?.props.description;\n const elementRef = useRef<HTMLDivElement>(null);\n\n useMotionValueEvent(globalContext.currentSlideIndex, 'change', (newIndex) => {\n setShowDescription(false);\n setCurrentItemIndex(Math.round(newIndex));\n });\n\n const ofTrl = useTranslation('MediaViewer', 'of');\n\n if (items.length <= 1) {\n return null;\n }\n\n return (\n <div\n className={classNames(styles.previewCounter, { [styles.withDescription]: !!description })}\n onClick={() => {\n setShowDescription(!!description);\n }}\n >\n <span className={styles.counterNumber} aria-atomic=\"true\" aria-live=\"polite\">\n <Text\n style=\"constant\"\n typography=\"subtitle-1-semibold\"\n ellipsis\n >{`${currentItemIndex + 1} ${ofTrl} ${items.length}`}</Text>\n </span>\n {!!description && (\n <>\n <span ref={elementRef} className={styles.description}>\n <Text style=\"constant-secondary\" typography=\"label-4-regular\" ellipsis>\n {description}\n </Text>\n </span>\n <TooltipHover\n placement={'top-center'}\n activatorRef={elementRef}\n size=\"small\"\n onClose={() => setShowDescription(false)}\n ignoreIntersections={false}\n >\n {description}\n </TooltipHover>\n <BottomSheet visible={showDescription} onClose={() => setShowDescription(false)}>\n <div className={styles.descriptionBottomSheetContent}>\n <Text style=\"primary\" typography=\"paragraph-2-regular\">\n {description}\n </Text>\n </div>\n </BottomSheet>\n </>\n )}\n {!description && <span className={styles.noDescriptionPlaceholder}></span>}\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ import { usePinchToZoom } from './hooks/usePinchToZoom.js';
|
|
|
14
14
|
import { useWheelToZoom } from './hooks/useWheelToZoom.js';
|
|
15
15
|
import { lerp, clamp } from './utils.js';
|
|
16
16
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
17
|
-
import { s as styles } from '../media-viewer-
|
|
17
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
18
18
|
import './ImagesLoader.js';
|
|
19
19
|
import '@use-gesture/react';
|
|
20
20
|
|
|
@@ -74,7 +74,7 @@ const GalleryItemBody = ({ index = 0, src, description }) => {
|
|
|
74
74
|
animate(controller.offsetX, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });
|
|
75
75
|
animate(controller.offsetY, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });
|
|
76
76
|
});
|
|
77
|
-
return (jsx(GalleryItemContext.Provider, { value: setContentSize, children: jsxs(motion.div, { className: styles.galleryItem, style: { x: translateX }, ...bindPinchToZoom, ...bindPan(), ...bindDoubleTapScale, ...bindWheelToZoom, children: [!!loadingFailed && (jsxs("div", { className: styles.galleryItemErrorContainer, children: [jsx(Text, { typography: "title-5-semibold", style: "
|
|
77
|
+
return (jsx(GalleryItemContext.Provider, { value: setContentSize, children: jsxs(motion.div, { className: styles.galleryItem, style: { x: translateX }, ...bindPinchToZoom, ...bindPan(), ...bindDoubleTapScale, ...bindWheelToZoom, children: [!!loadingFailed && (jsxs("div", { className: styles.galleryItemErrorContainer, children: [jsx(Text, { typography: "title-5-semibold", style: "constant", Element: "span", children: loadErrTrl }), jsx(Text, { typography: "paragraph-2-regular", style: "constant-secondary", Element: "span", children: loadErrDescTrl })] })), !isVisible && !loadingFailed && (jsx("div", { className: styles.galleryItemLoader, children: jsx(Loader, { size: 48, initial: "constant-secondary" }) })), !!isVisible && (jsx(motion.div, { className: styles.galleryItemTransformContainer, style: {
|
|
78
78
|
scale: controller.scale,
|
|
79
79
|
rotate,
|
|
80
80
|
x,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryItemBody.js","sources":["src/internal/GalleryItemBody.tsx"],"sourcesContent":["import { type FC, useEffect, useState } from 'react';\nimport { motion, useMotionValue, useTransform, animate, useMotionValueEvent, HTMLMotionProps } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { tokenSemanticAnimationTimeMDuration } from '@hh.ru/magritte-design-tokens/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { EASE_BASE } from '@hh.ru/magritte-ui-media-viewer/internal/animations';\nimport { useMediaViewerContext, GalleryItemContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { useDoubleTapScale } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useDoubleTapScale';\nimport {\n useGalleryItemController,\n isFullyInvisible,\n} from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useGalleryItemController';\nimport { usePan } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/usePan';\nimport { usePinchToZoom } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/usePinchToZoom';\nimport { useWheelToZoom } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useWheelToZoom';\nimport { lerp, clamp } from '@hh.ru/magritte-ui-media-viewer/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\n/** Внешние пропсы GalleryItem — то, что передаёт пользователь */\nexport interface GalleryItemProps {\n /** Описание элемента */\n description?: string;\n /** URL изображения */\n src: string;\n /** URL превью изображения */\n previewSrc?: string;\n}\n\n/** Внутренние пропсы GalleryItem — включают index, инжектируемый Gallery */\nexport interface GalleryItemInternalProps extends GalleryItemProps {\n index: number;\n}\n\nconst SLIDE_GAP = 24;\n\nexport const GalleryItemBody: FC<GalleryItemInternalProps> = ({ index = 0, src, description }) => {\n const globalContext = useMediaViewerContext();\n const [setContentSize, controller] = useGalleryItemController(globalContext, src, index, description);\n controller.index.set(index);\n\n const bindPinchToZoom = usePinchToZoom(controller, globalContext.viewPortDimensions);\n const bindPan = usePan(controller, globalContext.viewPortDimensions);\n const bindDoubleTapScale = useDoubleTapScale(controller);\n const bindWheelToZoom = useWheelToZoom(controller, globalContext.viewPortDimensions);\n\n const [isVisible, setIsVisible] = useState(() => controller.contentSize.get() !== null);\n const [loadingFailed, setLoadingFailed] = useState(false);\n\n const loadErrTrl = useTranslation('MediaViewer', 'itemLoadErrorTitle');\n const loadErrDescTrl = useTranslation('MediaViewer', 'itemLoadErrorDescription');\n\n useMotionValueEvent(controller.contentSize, 'change', () => {\n setIsVisible(controller.contentSize.get() !== null);\n });\n\n useEffect(() => {\n const meta = globalContext.imagesLoader.getUrlMeta(src);\n if (meta) {\n if (meta.status === 'loaded' && meta.width && meta.height) {\n setContentSize({ width: meta.width, height: meta.height });\n return void 0;\n }\n if (meta.status === 'error') {\n setLoadingFailed(true);\n return void 0;\n }\n }\n\n setIsVisible(false);\n setLoadingFailed(false);\n\n return globalContext.imagesLoader.waitingForUrl(src, ({ status, width, height }) => {\n if (status === 'error') {\n setLoadingFailed(true);\n return;\n }\n\n width && height && setContentSize({ width, height });\n });\n }, [setContentSize, globalContext, src]);\n\n const translateX = useTransform(globalContext.currentSlideIndex, (value) => {\n const progress = clamp(index - value, -1, 1);\n return `calc(${lerp(0, 100, progress)}% + ${lerp(0, SLIDE_GAP, progress)}px)`;\n });\n\n const x = useTransform(controller.offsetX, (value) => `calc(-50% + ${value}px)`);\n const y = useTransform(controller.offsetY, (value) => `calc(-50% + ${value}px)`);\n const rotate = useMotionValue(0);\n useMotionValueEvent(controller.rotation, 'change', (value) => {\n const targetRotation = value * 90;\n rotate.stop();\n if (isFullyInvisible(controller, globalContext)) {\n rotate.set(targetRotation);\n return;\n }\n animate(rotate, targetRotation, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetX, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetY, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n });\n\n return (\n <GalleryItemContext.Provider value={setContentSize}>\n <motion.div\n className={styles.galleryItem}\n style={{ x: translateX }}\n {...bindPinchToZoom}\n {...(bindPan() as HTMLMotionProps<'div'>)}\n {...bindDoubleTapScale}\n {...bindWheelToZoom}\n >\n {!!loadingFailed && (\n <div className={styles.galleryItemErrorContainer}>\n <Text typography=\"title-5-semibold\" style=\"contrast\" Element=\"span\">\n {loadErrTrl}\n </Text>\n <Text typography=\"paragraph-2-regular\" style=\"contrast-secondary\" Element=\"span\">\n {loadErrDescTrl}\n </Text>\n </div>\n )}\n {!isVisible && !loadingFailed && (\n <div className={styles.galleryItemLoader}>\n <Loader size={48} initial=\"constant-secondary\" />\n </div>\n )}\n {!!isVisible && (\n <motion.div\n className={styles.galleryItemTransformContainer}\n style={{\n scale: controller.scale,\n rotate,\n x,\n y,\n }}\n draggable={false}\n >\n <img src={src} alt={description || ''} draggable={false} />\n </motion.div>\n )}\n </motion.div>\n </GalleryItemContext.Provider>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GalleryItemBody.js","sources":["src/internal/GalleryItemBody.tsx"],"sourcesContent":["import { type FC, useEffect, useState } from 'react';\nimport { motion, useMotionValue, useTransform, animate, useMotionValueEvent, HTMLMotionProps } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { tokenSemanticAnimationTimeMDuration } from '@hh.ru/magritte-design-tokens/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { EASE_BASE } from '@hh.ru/magritte-ui-media-viewer/internal/animations';\nimport { useMediaViewerContext, GalleryItemContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { useDoubleTapScale } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useDoubleTapScale';\nimport {\n useGalleryItemController,\n isFullyInvisible,\n} from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useGalleryItemController';\nimport { usePan } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/usePan';\nimport { usePinchToZoom } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/usePinchToZoom';\nimport { useWheelToZoom } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useWheelToZoom';\nimport { lerp, clamp } from '@hh.ru/magritte-ui-media-viewer/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\n/** Внешние пропсы GalleryItem — то, что передаёт пользователь */\nexport interface GalleryItemProps {\n /** Описание элемента */\n description?: string;\n /** URL изображения */\n src: string;\n /** URL превью изображения */\n previewSrc?: string;\n}\n\n/** Внутренние пропсы GalleryItem — включают index, инжектируемый Gallery */\nexport interface GalleryItemInternalProps extends GalleryItemProps {\n index: number;\n}\n\nconst SLIDE_GAP = 24;\n\nexport const GalleryItemBody: FC<GalleryItemInternalProps> = ({ index = 0, src, description }) => {\n const globalContext = useMediaViewerContext();\n const [setContentSize, controller] = useGalleryItemController(globalContext, src, index, description);\n controller.index.set(index);\n\n const bindPinchToZoom = usePinchToZoom(controller, globalContext.viewPortDimensions);\n const bindPan = usePan(controller, globalContext.viewPortDimensions);\n const bindDoubleTapScale = useDoubleTapScale(controller);\n const bindWheelToZoom = useWheelToZoom(controller, globalContext.viewPortDimensions);\n\n const [isVisible, setIsVisible] = useState(() => controller.contentSize.get() !== null);\n const [loadingFailed, setLoadingFailed] = useState(false);\n\n const loadErrTrl = useTranslation('MediaViewer', 'itemLoadErrorTitle');\n const loadErrDescTrl = useTranslation('MediaViewer', 'itemLoadErrorDescription');\n\n useMotionValueEvent(controller.contentSize, 'change', () => {\n setIsVisible(controller.contentSize.get() !== null);\n });\n\n useEffect(() => {\n const meta = globalContext.imagesLoader.getUrlMeta(src);\n if (meta) {\n if (meta.status === 'loaded' && meta.width && meta.height) {\n setContentSize({ width: meta.width, height: meta.height });\n return void 0;\n }\n if (meta.status === 'error') {\n setLoadingFailed(true);\n return void 0;\n }\n }\n\n setIsVisible(false);\n setLoadingFailed(false);\n\n return globalContext.imagesLoader.waitingForUrl(src, ({ status, width, height }) => {\n if (status === 'error') {\n setLoadingFailed(true);\n return;\n }\n\n width && height && setContentSize({ width, height });\n });\n }, [setContentSize, globalContext, src]);\n\n const translateX = useTransform(globalContext.currentSlideIndex, (value) => {\n const progress = clamp(index - value, -1, 1);\n return `calc(${lerp(0, 100, progress)}% + ${lerp(0, SLIDE_GAP, progress)}px)`;\n });\n\n const x = useTransform(controller.offsetX, (value) => `calc(-50% + ${value}px)`);\n const y = useTransform(controller.offsetY, (value) => `calc(-50% + ${value}px)`);\n const rotate = useMotionValue(0);\n useMotionValueEvent(controller.rotation, 'change', (value) => {\n const targetRotation = value * 90;\n rotate.stop();\n if (isFullyInvisible(controller, globalContext)) {\n rotate.set(targetRotation);\n return;\n }\n animate(rotate, targetRotation, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetX, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetY, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n });\n\n return (\n <GalleryItemContext.Provider value={setContentSize}>\n <motion.div\n className={styles.galleryItem}\n style={{ x: translateX }}\n {...bindPinchToZoom}\n {...(bindPan() as HTMLMotionProps<'div'>)}\n {...bindDoubleTapScale}\n {...bindWheelToZoom}\n >\n {!!loadingFailed && (\n <div className={styles.galleryItemErrorContainer}>\n <Text typography=\"title-5-semibold\" style=\"constant\" Element=\"span\">\n {loadErrTrl}\n </Text>\n <Text typography=\"paragraph-2-regular\" style=\"constant-secondary\" Element=\"span\">\n {loadErrDescTrl}\n </Text>\n </div>\n )}\n {!isVisible && !loadingFailed && (\n <div className={styles.galleryItemLoader}>\n <Loader size={48} initial=\"constant-secondary\" />\n </div>\n )}\n {!!isVisible && (\n <motion.div\n className={styles.galleryItemTransformContainer}\n style={{\n scale: controller.scale,\n rotate,\n x,\n y,\n }}\n draggable={false}\n >\n <img src={src} alt={description || ''} draggable={false} />\n </motion.div>\n )}\n </motion.div>\n </GalleryItemContext.Provider>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/internal/PreviewItem.js
CHANGED
|
@@ -9,7 +9,7 @@ import '@hh.ru/magritte-ui-breakpoint';
|
|
|
9
9
|
import './utils.js';
|
|
10
10
|
import '@hh.ru/magritte-design-tokens/types';
|
|
11
11
|
import './animations.js';
|
|
12
|
-
import '../media-viewer-
|
|
12
|
+
import '../media-viewer-CAu8AQyY.js';
|
|
13
13
|
import './ImagesLoader.js';
|
|
14
14
|
|
|
15
15
|
const PreviewItem = ({ index, ...props }) => {
|
|
@@ -5,7 +5,7 @@ import { useMotionValue, useTransform, useMotionValueEvent, animate, motion } fr
|
|
|
5
5
|
import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
6
6
|
import { useMediaViewerContext, usePreviewContext } from './context.js';
|
|
7
7
|
import { useDetectDiscreteChange, clamp } from './utils.js';
|
|
8
|
-
import { s as styles } from '../media-viewer-
|
|
8
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
9
9
|
import './ImagesLoader.js';
|
|
10
10
|
import '@hh.ru/magritte-design-tokens/types';
|
|
11
11
|
import './animations.js';
|
|
@@ -9,7 +9,7 @@ import { EASE_BASE } from './animations.js';
|
|
|
9
9
|
import { useMediaViewerContext } from './context.js';
|
|
10
10
|
import { useInitOnce, findNextValue, getDimensionsAfterRotation, clampOffset } from './utils.js';
|
|
11
11
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
12
|
-
import { s as styles } from '../media-viewer-
|
|
12
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
13
13
|
import './ImagesLoader.js';
|
|
14
14
|
|
|
15
15
|
const getCurrentControllerLimits = (globalContext) => {
|
|
@@ -90,9 +90,9 @@ const PreviewZoomControl = () => {
|
|
|
90
90
|
}
|
|
91
91
|
return () => subs.forEach((unsub) => unsub?.());
|
|
92
92
|
}, [globalContext, updateZoom]);
|
|
93
|
-
return (jsxs("div", { className: styles.previewZoomControl, children: [jsx(MagnifierMinusOutlinedSize24, { initialColor: "
|
|
93
|
+
return (jsxs("div", { className: styles.previewZoomControl, children: [jsx(MagnifierMinusOutlinedSize24, { initialColor: "constant", padding: 8, disabled: zoom !== null && (zoomLimits === null || zoom <= Math.round(zoomLimits?.min * 100)), onClick: () => {
|
|
94
94
|
applyNextZoom('out');
|
|
95
|
-
}, borderRadius: "halfHeight", "aria-label": zoomOutTrl }), jsx(Text, { style: "
|
|
95
|
+
}, borderRadius: "halfHeight", "aria-label": zoomOutTrl }), jsx(Text, { style: "constant", typography: "label-2-regular", children: `${zoom ?? 100}%` }), jsx(MagnifierPlusOutlinedSize24, { initialColor: "constant", padding: 8, disabled: zoom !== null && (zoomLimits === null || zoom >= Math.round(zoomLimits?.max * 100)), onClick: () => {
|
|
96
96
|
applyNextZoom('in');
|
|
97
97
|
}, borderRadius: "halfHeight", "aria-label": zoomInTrl })] }));
|
|
98
98
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewZoomControl.js","sources":["src/internal/PreviewZoomControl.tsx"],"sourcesContent":["import { type FC, useState, useRef, useEffect } from 'react';\nimport { animate } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { tokenSemanticAnimationTimeMDuration } from '@hh.ru/magritte-design-tokens/types';\nimport { MagnifierMinusOutlinedSize24, MagnifierPlusOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { EASE_BASE } from '@hh.ru/magritte-ui-media-viewer/internal/animations';\nimport { type MediaViewerContextValue, useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport {\n findNextValue,\n getDimensionsAfterRotation,\n clampOffset,\n useInitOnce,\n} from '@hh.ru/magritte-ui-media-viewer/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\nconst getCurrentControllerLimits = (globalContext: MediaViewerContextValue) => {\n const controller = globalContext.currentSlideController.get();\n if (!controller) {\n return null;\n }\n const rotation = controller.rotation.get();\n const zoomStops = controller.zoomStops.get()[rotation % 2];\n return {\n min: zoomStops?.[0] ?? Number.NEGATIVE_INFINITY,\n max: zoomStops?.[zoomStops.length - 1] ?? Number.POSITIVE_INFINITY,\n };\n};\n\nexport const PreviewZoomControl: FC = () => {\n const globalContext = useMediaViewerContext();\n const [zoom, setZoom] = useState<number | null>(() => {\n const zoom = globalContext.currentSlideController.get()?.scale.get() || null;\n return zoom ? Math.round(zoom * 100) : null;\n });\n const updateZoom = useInitOnce(() => (newZoom: number | null) => {\n setZoom(newZoom ? Math.round(newZoom * 100) : null);\n });\n\n const [zoomLimits, setZoomLimits] = useState<{ min: number; max: number } | null>(() =>\n getCurrentControllerLimits(globalContext)\n );\n const prevControllerUnsubRef = useRef<VoidFunction[]>([]);\n const zoomInTrl = useTranslation('MediaViewer', 'zoomIn');\n const zoomOutTrl = useTranslation('MediaViewer', 'zoomOut');\n\n const applyNextZoom = (direction: 'in' | 'out') => {\n const controller = globalContext.currentSlideController.get();\n const contentSize = controller?.contentSize.get();\n const viewPortDimensions = globalContext.viewPortDimensions.get();\n const rotation = controller?.rotation.get() ?? 0;\n if (!controller || !contentSize || !viewPortDimensions) {\n return;\n }\n const nextZoom = findNextValue(\n controller.zoomStops.get()[rotation % 2],\n controller.scale.get() ?? 1,\n direction === 'in'\n );\n\n controller.scale.stop();\n controller.offsetX.stop();\n controller.offsetY.stop();\n\n const sizeAfterRotation = getDimensionsAfterRotation(contentSize, rotation);\n const clampedOffsetX = clampOffset(\n controller.offsetX.get(),\n sizeAfterRotation.width * nextZoom,\n viewPortDimensions.width\n );\n const clampedOffsetY = clampOffset(\n controller.offsetY.get(),\n sizeAfterRotation.height * nextZoom,\n viewPortDimensions.height\n );\n\n animate(controller.scale, nextZoom, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetX, clampedOffsetX, {\n duration: tokenSemanticAnimationTimeMDuration / 1000,\n ease: EASE_BASE,\n });\n animate(controller.offsetY, clampedOffsetY, {\n duration: tokenSemanticAnimationTimeMDuration / 1000,\n ease: EASE_BASE,\n });\n };\n\n useEffect(() => {\n const subs = [\n globalContext.currentSlideController.on('change', (controller) => {\n if (!controller) {\n return;\n }\n const scale = controller.scale.get() || null;\n updateZoom(scale);\n // слушаем всегда только один контроллер, от предыдущего надо отписаться\n prevControllerUnsubRef.current.forEach((unsub) => unsub());\n prevControllerUnsubRef.current = [\n controller.scale.on('change', updateZoom),\n controller.zoomStops.on('change', () => setZoomLimits(getCurrentControllerLimits(globalContext))),\n ];\n setZoomLimits(getCurrentControllerLimits(globalContext));\n }),\n () => prevControllerUnsubRef.current.forEach((unsub) => unsub()),\n ];\n\n const currentController = globalContext.currentSlideController.get();\n if (currentController) {\n prevControllerUnsubRef.current = [\n currentController.scale.on('change', updateZoom),\n currentController.zoomStops.on('change', () =>\n setZoomLimits(getCurrentControllerLimits(globalContext))\n ),\n ];\n setZoomLimits(getCurrentControllerLimits(globalContext));\n }\n return () => subs.forEach((unsub) => unsub?.());\n }, [globalContext, updateZoom]);\n\n return (\n <div className={styles.previewZoomControl}>\n <MagnifierMinusOutlinedSize24\n initialColor=\"contrast\"\n padding={8}\n disabled={zoom !== null && (zoomLimits === null || zoom <= Math.round(zoomLimits?.min * 100))}\n onClick={() => {\n applyNextZoom('out');\n }}\n borderRadius=\"halfHeight\"\n aria-label={zoomOutTrl}\n />\n <Text style=\"contrast\" typography=\"label-2-regular\">\n {`${zoom ?? 100}%`}\n </Text>\n <MagnifierPlusOutlinedSize24\n initialColor=\"contrast\"\n padding={8}\n disabled={zoom !== null && (zoomLimits === null || zoom >= Math.round(zoomLimits?.max * 100))}\n onClick={() => {\n applyNextZoom('in');\n }}\n borderRadius=\"halfHeight\"\n aria-label={zoomInTrl}\n />\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PreviewZoomControl.js","sources":["src/internal/PreviewZoomControl.tsx"],"sourcesContent":["import { type FC, useState, useRef, useEffect } from 'react';\nimport { animate } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { tokenSemanticAnimationTimeMDuration } from '@hh.ru/magritte-design-tokens/types';\nimport { MagnifierMinusOutlinedSize24, MagnifierPlusOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { EASE_BASE } from '@hh.ru/magritte-ui-media-viewer/internal/animations';\nimport { type MediaViewerContextValue, useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport {\n findNextValue,\n getDimensionsAfterRotation,\n clampOffset,\n useInitOnce,\n} from '@hh.ru/magritte-ui-media-viewer/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\nconst getCurrentControllerLimits = (globalContext: MediaViewerContextValue) => {\n const controller = globalContext.currentSlideController.get();\n if (!controller) {\n return null;\n }\n const rotation = controller.rotation.get();\n const zoomStops = controller.zoomStops.get()[rotation % 2];\n return {\n min: zoomStops?.[0] ?? Number.NEGATIVE_INFINITY,\n max: zoomStops?.[zoomStops.length - 1] ?? Number.POSITIVE_INFINITY,\n };\n};\n\nexport const PreviewZoomControl: FC = () => {\n const globalContext = useMediaViewerContext();\n const [zoom, setZoom] = useState<number | null>(() => {\n const zoom = globalContext.currentSlideController.get()?.scale.get() || null;\n return zoom ? Math.round(zoom * 100) : null;\n });\n const updateZoom = useInitOnce(() => (newZoom: number | null) => {\n setZoom(newZoom ? Math.round(newZoom * 100) : null);\n });\n\n const [zoomLimits, setZoomLimits] = useState<{ min: number; max: number } | null>(() =>\n getCurrentControllerLimits(globalContext)\n );\n const prevControllerUnsubRef = useRef<VoidFunction[]>([]);\n const zoomInTrl = useTranslation('MediaViewer', 'zoomIn');\n const zoomOutTrl = useTranslation('MediaViewer', 'zoomOut');\n\n const applyNextZoom = (direction: 'in' | 'out') => {\n const controller = globalContext.currentSlideController.get();\n const contentSize = controller?.contentSize.get();\n const viewPortDimensions = globalContext.viewPortDimensions.get();\n const rotation = controller?.rotation.get() ?? 0;\n if (!controller || !contentSize || !viewPortDimensions) {\n return;\n }\n const nextZoom = findNextValue(\n controller.zoomStops.get()[rotation % 2],\n controller.scale.get() ?? 1,\n direction === 'in'\n );\n\n controller.scale.stop();\n controller.offsetX.stop();\n controller.offsetY.stop();\n\n const sizeAfterRotation = getDimensionsAfterRotation(contentSize, rotation);\n const clampedOffsetX = clampOffset(\n controller.offsetX.get(),\n sizeAfterRotation.width * nextZoom,\n viewPortDimensions.width\n );\n const clampedOffsetY = clampOffset(\n controller.offsetY.get(),\n sizeAfterRotation.height * nextZoom,\n viewPortDimensions.height\n );\n\n animate(controller.scale, nextZoom, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetX, clampedOffsetX, {\n duration: tokenSemanticAnimationTimeMDuration / 1000,\n ease: EASE_BASE,\n });\n animate(controller.offsetY, clampedOffsetY, {\n duration: tokenSemanticAnimationTimeMDuration / 1000,\n ease: EASE_BASE,\n });\n };\n\n useEffect(() => {\n const subs = [\n globalContext.currentSlideController.on('change', (controller) => {\n if (!controller) {\n return;\n }\n const scale = controller.scale.get() || null;\n updateZoom(scale);\n // слушаем всегда только один контроллер, от предыдущего надо отписаться\n prevControllerUnsubRef.current.forEach((unsub) => unsub());\n prevControllerUnsubRef.current = [\n controller.scale.on('change', updateZoom),\n controller.zoomStops.on('change', () => setZoomLimits(getCurrentControllerLimits(globalContext))),\n ];\n setZoomLimits(getCurrentControllerLimits(globalContext));\n }),\n () => prevControllerUnsubRef.current.forEach((unsub) => unsub()),\n ];\n\n const currentController = globalContext.currentSlideController.get();\n if (currentController) {\n prevControllerUnsubRef.current = [\n currentController.scale.on('change', updateZoom),\n currentController.zoomStops.on('change', () =>\n setZoomLimits(getCurrentControllerLimits(globalContext))\n ),\n ];\n setZoomLimits(getCurrentControllerLimits(globalContext));\n }\n return () => subs.forEach((unsub) => unsub?.());\n }, [globalContext, updateZoom]);\n\n return (\n <div className={styles.previewZoomControl}>\n <MagnifierMinusOutlinedSize24\n initialColor=\"constant\"\n padding={8}\n disabled={zoom !== null && (zoomLimits === null || zoom <= Math.round(zoomLimits?.min * 100))}\n onClick={() => {\n applyNextZoom('out');\n }}\n borderRadius=\"halfHeight\"\n aria-label={zoomOutTrl}\n />\n <Text style=\"constant\" typography=\"label-2-regular\">\n {`${zoom ?? 100}%`}\n </Text>\n <MagnifierPlusOutlinedSize24\n initialColor=\"constant\"\n padding={8}\n disabled={zoom !== null && (zoomLimits === null || zoom >= Math.round(zoomLimits?.max * 100))}\n onClick={() => {\n applyNextZoom('in');\n }}\n borderRadius=\"halfHeight\"\n aria-label={zoomInTrl}\n />\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"media-viewer":"magritte-media-viewer___KnrXP_1-2-9","mediaViewer":"magritte-media-viewer___KnrXP_1-2-9","gallery-placeholder":"magritte-gallery-placeholder___rUoGL_1-2-9","galleryPlaceholder":"magritte-gallery-placeholder___rUoGL_1-2-9","media-viewer-gallery":"magritte-media-viewer-gallery___P0SnN_1-2-9","mediaViewerGallery":"magritte-media-viewer-gallery___P0SnN_1-2-9","gallery-item":"magritte-gallery-item___Js0Z5_1-2-9","galleryItem":"magritte-gallery-item___Js0Z5_1-2-9","gallery-item-transform-container":"magritte-gallery-item-transform-container___N8-sA_1-2-9","galleryItemTransformContainer":"magritte-gallery-item-transform-container___N8-sA_1-2-9","preview-counter":"magritte-preview-counter___uP2Hc_1-2-9","previewCounter":"magritte-preview-counter___uP2Hc_1-2-9","with-description":"magritte-with-description___-w7ld_1-2-9","withDescription":"magritte-with-description___-w7ld_1-2-9","counter-number":"magritte-counter-number___gUpMp_1-2-9","counterNumber":"magritte-counter-number___gUpMp_1-2-9","no-description-placeholder":"magritte-no-description-placeholder___qc6h2_1-2-9","noDescriptionPlaceholder":"magritte-no-description-placeholder___qc6h2_1-2-9","preview-zoom-control":"magritte-preview-zoom-control___026jA_1-2-9","previewZoomControl":"magritte-preview-zoom-control___026jA_1-2-9","preview-container":"magritte-preview-container___nwjNY_1-2-9","previewContainer":"magritte-preview-container___nwjNY_1-2-9","preview":"magritte-preview___0Ge4C_1-2-9","preview-list":"magritte-preview-list___SAXLZ_1-2-9","previewList":"magritte-preview-list___SAXLZ_1-2-9","preview-item":"magritte-preview-item___gz5f2_1-2-9","previewItem":"magritte-preview-item___gz5f2_1-2-9","preview-item-container":"magritte-preview-item-container___JDVsk_1-2-9","previewItemContainer":"magritte-preview-item-container___JDVsk_1-2-9","media-viewer-toolbar":"magritte-media-viewer-toolbar___2C8nr_1-2-9","mediaViewerToolbar":"magritte-media-viewer-toolbar___2C8nr_1-2-9","no-description":"magritte-no-description___NebrT_1-2-9","noDescription":"magritte-no-description___NebrT_1-2-9","media-viewer-toolbar-left":"magritte-media-viewer-toolbar-left___YzkJt_1-2-9","mediaViewerToolbarLeft":"magritte-media-viewer-toolbar-left___YzkJt_1-2-9","media-viewer-toolbar-right":"magritte-media-viewer-toolbar-right___kBER9_1-2-9","mediaViewerToolbarRight":"magritte-media-viewer-toolbar-right___kBER9_1-2-9","prev-button":"magritte-prev-button___WMYjR_1-2-9","prevButton":"magritte-prev-button___WMYjR_1-2-9","next-button":"magritte-next-button___f8hJT_1-2-9","nextButton":"magritte-next-button___f8hJT_1-2-9","slide-button":"magritte-slide-button___sY8LB_1-2-9","slideButton":"magritte-slide-button___sY8LB_1-2-9","preview-placeholder":"magritte-preview-placeholder___yuhW1_1-2-9","previewPlaceholder":"magritte-preview-placeholder___yuhW1_1-2-9","gallery-item-loader":"magritte-gallery-item-loader___70TDe_1-2-9","galleryItemLoader":"magritte-gallery-item-loader___70TDe_1-2-9","gallery-item-error-container":"magritte-gallery-item-error-container___Z-HyZ_1-2-9","galleryItemErrorContainer":"magritte-gallery-item-error-container___Z-HyZ_1-2-9","description-bottom-sheet-content":"magritte-description-bottom-sheet-content___swnEV_1-2-9","descriptionBottomSheetContent":"magritte-description-bottom-sheet-content___swnEV_1-2-9","header":"magritte-header___egZXt_1-2-9","footer":"magritte-footer___rOH-M_1-2-9","description":"magritte-description___dYc-E_1-2-9"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=media-viewer-CAu8AQyY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-viewer-CAu8AQyY.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-media-viewer",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.9",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
"@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
|
|
28
28
|
"@hh.ru/magritte-common-use-translation": "3.1.0",
|
|
29
29
|
"@hh.ru/magritte-design-tokens": "24.5.0",
|
|
30
|
-
"@hh.ru/magritte-ui-bottom-sheet": "9.3.
|
|
30
|
+
"@hh.ru/magritte-ui-bottom-sheet": "9.3.2",
|
|
31
31
|
"@hh.ru/magritte-ui-breakpoint": "6.0.8",
|
|
32
|
-
"@hh.ru/magritte-ui-icon": "
|
|
33
|
-
"@hh.ru/magritte-ui-layer": "3.2.
|
|
34
|
-
"@hh.ru/magritte-ui-loader": "
|
|
32
|
+
"@hh.ru/magritte-ui-icon": "14.0.0",
|
|
33
|
+
"@hh.ru/magritte-ui-layer": "3.2.3",
|
|
34
|
+
"@hh.ru/magritte-ui-loader": "3.0.0",
|
|
35
35
|
"@hh.ru/magritte-ui-mock-component": "1.1.7",
|
|
36
|
-
"@hh.ru/magritte-ui-tooltip": "
|
|
37
|
-
"@hh.ru/magritte-ui-typography": "
|
|
36
|
+
"@hh.ru/magritte-ui-tooltip": "11.0.1",
|
|
37
|
+
"@hh.ru/magritte-ui-typography": "5.0.0",
|
|
38
38
|
"@use-gesture/react": "10.3.1"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"motion": "^12.23.12",
|
|
43
43
|
"react": ">=18.2.0"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "56146e5bdeb38baa5983c67826334d805677aded"
|
|
46
46
|
}
|
package/public/Footer.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './../index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { s as styles } from '../media-viewer-
|
|
3
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
4
4
|
|
|
5
5
|
const Footer = ({ children }) => {
|
|
6
6
|
return (jsx("div", { "data-media-viewer-interactive": "true", className: styles.footer, children: children }));
|
package/public/Gallery.js
CHANGED
|
@@ -10,7 +10,7 @@ import { useMediaViewerContext, useGalleryItemsContext } from '../internal/conte
|
|
|
10
10
|
import { useSwipe } from '../internal/hooks/useSwipe.js';
|
|
11
11
|
import { clamp } from '../internal/utils.js';
|
|
12
12
|
import { GalleryItem } from './GalleryItem.js';
|
|
13
|
-
import { s as styles } from '../media-viewer-
|
|
13
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
14
14
|
import '../internal/ImagesLoader.js';
|
|
15
15
|
import '@use-gesture/react';
|
|
16
16
|
import '@hh.ru/magritte-design-tokens/types';
|
package/public/GalleryItem.js
CHANGED
|
@@ -17,7 +17,7 @@ import '@use-gesture/react';
|
|
|
17
17
|
import '../internal/hooks/usePinchToZoom.js';
|
|
18
18
|
import '../internal/hooks/useWheelToZoom.js';
|
|
19
19
|
import '@hh.ru/magritte-ui-typography';
|
|
20
|
-
import '../media-viewer-
|
|
20
|
+
import '../media-viewer-CAu8AQyY.js';
|
|
21
21
|
import '../internal/ImagesLoader.js';
|
|
22
22
|
|
|
23
23
|
const GALLERY_ITEM_VIRTUALIZATION_PADDING = 5;
|
package/public/Header.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './../index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { s as styles } from '../media-viewer-
|
|
3
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
4
4
|
|
|
5
5
|
const Header = ({ children }) => {
|
|
6
6
|
return (jsx("div", { "data-media-viewer-interactive": "true", className: styles.header, children: children }));
|
package/public/MediaViewer.js
CHANGED
|
@@ -21,7 +21,7 @@ import { Header } from './Header.js';
|
|
|
21
21
|
import { Preview } from './Preview.js';
|
|
22
22
|
import { Toolbar } from './Toolbar.js';
|
|
23
23
|
import { DesktopTool, MobileTool, RotateTool, CloseTool, FullWidthTool } from './Tools.js';
|
|
24
|
-
import { s as styles } from '../media-viewer-
|
|
24
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
25
25
|
import '../internal/ImagesLoader.js';
|
|
26
26
|
import '@use-gesture/react';
|
|
27
27
|
import '@hh.ru/magritte-common-resize';
|
package/public/Preview.js
CHANGED
|
@@ -12,7 +12,7 @@ import { EASE_BASE } from '../internal/animations.js';
|
|
|
12
12
|
import { useMediaViewerContext, useGalleryItemsContext, PreviewContext } from '../internal/context.js';
|
|
13
13
|
import { useVirtualization } from '../internal/hooks/useVirtualization.js';
|
|
14
14
|
import { useDetectDiscreteChange, useInitOnce, clamp } from '../internal/utils.js';
|
|
15
|
-
import { s as styles } from '../media-viewer-
|
|
15
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
16
16
|
import 'classnames';
|
|
17
17
|
import '@hh.ru/magritte-common-use-translation';
|
|
18
18
|
import '@hh.ru/magritte-ui-bottom-sheet';
|
package/public/Toolbar.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { Counter } from '../internal/Counter.js';
|
|
5
5
|
import { useGalleryItemsContext } from '../internal/context.js';
|
|
6
|
-
import { s as styles } from '../media-viewer-
|
|
6
|
+
import { s as styles } from '../media-viewer-CAu8AQyY.js';
|
|
7
7
|
import 'react';
|
|
8
8
|
import 'motion/react';
|
|
9
9
|
import '@hh.ru/magritte-common-use-translation';
|
package/media-viewer-DNMFYzkg.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"media-viewer":"magritte-media-viewer___KnrXP_1-2-7","mediaViewer":"magritte-media-viewer___KnrXP_1-2-7","gallery-placeholder":"magritte-gallery-placeholder___rUoGL_1-2-7","galleryPlaceholder":"magritte-gallery-placeholder___rUoGL_1-2-7","media-viewer-gallery":"magritte-media-viewer-gallery___P0SnN_1-2-7","mediaViewerGallery":"magritte-media-viewer-gallery___P0SnN_1-2-7","gallery-item":"magritte-gallery-item___Js0Z5_1-2-7","galleryItem":"magritte-gallery-item___Js0Z5_1-2-7","gallery-item-transform-container":"magritte-gallery-item-transform-container___N8-sA_1-2-7","galleryItemTransformContainer":"magritte-gallery-item-transform-container___N8-sA_1-2-7","preview-counter":"magritte-preview-counter___uP2Hc_1-2-7","previewCounter":"magritte-preview-counter___uP2Hc_1-2-7","with-description":"magritte-with-description___-w7ld_1-2-7","withDescription":"magritte-with-description___-w7ld_1-2-7","counter-number":"magritte-counter-number___gUpMp_1-2-7","counterNumber":"magritte-counter-number___gUpMp_1-2-7","no-description-placeholder":"magritte-no-description-placeholder___qc6h2_1-2-7","noDescriptionPlaceholder":"magritte-no-description-placeholder___qc6h2_1-2-7","preview-zoom-control":"magritte-preview-zoom-control___026jA_1-2-7","previewZoomControl":"magritte-preview-zoom-control___026jA_1-2-7","preview-container":"magritte-preview-container___nwjNY_1-2-7","previewContainer":"magritte-preview-container___nwjNY_1-2-7","preview":"magritte-preview___0Ge4C_1-2-7","preview-list":"magritte-preview-list___SAXLZ_1-2-7","previewList":"magritte-preview-list___SAXLZ_1-2-7","preview-item":"magritte-preview-item___gz5f2_1-2-7","previewItem":"magritte-preview-item___gz5f2_1-2-7","preview-item-container":"magritte-preview-item-container___JDVsk_1-2-7","previewItemContainer":"magritte-preview-item-container___JDVsk_1-2-7","media-viewer-toolbar":"magritte-media-viewer-toolbar___2C8nr_1-2-7","mediaViewerToolbar":"magritte-media-viewer-toolbar___2C8nr_1-2-7","no-description":"magritte-no-description___NebrT_1-2-7","noDescription":"magritte-no-description___NebrT_1-2-7","media-viewer-toolbar-left":"magritte-media-viewer-toolbar-left___YzkJt_1-2-7","mediaViewerToolbarLeft":"magritte-media-viewer-toolbar-left___YzkJt_1-2-7","media-viewer-toolbar-right":"magritte-media-viewer-toolbar-right___kBER9_1-2-7","mediaViewerToolbarRight":"magritte-media-viewer-toolbar-right___kBER9_1-2-7","prev-button":"magritte-prev-button___WMYjR_1-2-7","prevButton":"magritte-prev-button___WMYjR_1-2-7","next-button":"magritte-next-button___f8hJT_1-2-7","nextButton":"magritte-next-button___f8hJT_1-2-7","slide-button":"magritte-slide-button___sY8LB_1-2-7","slideButton":"magritte-slide-button___sY8LB_1-2-7","preview-placeholder":"magritte-preview-placeholder___yuhW1_1-2-7","previewPlaceholder":"magritte-preview-placeholder___yuhW1_1-2-7","gallery-item-loader":"magritte-gallery-item-loader___70TDe_1-2-7","galleryItemLoader":"magritte-gallery-item-loader___70TDe_1-2-7","gallery-item-error-container":"magritte-gallery-item-error-container___Z-HyZ_1-2-7","galleryItemErrorContainer":"magritte-gallery-item-error-container___Z-HyZ_1-2-7","description-bottom-sheet-content":"magritte-description-bottom-sheet-content___swnEV_1-2-7","descriptionBottomSheetContent":"magritte-description-bottom-sheet-content___swnEV_1-2-7","header":"magritte-header___egZXt_1-2-7","footer":"magritte-footer___rOH-M_1-2-7","description":"magritte-description___dYc-E_1-2-7"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=media-viewer-DNMFYzkg.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-viewer-DNMFYzkg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|