@egjs/flicking-plugins 4.6.0 → 4.7.1

package/src/pagination/Pagination.ts

@@ -16,6 +16,7 @@ export interface PaginationOptions {
   bulletCount: number;
   renderBullet: (className: string, index: number) => string;
   renderFraction: (currentClass: string, totalClass: string) => string;
+  renderActiveBullet: ((className: string, index: number) => string) | null;
   fractionCurrentFormat: (index: number) => string;
   fractionTotalFormat: (total: number) => string;
   scrollOnChange: (index: number, ctx: ScrollContext) => any;
@@ -37,6 +38,7 @@ class Pagination implements Plugin {
   private _classPrefix: PaginationOptions["classPrefix"];
   private _bulletCount: PaginationOptions["bulletCount"];
   private _renderBullet: PaginationOptions["renderBullet"];
+  private _renderActiveBullet: PaginationOptions["renderActiveBullet"];
   private _renderFraction: PaginationOptions["renderFraction"];
   private _fractionCurrentFormat: PaginationOptions["fractionCurrentFormat"];
   private _fractionTotalFormat: PaginationOptions["fractionTotalFormat"];
@@ -48,6 +50,7 @@ class Pagination implements Plugin {
   public get classPrefix() { return this._classPrefix; }
   public get bulletCount() { return this._bulletCount; }
   public get renderBullet() { return this._renderBullet; }
+  public get renderActiveBullet() { return this._renderActiveBullet; }
   public get renderFraction() { return this._renderFraction; }
   public get fractionCurrentFormat() { return this._fractionCurrentFormat; }
   public get fractionTotalFormat() { return this._fractionTotalFormat; }
@@ -59,6 +62,7 @@ class Pagination implements Plugin {
   public set bulletWrapperclassPrefixClass(val: PaginationOptions["classPrefix"]) { this._classPrefix = val; }
   public set bulletCount(val: PaginationOptions["bulletCount"]) { this._bulletCount = val; }
   public set renderBullet(val: PaginationOptions["renderBullet"]) { this._renderBullet = val; }
+  public set renderActiveBullet(val: PaginationOptions["renderActiveBullet"]) { this._renderActiveBullet = val; }
   public set renderFraction(val: PaginationOptions["renderFraction"]) { this._renderFraction = val; }
   public set fractionCurrentFormat(val: PaginationOptions["fractionCurrentFormat"]) { this._fractionCurrentFormat = val; }
   public set fractionTotalFormat(val: PaginationOptions["fractionTotalFormat"]) { this._fractionTotalFormat = val; }
@@ -71,6 +75,7 @@ class Pagination implements Plugin {
     classPrefix = PAGINATION.PREFIX,
     bulletCount = 5,
     renderBullet = (className: string) => `<span class="${className}"></span>`,
+    renderActiveBullet = null,
     renderFraction = (currentClass: string, totalClass: string) => `<span class="${currentClass}"></span>/<span class="${totalClass}"></span>`,
     fractionCurrentFormat = (index: number) => index.toString(),
     fractionTotalFormat = (index: number) => index.toString(),
@@ -82,6 +87,7 @@ class Pagination implements Plugin {
     this._classPrefix = classPrefix;
     this._bulletCount = bulletCount;
     this._renderBullet = renderBullet;
+    this._renderActiveBullet = renderActiveBullet;
     this._renderFraction = renderFraction;
     this._fractionCurrentFormat = fractionCurrentFormat;
     this._fractionTotalFormat = fractionTotalFormat;
@@ -125,6 +131,7 @@ class Pagination implements Plugin {
     flicking.off(EVENTS.WILL_RESTORE, this._onIndexChange);
     flicking.off(EVENTS.PANEL_CHANGE, this.update);
 
+    this._renderer.destroy();
     this._removeAllChilds();
     this._flicking = null;
   }

package/src/pagination/index.ts

@@ -1,6 +1,9 @@
-import Pagination from "./Pagination";
+import Pagination, { PaginationOptions } from "./Pagination";
 
-export * from "./renderer";
 export {
   Pagination
 };
+
+export type {
+  PaginationOptions
+};

package/src/pagination/renderer/BulletRenderer.ts

@@ -1,28 +1,48 @@
-import { FlickingError } from "@egjs/flicking";
-
 import { PAGINATION } from "../../const";
-import { BROWSER } from "../../event";
 import { addClass, removeClass } from "../../utils";
 
 import Renderer from "./Renderer";
 
 class BulletRenderer extends Renderer {
-  private _childs: HTMLElement[] = [];
+  private _bullets: HTMLElement[] = [];
+  private _prevIndex: number = -1;
+
+  private get _bulletClass() {
+    const pagination = this._pagination;
+    return `${pagination.classPrefix}-${PAGINATION.BULLET_SUFFIX}`;
+  }
+
+  private get _activeClass() {
+    const pagination = this._pagination;
+    return `${pagination.classPrefix}-${PAGINATION.BULLET_ACTIVE_SUFFIX}`;
+  }
+
+  public destroy() {
+    this._bullets = [];
+    this._prevIndex = -1;
+  }
 
   public render() {
     const flicking = this._flicking;
     const pagination = this._pagination;
+    const wrapper = this._wrapper;
+    const bulletClass = this._bulletClass;
+    const activeClass = this._activeClass;
     const renderBullet = pagination.renderBullet;
+    const renderActiveBullet = pagination.renderActiveBullet;
     const bulletWrapperClass = `${pagination.classPrefix}-${PAGINATION.BULLET_WRAPPER_SUFFIX}`;
-    const bulletClass = `${pagination.classPrefix}-${PAGINATION.BULLET_SUFFIX}`;
-    const bulletActiveClass = `${pagination.classPrefix}-${PAGINATION.BULLET_ACTIVE_SUFFIX}`;
     const anchorPoints = flicking.camera.anchorPoints;
-    const wrapper = this._wrapper;
 
     addClass(wrapper, bulletWrapperClass);
 
     wrapper.innerHTML = anchorPoints
-      .map((_, index) => renderBullet(bulletClass, index))
+      .map((anchorPoint, index) => {
+        if (renderActiveBullet && anchorPoint.panel.index === flicking.index) {
+          return renderActiveBullet(bulletClass, index);
+        } else {
+          return renderBullet(bulletClass, index);
+        }
+      })
       .join("\n");
 
     const bullets = [].slice.call(wrapper.children) as HTMLElement[];
@@ -31,46 +51,66 @@ class BulletRenderer extends Renderer {
       const anchorPoint = anchorPoints[index];
 
       if (anchorPoint.panel.index === flicking.index) {
-        addClass(bullet, bulletActiveClass);
+        addClass(bullet, activeClass);
+        this._prevIndex = index;
       }
 
-      bullet.addEventListener(BROWSER.MOUSE_DOWN, e => {
-        e.stopPropagation();
-      });
-
-      bullet.addEventListener(BROWSER.TOUCH_START, e => {
-        e.stopPropagation();
-      }, { passive: true });
-
-      bullet.addEventListener(BROWSER.CLICK, () => {
-        flicking.moveTo(anchorPoint.panel.index)
-          .catch(err => {
-            if (err instanceof FlickingError) return;
-            throw err;
-          });
-      });
+      this._addBulletEvents(bullet, index);
     });
 
-    this._childs = bullets;
+    this._bullets = bullets;
   }
 
   public update(index: number) {
     const flicking = this._flicking;
     const pagination = this._pagination;
-    const bullets = this._childs;
-    const activeClass = `${pagination.classPrefix}-${PAGINATION.BULLET_ACTIVE_SUFFIX}`;
+    const wrapper = this._wrapper;
+    const bullets = this._bullets;
+    const bulletClass = this._bulletClass;
+    const activeClass = this._activeClass;
+    const prevIndex = this._prevIndex;
     const anchorPoints = flicking.camera.anchorPoints;
+    const renderBullet = pagination.renderBullet;
+    const renderActiveBullet = pagination.renderActiveBullet;
 
     if (anchorPoints.length <= 0) return;
 
-    bullets.forEach(bullet => {
-      removeClass(bullet, activeClass);
-    });
-
     const anchorOffset = anchorPoints[0].panel.index;
-    const activeBullet = bullets[index - anchorOffset];
+    const activeBulletIndex = index - anchorOffset;
+
+    if (prevIndex === activeBulletIndex) return;
+
+    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[activeBulletIndex];
+      const newActiveBullet = this._createBulletFromString(
+        renderActiveBullet(`${bulletClass} ${activeClass}`, activeBulletIndex),
+        activeBulletIndex
+      );
+
+      wrapper.replaceChild(newActiveBullet, activeBullet);
+      bullets[activeBulletIndex] = newActiveBullet;
+    } else {
+      const activeBullet = bullets[activeBulletIndex];
+      const prevBullet = bullets[prevIndex];
+
+      if (prevBullet) {
+        removeClass(prevBullet, activeClass);
+      }
+
+      addClass(activeBullet, activeClass);
+    }
 
-    addClass(activeBullet, activeClass);
+    this._prevIndex = activeBulletIndex;
   }
 }
 

package/src/pagination/renderer/FractionRenderer.ts

@@ -4,6 +4,14 @@ import { addClass } from "../../utils";
 import Renderer from "./Renderer";
 
 class FractionRenderer extends Renderer {
+  private _prevIndex: number = -1;
+  private _prevTotal: number = -1;
+
+  public destroy(): void {
+    this._prevIndex = -1;
+    this._prevTotal = -1;
+  }
+
   public render() {
     const flicking = this._flicking;
     const wrapper = this._wrapper;
@@ -23,19 +31,26 @@ class FractionRenderer extends Renderer {
     const flicking = this._flicking;
     const wrapper = this._wrapper;
     const pagination = this._pagination;
-    const fractionCurrentClass = `${pagination.classPrefix}-${PAGINATION.FRACTION_CURRENT_SUFFIX}`;
-    const fractionTotalClass = `${pagination.classPrefix}-${PAGINATION.FRACTION_TOTAL_SUFFIX}`;
 
-    const currentWrapper = wrapper.querySelector(`.${fractionCurrentClass}`) as HTMLElement;
-    const totalWrapper = wrapper.querySelector(`.${fractionTotalClass}`) as HTMLElement;
     const anchorPoints = flicking.camera.anchorPoints;
-
     const currentIndex = anchorPoints.length > 0
       ? index - anchorPoints[0].panel.index + 1
       : 0;
+    const anchorCount = anchorPoints.length;
+
+    if (currentIndex === this._prevIndex && anchorCount === this._prevTotal) return;
+
+    const fractionCurrentSelector = `.${pagination.classPrefix}-${PAGINATION.FRACTION_CURRENT_SUFFIX}`;
+    const fractionTotalSelector = `.${pagination.classPrefix}-${PAGINATION.FRACTION_TOTAL_SUFFIX}`;
+
+    const currentWrapper = wrapper.querySelector(fractionCurrentSelector) as HTMLElement;
+    const totalWrapper = wrapper.querySelector(fractionTotalSelector) as HTMLElement;
 
     currentWrapper.innerHTML = pagination.fractionCurrentFormat(currentIndex);
-    totalWrapper.innerHTML = pagination.fractionTotalFormat(anchorPoints.length);
+    totalWrapper.innerHTML = pagination.fractionTotalFormat(anchorCount);
+
+    this._prevIndex = currentIndex;
+    this._prevTotal = anchorCount;
   }
 }
 

package/src/pagination/renderer/Renderer.ts

@@ -1,5 +1,6 @@
-import Flicking from "@egjs/flicking";
+import Flicking, { FlickingError } from "@egjs/flicking";
 
+import { BROWSER } from "../../event";
 import Pagination from "../Pagination";
 
 export interface RendererOptions {
@@ -23,8 +24,40 @@ abstract class Renderer {
     this._wrapper = wrapper;
   }
 
+  public abstract destroy(): void;
   public abstract render(): void;
   public abstract update(index: number): void;
+
+  protected _createBulletFromString(html: string, index: number) {
+    const range = document.createRange();
+    const frag = range.createContextualFragment(html);
+    const bullet = frag.firstChild as HTMLElement;
+
+    this._addBulletEvents(bullet, index);
+
+    return bullet;
+  }
+
+  protected _addBulletEvents(bullet: HTMLElement, index: number) {
+    const anchorPoints = this._flicking.camera.anchorPoints;
+    const panelIndex = anchorPoints[index].panel.index;
+
+    bullet.addEventListener(BROWSER.MOUSE_DOWN, e => {
+      e.stopPropagation();
+    });
+
+    bullet.addEventListener(BROWSER.TOUCH_START, e => {
+      e.stopPropagation();
+    }, { passive: true });
+
+    bullet.addEventListener(BROWSER.CLICK, () => {
+      this._flicking.moveTo(panelIndex)
+        .catch(err => {
+          if (err instanceof FlickingError) return;
+          throw err;
+        });
+    });
+  }
 }
 
 export default Renderer;

package/src/pagination/renderer/ScrollBulletRenderer.ts

@@ -1,7 +1,6 @@
-import { DIRECTION, FlickingError } from "@egjs/flicking";
+import { DIRECTION } from "@egjs/flicking";
 
 import { PAGINATION } from "../../const";
-import { BROWSER } from "../../event";
 import { addClass, removeClass } from "../../utils";
 
 import Renderer from "./Renderer";
@@ -12,6 +11,13 @@ class ScrollBulletRenderer extends Renderer {
   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;
@@ -38,23 +44,7 @@ class ScrollBulletRenderer extends Renderer {
     const bullets = [].slice.call(sliderEl.children) as HTMLElement[];
 
     bullets.forEach((bullet, index) => {
-      const anchorPoint = anchorPoints[index];
-
-      bullet.addEventListener(BROWSER.MOUSE_DOWN, e => {
-        e.stopPropagation();
-      });
-
-      bullet.addEventListener(BROWSER.TOUCH_START, e => {
-        e.stopPropagation();
-      }, { passive: true });
-
-      bullet.addEventListener(BROWSER.CLICK, () => {
-        flicking.moveTo(anchorPoint.panel.index)
-          .catch(err => {
-            if (err instanceof FlickingError) return;
-            throw err;
-          });
-      });
+      this._addBulletEvents(bullet, index);
     });
 
     if (bullets.length <= 0) return;
@@ -66,6 +56,7 @@ class ScrollBulletRenderer extends Renderer {
 
     this._bullets = bullets;
     this._bulletSize = bulletSize;
+    this._previousIndex = -1;
 
     this.update(this._flicking.index);
 
@@ -80,12 +71,16 @@ class ScrollBulletRenderer extends Renderer {
     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}`;
@@ -95,6 +90,29 @@ class ScrollBulletRenderer extends Renderer {
     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(" ");
@@ -116,7 +134,7 @@ class ScrollBulletRenderer extends Renderer {
 
     pagination.scrollOnChange(activeIndex, {
       total: bullets.length,
-      prevIndex: prevIndex,
+      prevIndex,
       sliderIndex: this._sliderIndex,
       direction: activeIndex > prevIndex ? DIRECTION.NEXT : DIRECTION.PREV,
       bullets: [...bullets],

package/declaration/pagination/renderer/index.d.ts

@@ -1,2 +0,0 @@
-import Renderer from "./Renderer";
-export type { Renderer };

package/src/pagination/renderer/index.ts

@@ -1,5 +0,0 @@
-import Renderer from "./Renderer";
-
-export type {
-  Renderer
-};