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) => { new ResizeObserver((records) => {
if (!this.inDOM()) return; if (!this.inDOM()) return;
this.render(); this.render();
this.scrollCompute()
this.dom.dispatchEvent(new Event('resize')); this.dom.dispatchEvent(new Event('resize'));
}).observe(this.dom); }).observe(this.dom);
document.addEventListener('scroll', (e) => { document.addEventListener('scroll', (e) => {
if (e.target === this.root().dom) this.scrollCompute(); 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() { render() {
if (!this.inDOM()) return;
if (this._property.TYPE === 'justified') { if (this._property.TYPE === 'justified') {
const ROW_LIST = this.justifiedCompute(); const ROW_LIST = this.justifiedCompute();
let ROW_POSITION_Y = 0; let ROW_POSITION_Y = 0;
@ -164,8 +168,12 @@ export class $Layout extends $Container<HTMLElement> {
} }
COL_POSITION_X += COL_WIDTH + this._property.GAP; 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; return this;
} }

10
package.json
View File

@ -1,21 +1,21 @@
{ {
"name": "@elexis/layout", "name": "@elexis/layout",
"description": "A simple justified/waterfall layout for ElexisJS", "description": "A simple justified/waterfall layout for ElexisJS",
"version": "0.1.1", "version": "0.1.2",
"author": { "author": {
"name": "defaultkavy", "name": "defaultkavy",
"email": "defaultkavy@gmail.com", "email": "defaultkavy@gmail.com",
"url": "https://github.com/defaultkavy" "url": "https://git.defaultkavy.com/defaultkavy"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/elexisjs/layout.git" "url": "git+https://git.defaultkavy.com/elexis/layout.git"
}, },
"module": "index.ts", "module": "index.ts",
"bugs": { "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"], "keywords": ["web", "front-end", "lib", "fluent", "framework"],
"license": "ISC", "license": "ISC",
"type": "module", "type": "module",