vistaview 0.6.5 → 0.7.0
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/README.md +58 -26
- package/dist/lib/defaults/options.d.ts.map +1 -1
- package/dist/lib/defaults/transition.d.ts +4 -1
- package/dist/lib/defaults/transition.d.ts.map +1 -1
- package/dist/lib/types.d.ts +5 -3
- package/dist/lib/types.d.ts.map +1 -1
- package/dist/lib/vista-view.d.ts +3 -0
- package/dist/lib/vista-view.d.ts.map +1 -1
- package/dist/style.css +1 -0
- package/dist/style.d.ts +1 -0
- package/dist/styles/dark-rounded.css +1 -0
- package/dist/styles/dark-rounded.d.ts +1 -0
- package/dist/vistaview.d.ts.map +1 -1
- package/dist/vistaview.js +354 -327
- package/dist/vistaview.umd.js +7 -7
- package/package.json +3 -2
- package/dist/vistaview.css +0 -1
package/README.md
CHANGED
|
@@ -27,11 +27,11 @@ For quick prototyping or non-bundler environments, use the UMD build via CDN:
|
|
|
27
27
|
|
|
28
28
|
```html
|
|
29
29
|
<!-- unpkg -->
|
|
30
|
-
<link rel="stylesheet" href="https://unpkg.com/vistaview/dist/
|
|
30
|
+
<link rel="stylesheet" href="https://unpkg.com/vistaview/dist/style.css" />
|
|
31
31
|
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
|
|
32
32
|
|
|
33
33
|
<!-- or jsDelivr -->
|
|
34
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vistaview/dist/
|
|
34
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vistaview/dist/style.css" />
|
|
35
35
|
<script src="https://cdn.jsdelivr.net/npm/vistaview/dist/vistaview.umd.js"></script>
|
|
36
36
|
|
|
37
37
|
<script>
|
|
@@ -113,12 +113,10 @@ vistaView({
|
|
|
113
113
|
// Optional configuration
|
|
114
114
|
animationDurationBase: 333, // Base animation duration in ms (default: 333)
|
|
115
115
|
initialZIndex: 1, // Starting z-index for the lightbox (default: 1)
|
|
116
|
-
zoomStep: 500, // Pixels to zoom per step (default: 500)
|
|
117
116
|
maxZoomLevel: 2, // Maximum zoom multiplier (default: 2)
|
|
118
|
-
touchSpeedThreshold: 0.5, // Swipe speed threshold for navigation (default: 0.5)
|
|
119
117
|
preloads: 1, // Number of adjacent images to preload on each side (default: 1)
|
|
120
118
|
keyboardListeners: true, // Enable keyboard navigation (default: true)
|
|
121
|
-
arrowOnSmallScreens: false, // Show
|
|
119
|
+
arrowOnSmallScreens: false, // Show prev/next arrows on screens < 768px (default: false)
|
|
122
120
|
rapidLimit: 100, // Minimum time between rapid actions in ms (default: 100)
|
|
123
121
|
|
|
124
122
|
// Control placement (defaults shown)
|
|
@@ -212,15 +210,38 @@ import type {
|
|
|
212
210
|
|
|
213
211
|
## Styling
|
|
214
212
|
|
|
215
|
-
|
|
213
|
+
### CSS Import
|
|
214
|
+
|
|
215
|
+
VistaView CSS is now separate from the JavaScript bundle for better control:
|
|
216
|
+
|
|
217
|
+
```js
|
|
218
|
+
import 'vistaview/style.css';
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Theme System
|
|
222
|
+
|
|
223
|
+
VistaView supports custom themes that can be imported separately:
|
|
224
|
+
|
|
225
|
+
```js
|
|
226
|
+
import 'vistaview/style.css'; // Base styles (required)
|
|
227
|
+
import 'vistaview/styles/dark-rounded.css'; // Optional theme
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
Available themes:
|
|
231
|
+
|
|
232
|
+
- `dark-rounded` - Dark theme with rounded corners and animated navigation buttons
|
|
233
|
+
|
|
234
|
+
### CSS Custom Properties
|
|
235
|
+
|
|
236
|
+
VistaView uses CSS custom properties for easy customization:
|
|
216
237
|
|
|
217
238
|
```css
|
|
218
239
|
:root {
|
|
219
|
-
--
|
|
220
|
-
--
|
|
221
|
-
--
|
|
222
|
-
--
|
|
223
|
-
--
|
|
240
|
+
--vvw-bg-color: #000000; /* Background color */
|
|
241
|
+
--vvw-text-color: #ffffff; /* Text color */
|
|
242
|
+
--vvw-bg-blur: 10px; /* Background blur amount */
|
|
243
|
+
--vvw-bg-opacity: 0.8; /* Background opacity */
|
|
244
|
+
--vvw-anim-dur: 333; /* Animation duration in ms */
|
|
224
245
|
}
|
|
225
246
|
```
|
|
226
247
|
|
|
@@ -287,31 +308,42 @@ function Gallery() {
|
|
|
287
308
|
}
|
|
288
309
|
```
|
|
289
310
|
|
|
311
|
+
## Accessibility
|
|
312
|
+
|
|
313
|
+
VistaView is built with accessibility in mind:
|
|
314
|
+
|
|
315
|
+
- **Screen reader support** - ARIA labels and live regions announce navigation and image information
|
|
316
|
+
- **Keyboard navigation** - Full keyboard control (can be disabled with `keyboardListeners: false`)
|
|
317
|
+
- **Reduced motion** - Respects `prefers-reduced-motion` user preference
|
|
318
|
+
- **Focus management** - Proper focus handling when opening/closing
|
|
319
|
+
- **Error announcements** - Failed image loads are announced to screen readers
|
|
320
|
+
- **Semantic HTML** - Proper button elements with descriptive labels
|
|
321
|
+
|
|
290
322
|
## Last built
|
|
291
323
|
|
|
292
324
|
```
|
|
293
325
|
vite v6.4.1 building for production...
|
|
294
|
-
✓
|
|
326
|
+
✓ 19 modules transformed.
|
|
295
327
|
|
|
296
328
|
[vite:dts] Start generate declaration files...
|
|
297
|
-
dist/
|
|
298
|
-
dist/
|
|
299
|
-
dist/
|
|
300
|
-
dist/
|
|
301
|
-
dist/
|
|
302
|
-
dist/
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
329
|
+
dist/styles/dark-rounded.css 2.15 kB │ gzip: 0.46 kB
|
|
330
|
+
dist/style.css 7.09 kB │ gzip: 1.67 kB
|
|
331
|
+
dist/svelte.js 0.62 kB │ gzip: 0.29 kB
|
|
332
|
+
dist/solid.js 1.19 kB │ gzip: 0.54 kB
|
|
333
|
+
dist/vue.js 1.36 kB │ gzip: 0.59 kB
|
|
334
|
+
dist/react.js 1.67 kB │ gzip: 0.59 kB
|
|
335
|
+
dist/vistaview.js 40.61 kB │ gzip: 9.86 kB
|
|
336
|
+
[vite:dts] Declaration files built in 678ms.
|
|
337
|
+
|
|
338
|
+
✓ built in 790ms
|
|
306
339
|
vite v6.4.1 building for production...
|
|
307
|
-
✓
|
|
340
|
+
✓ 13 modules transformed.
|
|
308
341
|
|
|
309
342
|
[vite:dts] Start generate declaration files...
|
|
310
|
-
dist/vistaview.
|
|
311
|
-
|
|
312
|
-
[vite:dts] Declaration files built in 670ms.
|
|
343
|
+
dist/vistaview.umd.js 31.78 kB │ gzip: 8.82 kB
|
|
344
|
+
[vite:dts] Declaration files built in 680ms.
|
|
313
345
|
|
|
314
|
-
✓ built in
|
|
346
|
+
✓ built in 769ms
|
|
315
347
|
```
|
|
316
348
|
|
|
317
349
|
## License
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../src/lib/defaults/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,eAAO,MAAM,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../src/lib/defaults/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,eAAO,MAAM,cAAc,EAAE,QAc5B,CAAC"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
import { VistaData } from '../types';
|
|
2
|
-
export declare function transition({ vistaView: { isReducedMotion }, htmlElements: { to: HtmlTo }, index: { from: fromIndex, to: toIndex }, vistaView: { elements, imageContainer: imgc, options }, }: VistaData, signal: AbortSignal):
|
|
2
|
+
export declare function transition({ vistaView: { isReducedMotion }, htmlElements: { to: HtmlTo }, index: { from: fromIndex, to: toIndex }, vistaView: { elements, imageContainer: imgc, options }, }: VistaData, signal: AbortSignal): {
|
|
3
|
+
cleanup: () => void;
|
|
4
|
+
transitionEnded: Promise<void>;
|
|
5
|
+
} | undefined;
|
|
3
6
|
//# sourceMappingURL=transition.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/lib/defaults/transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,
|
|
1
|
+
{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/lib/defaults/transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,wBAAgB,UAAU,CACxB,EACE,SAAS,EAAE,EAAE,eAAe,EAAE,EAC9B,YAAY,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAC5B,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,EACvC,SAAS,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,GACvD,EAAE,SAAS,EACZ,MAAM,EAAE,WAAW;;;cAkDpB"}
|
package/dist/lib/types.d.ts
CHANGED
|
@@ -14,9 +14,7 @@ export type VistaElmProps = {
|
|
|
14
14
|
export type VistaOpt = {
|
|
15
15
|
animationDurationBase?: number;
|
|
16
16
|
initialZIndex?: number;
|
|
17
|
-
zoomStep?: number;
|
|
18
17
|
maxZoomLevel?: number;
|
|
19
|
-
touchSpeedThreshold?: number;
|
|
20
18
|
preloads?: number;
|
|
21
19
|
keyboardListeners?: boolean;
|
|
22
20
|
arrowOnSmallScreens?: boolean;
|
|
@@ -73,7 +71,10 @@ export type VistaData = {
|
|
|
73
71
|
};
|
|
74
72
|
vistaView: VistaView;
|
|
75
73
|
};
|
|
76
|
-
export type VistaTransitionFn = (params: VistaData, abortSignal: AbortSignal) =>
|
|
74
|
+
export type VistaTransitionFn = (params: VistaData, abortSignal: AbortSignal) => {
|
|
75
|
+
cleanup: () => void;
|
|
76
|
+
transitionEnded: Promise<void>;
|
|
77
|
+
} | void;
|
|
77
78
|
export type VistaSetupFn = (params: VistaData) => void;
|
|
78
79
|
export type VistaCloseFn = (vistaView: VistaView) => void;
|
|
79
80
|
export type VistaInitFn = (vistaView: VistaView) => void;
|
|
@@ -110,5 +111,6 @@ export type VistaPointerListenerArgs = {
|
|
|
110
111
|
export type VistaPointerListener = (args: VistaPointerListenerArgs) => void;
|
|
111
112
|
export type VistaExternalPointerListenerArgs = VistaPointerListenerArgs & {
|
|
112
113
|
hasInternalExecution: boolean;
|
|
114
|
+
abortController: AbortController;
|
|
113
115
|
};
|
|
114
116
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/lib/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,QAAQ,CAAC,EAAE;QACT,OAAO,CAAC,EAAE,CAAC,gBAAgB,GAAG,eAAe,CAAC,EAAE,CAAC;QACjD,QAAQ,CAAC,EAAE,CAAC,gBAAgB,GAAG,eAAe,CAAC,EAAE,CAAC;QAClD,SAAS,CAAC,EAAE,CAAC,gBAAgB,GAAG,eAAe,CAAC,EAAE,CAAC;QACnD,YAAY,CAAC,EAAE,CAAC,gBAAgB,GAAG,eAAe,CAAC,EAAE,CAAC;QACtD,UAAU,CAAC,EAAE,CAAC,gBAAgB,GAAG,eAAe,CAAC,EAAE,CAAC;QACpD,WAAW,CAAC,EAAE,CAAC,gBAAgB,GAAG,eAAe,CAAC,EAAE,CAAC;KACtD,CAAC;IAGF,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAGzC,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;IACvC,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,YAAY,CAAC,EAAE,WAAW,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE/F,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B,GAAG,QAAQ,CAAC;AAEb,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,CAAC,eAAe,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,YAAY,EAAE;QAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAAC,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;KAAE,CAAC;IACvE,MAAM,EAAE;QAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAAC,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;KAAE,CAAC;IACjE,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAClD,GAAG,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;IACtC,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAC9B,MAAM,EAAE,SAAS,EACjB,WAAW,EAAE,WAAW,KACrB;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,GAAG,IAAI,CAAC;AAEpE,MAAM,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;AACvD,MAAM,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,CAAC;CACzD,GAAG,QAAQ,CAAC;AAEb,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IAC7B,SAAS,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;AAE5E,MAAM,MAAM,gCAAgC,GAAG,wBAAwB,GAAG;IACxE,oBAAoB,EAAE,OAAO,CAAC;IAC9B,eAAe,EAAE,eAAe,CAAC;CAClC,CAAC"}
|
package/dist/lib/vista-view.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export declare class VistaView {
|
|
|
14
14
|
private transitionFunction;
|
|
15
15
|
private pointers;
|
|
16
16
|
private imageState;
|
|
17
|
+
private imageTransitions;
|
|
17
18
|
root: HTMLElement | null;
|
|
18
19
|
imageContainer: HTMLElement | null;
|
|
19
20
|
qs<T extends HTMLElement>(selector: string): T | null;
|
|
@@ -23,12 +24,14 @@ export declare class VistaView {
|
|
|
23
24
|
private throttle;
|
|
24
25
|
constructor(elements: NodeListOf<HTMLElement> | VistaImg[], options?: VistaOpt);
|
|
25
26
|
private lastSwapTime;
|
|
27
|
+
private transitionCleanup;
|
|
26
28
|
private swap;
|
|
27
29
|
private getChildElements;
|
|
28
30
|
isZoomedIn: boolean;
|
|
29
31
|
private zoomIn;
|
|
30
32
|
private zoomOut;
|
|
31
33
|
private displayActiveIndex;
|
|
34
|
+
private transitionImage;
|
|
32
35
|
private waitForImagesToLoad;
|
|
33
36
|
private onKeyDown;
|
|
34
37
|
private onScroll;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vista-view.d.ts","sourceRoot":"","sources":["../../src/lib/vista-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,QAAQ,EAGR,QAAQ,EAIR,gCAAgC,EACjC,MAAM,SAAS,CAAC;AAajB,eAAO,MAAM,gBAAgB,EAAE;IAAE,eAAe,EAAE,SAAS,GAAG,IAAI,CAAA;CAEjE,CAAC;AAEF,qBAAa,SAAS;IACpB,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,eAAe,CAAmE;IAE1F,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,UAAU,CAAkB;
|
|
1
|
+
{"version":3,"file":"vista-view.d.ts","sourceRoot":"","sources":["../../src/lib/vista-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,QAAQ,EAGR,QAAQ,EAIR,gCAAgC,EACjC,MAAM,SAAS,CAAC;AAajB,eAAO,MAAM,gBAAgB,EAAE;IAAE,eAAe,EAAE,SAAS,GAAG,IAAI,CAAA;CAEjE,CAAC;AAEF,qBAAa,SAAS;IACpB,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,eAAe,CAAmE;IAE1F,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,gBAAgB,CAMV;IAEd,IAAI,EAAE,WAAW,GAAG,IAAI,CAAQ;IAChC,cAAc,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC1C,EAAE,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,qBAAqB,CAAwD;IAErF,OAAO,CAAC,eAAe,CAAgC;IAEvD,OAAO,CAAC,QAAQ,CAAkB;gBAEtB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,EAAE,OAAO,GAAE,QAAa;IAsElF,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,iBAAiB,CAA6B;YACxC,IAAI;IAqHlB,OAAO,CAAC,gBAAgB;IAkDxB,UAAU,EAAE,OAAO,CAAS;IAC5B,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,CAAC,eAAe;IAmCvB,OAAO,CAAC,mBAAmB;IA2D3B,OAAO,CAAC,SAAS,CAuBf;IAEF,OAAO,CAAC,QAAQ,CAYd;IAEF,OAAO,CAAC,eAAe,CAkBrB;IAGF,OAAO,CAAC,gBAAgB,CAAyD;IACjF,uBAAuB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,gCAAgC,KAAK,IAAI,GAAG,IAAI;IAGtF,OAAO,CAAC,0BAA0B;IAIlC,OAAO,CAAC,0BAA0B,CAwDhC;IAGF,IAAI,CAAC,UAAU,GAAE,MAAU,GAAG,IAAI;IA4I5B,KAAK,CAAC,OAAO,GAAE,OAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IA0DnD,IAAI,IAAI,IAAI;IASZ,IAAI,IAAI,IAAI;IASZ,OAAO,IAAI,IAAI;IAcf,eAAe,IAAI,MAAM;IAOzB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;CAoBlE"}
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--vvw-bg-color: #000000;--vvw-text-color: #ffffff;--vvw-bg-blur: 10px;--vvw-bg-opacity: .8;--vvw-init-z: 1;--vvw-dest-z: 2147483647;--vvw-anim-dur: 333;--vvw-init-w: 0;--vvw-init-h: 0;--vvw-init-t: 0;--vvw-init-l: 0;--vvw-idx: 0;--vvw-radius: 0px}@keyframes vvw-pulse{0%{opacity:1;border-radius:var(--vvw-init-radius);scale:1}50%{opacity:.7;border-radius:var(--vvw-pulse-radius);scale:.99}to{opacity:1;border-radius:var(--vvw-init-radius);scale:1}}@keyframes vvw-simple-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes vvw-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.vvw-root{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;overflow:hidden;z-index:var(--vvw-init-z);opacity:0;isolation:isolate;transform:none;touch-action:none}.vvw-container{position:relative;width:100%;height:100%;overflow:hidden}.vvw-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:rgb(from var(--vvw-bg-color) r g b / var(--vvw-bg-opacity));-webkit-backdrop-filter:blur(var(--vvw-bg-blur));backdrop-filter:blur(var(--vvw-bg-blur));opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease}.vvw-image-container{position:relative;height:100%;overflow:hidden;isolation:isolate}.vvw-item{position:relative;width:100%;height:100%;overflow:hidden}.vvw-item img{position:absolute;display:block;top:50%;left:50%;translate:-50% -50%}.vvw-item .vvw-img-err{position:absolute;top:50%;left:50%;translate:-50% -50%;color:#fff;background-color:red;font-size:14px;text-align:center;padding:8px 12px;margin:0;display:none;z-index:2}.vvw-item .vvw-img-lo{--vvw-init-radius: 0px;--vvw-pulse-radius: 0px;--vvw-init-x: 0px;--vvw-init-y: 0px;--vvw-current-x: 0px;--vvw-current-y: 0px;outline:1px solid rgba(255,255,255,.2);z-index:0;opacity:1;border-radius:var(--vvw-init-radius);overflow:hidden;transition:transform calc(var(--vvw-anim-dur) * 1ms) ease;transform:translate3d(var(--vvw-current-x),var(--vvw-current-y),0);background:linear-gradient(45deg,#1a1a1a,#333,#1a1a1a,#555);background-size:400% 400%;animation:vvw-gradient 3s ease-in-out infinite}.vvw-item .vvw-img-hi{cursor:zoom-in;--vvw-init-radius: 0px;--vvw-init-w: 0px;--vvw-init-h: 0px;--vvw-current-w: 0px;--vvw-current-h: 0px;--vvw-current-radius: 0px;width:var(--vvw-init-w);height:var(--vvw-init-h);border-radius:var(--vvw-init-radius);z-index:1;overflow:hidden;object-fit:cover;opacity:0}.vvw-top-bar,.vvw-bottom-bar{position:absolute;top:0;left:0;width:100%;z-index:6;display:flex;align-items:stretch;justify-content:space-between;pointer-events:none}.vvw-top-bar>div,.vvw-bottom-bar>div{display:flex;align-items:stretch}.vvw-bottom-bar{top:unset;bottom:0}.vvw-ui{opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease calc(var(--vvw-anim-dur) * 2ms) ease;outline:1px solid hsl(from var(--vvw-bg-color) h s calc(l + 30));pointer-events:auto}.vvw-ui.vvw-index{font-size:16px;padding:8px 13px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui.vvw-desc{font-size:14px;padding:8px 15px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vvw-ui:is(button),.vvw-ui>button{background:none;color:inherit;border:0px;font:inherit;cursor:pointer;outline:inherit;box-sizing:border-box;margin:0;padding:8px 12px;align-self:stretch;border-radius:0;display:flex;align-items:center;justify-content:center;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui:is(button):disabled,.vvw-ui>button:disabled{color:rgb(from var(--vvw-text-color) r g b / .5);cursor:not-allowed}.vvw-ui:is(button):hover,.vvw-ui>button:hover{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 20))}.vvw-ui:is(button):active,.vvw-ui>button:active{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 40))}.vvw-ui:is(button).vvw-button--loading,.vvw-ui>button.vvw-button--loading{animation:vvw-simple-pulse .5s ease-in-out infinite}.vvw-ui:is(button) svg,.vvw-ui>button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.vvw-ui:is(button){outline:1px solid hsl(from var(--vvw-bg-color) h s calc(l + 30))}.vvw-ui.vvw-prev{position:absolute;top:50%;left:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}.vvw-ui.vvw-next{position:absolute;top:50%;right:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}@media(min-width:768px){.vvw-ui.vvw-prev,.vvw-ui.vvw-next{display:flex}}.vvw-arrow-sm .vvw-ui.vvw-prev,.vvw-arrow-sm .vvw-ui.vvw-next{display:flex}.vvw-root.vvw--active{opacity:1;transition:z-index 0ms calc(var(--vvw-anim-dur) * 1ms) ease;z-index:var(--vvw-dest-z)}.vvw-root.vvw--active .vvw-bg{opacity:1}.vvw-root.vvw--active .vvw-img-lo{--vvw-current-x: 0px !important;--vvw-current-y: 0px !important}.vvw-root.vvw--active .vvw-ui{opacity:1}.vvw-root.vvw--settled .vvw-img-lo{animation:vvw-pulse 1s infinite,vvw-gradient 3s ease-in-out infinite;animation-delay:calc(var(--vvw-anim-dur) * 2ms)}.vvw-root.vvw--settled .vvw-img-lo:has(+img.vvw--loaded){animation:none;opacity:0}.vvw-root.vvw--settled .vvw-img-err:has(~img.vvw--loaderror){display:block}.vvw-root.vvw--settled .vvw-img-hi.vvw--loaded{opacity:1;width:var(--vvw-current-w);height:var(--vvw-current-h);border-radius:var(--vvw-current-radius)}.vvw-root.vvw--closing{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 2ms) ease,transform 0s calc(var(--vvw-anim-dur) * 2ms) ease,z-index 0s calc(var(--vvw-anim-dur) * 1ms) ease;transform:scale(1);z-index:var(--vvw-init-z);opacity:0!important}.vvw-root.vvw--closing .vvw-img-err:has(~img.vvw--loaderror){display:none}.vvw-root.vvw--closing .vvw-img-hi.vvw--loaded,.vvw-root.vvw--closing .vvw-img-hi.vvw--ready{transition:width calc(var(--vvw-anim-dur) * 1ms) ease,height calc(var(--vvw-anim-dur) * 1ms) ease,border-radius calc(var(--vvw-anim-dur) * 1ms) ease,top calc(var(--vvw-anim-dur) * 1ms) ease,left calc(var(--vvw-anim-dur) * 1ms) ease,opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0;top:50%!important;left:50%!important;width:var(--vvw-init-w)!important;height:var(--vvw-init-h)!important;border-radius:var(--vvw-init-radius)!important}.vvw-root.vvw--closing .vvw-img-lo{transition:opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease,transform calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:1!important;--vvw-current-x: var(--vvw-init-x) !important;--vvw-current-y: var(--vvw-init-y) !important}.vvw-root.vvw--closing .vvw-ui{transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}.vvw-root.vvw--closing .vvw-bg{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}
|
package/dist/style.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.vvw-ui:is(button),.vvw-ui>button{background-color:#222;color:#eee}.vvw-ui.vvw-index,.vvw-ui.vvw-desc{background-color:#222;color:#eee}.vvw-bottom-bar>div:first-child button:last-child,.vvw-bottom-bar>div:first-child div:last-child{border-top-right-radius:5px}.vvw-bottom-bar>div:nth-child(2){padding:0 1rem}.vvw-bottom-bar>div:nth-child(2) button:last-child,.vvw-bottom-bar>div:nth-child(2) div:last-child{border-top-right-radius:5px}.vvw-bottom-bar>div:nth-child(2) button:first-child,.vvw-bottom-bar>div:nth-child(2) div:first-child{border-top-left-radius:5px}.vvw-bottom-bar>div:last-child button:first-child,.vvw-bottom-bar>div:last-child div:first-child{border-top-left-radius:5px}.vvw-top-bar>div:first-child button:last-child,.vvw-top-bar>div:first-child div:last-child{border-bottom-right-radius:5px}.vvw-top-bar>div:nth-child(2){padding:0 1rem}.vvw-top-bar>div:nth-child(2) button:last-child,.vvw-top-bar>div:nth-child(2) div:last-child{border-bottom-right-radius:5px}.vvw-top-bar>div:nth-child(2) button:first-child,.vvw-top-bar>div:nth-child(2) div:first-child{border-bottom-left-radius:5px}.vvw-top-bar>div:last-child button:first-child,.vvw-top-bar>div:last-child div:first-child{border-bottom-left-radius:5px}.vvw-ui{outline:2px solid #333}.vvw-ui:is(button){outline:2px solid #333}.vvw-ui:is(button) svg{width:21px;height:21px}.vvw-ui.vvw-prev{border-top-right-radius:5px;border-bottom-right-radius:5px;overflow:hidden}.vvw-ui.vvw-prev button{padding:18px 3px;transition:padding-left 333ms ease}.vvw-ui.vvw-prev button svg{transition:transform 333ms 111ms ease}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-prev:hover button svg{transform:translate(-3px)}.vvw-ui.vvw-next{border-top-left-radius:5px;border-bottom-left-radius:5px;overflow:hidden}.vvw-ui.vvw-next button{padding:18px 3px;transition:padding-right 333ms ease}.vvw-ui.vvw-next button svg{transition:transform 333ms 111ms ease}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
package/dist/vistaview.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vistaview.d.ts","sourceRoot":"","sources":["../src/vistaview.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"vistaview.d.ts","sourceRoot":"","sources":["../src/vistaview.ts"],"names":[],"mappings":"AAAA,mBAAmB,aAAa,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"}
|