1696076905

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/naver/egjs-flicking-plugins/commit/<a class=hub.com/naver/egjs-flicking-plugins/commit/<a class="double-link" href="https://git"><a class=hub.com/naver/egjs-flicking-plugins/commit/<a class="double-link" href="https://git"><a class=hub.com/naver/egjs-flicking-plugins/commit/<a class="double-link" href="https://git"><a class=hub.com/naver/egjs-flicking-plugins/commit/<a class="double-link" href="https://git"><a class=hub.com/naver/egjs-flicking-plugins/commit/e7581d8b0a438743d38b166053acdc520910ffe4">e7581d8b0">&lt;a href=&quot;https://github.com/naver/egjs-flicking-plugins/commit/</a><a class="double-link" href="https://github.com/naver/egjs-flicking-plugins/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/naver/egjs-flicking-plugins/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/naver/egjs-flicking-plugins/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/naver/egjs-flicking-plugins/commit/e7581d8b0a438743d38b166053acdc520910ffe4">e7581d8b0</a><a href="https://github.com/naver/egjs-flicking-plugins/commit/e7581d8b0a438743d38b166053acdc520910ffe4">&lt;a href=&quot;https://github.com/naver/egjs-flicking-plugins/commit/e7581d8b0a438743d38b166053acdc520910ffe4&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/naver/egjs-flicking-plugins/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/naver/egjs-flicking-plugins/commit/&amp;amp;lt;a class=&amp;amp;quot;double-link&amp;amp;quot; href=&amp;amp;quot;https://git&amp;quot;&amp;gt;&amp;amp;lt;a class=&amp;lt;/a&amp;gt;hub.com/naver/egjs-flicking-plugins/commit/e7581d8b0a438743d38b166053acdc520910ffe4&amp;quot;&amp;gt;e7581d8b0&amp;lt;/a&amp;gt;&amp;lt;a href=&amp;quot;https://github.com/naver/egjs-flicking-plugins/commit/e7581d8b0a438743d38b166053acdc520910ffe4&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/naver/egjs-flicking-plugins/commit/e7581d8b0a438743d38b166053acdc52&amp;lt;/a&amp;gt;0910ffe4&amp;quot;&amp;</a>gt;&amp;quot;&amp;gt;Merge &amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/naver/egjs-flicking-plugins/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/naver/egjs-flicking-plugi... (continued)

Pull Request Pull Request #32: fix: sync throws position not reachable

Run Details

88 of 225 branches covered (39.11%)

Branch coverage included in aggregate %.

60 of 60 new or added lines in 2 files covered. (100.0%)

340 of 660 relevant lines covered (51.52%)

1.51 hits per line

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

87.1

/src/Sync.ts

import Flicking, { clamp, EVENTS } from "@egjs/flicking";
import type { MoveEndEvent, MoveEvent, MoveStartEvent, Plugin, WillChangeEvent, SelectEvent } from "@egjs/flicking";

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

/**
 * @property {string} [type="camera"] Types of methods to synchronize between Flickings. "camera" will sync by camera position, and "index" will sync by panel index
 * @property {SychronizableFlickingOptions} [synchronizedFlickingOptions=[]]        Detailed options for syncing Flickings.
 */
export interface SyncOptions {
  type: typeof SYNC.TYPE.CAMERA | typeof SYNC.TYPE.INDEX;
  synchronizedFlickingOptions: SychronizableFlickingOptions[];
}

/**
 * @property {Flicking} flicking An instance of Flicking to sync
 * @property {boolean} [isClickable=false] By enabling this option, clicking the given Flicking's panel will change the given & other Flicking's index
 * @property {boolean} [isSlidable=false] By enabling this option, the given Flicking's scroll with mouse/touch input will change other Flicking's index. Only available for the index type
 * @property {string | undefined} [activeClass=undefined] An extra class for the panels when selected
 */
export interface SychronizableFlickingOptions {
  flicking: Flicking;
  isClickable?: boolean;
  isSlidable?: boolean;
  activeClass?: string;
}

/**
 * Plugin for synchronizing multiple flickings
 * @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
 * @memberof Flicking.Plugins
 */
class Sync implements Plugin {
  /* Internal Values */
  private _flicking: Flicking | null = null;

  /* Options */
  private _type: SyncOptions["type"];
  private _synchronizedFlickingOptions: SyncOptions["synchronizedFlickingOptions"];

  public get type() { return this._type; }
  public get synchronizedFlickingOptions() { return this._synchronizedFlickingOptions; }

  public set type(val: SyncOptions["type"]) {
    this._type = val;
  }

  public set synchronizedFlickingOptions(val: SyncOptions["synchronizedFlickingOptions"]) {
    this._synchronizedFlickingOptions = val;
  }

  /** */
  public constructor({
    type = SYNC.TYPE.CAMERA,
    synchronizedFlickingOptions = []
  }: Partial<SyncOptions> = {}) {
    this._type = type;
    this._synchronizedFlickingOptions = synchronizedFlickingOptions;
  }

  public init(flicking: Flicking): void {
    const synced = this._synchronizedFlickingOptions;

    if (this._flicking) {
      this.destroy();
    }

    this._flicking = flicking;

    this._addEvents();

    synced.forEach(options => {
      const { flicking: syncedFlicking } = options;

      this._updateClass(options, syncedFlicking.defaultIndex);
    });
  }

  public destroy(): void {
    const flicking = this._flicking;

    if (!flicking) {
      return;
    }

    this._removeEvents();

    this._flicking = null;
  }

  public update(): void {
    this._synchronizedFlickingOptions.forEach(options => {
      this._updateClass(options, options.flicking.index);
    });
  }

  private _preventEvent(fn: () => void) {
    this._removeEvents();
    fn();
    this._addEvents();
  }

  private _addEvents = (): void => {
    const type = this._type;
    const synced = this._synchronizedFlickingOptions;

    synced.forEach(({ flicking, isSlidable, isClickable }) => {
      if (type === SYNC.TYPE.CAMERA) {
        flicking.on(EVENTS.MOVE, this._onMove);
        flicking.on(EVENTS.MOVE_START, this._onMoveStart);
        flicking.on(EVENTS.MOVE_END, this._onMoveEnd);
      }
      if (type === SYNC.TYPE.INDEX && isSlidable) {
        flicking.on(EVENTS.WILL_CHANGE, this._onIndexChange);
        flicking.on(EVENTS.WILL_RESTORE, this._onIndexChange);
      }
      if (isClickable) {
        flicking.on(EVENTS.SELECT, this._onSelect);
      }
    });
  };

  private _removeEvents = (): void => {
    const type = this._type;
    const synced = this._synchronizedFlickingOptions;

    synced.forEach(({ flicking, isSlidable, isClickable }) => {
      if (type === SYNC.TYPE.CAMERA) {
        flicking.off(EVENTS.MOVE, this._onMove);
        flicking.off(EVENTS.MOVE_START, this._onMoveStart);
        flicking.off(EVENTS.MOVE_END, this._onMoveEnd);
      }
      if (type === SYNC.TYPE.INDEX && isSlidable) {
        flicking.off(EVENTS.WILL_CHANGE, this._onIndexChange);
        flicking.off(EVENTS.WILL_RESTORE, this._onIndexChange);
      }
      if (isClickable) {
        flicking.off(EVENTS.SELECT, this._onSelect);
      }
    });
  };

  private _onIndexChange = (e: WillChangeEvent): void => {
    const flicking = e.currentTarget;

    if (!flicking.initialized) {
      return;
    }

    this._synchronizeByIndex(flicking, e.index);
  };

  private _onMove = (e: MoveEvent): void => {
    const camera = e.currentTarget.camera;
    const progress = (camera.position - camera.range.min) / camera.rangeDiff;

    this._synchronizedFlickingOptions.forEach(({ flicking }) => {
      if (flicking === e.currentTarget) return;

      let targetPosition = 0;

      if (camera.position < camera.range.min) {
        targetPosition = camera.position;
      } else if (camera.position > camera.range.max) {
        targetPosition = flicking.camera.range.max + camera.position - camera.range.max;
      } else {
        targetPosition = flicking.camera.range.min + flicking.camera.rangeDiff * progress;
      }

      void flicking.camera.lookAt(targetPosition);
    });
  };

  private _onMoveStart = (e: MoveStartEvent): void => {
    this._synchronizedFlickingOptions.forEach(({ flicking }) => {
      if (flicking !== e.currentTarget) {
        flicking.disableInput();
      }
    });
  };

  private _onMoveEnd = (e: MoveEndEvent): void => {
    this._synchronizedFlickingOptions.forEach(({ flicking }) => {
      if (flicking !== e.currentTarget) {
        flicking.enableInput();
        flicking.control.updateInput();
      }
    });
  };

  private _onSelect = (e: SelectEvent): void => {
    void e.currentTarget.moveTo(e.index).catch(() => void 0);

    this._synchronizeByIndex(e.currentTarget, e.index);
  };

  private _synchronizeByIndex = (activeFlicking: Flicking, index: number): void => {
    const synchronizedFlickingOptions = this._synchronizedFlickingOptions;

    this._preventEvent(() => {
      synchronizedFlickingOptions.forEach(options => {
        // Active class should be applied same to the Flicking which triggered event
        this._updateClass(options, index);

        const { flicking } = options;
        if (flicking === activeFlicking) return;

        const targetIndex = clamp(index, 0, flicking.panels.length);

        if (flicking.animating) {
          // Reserve moveTo once previous animation is finished
          flicking.once(EVENTS.MOVE_END, () => {
            void flicking.moveTo(targetIndex).catch(() => void 0);
          });
        } else {
          void flicking.moveTo(targetIndex);
        }
      });
    });
  };

  private _updateClass = ({ flicking, activeClass }: SychronizableFlickingOptions, index: number): void => {
    if (!activeClass) return;

    flicking.panels.forEach(panel => {
      if (panel.index === index)  {
        addClass(panel.element, activeClass);
      } else {
        removeClass(panel.element, activeClass);
      }
    });
  };
}

export default Sync;

1	import Flicking, { clamp, EVENTS } from "@egjs/flicking";	1✔
2	import type { MoveEndEvent, MoveEvent, MoveStartEvent, Plugin, WillChangeEvent, SelectEvent } from "@egjs/flicking";
3
4	import { SYNC } from "./const";	1✔
5	import { addClass, removeClass } from "./utils";	1✔
6
7	/**
8	* @property {string} [type="camera"] Types of methods to synchronize between Flickings. "camera" will sync by camera position, and "index" will sync by panel index
9	* @property {SychronizableFlickingOptions} [synchronizedFlickingOptions=[]] Detailed options for syncing Flickings.
10	*/
11	export interface SyncOptions {
12	type: typeof SYNC.TYPE.CAMERA \| typeof SYNC.TYPE.INDEX;
13	synchronizedFlickingOptions: SychronizableFlickingOptions[];
14	}
15
16	/**
17	* @property {Flicking} flicking An instance of Flicking to sync
18	* @property {boolean} [isClickable=false] By enabling this option, clicking the given Flicking's panel will change the given & other Flicking's index
19	* @property {boolean} [isSlidable=false] By enabling this option, the given Flicking's scroll with mouse/touch input will change other Flicking's index. Only available for the index type
20	* @property {string \| undefined} [activeClass=undefined] An extra class for the panels when selected
21	*/
22	export interface SychronizableFlickingOptions {
23	flicking: Flicking;
24	isClickable?: boolean;
25	isSlidable?: boolean;
26	activeClass?: string;
27	}
28
29	/**
30	* Plugin for synchronizing multiple flickings
31	* @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
32	* @memberof Flicking.Plugins
33	*/
34	class Sync implements Plugin {	1✔
35	/* Internal Values */
36	private _flicking: Flicking \| null = null;	5✔
37
38	/* Options */
39	private _type: SyncOptions["type"];
40	private _synchronizedFlickingOptions: SyncOptions["synchronizedFlickingOptions"];
41
42	public get type() { return this._type; }	1✔
43	public get synchronizedFlickingOptions() { return this._synchronizedFlickingOptions; }	1✔
44
45	public set type(val: SyncOptions["type"]) {
46	this._type = val;	×
47	}
48
49	public set synchronizedFlickingOptions(val: SyncOptions["synchronizedFlickingOptions"]) {
50	this._synchronizedFlickingOptions = val;	×
51	}
52
53	/** */
54	public constructor({	6✔
55	type = SYNC.TYPE.CAMERA,	5!
56	synchronizedFlickingOptions = []	5!
57	}: Partial<SyncOptions> = {}) {	5!
58	this._type = type;	5✔
59	this._synchronizedFlickingOptions = synchronizedFlickingOptions;	5✔
60	}
61
62	public init(flicking: Flicking): void {	5✔
63	const synced = this._synchronizedFlickingOptions;	5✔
64
65	if (this._flicking) {	5!
66	this.destroy();	×
67	}
68
69	this._flicking = flicking;	5✔
70
71	this._addEvents();	5✔
72
73	synced.forEach(options => {	5✔
74	const { flicking: syncedFlicking } = options;	10✔
75
76	this._updateClass(options, syncedFlicking.defaultIndex);	10✔
77	});
78	}
79
80	public destroy(): void {	1✔
81	const flicking = this._flicking;	5✔
82
83	if (!flicking) {	5!
84	return;	×
85	}
86
87	this._removeEvents();	5✔
88
89	this._flicking = null;	5✔
90	}
91
92	public update(): void {	1✔
93	this._synchronizedFlickingOptions.forEach(options => {	×
94	this._updateClass(options, options.flicking.index);	×
95	});
96	}
97
98	private _preventEvent(fn: () => void) {	1✔
99	this._removeEvents();	3✔
100	fn();	3✔
101	this._addEvents();	3✔
102	}
103
104	private _addEvents = (): void => {	5✔
105	const type = this._type;	8✔
106	const synced = this._synchronizedFlickingOptions;	8✔
107
108	synced.forEach(({ flicking, isSlidable, isClickable }) => {	8✔
109	if (type === SYNC.TYPE.CAMERA) {	16✔
110	flicking.on(EVENTS.MOVE, this._onMove);	4✔
111	flicking.on(EVENTS.MOVE_START, this._onMoveStart);	4✔
112	flicking.on(EVENTS.MOVE_END, this._onMoveEnd);	4✔
113	}
114	if (type === SYNC.TYPE.INDEX && isSlidable) {	16✔
115	flicking.on(EVENTS.WILL_CHANGE, this._onIndexChange);	4✔
116	flicking.on(EVENTS.WILL_RESTORE, this._onIndexChange);	4✔
117	}
118	if (isClickable) {	16✔
119	flicking.on(EVENTS.SELECT, this._onSelect);	2✔
120	}
121	});
122	};
123
124	private _removeEvents = (): void => {	5✔
125	const type = this._type;	8✔
126	const synced = this._synchronizedFlickingOptions;	8✔
127
128	synced.forEach(({ flicking, isSlidable, isClickable }) => {	8✔
129	if (type === SYNC.TYPE.CAMERA) {	16✔
130	flicking.off(EVENTS.MOVE, this._onMove);	4✔
131	flicking.off(EVENTS.MOVE_START, this._onMoveStart);	4✔
132	flicking.off(EVENTS.MOVE_END, this._onMoveEnd);	4✔
133	}
134	if (type === SYNC.TYPE.INDEX && isSlidable) {	16✔
135	flicking.off(EVENTS.WILL_CHANGE, this._onIndexChange);	4✔
136	flicking.off(EVENTS.WILL_RESTORE, this._onIndexChange);	4✔
137	}
138	if (isClickable) {	16✔
139	flicking.off(EVENTS.SELECT, this._onSelect);	2✔
140	}
141	});
142	};
143
144	private _onIndexChange = (e: WillChangeEvent): void => {	5✔
145	const flicking = e.currentTarget;	2✔
146
147	if (!flicking.initialized) {	2!
148	return;	×
149	}
150
151	this._synchronizeByIndex(flicking, e.index);	2✔
152	};
153
154	private _onMove = (e: MoveEvent): void => {	5✔
155	const camera = e.currentTarget.camera;	2✔
156	const progress = (camera.position - camera.range.min) / camera.rangeDiff;	2✔
157
158	this._synchronizedFlickingOptions.forEach(({ flicking }) => {	2✔
159	if (flicking === e.currentTarget) return;	4✔
160
161	let targetPosition = 0;	2✔
162
163	if (camera.position < camera.range.min) {	2!
164	targetPosition = camera.position;	×
165	} else if (camera.position > camera.range.max) {	2!
166	targetPosition = flicking.camera.range.max + camera.position - camera.range.max;	×
167	} else {
168	targetPosition = flicking.camera.range.min + flicking.camera.rangeDiff * progress;	2✔
169	}
170
171	void flicking.camera.lookAt(targetPosition);	2✔
172	});
173	};
174
175	private _onMoveStart = (e: MoveStartEvent): void => {	5✔
176	this._synchronizedFlickingOptions.forEach(({ flicking }) => {	2✔
177	if (flicking !== e.currentTarget) {	4✔
178	flicking.disableInput();	2✔
179	}
180	});
181	};
182
183	private _onMoveEnd = (e: MoveEndEvent): void => {	5✔
184	this._synchronizedFlickingOptions.forEach(({ flicking }) => {	2✔
185	if (flicking !== e.currentTarget) {	4✔
186	flicking.enableInput();	2✔
187	flicking.control.updateInput();	2✔
188	}
189	});
190	};
191
192	private _onSelect = (e: SelectEvent): void => {	5✔
193	void e.currentTarget.moveTo(e.index).catch(() => void 0);	1✔
194
195	this._synchronizeByIndex(e.currentTarget, e.index);	1✔
196	};
197
198	private _synchronizeByIndex = (activeFlicking: Flicking, index: number): void => {	5✔
199	const synchronizedFlickingOptions = this._synchronizedFlickingOptions;	3✔
200
201	this._preventEvent(() => {	3✔
202	synchronizedFlickingOptions.forEach(options => {	3✔
203	// Active class should be applied same to the Flicking which triggered event
204	this._updateClass(options, index);	6✔
205
206	const { flicking } = options;	6✔
207	if (flicking === activeFlicking) return;	6✔
208
209	const targetIndex = clamp(index, 0, flicking.panels.length);	3✔
210
211	if (flicking.animating) {	3!
212	// Reserve moveTo once previous animation is finished
213	flicking.once(EVENTS.MOVE_END, () => {	×
214	void flicking.moveTo(targetIndex).catch(() => void 0);	×
215	});
216	} else {
217	void flicking.moveTo(targetIndex);	3✔
218	}
219	});
220	});
221	};
222
223	private _updateClass = ({ flicking, activeClass }: SychronizableFlickingOptions, index: number): void => {	5✔
224	if (!activeClass) return;	16✔
225
226	flicking.panels.forEach(panel => {	2✔
227	if (panel.index === index) {	12✔
228	addClass(panel.element, activeClass);	2✔
229	} else {
230	removeClass(panel.element, activeClass);	10✔
231	}
232	});
233	};
234	}	1✔
235
236	export default Sync;	1✔

naver / egjs-flicking-plugins / 1696076905

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