5530884421

pending completion

Build # 5530884421

Build Type

push

github

Committed by

daybrush

Commit Message

chore(release): Release 4.7.1

Run Details

197 of 320 branches covered (61.56%)

Branch coverage included in aggregate %.

621 of 819 relevant lines covered (75.82%)

3.29 hits per line

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

84.68

/src/pagination/renderer/ScrollBulletRenderer.ts

import { DIRECTION } from "@egjs/flicking";

import { PAGINATION } from "../../const";
import { addClass, removeClass } from "../../utils";

import Renderer from "./Renderer";

class ScrollBulletRenderer extends Renderer {
  private _bullets: HTMLElement[] = [];
  private _bulletSize: number = 0;
  private _previousIndex: number = -1;
  private _sliderIndex: number = -1;

  public destroy(): void {
    this._bullets = [];
    this._bulletSize = 0;
    this._previousIndex = -1;
    this._sliderIndex = -1;
  }

  public render() {
    const wrapper = this._wrapper;
    const flicking = this._flicking;
    const pagination = this._pagination;
    const renderBullet = pagination.renderBullet;
    const anchorPoints = flicking.camera.anchorPoints;

    const dynamicWrapperClass = `${pagination.classPrefix}-${PAGINATION.SCROLL_WRAPPER_SUFFIX}`;
    const bulletClass = `${pagination.classPrefix}-${PAGINATION.BULLET_SUFFIX}`;
    const sliderClass = `${pagination.classPrefix}-${PAGINATION.SCROLL_SLIDER_SUFFIX}`;
    const uninitClass = `${pagination.classPrefix}-${PAGINATION.SCROLL_UNINIT_SUFFIX}`;

    const sliderEl = document.createElement("div");

    addClass(sliderEl, sliderClass);
    addClass(wrapper, uninitClass);
    addClass(wrapper, dynamicWrapperClass);
    wrapper.appendChild(sliderEl);

    sliderEl.innerHTML = anchorPoints
      .map((_, index) => renderBullet(bulletClass, index))
      .join("\n");

    const bullets = [].slice.call(sliderEl.children) as HTMLElement[];

    bullets.forEach((bullet, index) => {
      this._addBulletEvents(bullet, index);
    });

    if (bullets.length <= 0) return;

    const bulletStyle = getComputedStyle(bullets[0]);
    const bulletSize = bullets[0].clientWidth + parseFloat(bulletStyle.marginLeft) + parseFloat(bulletStyle.marginRight);

    wrapper.style.width = `${bulletSize * pagination.bulletCount}px`;

    this._bullets = bullets;
    this._bulletSize = bulletSize;
    this._previousIndex = -1;

    this.update(this._flicking.index);

    window.requestAnimationFrame(() => {
      removeClass(wrapper, uninitClass);
    });
  }

  public update(index: number) {
    const pagination = this._pagination;
    const flicking = this._flicking;
    const bullets = this._bullets;
    const prevIndex = this._previousIndex;

    const renderBullet = pagination.renderBullet;
    const renderActiveBullet = pagination.renderActiveBullet;

    const anchorPoints = flicking.camera.anchorPoints;
    const anchorOffset = anchorPoints[0].panel.index;
    const activeIndex = index - anchorOffset;

    if (anchorPoints.length <= 0) return;

    const bulletClass = `${pagination.classPrefix}-${PAGINATION.BULLET_SUFFIX}`;
    const bulletActiveClass = `${pagination.classPrefix}-${PAGINATION.BULLET_ACTIVE_SUFFIX}`;
    const prevClassPrefix = `${pagination.classPrefix}-${PAGINATION.SCROLL_PREV_SUFFIX}`;
    const nextClassPrefix = `${pagination.classPrefix}-${PAGINATION.SCROLL_NEXT_SUFFIX}`;
    const bulletPrevClass = (offset: number) => `${prevClassPrefix}${offset > 1 ? offset : ""}`;
    const bulletNextClass = (offset: number) => `${nextClassPrefix}${offset > 1 ? offset : ""}`;

    const prevClassRegex = new RegExp(`^${prevClassPrefix}`);
    const nextClassRegex = new RegExp(`^${nextClassPrefix}`);

    if (renderActiveBullet) {
      const prevBullet = bullets[prevIndex];
      if (prevBullet) {
        const newBullet = this._createBulletFromString(
          renderBullet(bulletClass, prevIndex),
          prevIndex
        );
        prevBullet.parentElement!.replaceChild(newBullet, prevBullet);
        bullets[prevIndex] = newBullet;
      }

      const activeBullet = bullets[activeIndex];
      if (activeBullet) {
        const newActiveBullet = this._createBulletFromString(
          renderActiveBullet(bulletClass, activeIndex),
          activeIndex
        );

        activeBullet.parentElement!.replaceChild(newActiveBullet, activeBullet);
        bullets[activeIndex] = newActiveBullet;
      }
    }

    bullets.forEach((bullet, idx) => {
      const indexOffset = idx - activeIndex;
      const classList = bullet.className.split(" ");

      for (const className of classList) {
        if (className === bulletActiveClass || prevClassRegex.test(className) || nextClassRegex.test(className)) {
          removeClass(bullet, className);
        }
      }

      if (indexOffset === 0) {
        addClass(bullet, bulletActiveClass);
      } else if (indexOffset > 0) {
        addClass(bullet, bulletNextClass(Math.abs(indexOffset)));
      } else {
        addClass(bullet, bulletPrevClass(Math.abs(indexOffset)));
      }
    });

    pagination.scrollOnChange(activeIndex, {
      total: bullets.length,
      prevIndex,
      sliderIndex: this._sliderIndex,
      direction: activeIndex > prevIndex ? DIRECTION.NEXT : DIRECTION.PREV,
      bullets: [...bullets],
      moveTo: this.moveTo
    });

    this._previousIndex = activeIndex;
  }

  public moveTo = (index: number): void => {
    const pagination = this._pagination;
    const sliderEl = this._wrapper.firstElementChild as HTMLElement;
    const bulletSize = this._bulletSize;
    const wrapperSize = bulletSize * pagination.bulletCount;

    sliderEl.style.transform = `translate(${wrapperSize / 2 - (index + 0.5) * bulletSize}px)`;
    this._sliderIndex = index;
  };
}

export default ScrollBulletRenderer;

1	import { DIRECTION } from "@egjs/flicking";	1✔
2
3	import { PAGINATION } from "../../const";	1✔
4	import { addClass, removeClass } from "../../utils";	1✔
5
6	import Renderer from "./Renderer";	1✔
7
8	class ScrollBulletRenderer extends Renderer {	4✔
9	private _bullets: HTMLElement[] = [];	2✔
10	private _bulletSize: number = 0;	2✔
11	private _previousIndex: number = -1;	2✔
12	private _sliderIndex: number = -1;	2✔
13
14	public destroy(): void {	1✔
15	this._bullets = [];	×
16	this._bulletSize = 0;	×
17	this._previousIndex = -1;	×
18	this._sliderIndex = -1;	×
19	}
20
21	public render() {	2✔
22	const wrapper = this._wrapper;	2✔
23	const flicking = this._flicking;	2✔
24	const pagination = this._pagination;	2✔
25	const renderBullet = pagination.renderBullet;	2✔
26	const anchorPoints = flicking.camera.anchorPoints;	2✔
27
28	const dynamicWrapperClass = `${pagination.classPrefix}-${PAGINATION.SCROLL_WRAPPER_SUFFIX}`;	2✔
29	const bulletClass = `${pagination.classPrefix}-${PAGINATION.BULLET_SUFFIX}`;	2✔
30	const sliderClass = `${pagination.classPrefix}-${PAGINATION.SCROLL_SLIDER_SUFFIX}`;	2✔
31	const uninitClass = `${pagination.classPrefix}-${PAGINATION.SCROLL_UNINIT_SUFFIX}`;	2✔
32
33	const sliderEl = document.createElement("div");	2✔
34
35	addClass(sliderEl, sliderClass);	2✔
36	addClass(wrapper, uninitClass);	2✔
37	addClass(wrapper, dynamicWrapperClass);	2✔
38	wrapper.appendChild(sliderEl);	2✔
39
40	sliderEl.innerHTML = anchorPoints	2✔
41	.map((_, index) => renderBullet(bulletClass, index))	6✔
42	.join("\n");
43
44	const bullets = [].slice.call(sliderEl.children) as HTMLElement[];	2✔
45
46	bullets.forEach((bullet, index) => {	2✔
47	this._addBulletEvents(bullet, index);	6✔
48	});
49
50	if (bullets.length <= 0) return;	2!
51
52	const bulletStyle = getComputedStyle(bullets[0]);	2✔
53	const bulletSize = bullets[0].clientWidth + parseFloat(bulletStyle.marginLeft) + parseFloat(bulletStyle.marginRight);	2✔
54
55	wrapper.style.width = `${bulletSize * pagination.bulletCount}px`;	2✔
56
57	this._bullets = bullets;	2✔
58	this._bulletSize = bulletSize;	2✔
59	this._previousIndex = -1;	2✔
60
61	this.update(this._flicking.index);	2✔
62
63	window.requestAnimationFrame(() => {	2✔
64	removeClass(wrapper, uninitClass);	×
65	});
66	}
67
68	public update(index: number) {	1✔
69	const pagination = this._pagination;	2✔
70	const flicking = this._flicking;	2✔
71	const bullets = this._bullets;	2✔
72	const prevIndex = this._previousIndex;	2✔
73
74	const renderBullet = pagination.renderBullet;	2✔
75	const renderActiveBullet = pagination.renderActiveBullet;	2✔
76
77	const anchorPoints = flicking.camera.anchorPoints;	2✔
78	const anchorOffset = anchorPoints[0].panel.index;	2✔
79	const activeIndex = index - anchorOffset;	2✔
80
81	if (anchorPoints.length <= 0) return;	2!
82
83	const bulletClass = `${pagination.classPrefix}-${PAGINATION.BULLET_SUFFIX}`;	2✔
84	const bulletActiveClass = `${pagination.classPrefix}-${PAGINATION.BULLET_ACTIVE_SUFFIX}`;	2✔
85	const prevClassPrefix = `${pagination.classPrefix}-${PAGINATION.SCROLL_PREV_SUFFIX}`;	2✔
86	const nextClassPrefix = `${pagination.classPrefix}-${PAGINATION.SCROLL_NEXT_SUFFIX}`;	2✔
87	const bulletPrevClass = (offset: number) => `${prevClassPrefix}${offset > 1 ? offset : ""}`;	2!
88	const bulletNextClass = (offset: number) => `${nextClassPrefix}${offset > 1 ? offset : ""}`;	4✔
89
90	const prevClassRegex = new RegExp(`^${prevClassPrefix}`);	2✔
91	const nextClassRegex = new RegExp(`^${nextClassPrefix}`);	2✔
92
93	if (renderActiveBullet) {	2✔
94	const prevBullet = bullets[prevIndex];	1✔
95	if (prevBullet) {	1!
96	const newBullet = this._createBulletFromString(	×
97	renderBullet(bulletClass, prevIndex),
98	prevIndex
99	);
100	prevBullet.parentElement!.replaceChild(newBullet, prevBullet);	×
101	bullets[prevIndex] = newBullet;	×
102	}
103
104	const activeBullet = bullets[activeIndex];	1✔
105	if (activeBullet) {	1!
106	const newActiveBullet = this._createBulletFromString(	1✔
107	renderActiveBullet(bulletClass, activeIndex),
108	activeIndex
109	);
110
111	activeBullet.parentElement!.replaceChild(newActiveBullet, activeBullet);	1✔
112	bullets[activeIndex] = newActiveBullet;	1✔
113	}
114	}
115
116	bullets.forEach((bullet, idx) => {	2✔
117	const indexOffset = idx - activeIndex;	6✔
118	const classList = bullet.className.split(" ");	6✔
119
120	for (const className of classList) {	9✔
121	if (className === bulletActiveClass \|\| prevClassRegex.test(className) \|\| nextClassRegex.test(className)) {	9!
122	removeClass(bullet, className);	×
123	}
124	}
125
126	if (indexOffset === 0) {	6✔
127	addClass(bullet, bulletActiveClass);	2✔
128	} else if (indexOffset > 0) {	4!
129	addClass(bullet, bulletNextClass(Math.abs(indexOffset)));	4✔
130	} else {
131	addClass(bullet, bulletPrevClass(Math.abs(indexOffset)));	×
132	}
133	});
134
135	pagination.scrollOnChange(activeIndex, {	2✔
136	total: bullets.length,
137	prevIndex,
138	sliderIndex: this._sliderIndex,
139	direction: activeIndex > prevIndex ? DIRECTION.NEXT : DIRECTION.PREV,	2!
140	bullets: [...bullets],
141	moveTo: this.moveTo
142	});
143
144	this._previousIndex = activeIndex;	2✔
145	}
146
147	public moveTo = (index: number): void => {	2✔
148	const pagination = this._pagination;	2✔
149	const sliderEl = this._wrapper.firstElementChild as HTMLElement;	2✔
150	const bulletSize = this._bulletSize;	2✔
151	const wrapperSize = bulletSize * pagination.bulletCount;	2✔
152
153	sliderEl.style.transform = `translate(${wrapperSize / 2 - (index + 0.5) * bulletSize}px)`;	2✔
154	this._sliderIndex = index;	2✔
155	};
156	}	1✔
157
158	export default ScrollBulletRenderer;	1✔

naver / egjs-flicking-plugins / 5530884421

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