@egjs/flicking-plugins 4.6.0 → 4.7.0

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
-};