release(image-list): v0.1.0

index.json

@@ -117,13 +117,13 @@
     "react": false
   },
   "image-list": {
+    "dependencies": ["gallery"],
     "version": "0.1.0",
     "style": true,
     "icon": false,
     "test": true,
     "install": false,
-    "react": false,
-    "dependencies": []
+    "react": false
   },
   "image-viewer": {
     "react": true,

src/image-list/README.md

@@ -11,17 +11,29 @@ https://luna.liriliri.io/?path=/story/image-list
 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" />
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-image-list/luna-image-list.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>
 <script src="//cdn.jsdelivr.net/npm/luna-image-list/luna-image-list.js"></script>
 ```
 
 You can also get it on npm.
 
 ```bash
-npm install luna-image-list --save
+npm install luna-image-list 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 'luna-image-list/luna-image-list.css'
 import LunaImageList from 'luna-image-list'
 ```

src/image-list/index.ts

@@ -2,6 +2,10 @@ import toEl from 'licia/toEl'
 import stripIndent from 'licia/stripIndent'
 import last from 'licia/last'
 import $ from 'licia/$'
+import h from 'licia/h'
+import toStr from 'licia/toStr'
+import toNum from 'licia/toNum'
+import LunaGallery from 'luna-gallery'
 import Component, { IComponentOptions } from '../share/Component'
 import { exportCjs } from '../share/util'
 
@@ -32,6 +36,8 @@ interface IImage {
  */
 export default class ImageList extends Component<IOptions> {
   private images: IImage[] = []
+  private gallery: LunaGallery
+  private galleryContainer: HTMLElement = h('div')
   constructor(container: HTMLElement, options: IOptions = {}) {
     super(container, { compName: 'image-list' })
 
@@ -42,6 +48,9 @@ export default class ImageList extends Component<IOptions> {
       showTitle: true,
     })
 
+    document.body.appendChild(this.galleryContainer)
+    this.gallery = new LunaGallery(this.galleryContainer)
+
     const { $container } = this
     $container.css({
       marginLeft: this.options.horizontalMargin + 'px',
@@ -50,6 +59,12 @@ export default class ImageList extends Component<IOptions> {
     if (!this.options.showTitle) {
       $container.addClass(this.c('no-title'))
     }
+
+    this.bindEvent()
+  }
+  destroy() {
+    document.body.removeChild(this.galleryContainer)
+    super.destroy()
   }
   /** Append image. */
   append(src: string, title?: string) {
@@ -82,13 +97,26 @@ export default class ImageList extends Component<IOptions> {
       $container.css('flex-basis', width + 'px')
       this.$container.append(container)
 
+      $container.data('idx', toStr(this.images.length))
+
       this.images.push({
         src,
         title: title || '',
         container,
       })
+
+      this.gallery.append(src, title)
     }
   }
+  private bindEvent() {
+    const { gallery } = this
+
+    this.$container.on('click', this.c('.item'), function (this: HTMLElement) {
+      const idx = toNum($(this).data('idx'))
+      gallery.slideTo(idx)
+      gallery.show()
+    })
+  }
 }
 
 if (typeof module !== 'undefined') {

src/image-list/package.json

@@ -1,5 +1,10 @@
 {
   "name": "image-list",
   "version": "0.1.0",
-  "description": "Show list of images"
+  "description": "Show list of images",
+  "luna": {
+    "dependencies": [
+      "gallery"
+    ]
+  }
 }

src/image-list/test.js

@@ -1,8 +1,15 @@
 import ImageList from './index'
 import test from '../share/test'
 
-test('gallery', (container) => {
+test('image-list', (container) => {
   const imageList = new ImageList(container)
 
+  it('basic', function () {
+    imageList.append('https://luna.liriliri.io/pic1.png', 'pic1.png')
+    imageList.append('https://luna.liriliri.io/pic2.png', 'pic2.png')
+    imageList.append('https://luna.liriliri.io/pic3.png', 'pic3.png')
+    imageList.append('https://luna.liriliri.io/pic4.png', 'pic4.png')
+  })
+
   return imageList
 })