@uibit/360-viewer 0.1.0 → 0.1.1
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 +10 -0
- package/custom-elements.json +478 -3
- package/dist/360-viewer.d.ts +19 -1
- package/dist/360-viewer.d.ts.map +1 -1
- package/dist/360-viewer.js +19 -1
- package/dist/360-viewer.js.map +1 -1
- package/dist/frameworks/angular/index.ts +6 -0
- package/dist/frameworks/preact/index.d.ts +1 -0
- package/dist/frameworks/react/index.d.ts +1 -0
- package/dist/frameworks/solid/index.d.ts +1 -0
- package/dist/frameworks/stencil/index.d.ts +1 -0
- package/dist/frameworks/svelte/index.svelte +5 -0
- package/dist/frameworks/vue/index.ts +2 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
# 360 Viewer
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@uibit/360-viewer)
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[Interactive Demonstration](https://rawlings.github.io/uibit/viewer-360)
|
|
4
7
|
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @uibit/360-viewer
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
|
|
5
15
|
The 360 Viewer allows customers to explore products with tactile, interactive control. By converting a series of static images into an immersive, rotatable object, it provides a comprehensive look at physical products, building customer confidence and increasing conversion rates.
|
|
6
16
|
|
|
7
17
|
## Value Delivery
|
package/custom-elements.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "360° product viewer driven by an array of sequential images
|
|
11
|
+
"description": "360° product viewer driven by an array of sequential images.",
|
|
12
12
|
"name": "Viewer360",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
@@ -223,11 +223,13 @@
|
|
|
223
223
|
},
|
|
224
224
|
{
|
|
225
225
|
"kind": "method",
|
|
226
|
-
"name": "next"
|
|
226
|
+
"name": "next",
|
|
227
|
+
"description": "\n\nAdvances the viewer to the next frame in the image sequence."
|
|
227
228
|
},
|
|
228
229
|
{
|
|
229
230
|
"kind": "method",
|
|
230
|
-
"name": "prev"
|
|
231
|
+
"name": "prev",
|
|
232
|
+
"description": "\n\nReturns the viewer to the previous frame in the image sequence."
|
|
231
233
|
},
|
|
232
234
|
{
|
|
233
235
|
"kind": "method",
|
|
@@ -298,6 +300,211 @@
|
|
|
298
300
|
}
|
|
299
301
|
}
|
|
300
302
|
]
|
|
303
|
+
},
|
|
304
|
+
{
|
|
305
|
+
"kind": "field",
|
|
306
|
+
"name": "locale",
|
|
307
|
+
"type": {
|
|
308
|
+
"text": "string"
|
|
309
|
+
},
|
|
310
|
+
"default": "''",
|
|
311
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
312
|
+
"attribute": "locale",
|
|
313
|
+
"inheritedFrom": {
|
|
314
|
+
"name": "UIBitElement",
|
|
315
|
+
"module": "../../platform/core/src/element.ts"
|
|
316
|
+
}
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
"kind": "field",
|
|
320
|
+
"name": "resolvedLocale",
|
|
321
|
+
"type": {
|
|
322
|
+
"text": "string | undefined"
|
|
323
|
+
},
|
|
324
|
+
"description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
|
|
325
|
+
"readonly": true,
|
|
326
|
+
"inheritedFrom": {
|
|
327
|
+
"name": "UIBitElement",
|
|
328
|
+
"module": "../../platform/core/src/element.ts"
|
|
329
|
+
}
|
|
330
|
+
},
|
|
331
|
+
{
|
|
332
|
+
"kind": "field",
|
|
333
|
+
"name": "_disposables",
|
|
334
|
+
"type": {
|
|
335
|
+
"text": "Set<() => void>"
|
|
336
|
+
},
|
|
337
|
+
"privacy": "private",
|
|
338
|
+
"default": "new Set()",
|
|
339
|
+
"inheritedFrom": {
|
|
340
|
+
"name": "UIBitElement",
|
|
341
|
+
"module": "../../platform/core/src/element.ts"
|
|
342
|
+
}
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"kind": "method",
|
|
346
|
+
"name": "createProperty",
|
|
347
|
+
"static": true,
|
|
348
|
+
"parameters": [
|
|
349
|
+
{
|
|
350
|
+
"name": "name",
|
|
351
|
+
"type": {
|
|
352
|
+
"text": "PropertyKey"
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
{
|
|
356
|
+
"name": "options",
|
|
357
|
+
"optional": true,
|
|
358
|
+
"type": {
|
|
359
|
+
"text": "PropertyDeclaration"
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
],
|
|
363
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default.",
|
|
364
|
+
"inheritedFrom": {
|
|
365
|
+
"name": "UIBitElement",
|
|
366
|
+
"module": "../../platform/core/src/element.ts"
|
|
367
|
+
}
|
|
368
|
+
},
|
|
369
|
+
{
|
|
370
|
+
"kind": "method",
|
|
371
|
+
"name": "finalizeStyles",
|
|
372
|
+
"static": true,
|
|
373
|
+
"return": {
|
|
374
|
+
"type": {
|
|
375
|
+
"text": "Array<any>"
|
|
376
|
+
}
|
|
377
|
+
},
|
|
378
|
+
"parameters": [
|
|
379
|
+
{
|
|
380
|
+
"name": "styles",
|
|
381
|
+
"optional": true,
|
|
382
|
+
"type": {
|
|
383
|
+
"text": "CSSResultGroup"
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
],
|
|
387
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles.",
|
|
388
|
+
"inheritedFrom": {
|
|
389
|
+
"name": "UIBitElement",
|
|
390
|
+
"module": "../../platform/core/src/element.ts"
|
|
391
|
+
}
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"kind": "method",
|
|
395
|
+
"name": "dispatchCustomEvent",
|
|
396
|
+
"return": {
|
|
397
|
+
"type": {
|
|
398
|
+
"text": "boolean"
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
"parameters": [
|
|
402
|
+
{
|
|
403
|
+
"name": "name",
|
|
404
|
+
"type": {
|
|
405
|
+
"text": "string"
|
|
406
|
+
}
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
"name": "detail",
|
|
410
|
+
"optional": true,
|
|
411
|
+
"type": {
|
|
412
|
+
"text": "T"
|
|
413
|
+
}
|
|
414
|
+
},
|
|
415
|
+
{
|
|
416
|
+
"name": "options",
|
|
417
|
+
"optional": true,
|
|
418
|
+
"type": {
|
|
419
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
],
|
|
423
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options.",
|
|
424
|
+
"inheritedFrom": {
|
|
425
|
+
"name": "UIBitElement",
|
|
426
|
+
"module": "../../platform/core/src/element.ts"
|
|
427
|
+
}
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
"kind": "method",
|
|
431
|
+
"name": "getCssPropertyValue",
|
|
432
|
+
"return": {
|
|
433
|
+
"type": {
|
|
434
|
+
"text": "string"
|
|
435
|
+
}
|
|
436
|
+
},
|
|
437
|
+
"parameters": [
|
|
438
|
+
{
|
|
439
|
+
"name": "propertyName",
|
|
440
|
+
"type": {
|
|
441
|
+
"text": "string"
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
],
|
|
445
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element.",
|
|
446
|
+
"inheritedFrom": {
|
|
447
|
+
"name": "UIBitElement",
|
|
448
|
+
"module": "../../platform/core/src/element.ts"
|
|
449
|
+
}
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"kind": "method",
|
|
453
|
+
"name": "registerDisposable",
|
|
454
|
+
"parameters": [
|
|
455
|
+
{
|
|
456
|
+
"name": "cleanup",
|
|
457
|
+
"type": {
|
|
458
|
+
"text": "() => void"
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
],
|
|
462
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM.",
|
|
463
|
+
"inheritedFrom": {
|
|
464
|
+
"name": "UIBitElement",
|
|
465
|
+
"module": "../../platform/core/src/element.ts"
|
|
466
|
+
}
|
|
467
|
+
},
|
|
468
|
+
{
|
|
469
|
+
"kind": "method",
|
|
470
|
+
"name": "listen",
|
|
471
|
+
"return": {
|
|
472
|
+
"type": {
|
|
473
|
+
"text": "() => void"
|
|
474
|
+
}
|
|
475
|
+
},
|
|
476
|
+
"parameters": [
|
|
477
|
+
{
|
|
478
|
+
"name": "target",
|
|
479
|
+
"type": {
|
|
480
|
+
"text": "EventTarget"
|
|
481
|
+
}
|
|
482
|
+
},
|
|
483
|
+
{
|
|
484
|
+
"name": "type",
|
|
485
|
+
"type": {
|
|
486
|
+
"text": "K"
|
|
487
|
+
}
|
|
488
|
+
},
|
|
489
|
+
{
|
|
490
|
+
"name": "listener",
|
|
491
|
+
"type": {
|
|
492
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
493
|
+
}
|
|
494
|
+
},
|
|
495
|
+
{
|
|
496
|
+
"name": "options",
|
|
497
|
+
"optional": true,
|
|
498
|
+
"type": {
|
|
499
|
+
"text": "boolean | AddEventListenerOptions"
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
],
|
|
503
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected.",
|
|
504
|
+
"inheritedFrom": {
|
|
505
|
+
"name": "UIBitElement",
|
|
506
|
+
"module": "../../platform/core/src/element.ts"
|
|
507
|
+
}
|
|
301
508
|
}
|
|
302
509
|
],
|
|
303
510
|
"events": [
|
|
@@ -354,12 +561,36 @@
|
|
|
354
561
|
"default": "true",
|
|
355
562
|
"description": "Show the frame progress bar at the bottom of the viewer.",
|
|
356
563
|
"fieldName": "showProgressBar"
|
|
564
|
+
},
|
|
565
|
+
{
|
|
566
|
+
"name": "locale",
|
|
567
|
+
"type": {
|
|
568
|
+
"text": "string"
|
|
569
|
+
},
|
|
570
|
+
"default": "''",
|
|
571
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
572
|
+
"fieldName": "locale",
|
|
573
|
+
"inheritedFrom": {
|
|
574
|
+
"name": "UIBitElement",
|
|
575
|
+
"module": "../../platform/core/src/element.ts"
|
|
576
|
+
}
|
|
577
|
+
}
|
|
578
|
+
],
|
|
579
|
+
"cssStates": [
|
|
580
|
+
{
|
|
581
|
+
"name": "dragging",
|
|
582
|
+
"description": "Active when the user is dragging the image sequence."
|
|
583
|
+
},
|
|
584
|
+
{
|
|
585
|
+
"name": "rotating",
|
|
586
|
+
"description": "Active when auto-rotation is running."
|
|
357
587
|
}
|
|
358
588
|
],
|
|
359
589
|
"superclass": {
|
|
360
590
|
"name": "UIBitElement",
|
|
361
591
|
"package": "@uibit/core"
|
|
362
592
|
},
|
|
593
|
+
"summary": "An interactive 360° product image sequence viewer component.\nSupports drag, touch, auto-rotation, and keyboard controls.",
|
|
363
594
|
"tagName": "uibit-360-viewer",
|
|
364
595
|
"customElement": true
|
|
365
596
|
}
|
|
@@ -456,6 +687,250 @@
|
|
|
456
687
|
"path": "src/types.ts",
|
|
457
688
|
"declarations": [],
|
|
458
689
|
"exports": []
|
|
690
|
+
},
|
|
691
|
+
{
|
|
692
|
+
"kind": "javascript-module",
|
|
693
|
+
"path": "../../platform/core/src/element.ts",
|
|
694
|
+
"declarations": [
|
|
695
|
+
{
|
|
696
|
+
"kind": "class",
|
|
697
|
+
"description": "A foundational base class for all UIBit web components.\nProvides custom event helpers, default kebab-case attribute mapping,\nautomatic cleanup/disposable tracking, and auto-injected reset styles.",
|
|
698
|
+
"name": "UIBitElement",
|
|
699
|
+
"members": [
|
|
700
|
+
{
|
|
701
|
+
"kind": "field",
|
|
702
|
+
"name": "locale",
|
|
703
|
+
"type": {
|
|
704
|
+
"text": "string"
|
|
705
|
+
},
|
|
706
|
+
"default": "''",
|
|
707
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
708
|
+
"attribute": "locale"
|
|
709
|
+
},
|
|
710
|
+
{
|
|
711
|
+
"kind": "field",
|
|
712
|
+
"name": "resolvedLocale",
|
|
713
|
+
"type": {
|
|
714
|
+
"text": "string | undefined"
|
|
715
|
+
},
|
|
716
|
+
"description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
|
|
717
|
+
"readonly": true
|
|
718
|
+
},
|
|
719
|
+
{
|
|
720
|
+
"kind": "field",
|
|
721
|
+
"name": "_disposables",
|
|
722
|
+
"type": {
|
|
723
|
+
"text": "Set<() => void>"
|
|
724
|
+
},
|
|
725
|
+
"privacy": "private",
|
|
726
|
+
"default": "new Set()"
|
|
727
|
+
},
|
|
728
|
+
{
|
|
729
|
+
"kind": "method",
|
|
730
|
+
"name": "createProperty",
|
|
731
|
+
"static": true,
|
|
732
|
+
"parameters": [
|
|
733
|
+
{
|
|
734
|
+
"name": "name",
|
|
735
|
+
"type": {
|
|
736
|
+
"text": "PropertyKey"
|
|
737
|
+
}
|
|
738
|
+
},
|
|
739
|
+
{
|
|
740
|
+
"name": "options",
|
|
741
|
+
"optional": true,
|
|
742
|
+
"type": {
|
|
743
|
+
"text": "PropertyDeclaration"
|
|
744
|
+
}
|
|
745
|
+
}
|
|
746
|
+
],
|
|
747
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
|
|
748
|
+
},
|
|
749
|
+
{
|
|
750
|
+
"kind": "method",
|
|
751
|
+
"name": "finalizeStyles",
|
|
752
|
+
"static": true,
|
|
753
|
+
"return": {
|
|
754
|
+
"type": {
|
|
755
|
+
"text": "Array<any>"
|
|
756
|
+
}
|
|
757
|
+
},
|
|
758
|
+
"parameters": [
|
|
759
|
+
{
|
|
760
|
+
"name": "styles",
|
|
761
|
+
"optional": true,
|
|
762
|
+
"type": {
|
|
763
|
+
"text": "CSSResultGroup"
|
|
764
|
+
}
|
|
765
|
+
}
|
|
766
|
+
],
|
|
767
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
|
|
768
|
+
},
|
|
769
|
+
{
|
|
770
|
+
"kind": "method",
|
|
771
|
+
"name": "dispatchCustomEvent",
|
|
772
|
+
"return": {
|
|
773
|
+
"type": {
|
|
774
|
+
"text": "boolean"
|
|
775
|
+
}
|
|
776
|
+
},
|
|
777
|
+
"parameters": [
|
|
778
|
+
{
|
|
779
|
+
"name": "name",
|
|
780
|
+
"type": {
|
|
781
|
+
"text": "string"
|
|
782
|
+
}
|
|
783
|
+
},
|
|
784
|
+
{
|
|
785
|
+
"name": "detail",
|
|
786
|
+
"optional": true,
|
|
787
|
+
"type": {
|
|
788
|
+
"text": "T"
|
|
789
|
+
}
|
|
790
|
+
},
|
|
791
|
+
{
|
|
792
|
+
"name": "options",
|
|
793
|
+
"optional": true,
|
|
794
|
+
"type": {
|
|
795
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
],
|
|
799
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options."
|
|
800
|
+
},
|
|
801
|
+
{
|
|
802
|
+
"kind": "method",
|
|
803
|
+
"name": "getCssPropertyValue",
|
|
804
|
+
"return": {
|
|
805
|
+
"type": {
|
|
806
|
+
"text": "string"
|
|
807
|
+
}
|
|
808
|
+
},
|
|
809
|
+
"parameters": [
|
|
810
|
+
{
|
|
811
|
+
"name": "propertyName",
|
|
812
|
+
"type": {
|
|
813
|
+
"text": "string"
|
|
814
|
+
}
|
|
815
|
+
}
|
|
816
|
+
],
|
|
817
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element."
|
|
818
|
+
},
|
|
819
|
+
{
|
|
820
|
+
"kind": "method",
|
|
821
|
+
"name": "registerDisposable",
|
|
822
|
+
"parameters": [
|
|
823
|
+
{
|
|
824
|
+
"name": "cleanup",
|
|
825
|
+
"type": {
|
|
826
|
+
"text": "() => void"
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
],
|
|
830
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
|
|
831
|
+
},
|
|
832
|
+
{
|
|
833
|
+
"kind": "method",
|
|
834
|
+
"name": "listen",
|
|
835
|
+
"return": {
|
|
836
|
+
"type": {
|
|
837
|
+
"text": "() => void"
|
|
838
|
+
}
|
|
839
|
+
},
|
|
840
|
+
"parameters": [
|
|
841
|
+
{
|
|
842
|
+
"name": "target",
|
|
843
|
+
"type": {
|
|
844
|
+
"text": "EventTarget"
|
|
845
|
+
}
|
|
846
|
+
},
|
|
847
|
+
{
|
|
848
|
+
"name": "type",
|
|
849
|
+
"type": {
|
|
850
|
+
"text": "K"
|
|
851
|
+
}
|
|
852
|
+
},
|
|
853
|
+
{
|
|
854
|
+
"name": "listener",
|
|
855
|
+
"type": {
|
|
856
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
857
|
+
}
|
|
858
|
+
},
|
|
859
|
+
{
|
|
860
|
+
"name": "options",
|
|
861
|
+
"optional": true,
|
|
862
|
+
"type": {
|
|
863
|
+
"text": "boolean | AddEventListenerOptions"
|
|
864
|
+
}
|
|
865
|
+
}
|
|
866
|
+
],
|
|
867
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
|
|
868
|
+
},
|
|
869
|
+
{
|
|
870
|
+
"kind": "method",
|
|
871
|
+
"name": "listen",
|
|
872
|
+
"return": {
|
|
873
|
+
"type": {
|
|
874
|
+
"text": "() => void"
|
|
875
|
+
}
|
|
876
|
+
},
|
|
877
|
+
"parameters": [
|
|
878
|
+
{
|
|
879
|
+
"name": "target",
|
|
880
|
+
"type": {
|
|
881
|
+
"text": "EventTarget"
|
|
882
|
+
}
|
|
883
|
+
},
|
|
884
|
+
{
|
|
885
|
+
"name": "type",
|
|
886
|
+
"type": {
|
|
887
|
+
"text": "string"
|
|
888
|
+
}
|
|
889
|
+
},
|
|
890
|
+
{
|
|
891
|
+
"name": "listener",
|
|
892
|
+
"type": {
|
|
893
|
+
"text": "EventListenerOrEventListenerObject"
|
|
894
|
+
}
|
|
895
|
+
},
|
|
896
|
+
{
|
|
897
|
+
"name": "options",
|
|
898
|
+
"optional": true,
|
|
899
|
+
"type": {
|
|
900
|
+
"text": "boolean | AddEventListenerOptions"
|
|
901
|
+
}
|
|
902
|
+
}
|
|
903
|
+
]
|
|
904
|
+
}
|
|
905
|
+
],
|
|
906
|
+
"attributes": [
|
|
907
|
+
{
|
|
908
|
+
"name": "locale",
|
|
909
|
+
"type": {
|
|
910
|
+
"text": "string"
|
|
911
|
+
},
|
|
912
|
+
"default": "''",
|
|
913
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
914
|
+
"fieldName": "locale"
|
|
915
|
+
}
|
|
916
|
+
],
|
|
917
|
+
"superclass": {
|
|
918
|
+
"name": "LitElement",
|
|
919
|
+
"package": "lit"
|
|
920
|
+
},
|
|
921
|
+
"customElement": true
|
|
922
|
+
}
|
|
923
|
+
],
|
|
924
|
+
"exports": [
|
|
925
|
+
{
|
|
926
|
+
"kind": "js",
|
|
927
|
+
"name": "UIBitElement",
|
|
928
|
+
"declaration": {
|
|
929
|
+
"name": "UIBitElement",
|
|
930
|
+
"module": "../../platform/core/src/element.ts"
|
|
931
|
+
}
|
|
932
|
+
}
|
|
933
|
+
]
|
|
459
934
|
}
|
|
460
935
|
]
|
|
461
936
|
}
|
package/dist/360-viewer.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { UIBitElement } from '@uibit/core';
|
|
2
2
|
/**
|
|
3
3
|
* 360° product viewer driven by an array of sequential images.
|
|
4
|
+
|
|
5
|
+
* @summary An interactive 360° product image sequence viewer component.
|
|
4
6
|
* Supports drag, touch, auto-rotation, and keyboard controls.
|
|
5
7
|
*
|
|
6
8
|
* @fires {{ index: number, total: number }} change - Fired each time the displayed frame changes
|
|
@@ -13,7 +15,9 @@ import { UIBitElement } from '@uibit/core';
|
|
|
13
15
|
* @cssprop [--uibit-360-viewer-focus-color=#000000] - Focus outline color for interactive elements
|
|
14
16
|
* @cssprop [--uibit-360-viewer-progress-track-bg=rgba(0,0,0,0.08)] - Background of the progress bar track
|
|
15
17
|
* @cssprop [--uibit-360-viewer-hint-bg=rgba(17,24,39,0.65)] - Background of the drag hint overlay
|
|
16
|
-
|
|
18
|
+
|
|
19
|
+
* @cssstate dragging - Active when the user is dragging the image sequence.
|
|
20
|
+
* @cssstate rotating - Active when auto-rotation is running.*/
|
|
17
21
|
export declare class Viewer360 extends UIBitElement {
|
|
18
22
|
static styles: import("lit").CSSResult;
|
|
19
23
|
private images;
|
|
@@ -43,7 +47,21 @@ export declare class Viewer360 extends UIBitElement {
|
|
|
43
47
|
private scheduleAutoRotateResume;
|
|
44
48
|
private clearResumeTimer;
|
|
45
49
|
private handleFrameLoad;
|
|
50
|
+
/**
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
* Advances the viewer to the next frame in the image sequence.
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
*/
|
|
46
57
|
next(): void;
|
|
58
|
+
/**
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
* Returns the viewer to the previous frame in the image sequence.
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
*/
|
|
47
65
|
prev(): void;
|
|
48
66
|
private emitChange;
|
|
49
67
|
private handlePointerDown;
|
package/dist/360-viewer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"360-viewer.d.ts","sourceRoot":"","sources":["../src/360-viewer.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAE,MAAM,aAAa,CAAC;AAKpF
|
|
1
|
+
{"version":3,"file":"360-viewer.d.ts","sourceRoot":"","sources":["../src/360-viewer.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAE,MAAM,aAAa,CAAC;AAKpF;;;;;;;;;;;;;;;;;;+DAkB+D;AAC/D,qBACa,SAAU,SAAQ,YAAY;IACzC,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,MAAM,CAAgB;IACvC,iFAAiF;IAC1B,UAAU,UAAS;IAC1E,kFAAkF;IACzB,aAAa,SAAO;IAC7E,+EAA+E;IACpB,eAAe,SAAM;IAChF,2DAA2D;IACF,YAAY,UAAQ;IAC7E,+DAA+D;IACF,eAAe,UAAQ;IAE3E,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,WAAW,CAAY;IAExC,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,eAAe,CAAK;IAE5B,iBAAiB,SAEhB;IAED,oBAAoB,SAInB;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAa9C;IAED,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAWvB;;;;;;OAMG;IAGH,IAAI,SAIH;IAED;;;;;;OAMG;IAGH,IAAI,SAIH;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,gBAAgB;IAUxB,MAAM,oCA4FL;CACF;eAEc,SAAS"}
|
package/dist/360-viewer.js
CHANGED
|
@@ -11,6 +11,8 @@ import { property, state } from 'lit/decorators.js';
|
|
|
11
11
|
import { styles } from './styles';
|
|
12
12
|
/**
|
|
13
13
|
* 360° product viewer driven by an array of sequential images.
|
|
14
|
+
|
|
15
|
+
* @summary An interactive 360° product image sequence viewer component.
|
|
14
16
|
* Supports drag, touch, auto-rotation, and keyboard controls.
|
|
15
17
|
*
|
|
16
18
|
* @fires {{ index: number, total: number }} change - Fired each time the displayed frame changes
|
|
@@ -23,7 +25,9 @@ import { styles } from './styles';
|
|
|
23
25
|
* @cssprop [--uibit-360-viewer-focus-color=#000000] - Focus outline color for interactive elements
|
|
24
26
|
* @cssprop [--uibit-360-viewer-progress-track-bg=rgba(0,0,0,0.08)] - Background of the progress bar track
|
|
25
27
|
* @cssprop [--uibit-360-viewer-hint-bg=rgba(17,24,39,0.65)] - Background of the drag hint overlay
|
|
26
|
-
|
|
28
|
+
|
|
29
|
+
* @cssstate dragging - Active when the user is dragging the image sequence.
|
|
30
|
+
* @cssstate rotating - Active when auto-rotation is running.*/
|
|
27
31
|
let Viewer360 = class Viewer360 extends UIBitElement {
|
|
28
32
|
constructor() {
|
|
29
33
|
super(...arguments);
|
|
@@ -108,12 +112,26 @@ let Viewer360 = class Viewer360 extends UIBitElement {
|
|
|
108
112
|
this.startAutoRotate();
|
|
109
113
|
}
|
|
110
114
|
}
|
|
115
|
+
/**
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
* Advances the viewer to the next frame in the image sequence.
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
*/
|
|
111
122
|
next() {
|
|
112
123
|
if (this.images.length === 0)
|
|
113
124
|
return;
|
|
114
125
|
this.currentIndex = (this.currentIndex + 1) % this.images.length;
|
|
115
126
|
this.emitChange();
|
|
116
127
|
}
|
|
128
|
+
/**
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
* Returns the viewer to the previous frame in the image sequence.
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
*/
|
|
117
135
|
prev() {
|
|
118
136
|
if (this.images.length === 0)
|
|
119
137
|
return;
|
package/dist/360-viewer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"360-viewer.js","sourceRoot":"","sources":["../src/360-viewer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC
|
|
1
|
+
{"version":3,"file":"360-viewer.js","sourceRoot":"","sources":["../src/360-viewer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;;;;;;;;;;;;;;;+DAkB+D;AAExD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,YAAY;IAApC;;QAGY,WAAM,GAAa,EAAE,CAAC;QACvC,iFAAiF;QAC1B,eAAU,GAAG,KAAK,CAAC;QAC1E,kFAAkF;QACzB,kBAAa,GAAG,GAAG,CAAC;QAC7E,+EAA+E;QACpB,oBAAe,GAAG,EAAE,CAAC;QAChF,2DAA2D;QACF,iBAAY,GAAG,IAAI,CAAC;QAC7E,+DAA+D;QACF,oBAAe,GAAG,IAAI,CAAC;QAEnE,iBAAY,GAAG,CAAC,CAAC;QACjB,eAAU,GAAG,KAAK,CAAC;QACnB,oBAAe,GAAG,KAAK,CAAC;QACxB,gBAAW,GAAG,QAAQ,CAAC;QAIhC,WAAM,GAAG,CAAC,CAAC;QACX,oBAAe,GAAG,CAAC,CAAC;IAsQ9B,CAAC;aA5RQ,WAAM,GAAG,MAAM,AAAT,CAAU;IAwBvB,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,OAAO,CAAC,iBAAuC;QAC7C,IAAI,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YAClF,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;QACH,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YACtB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO;QAClF,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;YAC7C,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACpC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,wBAAwB;QAC9B,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACxC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC/B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC/B,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,CAAQ,EAAE,KAAa;QAC7C,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,MAAM,GAAG,GAAG,CAAC,CAAC,MAA0B,CAAC;YACzC,IAAI,GAAG,CAAC,YAAY,IAAI,GAAG,CAAC,aAAa,EAAE,CAAC;gBAC1C,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,CAAC,YAAY,MAAM,GAAG,CAAC,aAAa,EAAE,CAAC;YAClE,CAAC;YACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,eAAe,EAAE,CAAC;QAC9C,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IAGH,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACrC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QACjE,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;;;;;OAMG;IAGH,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACrC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QACtF,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE;YACjC,KAAK,EAAE,IAAI,CAAC,YAAY;YACxB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;SACtC,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACrC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;QACxB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAC;QAC9C,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACzD,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;QACzC,IAAI,QAAQ,GAAG,CAAC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QACpE,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QACjC,CAAC;QACD,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;YACnC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;QAC/B,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,CAAe;QACrC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAC;YAC9C,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC5C,CAAC;QAAC,MAAM,CAAC;YACP,gEAAgE;QAClE,CAAC;QACD,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAEO,aAAa,CAAC,CAAgB;QACpC,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACjC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,KAAK,CAAuB,CAAC;QACnH,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC;YACzE,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YACtB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YAC5C,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,GAAG;YACtD,CAAC,CAAC,CAAC,CAAC;QAEN,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,gBAAgB;;;wBAGvB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;qBAGpC,GAAG,CAAC,sEAAsE,CAAC;uBACzE,IAAI,CAAC,iBAAiB;uBACtB,IAAI,CAAC,iBAAiB;qBACxB,IAAI,CAAC,eAAe;yBAChB,IAAI,CAAC,eAAe;mBAC1B,IAAI,CAAC,aAAa;;UAE3B,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;4BAEX,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;mCAC5B,IAAI,CAAC,WAAW;;cAErC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;;+BAGf,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;uBACrD,GAAG;;+BAEK,CAAC,KAAK,IAAI,CAAC,YAAY;wBAC9B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;;aAEnD,CAAC;;SAEL,CAAC,CAAC,CAAC,IAAI,CAAA;;SAEP;;UAEC,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;SAEvD,CAAC,CAAC,CAAC,EAAE;;UAEJ,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;gBAGzC,OAAO,CAAC,MAAM,EAAE,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;;;;SAI5C,CAAC,CAAC,CAAC,EAAE;;UAEJ,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA;qCACrB,CAAC,CAAQ,EAAE,EAAE;YACtC,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;;;;2BAIgB,GAAG,CAAC,aAAa,CAAC;;gBAE7B,OAAO,CAAC,cAAc,EAAE,EAAE,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;;;qCAG/B,CAAC,CAAQ,EAAE,EAAE;YACtC,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;;;;2BAIgB,GAAG,CAAC,cAAc,CAAC;;gBAE9B,OAAO,CAAC,eAAe,EAAE,EAAE,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;;;SAG7D,CAAC,CAAC,CAAC,EAAE;;UAEJ,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA;kHACqD,IAAI,CAAC,MAAM,CAAC,MAAM,oBAAoB,IAAI,CAAC,YAAY,GAAG,CAAC;0EACnG,eAAe;;SAEhF,CAAC,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF,CAAA;AA1RkB;IAAhB,KAAK,EAAE;yCAA+B;AAEgB;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CAAoB;AAEjB;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDAAqB;AAElB;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;kDAAsB;AAEvB;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CAAqB;AAEhB;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDAAwB;AAEnE;IAAhB,KAAK,EAAE;+CAA0B;AACjB;IAAhB,KAAK,EAAE;6CAA4B;AACnB;IAAhB,KAAK,EAAE;kDAAiC;AACxB;IAAhB,KAAK,EAAE;8CAAgC;AAlB7B,SAAS;IADrB,aAAa,CAAC,kBAAkB,CAAC;GACrB,SAAS,CA6RrB;;AAED,eAAe,SAAS,CAAC"}
|
|
@@ -38,6 +38,11 @@ export class NgxViewer360 {
|
|
|
38
38
|
this.el.nativeElement.showProgressBar = this.showProgressBar();
|
|
39
39
|
}
|
|
40
40
|
});
|
|
41
|
+
effect(() => {
|
|
42
|
+
if (this.el.nativeElement) {
|
|
43
|
+
this.el.nativeElement.locale = this.locale();
|
|
44
|
+
}
|
|
45
|
+
});
|
|
41
46
|
}
|
|
42
47
|
|
|
43
48
|
readonly autoRotate = input<boolean, any>(false, { transform: booleanAttribute });
|
|
@@ -45,6 +50,7 @@ export class NgxViewer360 {
|
|
|
45
50
|
readonly dragSensitivity = input<number, any>(15, { transform: numberAttribute });
|
|
46
51
|
readonly showControls = input<boolean, any>(true, { transform: booleanAttribute });
|
|
47
52
|
readonly showProgressBar = input<boolean, any>(true, { transform: booleanAttribute });
|
|
53
|
+
readonly locale = input<string, any>('');
|
|
48
54
|
|
|
49
55
|
readonly change = output<CustomEvent<{ index: number, total: number }>>();
|
|
50
56
|
}
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
dragSensitivity = undefined,
|
|
9
9
|
showControls = undefined,
|
|
10
10
|
showProgressBar = undefined,
|
|
11
|
+
locale = undefined,
|
|
11
12
|
children
|
|
12
13
|
} = $props<{
|
|
13
14
|
children?: any;
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
dragSensitivity?: number;
|
|
17
18
|
showControls?: boolean;
|
|
18
19
|
showProgressBar?: boolean;
|
|
20
|
+
locale?: string;
|
|
19
21
|
|
|
20
22
|
}>();
|
|
21
23
|
|
|
@@ -37,6 +39,9 @@
|
|
|
37
39
|
if (elementRef && showProgressBar !== undefined) {
|
|
38
40
|
elementRef.showProgressBar = showProgressBar;
|
|
39
41
|
}
|
|
42
|
+
if (elementRef && locale !== undefined) {
|
|
43
|
+
elementRef.locale = locale;
|
|
44
|
+
}
|
|
40
45
|
});
|
|
41
46
|
|
|
42
47
|
</script>
|
|
@@ -9,7 +9,8 @@ export const Viewer360 = defineComponent({
|
|
|
9
9
|
rotationSpeed: { type: [String, Number, Boolean, Array, Object] as any },
|
|
10
10
|
dragSensitivity: { type: [String, Number, Boolean, Array, Object] as any },
|
|
11
11
|
showControls: { type: [String, Number, Boolean, Array, Object] as any },
|
|
12
|
-
showProgressBar: { type: [String, Number, Boolean, Array, Object] as any }
|
|
12
|
+
showProgressBar: { type: [String, Number, Boolean, Array, Object] as any },
|
|
13
|
+
locale: { type: [String, Number, Boolean, Array, Object] as any }
|
|
13
14
|
},
|
|
14
15
|
emits: ['change'],
|
|
15
16
|
setup(props, { slots, emit }) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uibit/360-viewer",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Interactive 360-degree image viewer component. Display products and objects from every angle with smooth mouse/touch dragging, auto-rotation, and preloading.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"lucide": "^1.24.0",
|
|
49
|
-
"@uibit/core": "0.
|
|
49
|
+
"@uibit/core": "0.2.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@types/node": "^20.19.43",
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"tagName": "uibit-360-viewer"
|
|
84
84
|
},
|
|
85
85
|
"scripts": {
|
|
86
|
-
"build": "cem analyze --
|
|
87
|
-
"dev": "concurrently \"cem analyze --
|
|
88
|
-
"analyze": "cem analyze --
|
|
86
|
+
"build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
|
|
87
|
+
"dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
|
|
88
|
+
"analyze": "cem analyze --config ../custom-elements-manifest.config.js",
|
|
89
89
|
"typecheck": "tsc --noEmit"
|
|
90
90
|
}
|
|
91
91
|
}
|