feat: add cameraClasses property (#722)

naver · Aug 23, 2022 · 4691d4a · 4691d4a
1 parent 8753054
commit 4691d4a
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 5 deletions.
diff --git a/packages/ngx-flicking/projects/ngx-flicking/src/lib/ngx-flicking.component.ts b/packages/ngx-flicking/projects/ngx-flicking/src/lib/ngx-flicking.component.ts
@@ -60,7 +60,7 @@ import NgxElementProvider from "./NgxElementProvider";
 @Component({
   selector: "ngx-flicking, [NgxFlicking]",
   template: `
-    <div class="flicking-camera" [ngStyle]="cameraStyleBeforeInit">
+    <div [ngClass]="_cameraElClass" [ngStyle]="cameraStyleBeforeInit">
       <ng-content></ng-content>
     </div>
     <ng-content select="[in-viewport]"></ng-content>`,
@@ -78,6 +78,7 @@ export class NgxFlickingComponent extends FlickingInterface
   @Input() public options: Partial<FlickingOptions> = {};
   @Input() public plugins: Plugin[] = [];
   @Input() public status: Status;
+  @Input() public cameraClass: string;
   @Input() public hideBeforeInit: boolean = false;
   @Input() public firstPanelSize: string;
   @Output() public ready: EventEmitter<ReadyEvent<NgxFlickingComponent>>;
@@ -122,6 +123,7 @@ export class NgxFlickingComponent extends FlickingInterface
   private _elementDiffer: ListDiffer<NgxFlickingPanel> | null = null;
 
   public get ngxPanels() { return this._ngxPanels; }
+  private get _cameraElClass() { return `flicking-camera ${this.cameraClass ?? ""}`.trim(); }
 
   public constructor(elRef: ElementRef<HTMLElement>, renderer: Renderer2, @Inject(PLATFORM_ID) platformId) {
     super();

diff --git a/packages/preact-flicking/README.md b/packages/preact-flicking/README.md
@@ -44,6 +44,7 @@ import Flicking, { MoveEvent, WillChangeEvent } from "@egjs/preact-flicking";
 <Flicking
   viewportTag = "div"
   cameraTag = "div"
+  cameraClass = ""
   align = "center"
   onMove = {(e: MoveEvent) => {}}
   onWillChange = {(e: WillChangeEvent) => {}}

diff --git a/packages/react-flicking/README.md b/packages/react-flicking/README.md
@@ -44,6 +44,7 @@ import Flicking, { MoveEvent, WillChangeEvent } from "@egjs/react-flicking";
 <Flicking
   viewportTag = "div"
   cameraTag = "div"
+  cameraClass = ""
   align = "center"
   onMove = {(e: MoveEvent) => {}}
   onWillChange = {(e: WillChangeEvent) => {}}

diff --git a/packages/react-flicking/src/react-flicking/Flicking.tsx b/packages/react-flicking/src/react-flicking/Flicking.tsx
@@ -152,6 +152,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
 
     const initialized = flicking && flicking.initialized;
     const viewportClasses: string[] = ["flicking-viewport"];
+    const cameraClasses: string[] = ["flicking-camera"];
     const isHorizontal = flicking
       ? flicking.horizontal
       : props.horizontal ?? true;
@@ -165,6 +166,9 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     if (attributes.className) {
       viewportClasses.push(attributes.className);
     }
+    if (props.cameraClass) {
+      cameraClasses.push(props.cameraClass);
+    }
 
     const cameraProps = !initialized && props.firstPanelSize
       ? { style: {
@@ -180,7 +184,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
       <Viewport {...attributes} className={viewportClasses.join(" ")} ref={(e?: HTMLElement) => {
         e && (this._viewportElement = e);
       }}>
-        <Camera className="flicking-camera" {...cameraProps}>
+        <Camera className={cameraClasses.join(" ")} {...cameraProps}>
           { panels }
         </Camera>
         { this._getViewportSlot() }

diff --git a/packages/react-flicking/src/react-flicking/consts.ts b/packages/react-flicking/src/react-flicking/consts.ts
@@ -27,6 +27,7 @@ import { FlickingProps } from "./types";
 export const DEFAULT_PROPS: FlickingProps = {
   viewportTag: "div",
   cameraTag: "div",
+  cameraClass: "",
   plugins: [],
   useFindDOMNode: false,
   hideBeforeInit: false,

diff --git a/packages/react-flicking/src/react-flicking/types.ts b/packages/react-flicking/src/react-flicking/types.ts
@@ -28,6 +28,7 @@ import {
 export interface FlickingProps {
   viewportTag: keyof JSX.IntrinsicElements;
   cameraTag: keyof JSX.IntrinsicElements;
+  cameraClass: string;
   plugins: Plugin[];
   status?: Status;
   useFindDOMNode: boolean;

diff --git a/packages/svelte-flicking/src/Flicking.d.ts b/packages/svelte-flicking/src/Flicking.d.ts
@@ -3,6 +3,7 @@ import { SvelteComponentTyped } from "svelte";
 import VanillaFlicking, { FlickingOptions, FlickingEvents, Plugin, Status } from "@egjs/flicking";
 
 interface FlickingProps {
+  cameraClass: string;
   hideBeforeInit: boolean;
   firstPanelSize: string;
   plugins: Plugin[];

diff --git a/packages/svelte-flicking/src/flicking.svelte b/packages/svelte-flicking/src/flicking.svelte
@@ -25,6 +25,7 @@
   import SvelteRenderer, { SvelteRendererOptions } from "./SvelteRenderer";
   import SvelteElementProvider from "./SvelteElementProvider";
 
+  export let cameraClass: string = "";
   export let hideBeforeInit: boolean = false;
   export let firstPanelSize: string | undefined = undefined;
   export let options: Partial<FlickingOptions> = {};
@@ -54,6 +55,7 @@
   $: {
     panelsPerView = options.panelsPerView ?? -1;
     isHorizontal = options.horizontal != null ? options.horizontal : true;
+    cameraClass = `flicking-camera ${$$props.cameraClass ?? ""}`.trim();
     isHiddenBeforeInit = hideBeforeInit && !(vanillaFlicking && vanillaFlicking.initialized);
     cameraTransform = !(vanillaFlicking && vanillaFlicking.initialized) && firstPanelSize
       ? { style: `transform: ${getDefaultCameraTransform(options.align, options.horizontal, firstPanelSize)}` }
@@ -160,7 +162,7 @@
 
 <svelte:options accessors={true} />
 <div class:flicking-viewport={true} bind:this={viewportEl} class:vertical={!isHorizontal} class:flicking-hidden={isHiddenBeforeInit} {...$$restProps}>
-  <div class:flicking-camera={true} bind:this={cameraEl} {...cameraTransform}>
+  <div class={cameraClass} bind:this={cameraEl} {...cameraTransform}>
     {#if panelsPerView > 0 && !!options.virtual}
       {#each range(panelsPerView + 1) as _idx}
         <div class={options.virtual.panelClass}></div>

diff --git a/packages/vue-flicking/README.md b/packages/vue-flicking/README.md
@@ -83,6 +83,7 @@ And in the \<style\> tag
     :options="{ circular: true, moveType: 'freeScroll' }"
     :viewportTag="'div'"
     :cameraTag="'div'"
+    :cameraClass="''"
     :plugins="plugins"
     @need-panel="e => {
       // ADD PANELS

diff --git a/packages/vue-flicking/src/Flicking.ts b/packages/vue-flicking/src/Flicking.ts
@@ -121,7 +121,8 @@ const Flicking = Vue.extend({
     };
     const cameraData: VNodeData = {
       class: {
-        "flicking-camera": true
+        "flicking-camera": true,
+        [this.cameraClass]: !!this.cameraClass
       },
       style: !initialized && this.firstPanelSize
         ? { transform: getDefaultCameraTransform(options.align, options.horizontal, this.firstPanelSize) }

diff --git a/packages/vue-flicking/src/FlickingProps.ts b/packages/vue-flicking/src/FlickingProps.ts
@@ -13,6 +13,11 @@ export default {
     default: "div",
     required: false
   },
+  cameraClass: {
+    type: String,
+    default: "",
+    required: false
+  },
   hideBeforeInit: {
     type: Boolean,
     default: false,
@@ -39,6 +44,7 @@ export default {
 } as RecordPropsDefinition<{
   readonly viewportTag: string;
   readonly cameraTag: string;
+  readonly cameraClass: string;
   readonly hideBeforeInit: boolean;
   readonly firstPanelSize: string;
   readonly options: Partial<FlickingOptions>;

diff --git a/packages/vue3-flicking/README.md b/packages/vue3-flicking/README.md
@@ -83,6 +83,7 @@ And in the \<style\> tag
     :options="{ circular: true, moveType: 'freeScroll' }"
     :viewportTag="'div'"
     :cameraTag="'div'"
+    :cameraClass="''"
     :plugins="plugins"
     @need-panel="e => {
       // ADD PANELS

diff --git a/packages/vue3-flicking/src/Flicking.ts b/packages/vue3-flicking/src/Flicking.ts
@@ -173,7 +173,8 @@ const Flicking = defineComponent({
     };
     const cameraData = {
       class: {
-        "flicking-camera": true
+        "flicking-camera": true,
+        [this.cameraClass]: !!this.cameraClass
       },
       style: !initialized && this.firstPanelSize
         ? { transform: getDefaultCameraTransform(this.options.align, this.options.horizontal, this.firstPanelSize) }

diff --git a/packages/vue3-flicking/src/FlickingProps.ts b/packages/vue3-flicking/src/FlickingProps.ts
@@ -16,6 +16,11 @@ export default {
     default: "div",
     required: false
   },
+  cameraClass: {
+    type: String,
+    default: "",
+    required: false
+  },
   hideBeforeInit: {
     type: Boolean,
     default: false,

diff --git a/packages/vue3-flicking/src/types.ts b/packages/vue3-flicking/src/types.ts
@@ -46,6 +46,7 @@ export type VueFlicking = DefineComponent<
   Readonly<{
     viewportTag?: unknown;
     cameraTag?: unknown;
+    cameraClass?: unknown;
     hideBeforeInit?: unknown;
     firstPanelSize?: unknown;
     options?: unknown;
@@ -54,6 +55,7 @@ export type VueFlicking = DefineComponent<
   } & {
     viewportTag: string;
     cameraTag: string;
+    cameraClass: string;
     hideBeforeInit: boolean;
     options: Partial<FlickingOptions>;
     plugins: Plugin[];
@@ -67,6 +69,7 @@ export type VueFlicking = DefineComponent<
   {
     viewportTag: string;
     cameraTag: string;
+    cameraClass: string;
     hideBeforeInit: boolean;
     options: Partial<FlickingOptions>;
     plugins: Plugin[];