elexis/layout
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.2

Browse Source 
update: Update layout render when add or remove child from $Layout.
fix: Fix $Layout compute and render with wrong height.
change: Repository host.
This commit is contained in:
defaultkavy 2024-08-29 02:46:06 +08:00
parent 103eef523e
commit e15cd5bac4
Signed by: defaultkavy
GPG Key ID: 59B28939E8FDD2CD
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/$Layout.ts
View File

@ -18,12 +18,15 @@ export class $Layout extends $Container<HTMLElement> {
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<HTMLElement> {
}
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<HTMLElement> {
}
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;
}

10
package.json
View File

@ -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",