Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 20:14:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

listen for expand event in list object

Browse Source
This commit is contained in:
Matt Hill
2022-01-13 11:27:18 -07:00
committed by Aiden McClelland
parent cb8c339e99
commit 63e03f7bd7
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/app/components/form-object/form-object.component.html
View File

@@ -157,7 +157,7 @@
</ion-item> </ion-item>
<!-- nested body --> <!-- nested body -->
<div <div
[id]="getElementId(entry.key)" [id]="getElementId(entry.key, i)"
[ngStyle]="{ [ngStyle]="{
'max-height': objectListDisplay[entry.key][i].height, 'max-height': objectListDisplay[entry.key][i].height,
'overflow': 'hidden', 'overflow': 'hidden',
@@ -175,6 +175,7 @@
[current]="current && current[entry.key] ? current[entry.key][i] : undefined" [current]="current && current[entry.key] ? current[entry.key][i] : undefined"
[unionSpec]="spec.subtype === 'union' ? $any(spec.spec) : undefined" [unionSpec]="spec.subtype === 'union' ? $any(spec.spec) : undefined"
(onInputChange)="updateLabel(entry.key, i, spec.spec['display-as'])" (onInputChange)="updateLabel(entry.key, i, spec.spec['display-as'])"
(onExpand)="resize(entry.key, i)"
></form-object> ></form-object>
<div style="text-align: right; padding-top: 12px;"> <div style="text-align: right; padding-top: 12px;">
<ion-button fill="clear" (click)="presentAlertDelete(entry.key, i)" color="danger"> <ion-button fill="clear" (click)="presentAlertDelete(entry.key, i)" color="danger">

20
ui/src/app/components/form-object/form-object.component.ts
View File

@@ -89,9 +89,13 @@ export class FormObjectComponent {
this.onExpand.emit() this.onExpand.emit()
} }
resize (key: string): void { resize (key: string, i?: number): void {
setTimeout(() => { setTimeout(() => {
this.objectDisplay[key].height = this.getDocSize(key) if (i !== undefined) {
this.objectListDisplay[key][i].height = this.getDocSize(key, i)
} else {
this.objectDisplay[key].height = this.getDocSize(key)
}
this.onExpand.emit() this.onExpand.emit()
}, 250) // 250 to match transition-duration, defined in html }, 250) // 250 to match transition-duration, defined in html
} }
@@ -116,7 +120,7 @@ export class FormObjectComponent {
}) })
pauseFor(200).then(() => { pauseFor(200).then(() => {
this.objectListDisplay[key][0].height = this.getDocSize(key) this.objectListDisplay[key][0].height = this.getDocSize(key, 0)
}) })
} }
} }
@@ -129,7 +133,7 @@ export class FormObjectComponent {
toggleExpandListObject (key: string, i: number) { toggleExpandListObject (key: string, i: number) {
this.objectListDisplay[key][i].expanded = !this.objectListDisplay[key][i].expanded this.objectListDisplay[key][i].expanded = !this.objectListDisplay[key][i].expanded
this.objectListDisplay[key][i].height = this.objectListDisplay[key][i].expanded ? this.getDocSize(key) : '0px' this.objectListDisplay[key][i].height = this.objectListDisplay[key][i].expanded ? this.getDocSize(key, i) : '0px'
} }
updateLabel (key: string, i: number, displayAs: string) { updateLabel (key: string, i: number, displayAs: string) {
@@ -250,13 +254,13 @@ export class FormObjectComponent {
}) })
} }
private getDocSize (key: string) { private getDocSize (key: string, index = 0) {
const element = document.getElementById(this.getElementId(key)) const element = document.getElementById(this.getElementId(key, index))
return `${element.scrollHeight}px` return `${element.scrollHeight}px`
} }
getElementId (key: string): string { getElementId (key: string, index = 0): string {
return `${key}-${this.objectId}` return `${key}-${index}-${this.objectId}`
} }
async presentUnionTagDescription (name: string, description: string) { async presentUnionTagDescription (name: string, description: string) {