2473150020

Build Type

push

github

Committed by GitHub

Commit Message

feat: add useFractionalSize

Run Details

4291 of 6988 branches covered (61.41%)

Branch coverage included in aggregate %.

99 of 102 new or added lines in 4 files covered. (97.06%)

12 existing lines in 3 files now uncovered.

7750 of 8281 relevant lines covered (93.59%)

138.36 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

57.45

/src/core/Viewport.ts

/*
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "../Flicking";
import { getElementSize, getStyle, isString } from "../utils";

/**
 * A component that manages viewport size
 * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
 */
class Viewport {
  private _flicking: Flicking;
  private _el: HTMLElement;
  private _width: number;
  private _height: number;
  private _isBorderBoxSizing: boolean;
  private _padding: {
    left: number;
    right: number;
    top: number;
    bottom: number;
  };

  /**
   * A viewport(root) element
   * @ko 뷰포트(root) 엘리먼트
   * @type {HTMLElement}
   * @readonly
   */
  public get element() { return this._el; }

  /**
   * Viewport width, without paddings
   * @ko 뷰포트 너비
   * @type {number}
   * @readonly
   */
  public get width() { return this._width - this._padding.left - this._padding.right; }
  /**
   * Viewport height, without paddings
   * @ko 뷰포트 높이
   * @type {number}
   * @readonly
   */
  public get height() { return this._height - this._padding.top - this._padding.bottom; }
  /**
   * Viewport paddings
   * @ko 뷰포트 CSS padding 값
   * @type {object}
   * @property {number} left CSS `padding-left`
   * @property {number} right CSS `padding-right`
   * @property {number} top CSS `padding-top`
   * @property {number} bottom CSS `padding-bottom`
   * @readonly
   */
  public get padding() { return this._padding; }

  /**
   * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
   */
  public constructor(flicking: Flicking, el: HTMLElement) {
    this._flicking = flicking;
    this._el = el;
    this._width = 0;
    this._height = 0;
    this._padding = {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    };
    this._isBorderBoxSizing = false;
  }

  /**
   * Change viewport's size.
   * This will change the actual size of `.flicking-viewport` element by changing its CSS width/height property
   * @ko 뷰포트 크기를 변경합니다.
   * `.flicking-viewport` 엘리먼트에 해당 크기의 CSS width/height를 적용합니다
   * @param {object} [size] New viewport size<ko>새 뷰포트 크기</ko>
   * @param {number|string} [size.width] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
   * @param {number|string} [size.height] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
   */
  public setSize({
    width,
    height
  }: Partial<{
    width: number | string;
    height: number | string;
  }>) {
    const el = this._el;
    const padding = this._padding;
    const isBorderBoxSizing = this._isBorderBoxSizing;

    if (width != null) {
      if (isString(width)) {
        el.style.width = width;
      } else {
        const newWidth = isBorderBoxSizing
          ? width + padding.left + padding.right
          : width;
        el.style.width = `${newWidth}px`;
      }
    }
    if (height != null) {
      if (isString(height)) {
        el.style.height = height;
      } else {
        const newHeight = isBorderBoxSizing
          ? height + padding.top + padding.bottom
          : height;
        el.style.height = `${newHeight}px`;
      }
    }
    this.resize();
  }

  /**
   * Update width/height to the current viewport element's size
   * @ko 현재 뷰포트 엘리먼트의 크기로 너비/높이를 업데이트합니다
   */
  public resize() {
    const el = this._el;
    const elStyle = getStyle(el);
    const {
      useFractionalSize
    } = this._flicking;

    this._width = getElementSize({
      el,
      horizontal: true,
      useFractionalSize,
      useOffset: false,
      style: elStyle
    });
    this._height = getElementSize({
      el,
      horizontal: false,
      useFractionalSize,
      useOffset: false,
      style: elStyle
    });

    this._padding = {
      left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
      right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
      top: elStyle.paddingTop ? parseFloat(elStyle.paddingTop) : 0,
      bottom: elStyle.paddingBottom ? parseFloat(elStyle.paddingBottom) : 0
    };
    this._isBorderBoxSizing = elStyle.boxSizing === "border-box";
  }
}

export default Viewport;

1	/*	1✔
2	* Copyright (c) 2015 NAVER Corp.	1✔
3	* egjs projects are licensed under the MIT license	1✔
4	*/
5	import Flicking from "../Flicking";
6	import { getElementSize, getStyle, isString } from "../utils";	5✔
7
8	/**	1✔
9	* A component that manages viewport size
10	* @ko 뷰포트 크기 정보를 담당하는 컴포넌트
11	*/
12	class Viewport {	5✔
13	private _flicking: Flicking;	430✔
14	private _el: HTMLElement;	430✔
15	private _width: number;	430✔
16	private _height: number;	430✔
17	private _isBorderBoxSizing: boolean;	430✔
18	private _padding: {
19	left: number;
20	right: number;
21	top: number;
22	bottom: number;
23	};	430✔
24
25	/**	1✔
26	* A viewport(root) element
27	* @ko 뷰포트(root) 엘리먼트
28	* @type {HTMLElement}
29	* @readonly
30	*/
31	public get element() { return this._el; }	56✔
32		2,186✔
33	/**
34	* Viewport width, without paddings
35	* @ko 뷰포트 너비
36	* @type {number}	1✔
37	* @readonly
38	*/
39	public get width() { return this._width - this._padding.left - this._padding.right; }	1,826✔
40	/**
41	* Viewport height, without paddings
42	* @ko 뷰포트 높이
43	* @type {number}	34,410✔
44	* @readonly
45	*/
46	public get height() { return this._height - this._padding.top - this._padding.bottom; }	29✔
47	/**	1✔
48	* Viewport paddings
49	* @ko 뷰포트 CSS padding 값
50	* @type {object}
51	* @property {number} left CSS `padding-left`
52	* @property {number} right CSS `padding-right`
53	* @property {number} top CSS `padding-top`
54	* @property {number} bottom CSS `padding-bottom`	1,185✔
55	* @readonly
56	*/
57	public get padding() { return this._padding; }	5✔
58		1✔
59	/**
60	* @param el A viewport element<ko>뷰포트 엘리먼트</ko>
61	*/
62	public constructor(flicking: Flicking, el: HTMLElement) {
63	this._flicking = flicking;	14✔
64	this._el = el;	14✔
65	this._width = 0;	14✔
66	this._height = 0;	14✔
67	this._padding = {	14✔
68	left: 0,
69	right: 0,
70	top: 0,
71	bottom: 0
72	};
73	this._isBorderBoxSizing = false;	14✔
74	}
75
76	/**
77	* Change viewport's size.
78	* This will change the actual size of `.flicking-viewport` element by changing its CSS width/height property
79	* @ko 뷰포트 크기를 변경합니다.
80	* `.flicking-viewport` 엘리먼트에 해당 크기의 CSS width/height를 적용합니다
81	* @param {object} [size] New viewport size<ko>새 뷰포트 크기</ko>
82	* @param {number\|string} [size.width] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>	1✔
83	* @param {number\|string} [size.height] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>	3✔
84	*/	3✔
85	public setSize({	8✔
86	width,	3✔
87	height	3✔
88	}: Partial<{	1!
89	width: number \| string;
90	height: number \| string;
91	}>) {
92	const el = this._el;	1!
93	const padding = this._padding;
94	const isBorderBoxSizing = this._isBorderBoxSizing;
95		1✔
96	if (width != null) {	×
97	if (isString(width)) {	×
98	el.style.width = width;	3!
99	} else {	3!
UNCOV 100	const newWidth = isBorderBoxSizing	×
101	? width + padding.left + padding.right
102	: width;
103	el.style.width = `${newWidth}px`;	3!
104	}
105	}
106	if (height != null) {	3!
107	if (isString(height)) {	×
108	el.style.height = height;
109	} else {	3✔
110	const newHeight = isBorderBoxSizing	×
111	? height + padding.top + padding.bottom
112	: height;
113	el.style.height = `${newHeight}px`;
114	}
115	}	1✔
116	this.resize();	434✔
117	}	434✔
118		434✔
119	/**	434✔
120	* Update width/height to the current viewport element's size
121	* @ko 현재 뷰포트 엘리먼트의 크기로 너비/높이를 업데이트합니다
122	*/
123	public resize() {	5✔
124	const el = this._el;	14✔
125	const elStyle = getStyle(el);	14✔
126	const {	434✔
127	useFractionalSize
128	} = this._flicking;	14✔
129
130	this._width = getElementSize({	14✔
131	el,
132	horizontal: true,
133	useFractionalSize,	434✔
134	useOffset: false,	434✔
135	style: elStyle	434✔
136	});	434✔
137	this._height = getElementSize({	14✔
138	el,
139	horizontal: false,	434✔
140	useFractionalSize,
141	useOffset: false,	1✔
142	style: elStyle
143	});	1✔
144
145	this._padding = {	14✔
146	left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,	14!
147	right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,	14!
148	top: elStyle.paddingTop ? parseFloat(elStyle.paddingTop) : 0,	14!
149	bottom: elStyle.paddingBottom ? parseFloat(elStyle.paddingBottom) : 0	14!
150	};
151	this._isBorderBoxSizing = elStyle.boxSizing === "border-box";	14✔
152	}
153	}	5✔
154
155	export default Viewport;	5✔

naver / egjs-flicking / 2473150020

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous