@egjs/flicking-plugins 4.5.0 → 4.7.0

package/dist/plugins.js

@@ -4,7 +4,7 @@ name: @egjs/flicking-plugins
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking-plugins
-version: 4.5.0
+version: 4.7.0
 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@egjs/flicking')) :
@@ -156,8 +156,11 @@ version: 4.5.0
           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;
+          }
         });
       };
 
@@ -253,12 +256,14 @@ version: 4.5.0
       this._flicking = null;
       this._timerId = 0;
       this._mouseEntered = false;
+      this._playing = false;
 
       this.play = function () {
         _this._movePanel(_this._duration);
       };
 
       this.stop = function () {
+        _this._playing = false;
         clearTimeout(_this._timerId);
       };
 
@@ -332,6 +337,13 @@ version: 4.5.0
       enumerable: false,
       configurable: true
     });
+    Object.defineProperty(__proto, "playing", {
+      get: function () {
+        return this._playing;
+      },
+      enumerable: false,
+      configurable: true
+    });
 
     __proto.init = function (flicking$1) {
       var _a;
@@ -390,6 +402,7 @@ version: 4.5.0
         return;
       }
 
+      this._playing = true;
       this._timerId = window.setTimeout(function () {
         if (direction === flicking.DIRECTION.NEXT) {
           flicking$1.next(_this._animationDuration).catch(function () {
@@ -1189,6 +1202,39 @@ version: 4.5.0
       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 flicking.FlickingError) return;
+          throw err;
+        });
+      });
+    };
+
     return Renderer;
   }();
 
@@ -1200,64 +1246,112 @@ version: 4.5.0
     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 flicking$1 = this._flicking;
+      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$1.camera.anchorPoints;
-      var wrapper = this._wrapper;
+      var anchorPoints = flicking.camera.anchorPoints;
       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$1.index) {
-          addClass(bullet, bulletActiveClass);
+        if (anchorPoint.panel.index === flicking.index) {
+          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$1.moveTo(anchorPoint.panel.index).catch(function (err) {
-            if (err instanceof flicking.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;
@@ -1269,11 +1363,20 @@ version: 4.5.0
     __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;
@@ -1290,14 +1393,18 @@ version: 4.5.0
       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;
@@ -1330,12 +1437,21 @@ version: 4.5.0
 
     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$1 = this._flicking;
+      var flicking = this._flicking;
       var pagination = this._pagination;
       var renderBullet = pagination.renderBullet;
-      var anchorPoints = flicking$1.camera.anchorPoints;
+      var anchorPoints = flicking.camera.anchorPoints;
       var dynamicWrapperClass = pagination.classPrefix + "-" + PAGINATION.SCROLL_WRAPPER_SUFFIX;
       var bulletClass = pagination.classPrefix + "-" + PAGINATION.BULLET_SUFFIX;
       var sliderClass = pagination.classPrefix + "-" + PAGINATION.SCROLL_SLIDER_SUFFIX;
@@ -1350,21 +1466,7 @@ version: 4.5.0
       }).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$1.moveTo(anchorPoint.panel.index).catch(function (err) {
-            if (err instanceof flicking.FlickingError) return;
-            throw err;
-          });
-        });
+        _this._addBulletEvents(bullet, index);
       });
       if (bullets.length <= 0) return;
       var bulletStyle = getComputedStyle(bullets[0]);
@@ -1372,6 +1474,7 @@ version: 4.5.0
       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);
@@ -1383,10 +1486,13 @@ version: 4.5.0
       var flicking$1 = this._flicking;
       var bullets = this._bullets;
       var prevIndex = this._previousIndex;
+      var renderBullet = pagination.renderBullet;
+      var renderActiveBullet = pagination.renderActiveBullet;
       var anchorPoints = flicking$1.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;
@@ -1401,6 +1507,27 @@ version: 4.5.0
 
       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(" ");
@@ -1460,22 +1587,24 @@ version: 4.5.0
           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 */
 
 
@@ -1497,6 +1626,7 @@ version: 4.5.0
       this._classPrefix = classPrefix;
       this._bulletCount = bulletCount;
       this._renderBullet = renderBullet;
+      this._renderActiveBullet = renderActiveBullet;
       this._renderFraction = renderFraction;
       this._fractionCurrentFormat = fractionCurrentFormat;
       this._fractionTotalFormat = fractionTotalFormat;
@@ -1561,6 +1691,16 @@ version: 4.5.0
       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;
@@ -1643,6 +1783,8 @@ version: 4.5.0
       flicking$1.off(flicking.EVENTS.WILL_RESTORE, this._onIndexChange);
       flicking$1.off(flicking.EVENTS.PANEL_CHANGE, this.update);
 
+      this._renderer.destroy();
+
       this._removeAllChilds();
 
       this._flicking = null;