From 91d166424125b5f69d1ac783d6f8285d54b33f86 Mon Sep 17 00:00:00 2001 From: Cristian Necula Date: Wed, 20 Apr 2022 11:50:46 +0300 Subject: [PATCH] feat!: replace skeleton-carousel with cosmoz-slider BREAKING CHANGE: dropped show-dots and currentImage --- README.md | 2 +- cosmoz-image-viewer-overlay.js | 4 + cosmoz-image-viewer.html.js | 124 +-- cosmoz-image-viewer.js | 255 +---- lib/hooks/use-cosmoz-image-viewer.js | 60 + lib/utils.js | 15 + package-lock.json | 1525 +++++--------------------- package.json | 5 +- test/basic.test.js | 53 +- web-test-runner.config.mjs | 3 +- 10 files changed, 426 insertions(+), 1620 deletions(-) create mode 100644 lib/hooks/use-cosmoz-image-viewer.js diff --git a/README.md b/README.md index 6a444f1..e10e990 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Example: ``` --> ```html - ``` diff --git a/cosmoz-image-viewer-overlay.js b/cosmoz-image-viewer-overlay.js index 0c540de..636d20a 100644 --- a/cosmoz-image-viewer-overlay.js +++ b/cosmoz-image-viewer-overlay.js @@ -15,8 +15,12 @@ class CosmozImageViewerOverlay extends mixinBehaviors([IronOverlayBehavior], Pol height: 100vh; width: 100vw; } + cosmoz-image-viewer { + height: 100%; + } :host { @@ -29,8 +29,8 @@ export const template = html` .flex { flex: auto; } #imageContainer { + height: 100%; overflow-y: auto; - will-change: transform; } .actions { @@ -68,51 +68,13 @@ export const template = html` visibility: hidden; } - div:hover .nav { + :host(:hover) .nav { visibility: visible; } - #carousel { - --skeleton-carousel-item-selected: { - height: auto; - text-align: center; - }; - - --skeleton-carousel-item: { - height: 0; - text-align: center; - }; - - --skeleton-carousel-nav: { - background-color: rgba(0, 0, 0, 0.44); - color: rgba(255, 255, 255, 0.87); - top: 12px; - position: absolute; - }; - - --skeleton-carousel-nav-disabled: { - /* otherwise fullscreen gets triggerd on tap */ - pointer-events: all !important; - }; - - --skeleton-carousel-nav-next: { - left: 56px; - }; - - --skeleton-carousel-nav-prev: { - left: 12px; - }; - - --skeleton-carousel-controls: { - padding: 0; - } - } - .image { background-color: gray; pointer-events: none; - --iron-image-width: 100%; - --iron-image-height: auto; /* Needed to override Chrome 73+ handling of iron-image overflow hidden */ overflow: visible; @apply --cosmoz-image-viewer-image; @@ -134,6 +96,7 @@ export const template = html` transform: translate(-50%, -50%); color: white; z-index: +1; + text-align: center; @apply --cosmoz-image-viewer-error; } @@ -142,56 +105,41 @@ export const template = html` opacity: 0.8; font-size: 0.8em; } + + cosmoz-slider { + min-height: 150px; + overflow-y: auto !important; + height:100%; + } -
- + -
- - - - -
- - - - - - - - - - - - -
+
+ + + + +
+ + + + + + + + + + + + +
-
-

[[ _('No image loaded.', t) ]]

- - - -
+
+

[[ _('No image loaded.', t) ]]

+