last works for handle card sizing ...

2026-08-29 17:22:55 +03:30
parent 921b9e09f8
commit 30f944123f
5 changed files with 231 additions and 61 deletions
@@ -5,8 +5,9 @@ import {
 } from './x-card.typings';
 import { Subject, Subscription } from 'rxjs';
 import { concatMap, map } from 'rxjs/operators';
-import { nameof, isNullOrEmptyString } from 'x-framework-core';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { XSizeModel } from '../classes/x-size.model.';
+import { nameof, isNullOrEmptyString, isNullOrUndefined } from 'x-framework-core';
+import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';

@Component({
  // tslint:disable-next-line:component-selector
@@ -21,17 +22,71 @@ export class XCardComponent extends XCardContainerComponent {
  //
  private ACTION_PROVIDER_SUBSCRIPTION: Subscription;

+  //
+  //#region Card Elements ....
+  private CARD_IMAGE: ElementRef<HTMLElement> = undefined;
+  private CARD_HEADER: ElementRef<HTMLElement> = undefined;
+  private CARD_FOOTER: ElementRef<HTMLElement> = undefined;
+  private CARD_CONTENT: ElementRef<HTMLElement> = undefined;
+  private CARD_ACTIONS: ElementRef<HTMLElement> = undefined;
+
+  @ViewChild('cardImage', { static: false })
+  set cardImage(v: ElementRef<HTMLElement>) {
+    this.CARD_IMAGE = v;
+  }
+
+  @ViewChild('cardHeader', { static: false })
+  set cardHeader(v: ElementRef<HTMLElement>) {
+    this.CARD_HEADER = v;
+  }
+
+  @ViewChild('cardFooter', { static: false })
+  set cardFooter(v: ElementRef<HTMLElement>) {
+    this.CARD_FOOTER = v;
+  }
+
+  @ViewChild('cardContent', { static: false })
+  set cardContent(v: ElementRef<HTMLElement>) {
+    this.CARD_CONTENT = v;
+  }
+
+  @ViewChild('cardActions', { static: false })
+  set cardActions(v: ElementRef<HTMLElement>) {
+    this.CARD_ACTIONS = v;
+  }
+
+  get cardImage() {
+    return this.CARD_IMAGE;
+  }
+
+  get cardHeader() {
+    return this.CARD_HEADER;
+  }
+
+  get cardFooter() {
+    return this.CARD_FOOTER;
+  }
+
+  get cardContent() {
+    return this.CARD_CONTENT;
+  }
+
+  get cardActions() {
+    return this.CARD_ACTIONS;
+  }
+  //#endregion 
+
  //
  //#region Full Screen ...
  private IS_FULLSCREEN: boolean = false;
-  public set isFullscreen(v: boolean) {
+  set isFullscreen(v: boolean) {
    //
    const isChanged = v != this.IS_FULLSCREEN;

    //
    this.IS_FULLSCREEN = v;
  }
-  public get isFullscreen() {
+  get isFullscreen() {
    return this.IS_FULLSCREEN;
  }
  //#endregion
@@ -167,6 +222,109 @@ export class XCardComponent extends XCardContainerComponent {
      await this.enterFullscreen();
    }
  }
+
+  //
+  //#region Size Calculating ...
+  public calculateImageSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (isNullOrUndefined(this.CARD_IMAGE) || isNullOrUndefined(this.CARD_IMAGE.nativeElement)) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_IMAGE.nativeElement.offsetWidth,
+      height: this.CARD_IMAGE.nativeElement.offsetHeight
+    };
+
+    //
+    return result;
+  }
+
+  public calculateHeaderSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (isNullOrUndefined(this.CARD_HEADER) || isNullOrUndefined(this.CARD_HEADER.nativeElement)) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_HEADER.nativeElement.offsetWidth,
+      height: this.CARD_HEADER.nativeElement.offsetHeight
+    };
+
+    //
+    return result;
+  }
+
+  public calculateFooterSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (isNullOrUndefined(this.CARD_FOOTER) || isNullOrUndefined(this.CARD_FOOTER.nativeElement)) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_FOOTER.nativeElement.offsetWidth,
+      height: this.CARD_FOOTER.nativeElement.offsetHeight
+    };
+
+    //
+    return result;
+  }
+
+  public calculateContentSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (isNullOrUndefined(this.CARD_CONTENT) || isNullOrUndefined(this.CARD_CONTENT.nativeElement)) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_CONTENT.nativeElement.offsetWidth,
+      height: this.CARD_CONTENT.nativeElement.offsetHeight
+    };
+
+    //
+    return result;
+  }
+
+  public calculateActionsSize() {
+    //
+    let result: XSizeModel = undefined;
+
+    //
+    // Validate ...
+    if (isNullOrUndefined(this.CARD_ACTIONS) || isNullOrUndefined(this.CARD_ACTIONS.nativeElement)) {
+      return result;
+    }
+
+    //
+    result = {
+      width: this.CARD_ACTIONS.nativeElement.offsetWidth,
+      height: this.CARD_ACTIONS.nativeElement.offsetHeight
+    };
+
+    //
+    return result;
+  }
+  //#endregion
  //#endregion

  //