rotate-slide-button.stories.tsx

import React from 'react'
import 'photoswipe/dist/photoswipe.css'
import { Meta, StoryObj } from '@storybook/react'
import { Gallery, Item, GalleryProps } from '..'

const storyMeta: Meta = {
  title: 'Demo/Custom UI Elements',
}

export const RotateSlideButton: StoryObj = {
  render: () => {
    const smallItemStyles: React.CSSProperties = {
      cursor: 'pointer',
      objectFit: 'cover',
      width: '100%',
      maxHeight: '100%',
    }

    const uiElements: GalleryProps['uiElements'] = [
      {
        name: 'custom-rotate-button',
        ariaLabel: 'Rotate',
        order: 9,
        isButton: true,
        html: {
          isCustomSVG: true,
          inner:
            '<path d="M13.887 6.078C14.258 6.234 14.5 6.598 14.5 7V8.517C18.332 8.657 21.258 10.055 23.15 12.367 24.519 14.041 25.289 16.13 25.496 18.409A1 1 0 0123.504 18.591C23.327 16.645 22.68 14.952 21.601 13.633 20.156 11.867 17.831 10.653 14.5 10.517V12A1.002 1.002 0 0112.779 12.693L10.304 10.121A1.002 1.002 0 0110.324 8.713L12.8 6.286A1 1 0 0113.887 6.078ZM7.5 16A1.5 1.5 0 006 17.5V24.5A1.5 1.5 0 007.5 26H17.5A1.5 1.5 0 0019 24.5V17.5A1.5 1.5 0 0017.5 16H7.5Z" id="pswp__icn-rotate"/>',
          outlineID: 'pswp__icn-rotate',
        },
        appendTo: 'bar',
        onClick: (e, el, pswpInstance) => {
          if (!pswpInstance.currSlide?.content.element) {
            return
          }

          const item = pswpInstance.currSlide.content.element

          const prevRotateAngle = Number(item.dataset.rotateAngel) || 0
          const rotateAngle = prevRotateAngle === 270 ? 0 : prevRotateAngle + 90

          // add slide rotation
          item.style.transform = `${item.style.transform.replace(
            `rotate(-${prevRotateAngle}deg)`,
            '',
          )} rotate(-${rotateAngle}deg)`
          item.dataset.rotateAngel = String(rotateAngle)
        },
        onInit: (el, pswpInstance) => {
          // remove applied rotation on slide change
          // https://photoswipe.com/events/#slide-content-events
          pswpInstance.on('contentRemove', () => {
            if (!pswpInstance.currSlide?.content.element) {
              return
            }

            const item = pswpInstance.currSlide.content.element
            item.style.transform = `${item.style.transform.replace(
              `rotate(-${item.dataset.rotateAngel}deg)`,
              '',
            )}`
            delete item.dataset.rotateAngel
          })
        },
      },
    ]

    return (
      <Gallery uiElements={uiElements}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '240px 171px 171px',
            gridTemplateRows: '114px 114px',
            gridGap: 12,
          }}
        >
          <Item<HTMLImageElement>
            original="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg"
            thumbnail="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg"
            width="1600"
            height="1600"
            alt="Photo of seashore by Folkert Gorter"
          >
            {({ ref, open }) => (
              <img
                style={{ cursor: 'pointer' }}
                src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg"
                ref={ref}
                onClick={open}
              />
            )}
          </Item>
          <Item<HTMLImageElement>
            original="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg"
            thumbnail="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg"
            width="1600"
            height="1068"
            alt="Photo of mountain lake by Samuel Rohl"
          >
            {({ ref, open }) => (
              <img
                style={smallItemStyles}
                src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg"
                ref={ref}
                onClick={open}
              />
            )}
          </Item>
          <Item<HTMLImageElement>
            original="https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg"
            thumbnail="https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg"
            width="1600"
            height="1066"
            alt="Photo of fog in the village by Ales Krivec"
          >
            {({ ref, open }) => (
              <img
                style={smallItemStyles}
                src="https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg"
                ref={ref}
                onClick={open}
              />
            )}
          </Item>
          <Item<HTMLImageElement>
            original="https://farm6.staticflickr.com/5584/14985868676_b51baa4071_h.jpg"
            thumbnail="https://farm6.staticflickr.com/5584/14985868676_4b802b932a_m.jpg"
            width="1600"
            height="1066"
            alt="Photo of river sunset by Michael Hull"
          >
            {({ ref, open }) => (
              <img
                style={{ ...smallItemStyles, gridColumnStart: 2 }}
                src="https://farm6.staticflickr.com/5584/14985868676_4b802b932a_m.jpg"
                ref={ref}
                onClick={open}
              />
            )}
          </Item>
          <Item<HTMLImageElement>
            original="https://farm4.staticflickr.com/3920/15008465772_d50c8f0531_h.jpg"
            thumbnail="https://farm4.staticflickr.com/3920/15008465772_383e697089_m.jpg"
            width="1600"
            height="1066"
            alt="Photo of bear by Thomas Lefebvre"
          >
            {({ ref, open }) => (
              <img
                style={smallItemStyles}
                src="https://farm4.staticflickr.com/3920/15008465772_383e697089_m.jpg"
                ref={ref}
                onClick={open}
              />
            )}
          </Item>
        </div>
      </Gallery>
    )
  },
}

export default storyMeta