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__,
   }
 )