From 647a4a5115193dce400dfb5185254b223a85ad4d Mon Sep 17 00:00:00 2001 From: Maxim Sadofyev Date: Thu, 14 Mar 2024 00:39:48 +0500 Subject: [PATCH] =?UTF-8?q?=D0=92=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D1=8C=20=D0=BF=D0=BE=D0=BB=D0=BD=D0=BE=D1=81?= =?UTF-8?q?=D1=82=D1=8C=D1=8E=20=D1=80=D0=B0=D0=B7=D0=B2=D0=BE=D1=80=D0=B0?= =?UTF-8?q?=D1=87=D0=B8=D0=B2=D0=B0=D1=82=D1=8C/=D1=81=D0=B2=D0=BE=D1=80?= =?UTF-8?q?=D0=B0=D1=87=D0=B8=D0=B2=D0=B0=D1=82=D1=8C=20=D0=BE=D0=B1=D1=8A?= =?UTF-8?q?=D0=B5=D0=BA=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #20 --- package-lock.json | 4 +- package.json | 2 +- .../json-viewer/json-segment.component.html | 9 ++++- .../json-viewer/json-segment.component.ts | 39 ++++++++++++++++--- .../json-viewer/json-viewer.component.html | 2 +- .../json-viewer/json-viewer.component.ts | 14 ++++++- 6 files changed, 58 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 823d71c..58f2d87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "har-viewer", - "version": "0.1.0", + "version": "0.1.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "har-viewer", - "version": "0.1.0", + "version": "0.1.2", "dependencies": { "@angular-devkit/build-angular": "^17.1.2", "@angular/animations": "^17.1.0", diff --git a/package.json b/package.json index 8f47e26..0f35931 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "har-viewer", - "version": "0.1.1", + "version": "0.1.2", "private": true, "scripts": { "prepare": "node scripts/prepare.mjs", diff --git a/src/app/components/json-viewer/json-segment.component.html b/src/app/components/json-viewer/json-segment.component.html index aac4194..5e94bf8 100644 --- a/src/app/components/json-viewer/json-segment.component.html +++ b/src/app/components/json-viewer/json-segment.component.html @@ -1,4 +1,9 @@ -
+
@if (expandable()) {
} @@ -23,5 +28,5 @@
@if (expanded()) { - + } diff --git a/src/app/components/json-viewer/json-segment.component.ts b/src/app/components/json-viewer/json-segment.component.ts index 4c95ab0..a96f244 100644 --- a/src/app/components/json-viewer/json-segment.component.ts +++ b/src/app/components/json-viewer/json-segment.component.ts @@ -1,10 +1,24 @@ -import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } from '@angular/core'; +import { + booleanAttribute, + ChangeDetectionStrategy, + Component, + computed, + forwardRef, + inject, + Input, + input, + OnInit, + signal, +} from '@angular/core'; import { Primitive } from '../../types/primitive'; +import { Unsafe } from '../../types/unsafe'; import { isObjectOrArray } from '../../utils/is-object-or-array'; import { StringContentService } from '../string-content-modal/string-content.service'; import { JsonViewerComponent } from './json-viewer.component'; import { Segment } from './segments/base/segment'; +type ExpandType = 'slim' | 'full'; + @Component({ selector: 'app-json-segment', standalone: true, @@ -13,11 +27,14 @@ import { Segment } from './segments/base/segment'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [forwardRef(() => JsonViewerComponent)], }) -export class JsonSegmentComponent { +export class JsonSegmentComponent implements OnInit { public segment = input.required(); + @Input({ transform: booleanAttribute }) + public opened!: boolean; + protected readonly expandable = computed(() => isObjectOrArray(this.segment().value)); - protected readonly expanded = signal(false); + protected readonly expanded = signal>(null); protected readonly isString = computed(() => this.isType('string')); protected readonly isNumber = computed(() => this.isType('number')); @@ -27,8 +44,20 @@ export class JsonSegmentComponent { protected readonly stringContentService = inject(StringContentService); - protected toggle(): void { - this.expanded.update(x => !x); + public ngOnInit(): void { + if (this.opened) { + this.expanded.set('full'); + } + } + + protected toggle(event: MouseEvent): void { + this.expanded.update(state => { + if (state) { + return null; + } else { + return event.altKey ? 'full' : 'slim'; + } + }); } protected showMore(): void { diff --git a/src/app/components/json-viewer/json-viewer.component.html b/src/app/components/json-viewer/json-viewer.component.html index 3bb69f1..1cebc34 100644 --- a/src/app/components/json-viewer/json-viewer.component.html +++ b/src/app/components/json-viewer/json-viewer.component.html @@ -1,3 +1,3 @@ @for (segment of segments(); track segment.id) { - + } diff --git a/src/app/components/json-viewer/json-viewer.component.ts b/src/app/components/json-viewer/json-viewer.component.ts index e82598e..210faf8 100644 --- a/src/app/components/json-viewer/json-viewer.component.ts +++ b/src/app/components/json-viewer/json-viewer.component.ts @@ -1,4 +1,13 @@ -import { ChangeDetectionStrategy, Component, computed, inject, input, Signal } from '@angular/core'; +import { + booleanAttribute, + ChangeDetectionStrategy, + Component, + computed, + inject, + Input, + input, + Signal, +} from '@angular/core'; import { JSONValue } from '../../types/json-value'; import { JsonSegmentComponent } from './json-segment.component'; import { JsonViewerService } from './json-viewer.service'; @@ -15,6 +24,9 @@ import { Segment } from './segments/base/segment'; export class JsonViewerComponent { public json = input.required(); + @Input({ transform: booleanAttribute }) + public opened!: boolean; + protected readonly segments = this.getSegments(); private readonly jsonViewerService = inject(JsonViewerService);