Grid

Source: src/GridItem.ts

  1. /**
  2.  * egjs-grid
  3.  * Copyright (c) 2021-present NAVER Corp.
  4.  * MIT license
  5.  */
  6. import { DOMRect, GridRect } from "./types";
  7. import { MOUNT_STATE, RECT_NAMES, UPDATE_STATE } from "./consts";
  9. /**
  10.  * @typedef
  11.  * @memberof Grid.GridItem
  12.  * @property - The item key. <ko>아이템 키.</ko>
  13.  * @property - The item index. <ko>아이템 index.</ko>
  14.  * @property - The element for the item. <ko>아이템에 있는 엘리먼트.</ko>
  15.  * @property - State of whether the element has been added to the container. <ko>element가 container에 추가되었는지 상태.</ko>
  16.  * @property - The update state of the element's rect. <ko>element의 rect의 업데이트 상태.</ko>
  17.  * @property - Whether the element's rect was updated for the first time. <ko>처음으로 element의 rect를 업데이트 했는지 여부.</ko>
  18.  * @property - Attributes set as `data-grid-` of element. <ko>element의 `data-grid-`으로 설정된 속성들.</ko>
  19.  * @property - cssText of the first style when an element is added to the container. <ko>element가 container에 추가됐을 때 처음 style의 cssText.</ko>
  20.  * @property - The element's rect before first rendering. <ko>처음 렌더링 하기 전 엘리먼트의 rect.</ko>
  21.  * @property - The updated element's rect before rendering. <ko>렌더링 하기 전 업데이트 된 엘리먼트의 rect.</ko>
  22.  * @property - The CSS rect of the item to be rendered by being applied to the Grid. <ko>Grid에 적용되어 렌더링을 하기 위한 item의 CSS rect</ko>
  23.  * @property - Additional data of the item. <ko>item의 추가적인 데이터들.</ko>
  24.  * @property - Grid ready data for rendering. <ko>렌더링을 하기 위한 grid의 준비 데이터.</ko>
  25.  */
  26. export interface GridItemStatus {
  27.   key?: string | number;
  28.   index?: number;
  29.   element?: HTMLElement | null;
  30.   mountState?: MOUNT_STATE;
  31.   updateState?: UPDATE_STATE;
  32.   isFirstUpdate?: boolean;
  33.   attributes?: Record<string, any>;
  34.   orgCSSText?: string;
  35.   orgRect?: Required<DOMRect>;
  36.   rect?: Required<DOMRect>;
  37.   cssRect?: DOMRect;
  38.   data?: Record<string, any>;
  39.   gridData?: Record<string, any>;
  40. }
  42. /**
  43.  * @memberof Grid
  44.  * @implements Grid.GridItem.GridItemStatus
  45.  */
  46. class GridItem {
  47.   /**
  48.    * Whether or not it will be updated upon request.
  49.    * @inner
  50.    */
  51.   public isUpdating = false;
  52.   /**
  53.    * Whether the item needs to be updated again
  54.    * @inner
  55.    */
  56.   public shouldReupdate = false;
  57.   public hasTransition = false;
  58.   public transitionDuration = "";
  59.   public isRestoreOrgCSSText = true;
  61.   /**
  62.    * @constructor
  63.    * @param horizontal - Direction of the scroll movement. (true: horizontal, false: vertical) <ko>스크롤 이동 방향. (true: 가로방향, false: 세로방향)</ko>
  64.    * @param itemStatus - Default status object of GridItem module. <ko>GridItem 모듈의 기본 status 객체.</ko>
  65.    */
  66.   constructor(
  67.     protected horizontal: boolean,
  68.     itemStatus: Partial<GridItemStatus> = {},
  69.   ) {
  70.     const element = itemStatus.element;
  71.     const status: Required<GridItemStatus> = {
  72.       key: "",
  73.       index: 0,
  74.       orgRect: { left: 0, top: 0, width: 0, height: 0 },
  75.       rect: { left: 0, top: 0, width: 0, height: 0 },
  76.       cssRect: {},
  77.       attributes: {},
  78.       data: {},
  79.       isFirstUpdate: false,
  80.       mountState: MOUNT_STATE.UNCHECKED,
  81.       updateState: UPDATE_STATE.NEED_UPDATE,
  82.       element: element || null,
  83.       orgCSSText: element?.style.cssText ?? "",
  84.       gridData: {},
  85.       ...itemStatus,
  86.     };
  88.     for (const name in status) {
  89.       this[name] = status[name];
  90.     }
  91.   }
  92.   /**
  93.    * The size in inline direction before first rendering. "width" if horizontal is false, "height" otherwise.
  94.    * @ko 첫 렌더링 되기 전의 inline 방향의 사이즈. horizontal이 false면 "width", 아니면 "height".
  95.    * @member Grid.GridItem#orgInlineSize
  96.    */
  97.   public get orgInlineSize() {
  98.     const name = this._names.inlineSize;
  100.     return this.orgRect[name] || this.rect[name];
  101.   }
  102.   /**
  103.    * The size in content direction before first rendering. "height" if horizontal is false, "width" otherwise.
  104.    * @ko 첫 렌더링 되기 전의 content 방향의 사이즈. horizontal이 false면 "height", 아니면 "width".
  105.    * @member Grid.GridItem#orgContentSize
  106.    */
  107.   public get orgContentSize() {
  108.     const name = this._names.contentSize;
  110.     return this.orgRect[name] || this.rect[name];
  111.   }
  112.   /**
  113.    * The size in inline direction. "width" if horizontal is false, "height" otherwise.
  114.    * @ko inline 방향의 사이즈. horizontal이 false면 "width", 아니면 "height".
  115.    * @member Grid.GridItem#inlineSize
  116.    */
  117.   public get inlineSize() {
  118.     return this.rect[this._names.inlineSize];
  119.   }
  120.   /**
  121.    * The size in content direction. "height" if horizontal is false, "width" otherwise.
  122.    * @ko content 방향의 사이즈. horizontal이 false면 "height", 아니면 "width".
  123.    * @member Grid.GridItem#contentSize
  124.    */
  125.   public get contentSize() {
  126.     return this.rect[this._names.contentSize];
  127.   }
  128.   /**
  129.    * The CSS size in inline direction applied to the Grid. "width" if horizontal is false, "height" otherwise.
  130.    * @ko Grid에 적용된 inline 방향의 CSS 사이즈. horizontal이 false면 "width", 아니면 "height".
  131.    * @member Grid.GridItem#cssInlineSize
  132.    */
  133.   public get cssInlineSize() {
  134.     return this.cssRect[this._names.inlineSize];
  135.   }
  136.   /**
  137.    * The CSS size in content direction applied to the Grid. "height" if horizontal is false, "width" otherwise.
  138.    * @ko Grid에 적용된 content 방향의 CSS 사이즈. horizontal이 false면 "height", 아니면 "width".
  139.    * @member Grid.GridItem#cssContentSize
  140.    */
  141.   public get cssContentSize() {
  142.     return this.cssRect[this._names.contentSize];
  143.   }
  144.   /**
  145.    * The CSS pos in inline direction applied to the Grid. "left" if horizontal is false, "top" otherwise.
  146.    * @ko Grid에 적용된 inline 방향의 CSS 포지션. horizontal이 false면 "left", 아니면 "top".
  147.    * @member Grid.GridItem#cssInlinePos
  148.    */
  149.   public get cssInlinePos() {
  150.     return this.cssRect[this._names.inlinePos];
  151.   }
  152.   /**
  153.    * The CSS pos in content direction applied to the Grid. "top" if horizontal is false, "left" otherwise.
  154.    * @ko Grid에 적용된 content 방향의 CSS 포지션. horizontal이 false면 "top", 아니면 "left".
  155.    * @member Grid.GridItem#cssContentPos
  156.    */
  157.   public get cssContentPos() {
  158.     return this.cssRect[this._names.contentPos];
  159.   }
  160.   public set cssInlinePos(inlinePos: number | undefined) {
  161.     this.cssRect[this._names.inlinePos] = inlinePos;
  162.   }
  163.   public set cssContentPos(contentPos: number | undefined) {
  164.     this.cssRect[this._names.contentPos] = contentPos;
  165.   }
  166.   public set cssInlineSize(inlineSize: number | undefined) {
  167.     this.cssRect[this._names.inlineSize] = inlineSize;
  168.   }
  169.   public set cssContentSize(contentSize: number | undefined) {
  170.     this.cssRect[this._names.contentSize] = contentSize;
  171.   }
  172.   /**
  173.    * Calculated size in the direction of the inline applied to the grid. "width" if horizontal is false, "height" otherwise.
  174.    * @ko Grid에 적용된 inline 방향의 계산된 사이즈. horizontal이 false면 "width", 아니면 "height".
  175.    * @member Grid.GridItem#computedInlineSize
  176.    */
  177.   public get computedInlineSize() {
  178.     const name = this._names.inlineSize;
  180.     return this.cssRect[name] || this.rect[name] || this.orgRect[name];
  181.   }
  182.   /**
  183.    * Calculated size in the direction of the content applied to the grid. "height" if horizontal is false, "width" otherwise.
  184.    * @ko Grid에 적용된 content 방향의 계산된 사이즈. horizontal이 false면 "height", 아니면 "width".
  185.    * @member Grid.GridItem#computedContentSize
  186.    */
  187.   public get computedContentSize() {
  188.     const name = this._names.contentSize;
  190.     return this.cssRect[name] || this.rect[name] || this.orgRect[name];
  191.   }
  192.   /**
  193.    * Calculated position in the direction of the inline applied to the grid. "left" if horizontal is false, "top" otherwise.
  194.    * @ko Grid에 적용된 content 방향의 계산된 포지션. horizontal이 false면 "left", 아니면 "top".
  195.    * @member Grid.GridItem#computedInlinePos
  196.    */
  197.   public get computedInlinePos() {
  198.     const name = this._names.inlinePos;
  200.     return this.cssRect[name] ?? this.rect[name];
  201.   }
  202.   /**
  203.    * Calculated position in the direction of the content applied to the grid. "top" if horizontal is false, "left" otherwise.
  204.    * @ko Grid에 적용된 content 방향의 계산된 포지션. horizontal이 false면 "top", 아니면 "left".
  205.    * @member Grid.GridItem#computedContentPos
  206.    */
  207.   public get computedContentPos() {
  208.     const name = this._names.contentPos;
  210.     return this.cssRect[name] ?? this.rect[name];
  211.   }
  212.   /**
  213.    * Set CSS Rect through GridRect.
  214.    * @ko GridRect을 통해 CSS Rect를 설정한다.
  215.    * @param - The style for setting CSS rect. <ko>CSS rect를 설정하기 위한 스타일.</ko>
  216.    */
  217.   public setCSSGridRect(gridRect: GridRect) {
  218.     const names = RECT_NAMES[this.horizontal ? "horizontal" : "vertical"];
  220.     const rect: DOMRect = {};
  222.     for (const name in gridRect) {
  223.       rect[names[name]] = gridRect[name];
  224.     }
  225.     this.cssRect = rect;
  226.   }
  227.   /**
  228.    * Returns the status of the item.
  229.    * @ko 아이템의 상태를 반환한다.
  230.    */
  231.   public getStatus(): Required<GridItemStatus> {
  232.     return {
  233.       index: this.index,
  234.       mountState: this.mountState,
  235.       updateState: this.updateState,
  236.       attributes: this.attributes,
  237.       orgCSSText: this.orgCSSText,
  238.       isFirstUpdate: this.isFirstUpdate,
  239.       element: null,
  240.       key: this.key,
  241.       orgRect: this.orgRect,
  242.       rect: this.rect,
  243.       cssRect: this.cssRect,
  244.       gridData: this.gridData,
  245.       data: this.data,
  246.     };
  247.   }
  248.   /**
  249.    * Returns minimized status of the item.
  250.    * @ko 아이템의 간소화된 상태를 반환한다.
  251.    */
  252.   public getMinimizedStatus(): Partial<GridItemStatus> {
  253.     const status: Partial<GridItemStatus> = {
  254.       orgRect: this.orgRect,
  255.       rect: this.rect,
  256.       cssRect: this.cssRect,
  257.       attributes: this.attributes,
  258.       gridData: this.gridData,
  259.     };
  261.     const {
  262.       key,
  263.       mountState,
  264.       updateState,
  265.       isFirstUpdate,
  266.       orgCSSText,
  267.     } = this;
  268.     if (typeof key !== "undefined") {
  269.       status.key = key;
  270.     }
  271.     if (mountState !== MOUNT_STATE.UNCHECKED) {
  272.       status.mountState = mountState;
  273.     }
  274.     if (updateState !== UPDATE_STATE.NEED_UPDATE) {
  275.       status.updateState = updateState;
  276.     }
  277.     if (isFirstUpdate) {
  278.       status.isFirstUpdate = true;
  279.     }
  280.     if (orgCSSText) {
  281.       status.orgCSSText = orgCSSText;
  282.     }
  283.     return status;
  284.   }
  285.   private get _names() {
  286.     return this.horizontal ? RECT_NAMES.horizontal : RECT_NAMES.vertical;
  287.   }
  288. }
  290. interface GridItem extends Required<GridItemStatus> {
  291. }
  292. export { GridItem };
comments powered by Disqus