New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@egjs/flicking
Advanced tools
@egjs/flicking - npm Package Compare versions
Comparing version 4.2.0-beta.3 to 4.2.0
@@ -1,3 +0,3 @@ | ||
| import { FlickingOptions } from "src/Flicking"; | ||
| declare const _default: (align?: FlickingOptions["align"], firstPanelSize?: string) => string; | ||
| import { FlickingOptions } from "../Flicking"; | ||
| declare const _default: (align?: FlickingOptions["align"], horizontal?: boolean, firstPanelSize?: string) => string; | ||
| export default _default; |
@@ -34,2 +34,3 @@ export { CODE as ERROR_CODE } from "./error"; | ||
| readonly FREE_SCROLL: "freeScroll"; | ||
| readonly STRICT: "strict"; | ||
| }; |
| import Axes, { OnRelease } from "@egjs/axes"; | ||
| import Flicking from "../Flicking"; | ||
| import { ControlParams } from "../type/external"; | ||
| declare class AxesController { | ||
@@ -17,4 +18,6 @@ private _flicking; | ||
| }; | ||
| get controlParams(): ControlParams; | ||
| get enabled(): boolean; | ||
| get position(): number; | ||
| get range(): number[]; | ||
| get bounce(): number[]; | ||
@@ -26,3 +29,3 @@ constructor(); | ||
| disable(): this; | ||
| update(): this; | ||
| update(controlParams: ControlParams): this; | ||
| addPreventClickHandler(): void; | ||
@@ -29,0 +32,0 @@ removePreventClickHandler(): void; |
@@ -37,4 +37,4 @@ import { OnRelease } from "@egjs/axes"; | ||
| }): Promise<void>; | ||
| protected _setActive: (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => void; | ||
| protected _setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean): void; | ||
| } | ||
| export default Control; |
| import Control from "./Control"; | ||
| import SnapControl from "./SnapControl"; | ||
| import FreeControl from "./FreeControl"; | ||
| import FreeControl, { FreeControlOptions } from "./FreeControl"; | ||
| import StrictControl, { StrictControlOptions } from "./StrictControl"; | ||
| import AxesController from "./AxesController"; | ||
@@ -12,2 +13,3 @@ import State from "./states/State"; | ||
| import StateMachine from "./StateMachine"; | ||
| export { Control, SnapControl, FreeControl, AxesController, State, IdleState, HoldingState, DraggingState, AnimatingState, DisabledState, StateMachine }; | ||
| export { Control, SnapControl, FreeControl, StrictControl, AxesController, State, IdleState, HoldingState, DraggingState, AnimatingState, DisabledState, StateMachine }; | ||
| export type { FreeControlOptions, StrictControlOptions }; |
@@ -38,3 +38,4 @@ import { OnAnimationEnd, OnChange, OnFinish, OnHold, OnRelease } from "@egjs/axes"; | ||
| }): void; | ||
| protected _moveToChangedPosition(ctx: Parameters<State["onChange"]>[0]): void; | ||
| } | ||
| export default State; |
@@ -41,2 +41,3 @@ import Component from "@egjs/component"; | ||
| needPanelThreshold: number; | ||
| preventEventsBeforeInit: boolean; | ||
| deceleration: number; | ||
@@ -76,2 +77,3 @@ duration: number; | ||
| private _needPanelThreshold; | ||
| private _preventEventsBeforeInit; | ||
| private _deceleration; | ||
@@ -115,3 +117,4 @@ private _duration; | ||
| get adaptive(): FlickingOptions["adaptive"]; | ||
| get needPanelThreshold(): number; | ||
| get needPanelThreshold(): FlickingOptions["needPanelThreshold"]; | ||
| get preventEventsBeforeInit(): FlickingOptions["preventEventsBeforeInit"]; | ||
| get deceleration(): FlickingOptions["deceleration"]; | ||
@@ -143,2 +146,4 @@ get easing(): FlickingOptions["easing"]; | ||
| set adaptive(val: FlickingOptions["adaptive"]); | ||
| set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]); | ||
| set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]); | ||
| set deceleration(val: FlickingOptions["deceleration"]); | ||
@@ -157,3 +162,3 @@ set easing(val: FlickingOptions["easing"]); | ||
| set autoResize(val: FlickingOptions["autoResize"]); | ||
| constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, bound, adaptive, needPanelThreshold, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, autoInit, autoResize, renderExternal }?: Partial<FlickingOptions>); | ||
| constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, bound, adaptive, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, autoInit, autoResize, renderExternal }?: Partial<FlickingOptions>); | ||
| init(): Promise<void>; | ||
@@ -160,0 +165,0 @@ destroy(): void; |
| import Flicking from "../Flicking"; | ||
| import { FreeControlOptions } from "../control/FreeControl"; | ||
| import { FreeControlOptions, StrictControlOptions } from "../control"; | ||
| import { MOVE_TYPE } from "../const/external"; | ||
@@ -23,4 +23,12 @@ import { ValueOf } from "../type/internal"; | ||
| } | ||
| export declare type MoveTypeOptions<T extends ValueOf<typeof MOVE_TYPE>> = T extends typeof MOVE_TYPE.FREE_SCROLL ? [T] | [T, Partial<FreeControlOptions>] : [ | ||
| export declare type MoveTypeOptions<T extends ValueOf<typeof MOVE_TYPE>> = T extends typeof MOVE_TYPE.FREE_SCROLL ? [T] | [T, Partial<FreeControlOptions>] : T extends typeof MOVE_TYPE.STRICT ? [T] | [T, Partial<StrictControlOptions>] : [ | ||
| T | ||
| ]; | ||
| export interface ControlParams { | ||
| range: { | ||
| min: number; | ||
| max: number; | ||
| }; | ||
| position: number; | ||
| circular: boolean; | ||
| } |
@@ -13,3 +13,7 @@ import Flicking, { FlickingOptions } from "./Flicking"; | ||
| export declare const parseBounce: (bounce: FlickingOptions["bounce"], size: number) => number[]; | ||
| export declare const parseArithmeticExpression: (cssValue: number | string, base: number) => number | null; | ||
| export declare const parseArithmeticSize: (cssValue: number | string, base: number) => number | null; | ||
| export declare const parseArithmeticExpression: (cssValue: number | string) => { | ||
| percentage: number; | ||
| absolute: number; | ||
| } | null; | ||
| export declare const parseCSSSizeValue: (val: string | number) => string; | ||
@@ -27,1 +31,2 @@ export declare const getDirection: (start: number, end: number) => ValueOf<typeof DIRECTION>; | ||
| export declare const getStyle: (el: HTMLElement) => CSSStyleDeclaration; | ||
| export declare const isBetween: (val: number, min: number, max: number) => boolean; |
| { | ||
| "name": "@egjs/flicking", | ||
| "version": "4.2.0-beta.3", | ||
| "version": "4.2.0", | ||
| "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.", | ||
@@ -5,0 +5,0 @@ "main": "dist/flicking.js", |
@@ -24,3 +24,4 @@ <h1 align="center" style="max-width: 100%;"> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&logo=Vue.js&logoColor=white&color=42b883" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&logo=Preact&logoColor=white&color=673ab8" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&logo=Preact&logoColor=white&color=673ab8" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md" target="_blank"><img alt="Svelte" src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&logo=svelte&logoColor=white&color=FF3E00" /></a> | ||
| <img src="https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript" /> | ||
@@ -39,6 +40,7 @@ </p> | ||
| <b>Supported Frameworks</b><br/> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/images/angular.svg" alt="AngularJS" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/images/react.svg" alt="React" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/images/vue.svg" alt="Vue.js" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/images/preact.svg" alt="Preact" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/angular.svg" alt="AngularJS" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/react.svg" alt="React" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" alt="Vue.js" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/preact.svg" alt="Preact" /></a> | ||
| <a href="https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/svelte.svg" alt="Svelte" /></a> | ||
| </p> | ||
@@ -129,7 +131,8 @@ | ||
| |[**@egjs/flicking-plugins**](https://github.com/naver/egjs-flicking-plugins)|<a href="https://www.npmjs.com/package/@egjs/flicking-plugins" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/flicking-plugins.svg?style=flat-square&color=007acc&label=%F0%9F%94%96" alt="version" /></a>|Readymade effects for your carousel| | ||
| |[**@egjs/ngx-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/ngx-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/ngx-flicking.svg?style=flat-square&color=dd0031&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/images/angular.svg" valign="middle" alt="Angular" /> [Angular](https://angular.io/) port of @egjs/flicking| | ||
| |[**@egjs/react-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/react-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/react-flicking.svg?style=flat-square&color=00d8ff&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/images/react.svg" valign="middle" alt="React" /> [React](https://reactjs.org/) port of @egjs/flicking| | ||
| |[**@egjs/vue-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/images/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@2](https://vuejs.org/v2/guide/index.html) port of @egjs/flicking| | ||
| |[**@egjs/vue3-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue3-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue3-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue3-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/images/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@3](https://v3.vuejs.org/) port of @egjs/flicking| | ||
| |[**@egjs/preact-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/preact-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/preact-flicking.svg?style=flat-square&color=673ab8&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/images/preact.svg" valign="middle" alt="Preact" /> [Preact](https://preactjs.com/guide/v10/getting-started) port of @egjs/flicking| | ||
| |[**@egjs/ngx-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/ngx-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/ngx-flicking.svg?style=flat-square&color=dd0031&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/angular.svg" valign="middle" alt="Angular" /> [Angular](https://angular.io/) port of @egjs/flicking| | ||
| |[**@egjs/react-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/react-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/react-flicking.svg?style=flat-square&color=00d8ff&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/react.svg" valign="middle" alt="React" /> [React](https://reactjs.org/) port of @egjs/flicking| | ||
| |[**@egjs/vue-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@2](https://vuejs.org/v2/guide/index.html) port of @egjs/flicking| | ||
| |[**@egjs/vue3-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue3-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue3-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue3-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@3](https://v3.vuejs.org/) port of @egjs/flicking| | ||
| |[**@egjs/preact-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/preact-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/preact-flicking.svg?style=flat-square&color=673ab8&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/preact.svg" valign="middle" alt="Preact" /> [Preact](https://preactjs.com/guide/v10/getting-started) port of @egjs/flicking| | ||
| |[**@egjs/svelte-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/svelte-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/svelte-flicking.svg?style=flat-square&color=FF3E00&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/images/svelte.svg" valign="middle" alt="Svelte" /> [Svelte](https://svelte.dev/) port of @egjs/flicking| | ||
@@ -136,0 +139,0 @@ ## 🌐 Supported Browsers |
@@ -111,6 +111,3 @@ /* | ||
| * @ko {@link AxesController}를 업데이트하기 위한 현재 Camera 패러미터들 | ||
| * @type {object} | ||
| * @property {object} range Camera {@link Camera#range range}<ko>Camera가 도달 가능한 범위({@link Camera#range range})</ko> | ||
| * @property {number} position Current position<ko>현재 좌표</ko> | ||
| * @property {boolean} circular A Boolean indicating whether the {@link Flicking#circular circular} option is enabled<ko>{@link Flicking#circular circular}옵션 활성화 여부</ko> | ||
| * @type {ControlParams} | ||
| * @readonly | ||
@@ -117,0 +114,0 @@ */ |
@@ -1,11 +0,19 @@ | ||
| import { ALIGN } from "src/const/external"; | ||
| import { FlickingOptions } from "src/Flicking"; | ||
| import { FlickingOptions } from "../Flicking"; | ||
| import { ALIGN } from "../const/external"; | ||
| import { parseArithmeticExpression } from "../utils"; | ||
| export default (align?: FlickingOptions["align"], firstPanelSize?: string) => { | ||
| const alignVal = getCameraAlign(align); | ||
| export default (align: FlickingOptions["align"] = ALIGN.CENTER, horizontal: boolean = true, firstPanelSize?: string) => { | ||
| const cameraAlign = getCameraAlign(align); | ||
| const panelAlign = getPanelAlign(align); | ||
| return `translate(calc(${alignVal} - ${firstPanelSize || "0px"} / 2))`; | ||
| if (panelAlign == null) return ""; | ||
| const camPosition = `calc(${cameraAlign} - (${firstPanelSize || "0px"} * ${panelAlign.percentage}) - ${panelAlign.absolute}px)`; | ||
| return horizontal | ||
| ? `translate(${camPosition})` | ||
| : `translate(0, ${camPosition})`; | ||
| }; | ||
| const getCameraAlign = (align: FlickingOptions["align"] = ALIGN.CENTER) => { | ||
| const getCameraAlign = (align: FlickingOptions["align"]) => { | ||
| const alignVal = typeof align === "object" | ||
@@ -15,2 +23,14 @@ ? (align as { camera: string | number }).camera | ||
| return parseAlign(alignVal); | ||
| }; | ||
| const getPanelAlign = (align: FlickingOptions["align"]) => { | ||
| const alignVal = typeof align === "object" | ||
| ? (align as { panel: string | number }).panel | ||
| : align; | ||
| return parseArithmeticExpression(parseAlign(alignVal)); | ||
| }; | ||
| const parseAlign = (alignVal: number | string) => { | ||
| if (typeof alignVal === "number") { | ||
@@ -17,0 +37,0 @@ return `${alignVal}px`; |
@@ -87,6 +87,9 @@ /* | ||
| * <ko>Flicking의 {@link Flicking#control control}을 {@link FreeControl}로 설정하게 하는 {@link Flicking#moveType moveType}</ko> | ||
| * @property {"strict"} STRICT Flicking's {@link Flicking#moveType moveType} that enables {@link StrictControl} as a Flicking's {@link Flicking#control control} | ||
| * <ko>Flicking의 {@link Flicking#control control}을 {@link StrictControl}로 설정하게 하는 {@link Flicking#moveType moveType}</ko> | ||
| */ | ||
| export const MOVE_TYPE = { | ||
| SNAP: "snap", | ||
| FREE_SCROLL: "freeScroll" | ||
| FREE_SCROLL: "freeScroll", | ||
| STRICT: "strict" | ||
| } as const; |
@@ -12,2 +12,3 @@ /* | ||
| import { getFlickingAttached, parseBounce } from "../utils"; | ||
| import { ControlParams } from "../type/external"; | ||
@@ -55,2 +56,27 @@ import StateMachine from "./StateMachine"; | ||
| /** | ||
| * A current control parameters of the Axes instance | ||
| * @ko 활성화된 현재 Axes 패러미터들 | ||
| * @type {ControlParams} | ||
| */ | ||
| public get controlParams(): ControlParams { | ||
| const axes = this._axes; | ||
| if (!axes) { | ||
| return { | ||
| range: { min: 0, max: 0 }, | ||
| position: 0, | ||
| circular: false | ||
| }; | ||
| } | ||
| const axis = axes.axis[AXES.POSITION_KEY]; | ||
| return { | ||
| range: { min: axis.range![0], max: axis.range![1] }, | ||
| circular: (axis.circular as boolean[])[0], | ||
| position: this.position | ||
| }; | ||
| } | ||
| /** | ||
| * A Boolean indicating whether the user input is enabled | ||
@@ -70,2 +96,9 @@ * @ko 현재 사용자 입력이 활성화되었는지를 나타내는 값 | ||
| /** | ||
| * Current range value in {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} instance | ||
| * @ko {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} 인스턴스 내부의 현재 이동 범위 값 | ||
| * @type {number[]} | ||
| * @readonly | ||
| */ | ||
| public get range() { return this._axes?.axis[AXES.POSITION_KEY].range ?? [0, 0]; } | ||
| /** | ||
| * Actual bounce size(px) | ||
@@ -108,3 +141,4 @@ * @ko 적용된 bounce 크기(px 단위) | ||
| iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold, | ||
| scale: flicking.horizontal ? [-1, 0] : [0, -1] | ||
| scale: flicking.horizontal ? [-1, 0] : [0, -1], | ||
| releaseOnScroll: true | ||
| }); | ||
@@ -177,7 +211,6 @@ | ||
| */ | ||
| public update(): this { | ||
| public update(controlParams: ControlParams): this { | ||
| const flicking = getFlickingAttached(this._flicking, "Control"); | ||
| const camera = flicking.camera; | ||
| const axes = this._axes!; | ||
| const controlParams = camera.controlParams; | ||
| const axis = axes.axis[AXES.POSITION_KEY]; | ||
@@ -197,7 +230,7 @@ | ||
| const axes = this._axes!; | ||
| const viewportEl = flicking.element; | ||
| const cameraEl = flicking.camera.element; | ||
| axes.on(AXES.EVENT.HOLD, this._onAxesHold); | ||
| axes.on(AXES.EVENT.CHANGE, this._onAxesChange); | ||
| viewportEl.addEventListener("click", this._preventClickWhenDragged, true); | ||
| cameraEl.addEventListener("click", this._preventClickWhenDragged, true); | ||
| } | ||
@@ -208,7 +241,7 @@ | ||
| const axes = this._axes!; | ||
| const viewportEl = flicking.element; | ||
| const cameraEl = flicking.camera.element; | ||
| axes.off(AXES.EVENT.HOLD, this._onAxesHold); | ||
| axes.off(AXES.EVENT.CHANGE, this._onAxesChange); | ||
| viewportEl.removeEventListener("click", this._preventClickWhenDragged, true); | ||
| cameraEl.removeEventListener("click", this._preventClickWhenDragged, true); | ||
| } | ||
@@ -215,0 +248,0 @@ |
@@ -191,4 +191,7 @@ /* | ||
| public updateInput(): this { | ||
| this._controller.update(); | ||
| const flicking = getFlickingAttached(this._flicking, "Control"); | ||
| const camera = flicking.camera; | ||
| this._controller.update(camera.controlParams); | ||
| return this; | ||
@@ -198,4 +201,4 @@ } | ||
| /** | ||
| * Reset {@link Control#activePanel activePanel} and {@link Control#activeAnchor activeAnchor} to `null` | ||
| * @ko {@link Control#activePanel activePanel}와 {@link Control#activeAnchor activeAnchor}를 `null`로 초기화합니다 | ||
| * Reset {@link Control#activePanel activePanel} to `null` | ||
| * @ko {@link Control#activePanel activePanel}을 `null`로 초기화합니다 | ||
| * @chainable | ||
@@ -347,3 +350,3 @@ * @return {this} | ||
| protected _setActive = (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => { | ||
| protected _setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) { | ||
| const flicking = getFlickingAttached(this._flicking, "Control"); | ||
@@ -369,5 +372,5 @@ | ||
| } | ||
| }; | ||
| } | ||
| } | ||
| export default Control; |
@@ -7,3 +7,4 @@ /* | ||
| import SnapControl from "./SnapControl"; | ||
| import FreeControl from "./FreeControl"; | ||
| import FreeControl, { FreeControlOptions } from "./FreeControl"; | ||
| import StrictControl, { StrictControlOptions } from "./StrictControl"; | ||
| import AxesController from "./AxesController"; | ||
@@ -22,2 +23,3 @@ import State from "./states/State"; | ||
| FreeControl, | ||
| StrictControl, | ||
| AxesController, | ||
@@ -32,1 +34,6 @@ State, | ||
| }; | ||
| export type { | ||
| FreeControlOptions, | ||
| StrictControlOptions | ||
| }; |
@@ -36,2 +36,3 @@ /* | ||
| flicking.control.updateInput(); | ||
| const holdStartEvent = new ComponentEvent(EVENTS.HOLD_START, { axesEvent }); | ||
@@ -48,27 +49,3 @@ flicking.trigger(holdStartEvent); | ||
| public onChange(ctx: Parameters<State["onChange"]>[0]): void { | ||
| const { flicking, axesEvent, transitTo } = ctx; | ||
| if (!axesEvent.delta.flick) { | ||
| return; | ||
| } | ||
| const camera = flicking.camera; | ||
| const prevPosition = camera.position; | ||
| void camera.lookAt(axesEvent.pos.flick); | ||
| const moveEvent = new ComponentEvent(EVENTS.MOVE, { | ||
| isTrusted: axesEvent.isTrusted, | ||
| holding: this.holding, | ||
| direction: getDirection(0, axesEvent.delta.flick), | ||
| axesEvent | ||
| }); | ||
| flicking.trigger(moveEvent); | ||
| if (moveEvent.isCanceled()) { | ||
| // Return to previous position | ||
| void flicking.camera.lookAt(prevPosition); | ||
| transitTo(STATE_TYPE.DISABLED); | ||
| } | ||
| this._moveToChangedPosition(ctx); | ||
| } | ||
@@ -75,0 +52,0 @@ |
@@ -9,3 +9,2 @@ /* | ||
| import * as AXES from "../../const/axes"; | ||
| import { getDirection } from "../../utils"; | ||
@@ -36,26 +35,3 @@ import State, { STATE_TYPE } from "./State"; | ||
| public onChange(ctx: Parameters<State["onChange"]>[0]): void { | ||
| const { flicking, axesEvent, transitTo } = ctx; | ||
| if (!axesEvent.delta[AXES.POSITION_KEY]) { | ||
| return; | ||
| } | ||
| const camera = flicking.camera; | ||
| const prevPosition = camera.position; | ||
| void camera.lookAt(axesEvent.pos[AXES.POSITION_KEY]); | ||
| const moveEvent = new ComponentEvent(EVENTS.MOVE, { | ||
| isTrusted: axesEvent.isTrusted, | ||
| holding: this.holding, | ||
| direction: getDirection(0, axesEvent.delta[AXES.POSITION_KEY]), | ||
| axesEvent | ||
| }); | ||
| flicking.trigger(moveEvent); | ||
| if (moveEvent.isCanceled()) { | ||
| // Return to previous position | ||
| void camera.lookAt(prevPosition); | ||
| transitTo(STATE_TYPE.DISABLED); | ||
| } | ||
| this._moveToChangedPosition(ctx); | ||
| } | ||
@@ -62,0 +38,0 @@ |
@@ -7,4 +7,8 @@ /* | ||
| import { OnAnimationEnd, OnChange, OnFinish, OnHold, OnRelease } from "@egjs/axes"; | ||
| import { ComponentEvent } from "@egjs/component"; | ||
| import Flicking from "../../Flicking"; | ||
| import { EVENTS } from "../../const/external"; | ||
| import * as AXES from "../../const/axes"; | ||
| import { circulatePosition, getDirection } from "../../utils"; | ||
@@ -128,4 +132,36 @@ export enum STATE_TYPE { | ||
| } | ||
| protected _moveToChangedPosition(ctx: Parameters<State["onChange"]>[0]): void { | ||
| const { flicking, axesEvent, transitTo } = ctx; | ||
| if (!axesEvent.delta[AXES.POSITION_KEY]) { | ||
| return; | ||
| } | ||
| const camera = flicking.camera; | ||
| const prevPosition = camera.position; | ||
| const position = axesEvent.pos[AXES.POSITION_KEY]; | ||
| const newPosition = flicking.circularEnabled | ||
| ? circulatePosition(position, camera.range.min, camera.range.max) | ||
| : position; | ||
| void camera.lookAt(newPosition); | ||
| const moveEvent = new ComponentEvent(EVENTS.MOVE, { | ||
| isTrusted: axesEvent.isTrusted, | ||
| holding: this.holding, | ||
| direction: getDirection(0, axesEvent.delta[AXES.POSITION_KEY]), | ||
| axesEvent | ||
| }); | ||
| flicking.trigger(moveEvent); | ||
| if (moveEvent.isCanceled()) { | ||
| // Return to previous position | ||
| void camera.lookAt(prevPosition); | ||
| transitTo(STATE_TYPE.DISABLED); | ||
| } | ||
| } | ||
| } | ||
| export default State; |
@@ -124,4 +124,4 @@ /* | ||
| this._width = el.offsetWidth; | ||
| this._height = el.offsetHeight; | ||
| this._width = el.clientWidth; | ||
| this._height = el.clientHeight; | ||
| this._padding = { | ||
@@ -128,0 +128,0 @@ left: parseFloat(elStyle.paddingLeft), |
@@ -10,3 +10,3 @@ /* | ||
| import { Panel } from "./core/panel"; | ||
| import { Control, FreeControl, SnapControl } from "./control"; | ||
| import { Control, SnapControl, FreeControl, StrictControl, FreeControlOptions, StrictControlOptions } from "./control"; | ||
| import { BoundCamera, Camera, CircularCamera, LinearCamera } from "./camera"; | ||
@@ -57,2 +57,3 @@ import { Renderer, VanillaRenderer, ExternalRenderer, RawRenderingStrategy, VisibleRenderingStrategy } from "./renderer"; | ||
| needPanelThreshold: number; | ||
| preventEventsBeforeInit: boolean; | ||
| // ANIMATION | ||
@@ -115,2 +116,3 @@ deceleration: number; | ||
| private _needPanelThreshold: FlickingOptions["needPanelThreshold"]; | ||
| private _preventEventsBeforeInit: FlickingOptions["preventEventsBeforeInit"]; | ||
| private _deceleration: FlickingOptions["deceleration"]; | ||
@@ -343,2 +345,9 @@ private _duration: FlickingOptions["duration"]; | ||
| public get needPanelThreshold() { return this._needPanelThreshold; } | ||
| /** | ||
| * When enabled, events are not triggered before `ready` when initializing | ||
| * @ko 활성화할 경우 초기화시 `ready` 이벤트 이전의 이벤트가 발생하지 않습니다. | ||
| * @type {boolean} | ||
| * @default true | ||
| */ | ||
| public get preventEventsBeforeInit() { return this._preventEventsBeforeInit; } | ||
| // ANIMATION | ||
@@ -524,2 +533,5 @@ /** | ||
| public set adaptive(val: FlickingOptions["adaptive"]) { this._adaptive = val; } | ||
| // EVENTS | ||
| public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) { this._needPanelThreshold = val; } | ||
| public set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]) { this._preventEventsBeforeInit = val; } | ||
| // ANIMATION | ||
@@ -594,2 +606,3 @@ public set deceleration(val: FlickingOptions["deceleration"]) { this._deceleration = val; } | ||
| needPanelThreshold = 0, | ||
| preventEventsBeforeInit = true, | ||
| deceleration = 0.0075, | ||
@@ -625,2 +638,3 @@ duration = 500, | ||
| this._needPanelThreshold = needPanelThreshold; | ||
| this._preventEventsBeforeInit = preventEventsBeforeInit; | ||
| this._deceleration = deceleration; | ||
@@ -669,2 +683,4 @@ this._duration = duration; | ||
| const control = this._control; | ||
| const originalTrigger = this.trigger; | ||
| const preventEventsBeforeInit = this._preventEventsBeforeInit; | ||
@@ -675,2 +691,6 @@ camera.init(this); | ||
| if (preventEventsBeforeInit) { | ||
| this.trigger = () => this; | ||
| } | ||
| await this.resize(); | ||
@@ -695,2 +715,5 @@ | ||
| this._initialized = true; | ||
| if (preventEventsBeforeInit) { | ||
| this.trigger = originalTrigger; | ||
| } | ||
| this.trigger(new ComponentEvent(EVENTS.READY)); | ||
@@ -1205,3 +1228,5 @@ | ||
| case MOVE_TYPE.FREE_SCROLL: | ||
| return new FreeControl(moveTypeOptions); | ||
| return new FreeControl(moveTypeOptions as FreeControlOptions); | ||
| case MOVE_TYPE.STRICT: | ||
| return new StrictControl(moveTypeOptions as StrictControlOptions); | ||
| } | ||
@@ -1208,0 +1233,0 @@ } |
@@ -11,2 +11,3 @@ /* | ||
| import * as Constants from "./const/external"; | ||
| import * as CFC from "./cfc"; | ||
| import { merge } from "./utils"; | ||
@@ -19,3 +20,4 @@ | ||
| merge(Flicking, Constants); | ||
| merge(Flicking, CFC); | ||
| export default Flicking; |
| import Flicking from "../Flicking"; | ||
| import { FreeControlOptions } from "../control/FreeControl"; | ||
| import { FreeControlOptions, StrictControlOptions } from "../control"; | ||
| import { MOVE_TYPE } from "../const/external"; | ||
@@ -20,3 +20,2 @@ import { ValueOf } from "../type/internal"; | ||
| * @property - Update plugin to match current Flicking's status<ko>현재 Flicking의 상태에 대응하도록 플러그인을 업데이트합니다.</ko> | ||
| * @typedef | ||
| */ | ||
@@ -59,3 +58,22 @@ export interface Plugin { | ||
| T extends typeof MOVE_TYPE.FREE_SCROLL ? [T] | [T, Partial<FreeControlOptions>] : | ||
| T extends typeof MOVE_TYPE.STRICT ? [T] | [T, Partial<StrictControlOptions>] : | ||
| [T]; | ||
| /* eslint-enable */ | ||
| /** | ||
| * A current parameters of the Camera for updating {@link AxesController} | ||
| * @ko {@link AxesController}를 업데이트하기 위한 현재 Camera 패러미터들 | ||
| * @interface | ||
| * @property {object} range A moveable range for Camera<ko>Camera가 이동 가능한 범위</ko> | ||
| * @property {number} position Current camera position<ko>현재 카메라 좌표</ko> | ||
| * @property {boolean} circular A Boolean indicating whether the {@link Flicking#circular circular} option is enabled<ko>{@link Flicking#circular circular}옵션 활성화 여부</ko> | ||
| * @readonly | ||
| */ | ||
| export interface ControlParams { | ||
| range: { | ||
| min: number; | ||
| max: number; | ||
| }; | ||
| position: number; | ||
| circular: boolean; | ||
| } |
@@ -76,3 +76,3 @@ /* | ||
| default: | ||
| alignPoint = parseArithmeticExpression(align, size); | ||
| alignPoint = parseArithmeticSize(align, size); | ||
| if (alignPoint == null) { | ||
@@ -93,5 +93,5 @@ throw new FlickingError(ERROR.MESSAGE.WRONG_OPTION("align", align), ERROR.CODE.WRONG_OPTION); | ||
| if (Array.isArray(bounce)) { | ||
| parsedBounce = (bounce as string[]).map(val => parseArithmeticExpression(val, size)); | ||
| parsedBounce = (bounce as string[]).map(val => parseArithmeticSize(val, size)); | ||
| } else { | ||
| const parsedVal = parseArithmeticExpression(bounce, size); | ||
| const parsedVal = parseArithmeticSize(bounce, size); | ||
@@ -109,11 +109,22 @@ parsedBounce = [parsedVal, parsedVal]; | ||
| export const parseArithmeticExpression = (cssValue: number | string, base: number): number | null => { | ||
| export const parseArithmeticSize = (cssValue: number | string, base: number): number | null => { | ||
| const parsed = parseArithmeticExpression(cssValue); | ||
| if (parsed == null) return null; | ||
| return parsed.percentage * base + parsed.absolute; | ||
| }; | ||
| export const parseArithmeticExpression = (cssValue: number | string): { percentage: number; absolute: number } | null => { | ||
| const cssRegex = /(?:(\+|\-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g; | ||
| if (typeof cssValue === "number") { | ||
| return cssValue; | ||
| return { percentage: 0, absolute: cssValue }; | ||
| } | ||
| const parsed = { | ||
| percentage: 0, | ||
| absolute: 0 | ||
| }; | ||
| let idx = 0; | ||
| let calculatedValue = 0; | ||
| let matchResult = cssRegex.exec(cssValue); | ||
@@ -124,5 +135,4 @@ while (matchResult != null) { | ||
| const unit = matchResult[3]; | ||
| const parsedValue = parseFloat(value); | ||
| let parsedValue = parseFloat(value); | ||
| if (idx <= 0) { | ||
@@ -137,10 +147,10 @@ sign = sign || "+"; | ||
| const signMultiplier = sign === "+" ? 1 : -1; | ||
| if (unit === "%") { | ||
| parsedValue = (parsedValue / 100) * base; | ||
| parsed.percentage += signMultiplier * (parsedValue / 100); | ||
| } else { | ||
| parsed.absolute += signMultiplier * parsedValue; | ||
| } | ||
| calculatedValue += sign === "+" | ||
| ? parsedValue | ||
| : -parsedValue; | ||
| // Match next occurrence | ||
@@ -156,3 +166,3 @@ ++idx; | ||
| return calculatedValue; | ||
| return parsed; | ||
| }; | ||
@@ -252,1 +262,3 @@ | ||
| export const getStyle = (el: HTMLElement): CSSStyleDeclaration => window.getComputedStyle(el) || (el as any).currentStyle as CSSStyleDeclaration; | ||
| export const isBetween = (val: number, min: number, max: number) => val >= min && val <= max; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.46%
3093291
- Number of package files
- increased by1.57%
129
- Lines of code
- increased by5.51%
31550
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by1.69%
181
No dependency changes