From f97cd133636eb54b7d2d7c49d5f607f4cc2d0d30 Mon Sep 17 00:00:00 2001
From: Chaoran Chen <mail@chaoran-chen.de>
Date: Sun, 8 Jan 2023 18:15:46 +0100
Subject: [PATCH] feat: implement custom rendering

---
 src/lib/ImageGallery.svelte | 246 ++++++++++++++++++++++++------------
 src/lib/Slide.svelte        |  32 ++---
 src/lib/SlideWrapper.svelte |  66 +++++++---
 src/routes/+page.svelte     | 113 ++++++++++++++---
 4 files changed, 326 insertions(+), 131 deletions(-)

diff --git a/src/lib/ImageGallery.svelte b/src/lib/ImageGallery.svelte
index e90180f..57a4753 100644
--- a/src/lib/ImageGallery.svelte
+++ b/src/lib/ImageGallery.svelte
@@ -392,45 +392,90 @@
 >
   <div class={igContentClass}>
     {#if thumbnailPosition === 'bottom' || thumbnailPosition === 'right'}
-      <SlideWrapper
-        bind:this={slideWrapper}
-        {slideWrapperClass}
-        {items}
-        {showNav}
-        {showBullets}
-        {showIndex}
-        {currentIndex}
-        {previousIndex}
-        {infinite}
-        {isRTL}
-        {isFullscreen}
-        {showFullscreenButton}
-        {isPlaying}
-        {showPlayButton}
-        {currentSlideOffset}
-        {isTransitioning}
-        {galleryWidth}
-        {disableSwipe}
-        {stopPropagation}
-        {indexSeparator}
-        {lazyLoad}
-        {lazyLoaded}
-        {swipeThreshold}
-        {flickThreshold}
-        {transitionStyle}
-        {swipingTransitionStyle}
-        {useTranslate3D}
-        on:slideleft={() => slideLeft()}
-        on:slideright={() => slideRight()}
-        on:slidejump={(event) => {
-          slideToIndex(event.detail);
-        }}
-        on:playtoggle={togglePlay}
-        on:fullscreentoggle={toggleFullscreen}
-        on:lazyload={onLazyLoad}
-        on:imageload={handleImageLoad}
-        on:imageerror={handleImageError}
-      />
+      {#if $$slots.render}
+        <SlideWrapper
+          bind:this={slideWrapper}
+          {slideWrapperClass}
+          {items}
+          {showNav}
+          {showBullets}
+          {showIndex}
+          {currentIndex}
+          {previousIndex}
+          {infinite}
+          {isRTL}
+          {isFullscreen}
+          {showFullscreenButton}
+          {isPlaying}
+          {showPlayButton}
+          {currentSlideOffset}
+          {isTransitioning}
+          {galleryWidth}
+          {disableSwipe}
+          {stopPropagation}
+          {indexSeparator}
+          {lazyLoad}
+          {lazyLoaded}
+          {swipeThreshold}
+          {flickThreshold}
+          {transitionStyle}
+          {swipingTransitionStyle}
+          {useTranslate3D}
+          on:slideleft={() => slideLeft()}
+          on:slideright={() => slideRight()}
+          on:slidejump={(event) => {
+            slideToIndex(event.detail);
+          }}
+          on:playtoggle={togglePlay}
+          on:fullscreentoggle={toggleFullscreen}
+          on:lazyload={onLazyLoad}
+          on:imageload={handleImageLoad}
+          on:imageerror={handleImageError}
+          let:item
+        >
+          <slot slot="render" name="render" {item} />
+        </SlideWrapper>
+      {:else}
+        <SlideWrapper
+          bind:this={slideWrapper}
+          {slideWrapperClass}
+          {items}
+          {showNav}
+          {showBullets}
+          {showIndex}
+          {currentIndex}
+          {previousIndex}
+          {infinite}
+          {isRTL}
+          {isFullscreen}
+          {showFullscreenButton}
+          {isPlaying}
+          {showPlayButton}
+          {currentSlideOffset}
+          {isTransitioning}
+          {galleryWidth}
+          {disableSwipe}
+          {stopPropagation}
+          {indexSeparator}
+          {lazyLoad}
+          {lazyLoaded}
+          {swipeThreshold}
+          {flickThreshold}
+          {transitionStyle}
+          {swipingTransitionStyle}
+          {useTranslate3D}
+          on:slideleft={() => slideLeft()}
+          on:slideright={() => slideRight()}
+          on:slidejump={(event) => {
+            slideToIndex(event.detail);
+          }}
+          on:playtoggle={togglePlay}
+          on:fullscreentoggle={toggleFullscreen}
+          on:lazyload={onLazyLoad}
+          on:imageload={handleImageLoad}
+          on:imageerror={handleImageError}
+        />
+      {/if}
     {/if}
     {#if showThumbnails}
       <ThumbnailWrapper
@@ -455,45 +500,90 @@
       />
     {/if}
     {#if thumbnailPosition === 'top' || thumbnailPosition === 'left'}
-      <SlideWrapper
-        bind:this={slideWrapper}
-        {slideWrapperClass}
-        {items}
-        {showNav}
-        {showBullets}
-        {showIndex}
-        {currentIndex}
-        {previousIndex}
-        {infinite}
-        {isRTL}
-        {isFullscreen}
-        {showFullscreenButton}
-        {isPlaying}
-        {showPlayButton}
-        {currentSlideOffset}
-        {isTransitioning}
-        {galleryWidth}
-        {disableSwipe}
-        {stopPropagation}
-        {indexSeparator}
-        {lazyLoad}
-        {lazyLoaded}
-        {swipeThreshold}
-        {flickThreshold}
-        {transitionStyle}
-        {swipingTransitionStyle}
-        {useTranslate3D}
-        on:slideleft={() => slideLeft()}
-        on:slideright={() => slideRight()}
-        on:slidejump={(event) => {
-          slideToIndex(event.detail);
-        }}
-        on:playtoggle={togglePlay}
-        on:fullscreentoggle={toggleFullscreen}
-        on:lazyload={onLazyLoad}
-        on:imageload={handleImageLoad}
-        on:imageerror={handleImageError}
-      />
+      {#if $$slots.render}
+        <SlideWrapper
+          bind:this={slideWrapper}
+          {slideWrapperClass}
+          {items}
+          {showNav}
+          {showBullets}
+          {showIndex}
+          {currentIndex}
+          {previousIndex}
+          {infinite}
+          {isRTL}
+          {isFullscreen}
+          {showFullscreenButton}
+          {isPlaying}
+          {showPlayButton}
+          {currentSlideOffset}
+          {isTransitioning}
+          {galleryWidth}
+          {disableSwipe}
+          {stopPropagation}
+          {indexSeparator}
+          {lazyLoad}
+          {lazyLoaded}
+          {swipeThreshold}
+          {flickThreshold}
+          {transitionStyle}
+          {swipingTransitionStyle}
+          {useTranslate3D}
+          on:slideleft={() => slideLeft()}
+          on:slideright={() => slideRight()}
+          on:slidejump={(event) => {
+            slideToIndex(event.detail);
+          }}
+          on:playtoggle={togglePlay}
+          on:fullscreentoggle={toggleFullscreen}
+          on:lazyload={onLazyLoad}
+          on:imageload={handleImageLoad}
+          on:imageerror={handleImageError}
+          let:item
+        >
+          <slot slot="render" name="render" {item} />
+        </SlideWrapper>
+      {:else}
+        <SlideWrapper
+          bind:this={slideWrapper}
+          {slideWrapperClass}
+          {items}
+          {showNav}
+          {showBullets}
+          {showIndex}
+          {currentIndex}
+          {previousIndex}
+          {infinite}
+          {isRTL}
+          {isFullscreen}
+          {showFullscreenButton}
+          {isPlaying}
+          {showPlayButton}
+          {currentSlideOffset}
+          {isTransitioning}
+          {galleryWidth}
+          {disableSwipe}
+          {stopPropagation}
+          {indexSeparator}
+          {lazyLoad}
+          {lazyLoaded}
+          {swipeThreshold}
+          {flickThreshold}
+          {transitionStyle}
+          {swipingTransitionStyle}
+          {useTranslate3D}
+          on:slideleft={() => slideLeft()}
+          on:slideright={() => slideRight()}
+          on:slidejump={(event) => {
+            slideToIndex(event.detail);
+          }}
+          on:playtoggle={togglePlay}
+          on:fullscreentoggle={toggleFullscreen}
+          on:lazyload={onLazyLoad}
+          on:imageload={handleImageLoad}
+          on:imageerror={handleImageError}
+        />
+      {/if}
     {/if}
   </div>
 </div>
diff --git a/src/lib/Slide.svelte b/src/lib/Slide.svelte
index 0371e37..f926d76 100644
--- a/src/lib/Slide.svelte
+++ b/src/lib/Slide.svelte
@@ -39,21 +39,23 @@
   role="button"
 >
   {#if showItem}
-    <Item
-      description={item.description}
-      fullscreen={item.fullscreen}
-      {isFullscreen}
-      original={item.original}
-      originalAlt={item.originalAlt}
-      originalHeight={item.originalHeight}
-      originalWidth={item.originalWidth}
-      originalTitle={item.originalTitle}
-      sizes={item.sizes}
-      loading={item.loading}
-      srcset={item.srcset}
-      on:imageload
-      on:imageerror
-    />
+    <slot name="render">
+      <Item
+        description={item.description}
+        fullscreen={item.fullscreen}
+        {isFullscreen}
+        original={item.original}
+        originalAlt={item.originalAlt}
+        originalHeight={item.originalHeight}
+        originalWidth={item.originalWidth}
+        originalTitle={item.originalTitle}
+        sizes={item.sizes}
+        loading={item.loading}
+        srcset={item.srcset}
+        on:imageload
+        on:imageerror
+      />
+    </slot>
   {:else}
     <div style="height: 100%" />
   {/if}
diff --git a/src/lib/SlideWrapper.svelte b/src/lib/SlideWrapper.svelte
index fad6721..2b0bdf3 100644
--- a/src/lib/SlideWrapper.svelte
+++ b/src/lib/SlideWrapper.svelte
@@ -172,6 +172,54 @@
     >
       <div class="image-gallery-slides">
         {#each items as item, index}
+          {#if $$slots.render}
+            <Slide
+              {index}
+              alignment={alignmentClasses[index]}
+              originalClass={item.originalClass}
+              slideStyle={slideStyles[index]}
+              showItem={showItems[index]}
+              {item}
+              isFullscreen={false}
+              on:imageload={(event) => dispatch('imageload', { index, event })}
+              on:imageerror={(event) => dispatch('imageerror', { index, event })}
+            >
+              <slot slot="render" name="render" {item} />
+            </Slide>
+          {:else}
+            <Slide
+              {index}
+              alignment={alignmentClasses[index]}
+              originalClass={item.originalClass}
+              slideStyle={slideStyles[index]}
+              showItem={showItems[index]}
+              {item}
+              isFullscreen={false}
+              on:imageload={(event) => dispatch('imageload', { index, event })}
+              on:imageerror={(event) => dispatch('imageerror', { index, event })}
+            />
+          {/if}
+        {/each}
+      </div>
+    </SwipeWrapper>
+  {:else}
+    <div class="image-gallery-slides">
+      {#each items as item, index}
+        {#if $$slots.render}
+          <Slide
+            {index}
+            alignment={alignmentClasses[index]}
+            originalClass={item.originalClass}
+            slideStyle={slideStyles[index]}
+            showItem={showItems[index]}
+            {item}
+            isFullscreen={false}
+            on:imageload={(event) => dispatch('imageload', { index, event })}
+            on:imageerror={(event) => dispatch('imageerror', { index, event })}
+          >
+            <slot slot="render" name="render" {item} />
+          </Slide>
+        {:else}
           <Slide
             {index}
             alignment={alignmentClasses[index]}
@@ -183,23 +231,7 @@
             on:imageload={(event) => dispatch('imageload', { index, event })}
             on:imageerror={(event) => dispatch('imageerror', { index, event })}
           />
-        {/each}
-      </div>
-    </SwipeWrapper>
-  {:else}
-    <div class="image-gallery-slides">
-      {#each items as item, index}
-        <Slide
-          {index}
-          alignment={alignmentClasses[index]}
-          originalClass={item.originalClass}
-          slideStyle={slideStyles[index]}
-          showItem={showItems[index]}
-          {item}
-          isFullscreen={false}
-          on:imageload={(event) => dispatch('imageload', { index, event })}
-          on:imageerror={(event) => dispatch('imageerror', { index, event })}
-        />
+        {/if}
       {/each}
     </div>
   {/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 33ca8e4..580d5dc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
   import './+page.css';
   import ImageGallery from '$lib/ImageGallery.svelte';
   import type { Position, TItem } from '$lib/types';
+  import Item from '$lib/Item.svelte';
 
   let startIndex = 0;
   // TODO Once the ImageGallery supports rendering of custom items, we can showcase videos
@@ -24,8 +25,9 @@
   let useWindowKeyDown = true;
   let disableSwipe = false;
   let disableThumbnailSwipe = false;
+  let useCustomRender = true;
 
-  const PREFIX_URL = 'https://raw.githubusercontent.com/react2svelte/image-gallery/main/static/';
+  const PREFIX_URL = '/';
 
   function _getStaticImages() {
     let images: TItem[] = [];
@@ -42,30 +44,95 @@
   }
 
   const images = _getStaticImages();
+
+  let rotationDegree = 0;
+  let rotationDirectionIncreasing = true;
+
+  setInterval(() => {
+    if (rotationDegree >= 6) {
+      rotationDirectionIncreasing = false;
+    } else if (rotationDegree <= -6) {
+      rotationDirectionIncreasing = true;
+    }
+    if (rotationDirectionIncreasing) {
+      rotationDegree += 1;
+    } else {
+      rotationDegree -= 1;
+    }
+  }, 300);
 </script>
 
 <div class="gallery-container">
   <section class="app">
-    <ImageGallery
-      additionalClass="app-image-gallery"
-      items={images}
-      {startIndex}
-      {infinite}
-      {showBullets}
-      {showFullscreenButton}
-      {showPlayButton}
-      {showThumbnails}
-      {showIndex}
-      {showNav}
-      {isRTL}
-      {thumbnailPosition}
-      {slideDuration}
-      {slideInterval}
-      {slideOnThumbnailOver}
-      {useWindowKeyDown}
-      {disableSwipe}
-      {disableThumbnailSwipe}
-    />
+    {#if useCustomRender}
+      <ImageGallery
+        additionalClass="app-image-gallery"
+        items={images}
+        {startIndex}
+        {infinite}
+        {showBullets}
+        {showFullscreenButton}
+        {showPlayButton}
+        {showThumbnails}
+        {showIndex}
+        {showNav}
+        {isRTL}
+        {thumbnailPosition}
+        {slideDuration}
+        {slideInterval}
+        {slideOnThumbnailOver}
+        {useWindowKeyDown}
+        {disableSwipe}
+        {disableThumbnailSwipe}
+      >
+        <div slot="render" let:item style="padding: 30px;">
+          <div
+            style={`border: 6px dotted blue; padding: 2px; rotate: ${rotationDegree}deg;
+        transition-property: all;
+transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+transition-duration: 300ms;`}
+          >
+            <div style="border: 6px dotted orange; padding: 2px;">
+              <div style="border: 6px dotted green; padding: 2px;">
+                <Item
+                  description={item.description}
+                  fullscreen={item.fullscreen}
+                  original={item.original}
+                  originalAlt={item.originalAlt}
+                  originalHeight={item.originalHeight}
+                  originalWidth={item.originalWidth}
+                  originalTitle={item.originalTitle}
+                  sizes={item.sizes}
+                  loading={item.loading}
+                  srcset={item.srcset}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </ImageGallery>
+    {:else}
+      <ImageGallery
+        additionalClass="app-image-gallery"
+        items={images}
+        {startIndex}
+        {infinite}
+        {showBullets}
+        {showFullscreenButton}
+        {showPlayButton}
+        {showThumbnails}
+        {showIndex}
+        {showNav}
+        {isRTL}
+        {thumbnailPosition}
+        {slideDuration}
+        {slideInterval}
+        {slideOnThumbnailOver}
+        {useWindowKeyDown}
+        {disableSwipe}
+        {disableThumbnailSwipe}
+      />
+    {/if}
 
     <div class="app-sandbox">
       <div class="app-sandbox-content">
@@ -107,6 +174,10 @@
         </ul>
 
         <ul class="app-checkboxes">
+          <li>
+            <input id="use_custom_render" type="checkbox" bind:checked={useCustomRender} />
+            <label for="use_custom_render">use custom rendering</label>
+          </li>
           <li>
             <input id="infinite" type="checkbox" bind:checked={infinite} />
             <label for="infinite">allow infinite sliding</label>