diff --git a/index.json b/index.json index 9b45d6e..70e0204 100644 --- a/index.json +++ b/index.json @@ -118,7 +118,7 @@ }, "image-list": { "dependencies": ["gallery"], - "version": "0.2.0", + "version": "0.2.1", "style": true, "icon": false, "test": true, diff --git a/src/image-list/index.ts b/src/image-list/index.ts index 435decc..741f55e 100644 --- a/src/image-list/index.ts +++ b/src/image-list/index.ts @@ -2,7 +2,6 @@ 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' @@ -37,7 +36,7 @@ interface IImage { export default class ImageList extends Component { private images: IImage[] = [] private gallery: LunaGallery - private galleryContainer: HTMLElement = h('div') + private $images: $.$ constructor(container: HTMLElement, options: IOptions = {}) { super(container, { compName: 'image-list' }) @@ -48,28 +47,27 @@ export default class ImageList extends Component { showTitle: true, }) - document.body.appendChild(this.galleryContainer) - this.gallery = new LunaGallery(this.galleryContainer) + this.initTpl() - const { $container } = this - $container.css({ + const $images = this.find('.images') + $images.css({ marginLeft: this.options.horizontalMargin + 'px', marginBottom: -this.options.verticalMargin + 'px', }) if (!this.options.showTitle) { - $container.addClass(this.c('no-title')) + $images.addClass(this.c('no-title')) } + this.$images = $images + + const galleryContainer = this.find('.gallery').get(0) as HTMLElement + this.gallery = new LunaGallery(galleryContainer) this.bindEvent() } - destroy() { - document.body.removeChild(this.galleryContainer) - super.destroy() - } /** Clear all images. */ clear() { this.images = [] - this.$container.html('') + this.$images.html('') this.gallery.clear() } /** Append image. */ @@ -80,7 +78,7 @@ export default class ImageList extends Component { if (!title) { title = last(src.split('/')) } - const container = toEl( + const item = toEl( this.c(stripIndent`
@@ -90,30 +88,38 @@ export default class ImageList extends Component {
`) ) as HTMLElement - const $container = $(container) - $container.css({ + const $item = $(item) + $item.css({ marginRight: horizontalMargin + 'px', marginBottom: verticalMargin + 'px', }) - const $img = $container.find('img') + const $img = $item.find('img') const img = $img.get(0) as HTMLImageElement img.onload = () => { const ratio = img.width / img.height const width = imageHeight * ratio - $container.css('flex-basis', width + 'px') - this.$container.append(container) + $item.css('flex-basis', width + 'px') + this.$images.append(item) - $container.data('idx', toStr(this.images.length)) + $item.data('idx', toStr(this.images.length)) this.images.push({ src, title: title || '', - container, + container: item, }) this.gallery.append(src, title) } } + private initTpl() { + this.$container.html( + this.c(stripIndent` +
+ + `) + ) + } private bindEvent() { const { gallery } = this diff --git a/src/image-list/package.json b/src/image-list/package.json index cb62dcd..75860f5 100644 --- a/src/image-list/package.json +++ b/src/image-list/package.json @@ -1,6 +1,6 @@ { "name": "image-list", - "version": "0.2.0", + "version": "0.2.1", "description": "Show list of images", "luna": { "dependencies": [ diff --git a/src/image-list/style.scss b/src/image-list/style.scss index b0b5fd4..87cb057 100644 --- a/src/image-list/style.scss +++ b/src/image-list/style.scss @@ -3,20 +3,23 @@ .luna-image-list { @include component(); background-color: transparent; - display: flex; - flex-wrap: wrap; &.theme-dark { background-color: transparent; } +} + +.images { + display: flex; + flex-wrap: wrap; + &::after { + content: ''; + flex-grow: 1000; + } &.no-title { .title { display: none; } } - &::after { - content: ''; - flex-grow: 1000; - } } .item {