@egjs/flicking-plugins 4.6.0 → 4.7.0

package/declaration/pagination/Pagination.d.ts

@@ -8,6 +8,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;
@@ -22,6 +23,7 @@ declare class Pagination implements Plugin {
     private _classPrefix;
     private _bulletCount;
     private _renderBullet;
+    private _renderActiveBullet;
     private _renderFraction;
     private _fractionCurrentFormat;
     private _fractionTotalFormat;
@@ -32,6 +34,7 @@ declare class Pagination implements Plugin {
     get classPrefix(): string;
     get bulletCount(): PaginationOptions["bulletCount"];
     get renderBullet(): PaginationOptions["renderBullet"];
+    get renderActiveBullet(): PaginationOptions["renderActiveBullet"];
     get renderFraction(): PaginationOptions["renderFraction"];
     get fractionCurrentFormat(): PaginationOptions["fractionCurrentFormat"];
     get fractionTotalFormat(): PaginationOptions["fractionTotalFormat"];
@@ -42,11 +45,12 @@ declare class Pagination implements Plugin {
     set bulletWrapperclassPrefixClass(val: PaginationOptions["classPrefix"]);
     set bulletCount(val: PaginationOptions["bulletCount"]);
     set renderBullet(val: PaginationOptions["renderBullet"]);
+    set renderActiveBullet(val: PaginationOptions["renderActiveBullet"]);
     set renderFraction(val: PaginationOptions["renderFraction"]);
     set fractionCurrentFormat(val: PaginationOptions["fractionCurrentFormat"]);
     set fractionTotalFormat(val: PaginationOptions["fractionTotalFormat"]);
     set scrollOnChange(val: PaginationOptions["scrollOnChange"]);
-    constructor({ parentEl, selector, type, classPrefix, bulletCount, renderBullet, renderFraction, fractionCurrentFormat, fractionTotalFormat, scrollOnChange }?: Partial<PaginationOptions>);
+    constructor({ parentEl, selector, type, classPrefix, bulletCount, renderBullet, renderActiveBullet, renderFraction, fractionCurrentFormat, fractionTotalFormat, scrollOnChange }?: Partial<PaginationOptions>);
     init(flicking: Flicking): void;
     destroy(): void;
     update: () => void;

package/declaration/pagination/index.d.ts

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

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

@@ -1,6 +1,10 @@
 import Renderer from "./Renderer";
 declare class BulletRenderer extends Renderer {
-    private _childs;
+    private _bullets;
+    private _prevIndex;
+    private get _bulletClass();
+    private get _activeClass();
+    destroy(): void;
     render(): void;
     update(index: number): void;
 }

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

@@ -1,5 +1,8 @@
 import Renderer from "./Renderer";
 declare class FractionRenderer extends Renderer {
+    private _prevIndex;
+    private _prevTotal;
+    destroy(): void;
     render(): void;
     update(index: number): void;
 }

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

@@ -10,7 +10,10 @@ declare abstract class Renderer {
     protected _pagination: Pagination;
     protected _wrapper: HTMLElement;
     constructor({ flicking, pagination, wrapper }: RendererOptions);
+    abstract destroy(): void;
     abstract render(): void;
     abstract update(index: number): void;
+    protected _createBulletFromString(html: string, index: number): HTMLElement;
+    protected _addBulletEvents(bullet: HTMLElement, index: number): void;
 }
 export default Renderer;

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

@@ -4,6 +4,7 @@ declare class ScrollBulletRenderer extends Renderer {
     private _bulletSize;
     private _previousIndex;
     private _sliderIndex;
+    destroy(): void;
     render(): void;
     update(index: number): void;
     moveTo: (index: number) => void;

package/dist/plugins.esm.js

@@ -4,7 +4,7 @@ name: @egjs/flicking-plugins
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking-plugins
-version: 4.6.0
+version: 4.7.0
 */
 import { EVENTS, DIRECTION, FlickingError, clamp } from '@egjs/flicking';
 
@@ -152,8 +152,11 @@ function () {
         var progress = panel.outsetProgress;
         var el = panel.element;
         var target = selector ? el.querySelector(selector) : el;
-        var opacity = Math.min(1, Math.max(0, 1 - Math.abs(progress * scale)));
-        target.style.opacity = "" + opacity;
+
+        if (target) {
+          var opacity = Math.min(1, Math.max(0, 1 - Math.abs(progress * scale)));
+          target.style.opacity = "" + opacity;
+        }
       });
     };
 
@@ -1195,6 +1198,39 @@ function () {
     this._wrapper = wrapper;
   }
 
+  var __proto = Renderer.prototype;
+
+  __proto._createBulletFromString = function (html, index) {
+    var range = document.createRange();
+    var frag = range.createContextualFragment(html);
+    var bullet = frag.firstChild;
+
+    this._addBulletEvents(bullet, index);
+
+    return bullet;
+  };
+
+  __proto._addBulletEvents = function (bullet, index) {
+    var _this = this;
+
+    var anchorPoints = this._flicking.camera.anchorPoints;
+    var panelIndex = anchorPoints[index].panel.index;
+    bullet.addEventListener(BROWSER.MOUSE_DOWN, function (e) {
+      e.stopPropagation();
+    });
+    bullet.addEventListener(BROWSER.TOUCH_START, function (e) {
+      e.stopPropagation();
+    }, {
+      passive: true
+    });
+    bullet.addEventListener(BROWSER.CLICK, function () {
+      _this._flicking.moveTo(panelIndex).catch(function (err) {
+        if (err instanceof FlickingError) return;
+        throw err;
+      });
+    });
+  };
+
   return Renderer;
 }();
 
@@ -1206,64 +1242,112 @@ function (_super) {
   function BulletRenderer() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this._childs = [];
+    _this._bullets = [];
+    _this._prevIndex = -1;
     return _this;
   }
 
   var __proto = BulletRenderer.prototype;
+  Object.defineProperty(__proto, "_bulletClass", {
+    get: function () {
+      var pagination = this._pagination;
+      return pagination.classPrefix + "-" + PAGINATION.BULLET_SUFFIX;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "_activeClass", {
+    get: function () {
+      var pagination = this._pagination;
+      return pagination.classPrefix + "-" + PAGINATION.BULLET_ACTIVE_SUFFIX;
+    },
+    enumerable: false,
+    configurable: true
+  });
+
+  __proto.destroy = function () {
+    this._bullets = [];
+    this._prevIndex = -1;
+  };
 
   __proto.render = function () {
+    var _this = this;
+
     var flicking = this._flicking;
     var pagination = this._pagination;
+    var wrapper = this._wrapper;
+    var bulletClass = this._bulletClass;
+    var activeClass = this._activeClass;
     var renderBullet = pagination.renderBullet;
+    var renderActiveBullet = pagination.renderActiveBullet;
     var bulletWrapperClass = pagination.classPrefix + "-" + PAGINATION.BULLET_WRAPPER_SUFFIX;
-    var bulletClass = pagination.classPrefix + "-" + PAGINATION.BULLET_SUFFIX;
-    var bulletActiveClass = pagination.classPrefix + "-" + PAGINATION.BULLET_ACTIVE_SUFFIX;
     var anchorPoints = flicking.camera.anchorPoints;
-    var wrapper = this._wrapper;
     addClass(wrapper, bulletWrapperClass);
-    wrapper.innerHTML = anchorPoints.map(function (_, index) {
-      return renderBullet(bulletClass, index);
+    wrapper.innerHTML = anchorPoints.map(function (anchorPoint, index) {
+      if (renderActiveBullet && anchorPoint.panel.index === flicking.index) {
+        return renderActiveBullet(bulletClass, index);
+      } else {
+        return renderBullet(bulletClass, index);
+      }
     }).join("\n");
     var bullets = [].slice.call(wrapper.children);
     bullets.forEach(function (bullet, index) {
       var anchorPoint = anchorPoints[index];
 
       if (anchorPoint.panel.index === flicking.index) {
-        addClass(bullet, bulletActiveClass);
+        addClass(bullet, activeClass);
+        _this._prevIndex = index;
       }
 
-      bullet.addEventListener(BROWSER.MOUSE_DOWN, function (e) {
-        e.stopPropagation();
-      });
-      bullet.addEventListener(BROWSER.TOUCH_START, function (e) {
-        e.stopPropagation();
-      }, {
-        passive: true
-      });
-      bullet.addEventListener(BROWSER.CLICK, function () {
-        flicking.moveTo(anchorPoint.panel.index).catch(function (err) {
-          if (err instanceof FlickingError) return;
-          throw err;
-        });
-      });
+      _this._addBulletEvents(bullet, index);
     });
-    this._childs = bullets;
+    this._bullets = bullets;
   };
 
   __proto.update = function (index) {
     var flicking = this._flicking;
     var pagination = this._pagination;
-    var bullets = this._childs;
-    var activeClass = pagination.classPrefix + "-" + PAGINATION.BULLET_ACTIVE_SUFFIX;
+    var wrapper = this._wrapper;
+    var bullets = this._bullets;
+    var bulletClass = this._bulletClass;
+    var activeClass = this._activeClass;
+    var prevIndex = this._prevIndex;
     var anchorPoints = flicking.camera.anchorPoints;
+    var renderBullet = pagination.renderBullet;
+    var renderActiveBullet = pagination.renderActiveBullet;
     if (anchorPoints.length <= 0) return;
-    bullets.forEach(function (bullet) {
-      removeClass(bullet, activeClass);
-    });
     var anchorOffset = anchorPoints[0].panel.index;
-    var activeBullet = bullets[index - anchorOffset];
-    addClass(activeBullet, activeClass);
+    var activeBulletIndex = index - anchorOffset;
+    if (prevIndex === activeBulletIndex) return;
+
+    if (renderActiveBullet) {
+      var prevBullet = bullets[prevIndex];
+
+      if (prevBullet) {
+        var newBullet = this._createBulletFromString(renderBullet(bulletClass, prevIndex), prevIndex);
+
+        prevBullet.parentElement.replaceChild(newBullet, prevBullet);
+        bullets[prevIndex] = newBullet;
+      }
+
+      var activeBullet = bullets[activeBulletIndex];
+
+      var newActiveBullet = this._createBulletFromString(renderActiveBullet(bulletClass + " " + activeClass, activeBulletIndex), activeBulletIndex);
+
+      wrapper.replaceChild(newActiveBullet, activeBullet);
+      bullets[activeBulletIndex] = newActiveBullet;
+    } else {
+      var activeBullet = bullets[activeBulletIndex];
+      var prevBullet = bullets[prevIndex];
+
+      if (prevBullet) {
+        removeClass(prevBullet, activeClass);
+      }
+
+      addClass(activeBullet, activeClass);
+    }
+
+    this._prevIndex = activeBulletIndex;
   };
 
   return BulletRenderer;
@@ -1275,11 +1359,20 @@ function (_super) {
   __extends(FractionRenderer, _super);
 
   function FractionRenderer() {
-    return _super !== null && _super.apply(this, arguments) || this;
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this._prevIndex = -1;
+    _this._prevTotal = -1;
+    return _this;
   }
 
   var __proto = FractionRenderer.prototype;
 
+  __proto.destroy = function () {
+    this._prevIndex = -1;
+    this._prevTotal = -1;
+  };
+
   __proto.render = function () {
     var flicking = this._flicking;
     var wrapper = this._wrapper;
@@ -1296,14 +1389,18 @@ function (_super) {
     var flicking = this._flicking;
     var wrapper = this._wrapper;
     var pagination = this._pagination;
-    var fractionCurrentClass = pagination.classPrefix + "-" + PAGINATION.FRACTION_CURRENT_SUFFIX;
-    var fractionTotalClass = pagination.classPrefix + "-" + PAGINATION.FRACTION_TOTAL_SUFFIX;
-    var currentWrapper = wrapper.querySelector("." + fractionCurrentClass);
-    var totalWrapper = wrapper.querySelector("." + fractionTotalClass);
     var anchorPoints = flicking.camera.anchorPoints;
     var currentIndex = anchorPoints.length > 0 ? index - anchorPoints[0].panel.index + 1 : 0;
+    var anchorCount = anchorPoints.length;
+    if (currentIndex === this._prevIndex && anchorCount === this._prevTotal) return;
+    var fractionCurrentSelector = "." + pagination.classPrefix + "-" + PAGINATION.FRACTION_CURRENT_SUFFIX;
+    var fractionTotalSelector = "." + pagination.classPrefix + "-" + PAGINATION.FRACTION_TOTAL_SUFFIX;
+    var currentWrapper = wrapper.querySelector(fractionCurrentSelector);
+    var totalWrapper = wrapper.querySelector(fractionTotalSelector);
     currentWrapper.innerHTML = pagination.fractionCurrentFormat(currentIndex);
-    totalWrapper.innerHTML = pagination.fractionTotalFormat(anchorPoints.length);
+    totalWrapper.innerHTML = pagination.fractionTotalFormat(anchorCount);
+    this._prevIndex = currentIndex;
+    this._prevTotal = anchorCount;
   };
 
   return FractionRenderer;
@@ -1336,7 +1433,16 @@ function (_super) {
 
   var __proto = ScrollBulletRenderer.prototype;
 
+  __proto.destroy = function () {
+    this._bullets = [];
+    this._bulletSize = 0;
+    this._previousIndex = -1;
+    this._sliderIndex = -1;
+  };
+
   __proto.render = function () {
+    var _this = this;
+
     var wrapper = this._wrapper;
     var flicking = this._flicking;
     var pagination = this._pagination;
@@ -1356,21 +1462,7 @@ function (_super) {
     }).join("\n");
     var bullets = [].slice.call(sliderEl.children);
     bullets.forEach(function (bullet, index) {
-      var anchorPoint = anchorPoints[index];
-      bullet.addEventListener(BROWSER.MOUSE_DOWN, function (e) {
-        e.stopPropagation();
-      });
-      bullet.addEventListener(BROWSER.TOUCH_START, function (e) {
-        e.stopPropagation();
-      }, {
-        passive: true
-      });
-      bullet.addEventListener(BROWSER.CLICK, function () {
-        flicking.moveTo(anchorPoint.panel.index).catch(function (err) {
-          if (err instanceof FlickingError) return;
-          throw err;
-        });
-      });
+      _this._addBulletEvents(bullet, index);
     });
     if (bullets.length <= 0) return;
     var bulletStyle = getComputedStyle(bullets[0]);
@@ -1378,6 +1470,7 @@ function (_super) {
     wrapper.style.width = bulletSize * pagination.bulletCount + "px";
     this._bullets = bullets;
     this._bulletSize = bulletSize;
+    this._previousIndex = -1;
     this.update(this._flicking.index);
     window.requestAnimationFrame(function () {
       removeClass(wrapper, uninitClass);
@@ -1389,10 +1482,13 @@ function (_super) {
     var flicking = this._flicking;
     var bullets = this._bullets;
     var prevIndex = this._previousIndex;
+    var renderBullet = pagination.renderBullet;
+    var renderActiveBullet = pagination.renderActiveBullet;
     var anchorPoints = flicking.camera.anchorPoints;
     var anchorOffset = anchorPoints[0].panel.index;
     var activeIndex = index - anchorOffset;
     if (anchorPoints.length <= 0) return;
+    var bulletClass = pagination.classPrefix + "-" + PAGINATION.BULLET_SUFFIX;
     var bulletActiveClass = pagination.classPrefix + "-" + PAGINATION.BULLET_ACTIVE_SUFFIX;
     var prevClassPrefix = pagination.classPrefix + "-" + PAGINATION.SCROLL_PREV_SUFFIX;
     var nextClassPrefix = pagination.classPrefix + "-" + PAGINATION.SCROLL_NEXT_SUFFIX;
@@ -1407,6 +1503,27 @@ function (_super) {
 
     var prevClassRegex = new RegExp("^" + prevClassPrefix);
     var nextClassRegex = new RegExp("^" + nextClassPrefix);
+
+    if (renderActiveBullet) {
+      var prevBullet = bullets[prevIndex];
+
+      if (prevBullet) {
+        var newBullet = this._createBulletFromString(renderBullet(bulletClass, prevIndex), prevIndex);
+
+        prevBullet.parentElement.replaceChild(newBullet, prevBullet);
+        bullets[prevIndex] = newBullet;
+      }
+
+      var activeBullet = bullets[activeIndex];
+
+      if (activeBullet) {
+        var newActiveBullet = this._createBulletFromString(renderActiveBullet(bulletClass, activeIndex), activeIndex);
+
+        activeBullet.parentElement.replaceChild(newActiveBullet, activeBullet);
+        bullets[activeIndex] = newActiveBullet;
+      }
+    }
+
     bullets.forEach(function (bullet, idx) {
       var indexOffset = idx - activeIndex;
       var classList = bullet.className.split(" ");
@@ -1466,22 +1583,24 @@ function () {
         renderBullet = _h === void 0 ? function (className) {
       return "<span class=\"" + className + "\"></span>";
     } : _h,
-        _j = _b.renderFraction,
-        renderFraction = _j === void 0 ? function (currentClass, totalClass) {
+        _j = _b.renderActiveBullet,
+        renderActiveBullet = _j === void 0 ? null : _j,
+        _k = _b.renderFraction,
+        renderFraction = _k === void 0 ? function (currentClass, totalClass) {
       return "<span class=\"" + currentClass + "\"></span>/<span class=\"" + totalClass + "\"></span>";
-    } : _j,
-        _k = _b.fractionCurrentFormat,
-        fractionCurrentFormat = _k === void 0 ? function (index) {
-      return index.toString();
     } : _k,
-        _l = _b.fractionTotalFormat,
-        fractionTotalFormat = _l === void 0 ? function (index) {
+        _l = _b.fractionCurrentFormat,
+        fractionCurrentFormat = _l === void 0 ? function (index) {
       return index.toString();
     } : _l,
-        _m = _b.scrollOnChange,
-        scrollOnChange = _m === void 0 ? function (index, ctx) {
+        _m = _b.fractionTotalFormat,
+        fractionTotalFormat = _m === void 0 ? function (index) {
+      return index.toString();
+    } : _m,
+        _o = _b.scrollOnChange,
+        scrollOnChange = _o === void 0 ? function (index, ctx) {
       return ctx.moveTo(index);
-    } : _m;
+    } : _o;
     /* Internal Values */
 
 
@@ -1503,6 +1622,7 @@ function () {
     this._classPrefix = classPrefix;
     this._bulletCount = bulletCount;
     this._renderBullet = renderBullet;
+    this._renderActiveBullet = renderActiveBullet;
     this._renderFraction = renderFraction;
     this._fractionCurrentFormat = fractionCurrentFormat;
     this._fractionTotalFormat = fractionTotalFormat;
@@ -1567,6 +1687,16 @@ function () {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "renderActiveBullet", {
+    get: function () {
+      return this._renderActiveBullet;
+    },
+    set: function (val) {
+      this._renderActiveBullet = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "renderFraction", {
     get: function () {
       return this._renderFraction;
@@ -1649,6 +1779,8 @@ function () {
     flicking.off(EVENTS.WILL_RESTORE, this._onIndexChange);
     flicking.off(EVENTS.PANEL_CHANGE, this.update);
 
+    this._renderer.destroy();
+
     this._removeAllChilds();
 
     this._flicking = null;