release(gallery): v1.0.0

index.json

@@ -109,8 +109,8 @@
  },
  "gallery": {
  "icon": true,
- "dependencies": ["carousel"],
- "version": "0.1.0",
+ "dependencies": ["carousel", "image-viewer", "toolbar"],
+ "version": "1.0.0",
  "style": true,
  "test": true,
  "install": false,
@@ -352,7 +352,7 @@
  },
  "toolbar": {
  "react": true,
- "version": "0.5.7",
+ "version": "0.5.8",
  "style": true,
  "icon": false,
  "test": true,

src/gallery/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 1.0.0 (23 Aug 2024)
+
+* feat: zoom in and zoom out

src/gallery/README.md

@@ -12,19 +12,25 @@ Add the following script and style to your page.
 
 ```html
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-carousel/luna-carousel.css" />
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-image-viewer/luna-image-viewer.css" />
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-toolbar/luna-toolbar.css" />
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-gallery/luna-gallery.css" />
 <script src="//cdn.jsdelivr.net/npm/luna-carousel/luna-carousel.js"></script>
+<script src="//cdn.jsdelivr.net/npm/luna-image-viewer/luna-image-viewer.js"></script>
+<script src="//cdn.jsdelivr.net/npm/luna-toolbar/luna-toolbar.js"></script>
 <script src="//cdn.jsdelivr.net/npm/luna-gallery/luna-gallery.js"></script>
 ```
 
 You can also get it on npm.
 
 ```bash
-npm install luna-gallery luna-carousel --save
+npm install luna-gallery luna-toolbar luna-image-viewer luna-carousel --save
 ```
 
 ```javascript
 import 'luna-carousel/luna-carousel.css'
+import 'luna-image-viewer/luna-image-viewer.css'
+import 'luna-toolbar/luna-toolbar.css'
 import 'luna-gallery/luna-gallery.css'
 import LunaGallery from 'luna-gallery'
 ```

src/gallery/icon.css

@@ -1,6 +1,6 @@
 @font-face {
  font-family: 'luna-gallery-icon';
- src: url('data:application/x-font-woff;charset=utf-8;base64,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')
+ src: url('data:application/x-font-woff;charset=utf-8;base64,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')
  format('woff');
 }
 
@@ -17,15 +17,24 @@
 .icon-download:before {
  content: '\f101';
 }
-.icon-fullscreen:before {
+.icon-original:before {
  content: '\f102';
 }
-.icon-pause:before {
+.icon-fullscreen:before {
  content: '\f103';
 }
-.icon-play:before {
+.icon-pause:before {
  content: '\f104';
 }
-.icon-close:before {
+.icon-play:before {
  content: '\f105';
 }
+.icon-close:before {
+ content: '\f106';
+}
+.icon-zoom-in:before {
+ content: '\f107';
+}
+.icon-zoom-out:before {
+ content: '\f108';
+}

src/gallery/icon/icon.json

@@ -2,5 +2,7 @@
  "../../share/icon/fullscreen.svg",
  "../../share/icon/pause.svg",
  "../../share/icon/play.svg",
- "../../share/icon/close.svg"
+ "../../share/icon/close.svg",
+ "../../share/icon/zoom-in.svg",
+ "../../share/icon/zoom-out.svg"
 ]

src/gallery/index.ts

@@ -2,10 +2,12 @@ import stripIndent from 'licia/stripIndent'
 import Component, { IComponentOptions } from '../share/Component'
 import LunaCarousel from 'luna-carousel'
 import LunaImageViewer from 'luna-image-viewer'
+import LunaToolbar, { LunaToolbarButton, LunaToolbarText } from 'luna-toolbar'
 import h from 'licia/h'
 import $ from 'licia/$'
 import ResizeSensor from 'licia/ResizeSensor'
 import throttle from 'licia/throttle'
+import types from 'licia/types'
 import each from 'licia/each'
 import loadImg from 'licia/loadImg'
 import fullscreen from 'licia/fullscreen'
@@ -29,10 +31,9 @@ export default class Gallery extends Component<IOptions> {
  private carousel: LunaCarousel
  private images: Image[] = []
  private resizeSensor: ResizeSensor
- private $toolbar: $.$
- private $counter: $.$
- private $playIcon: $.$
  private isCycling = false
+ private counter: LunaToolbarText
+ private playBtn: LunaToolbarButton
  constructor(container: HTMLElement, options: IOptions = {}) {
  super(container, { compName: 'gallery' })
  this.initOptions(options, {
@@ -47,13 +48,11 @@ export default class Gallery extends Component<IOptions> {
 
  const $body = this.find('.body')
  const body = $body.get(0) as HTMLElement
- this.$toolbar = this.find('.toolbar')
- this.$counter = this.find('.counter')
- this.$playIcon = this.find('.icon-play')
 
  this.carousel = new LunaCarousel(body)
  this.resizeSensor = new ResizeSensor(container)
  this.onResize = throttle(() => this.reset(), 16)
+ this.initToolbar()
 
  this.bindEvent()
  this.hide()
@@ -104,16 +103,18 @@ export default class Gallery extends Component<IOptions> {
  each(this.images, (image) => image.reset())
  }
  cycle() {
- const { carousel, c } = this
+ const { carousel, c, playBtn } = this
  carousel.setOption('interval', 5000)
  carousel.cycle()
- this.$playIcon.rmClass(c('icon-play')).addClass(c('icon-pause'))
+ const $playIcon = playBtn.$container.find(c('.icon'))
+ $playIcon.rmClass(c('icon-play')).addClass(c('icon-pause'))
  this.isCycling = true
  }
  pause() {
- const { c } = this
+ const { c, playBtn } = this
  this.carousel.pause()
- this.$playIcon.addClass(c('icon-play')).rmClass(c('icon-pause'))
+ const $playIcon = playBtn.$container.find(c('.icon'))
+ $playIcon.addClass(c('icon-play')).rmClass(c('icon-pause'))
  this.isCycling = false
  }
  destroy() {
@@ -128,56 +129,74 @@ export default class Gallery extends Component<IOptions> {
  this.cycle()
  }
  }
+ private initToolbar() {
+ const { c } = this
+ const $toolbar = this.find('.toolbar')
+ const toolbar = new LunaToolbar($toolbar.get(0) as HTMLElement, {
+ theme: 'dark',
+ })
+ function appendIcon(icon: string, handler: types.AnyFn) {
+ const el = h(`span${c('.icon') + c(`.icon-${icon}`)}`)
+ return toolbar.appendButton(el, handler)
+ }
+ this.counter = toolbar.appendText('1/4')
+ toolbar.appendSpace()
+ this.playBtn = appendIcon('play', this.toggleCycle)
+ appendIcon('zoom-in', this.zoomIn)
+ appendIcon('zoom-out', this.zoomOut)
+ appendIcon('original', this.zoomToOriginal)
+ appendIcon('download', this.download)
+ appendIcon('fullscreen', this.toggleFullscreen)
+ appendIcon('close', this.hide)
+ }
  private initTpl() {
  this.$container.html(
  this.c(stripIndent`
  <div class="body"></div>
- <div class="toolbar">
- <div class="counter"></div>
- <div class="button button-close">
- <span class="icon icon-close"></span>
- </div>
- <div class="button button-fullscreen">
- <span class="icon icon-fullscreen"></span>
- </div>
- <div class="button button-download">
- <span class="icon icon-download"></span>
- </div>
- <div class="button button-play">
- <div class="icon-play-circle">
- <span class="icon icon-play"></span>
- </div>
- </div>
- </div>
- `)
+ <div class="toolbar"></div>`)
  )
  }
  private toggleFullscreen = () => {
  fullscreen.toggle(this.container)
  }
  private updateCounter = () => {
  const { carousel } = this
- this.$counter.html(
+ this.counter.setText(
  `${carousel.getActiveIdx() + 1} / ${carousel.getSlides().length}`
  )
  }
  private download = () => {
+ const image = this.getActiveImage()
+ if (image) {
+ image.download()
+ }
+ }
+ private zoomIn = () => {
+ const image = this.getActiveImage()
+ if (image) {
+ image.zoom(0.1)
+ }
+ }
+ private zoomOut = () => {
+ const image = this.getActiveImage()
+ if (image) {
+ image.zoom(-0.1)
+ }
+ }
+ private zoomToOriginal = () => {
+ const image = this.getActiveImage()
+ if (image) {
+ image.zoomTo(1)
+ }
+ }
+ private getActiveImage() {
  const { carousel, images } = this
  const activeIdx = carousel.getActiveIdx()
  const image = images[activeIdx]
- if (!image) {
- return
- }
- image.download()
+ return image
  }
  private bindEvent() {
- const { c } = this
  this.resizeSensor.addListener(this.onResize)
- this.$toolbar
- .on('click', c('.button-close'), this.hide)
- .on('click', c('.button-fullscreen'), this.toggleFullscreen)
- .on('click', c('.button-play'), this.toggleCycle)
- .on('click', c('.button-download'), this.download)
  this.carousel.on('slide', this.updateCounter)
  }
 }
@@ -231,6 +250,12 @@ class Image {
  reset() {
  this.imageViewer.reset()
  }
+ zoom(ratio: number) {
+ this.imageViewer.zoom(ratio)
+ }
+ zoomTo(ratio: number) {
+ this.imageViewer.zoomTo(ratio)
+ }
  private initTpl() {
  const { gallery } = this
 

src/gallery/package.json

@@ -1,12 +1,13 @@
 {
  "name": "gallery",
- "version": "0.1.0",
+ "version": "1.0.0",
  "description": "Lightweight gallery",
  "luna": {
  "icon": true,
  "dependencies": [
  "carousel",
- "image-viewer"
+ "image-viewer",
+ "toolbar"
  ]
  }
 }

src/gallery/story.js

@@ -2,6 +2,7 @@ import 'luna-gallery.css'
 import Gallery from 'luna-gallery.js'
 import $ from 'licia/$'
 import readme from './README.md'
+import changelog from './CHANGELOG.md'
 import story from '../share/story'
 import { button, boolean } from '@storybook/addon-knobs'
 
@@ -41,6 +42,7 @@ const def = story(
  },
  {
  readme,
+ changelog,
  source: __STORY__,
  }
 )