diff --git a/lib/$Layout.ts b/lib/$Layout.ts index de4e5bf..25c7730 100644 --- a/lib/$Layout.ts +++ b/lib/$Layout.ts @@ -18,12 +18,15 @@ export class $Layout extends $Container { new ResizeObserver((records) => { if (!this.inDOM()) return; this.render(); - this.scrollCompute() this.dom.dispatchEvent(new Event('resize')); }).observe(this.dom); document.addEventListener('scroll', (e) => { if (e.target === this.root().dom) this.scrollCompute(); }) + new IntersectionObserver((entries) => { + if (!this.inDOM()) return; + this.render(); + }).observe(this.dom) } /** @@ -121,6 +124,7 @@ export class $Layout extends $Container { } render() { + if (!this.inDOM()) return; if (this._property.TYPE === 'justified') { const ROW_LIST = this.justifiedCompute(); let ROW_POSITION_Y = 0; @@ -164,8 +168,12 @@ export class $Layout extends $Container { } COL_POSITION_X += COL_WIDTH + this._property.GAP; } - if (COL_LIST.length) this.css({height: `${COL_LIST.sort((a, b) => b.height - a.height)[0].height}px`}) + if (COL_LIST.length) { + const heightestCOL = COL_LIST.sort((a, b) => b.height - a.height)[0]; + this.css({height: `${heightestCOL.height + heightestCOL.items.length * this._property.GAP}px`}) + } } + this.scrollCompute(); return this; } diff --git a/package.json b/package.json index e706790..074567d 100644 --- a/package.json +++ b/package.json @@ -1,21 +1,21 @@ { "name": "@elexis/layout", "description": "A simple justified/waterfall layout for ElexisJS", - "version": "0.1.1", + "version": "0.1.2", "author": { "name": "defaultkavy", "email": "defaultkavy@gmail.com", - "url": "https://github.com/defaultkavy" + "url": "https://git.defaultkavy.com/defaultkavy" }, "repository": { "type": "git", - "url": "git+https://github.com/elexisjs/layout.git" + "url": "git+https://git.defaultkavy.com/elexis/layout.git" }, "module": "index.ts", "bugs": { - "url": "https://github.com/elexisjs/layout/issues" + "url": "https://git.defaultkavy.com/elexis/layout/issues" }, - "homepage": "https://github.com/elexisjs/layout", + "homepage": "https://git.defaultkavy.com/elexis/layout", "keywords": ["web", "front-end", "lib", "fluent", "framework"], "license": "ISC", "type": "module",