@egjs/flicking 4.8.0 → 4.9.1

package/dist/flicking.pkgd.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.8.0
+version: 4.9.1
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1248,6 +1248,29 @@ version: 4.8.0
 
       return arr;
     };
+    var getElementSize = function (_a) {
+      var el = _a.el,
+          horizontal = _a.horizontal,
+          useFractionalSize = _a.useFractionalSize,
+          useOffset = _a.useOffset,
+          style = _a.style;
+
+      if (useFractionalSize) {
+        var baseSize = parseFloat(horizontal ? style.width : style.height);
+        var isBorderBoxSizing = style.boxSizing === "border-box";
+        var border = horizontal ? parseFloat(style.borderLeftWidth || "0") + parseFloat(style.borderRightWidth || "0") : parseFloat(style.borderTopWidth || "0") + parseFloat(style.borderBottomWidth || "0");
+
+        if (isBorderBoxSizing) {
+          return useOffset ? baseSize : baseSize - border;
+        } else {
+          var padding = horizontal ? parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0") : parseFloat(style.paddingTop || "0") + parseFloat(style.paddingBottom || "0");
+          return useOffset ? baseSize + padding + border : baseSize + padding;
+        }
+      } else {
+        var sizeStr = horizontal ? "Width" : "Height";
+        return useOffset ? el["offset" + sizeStr] : el["client" + sizeStr];
+      }
+    };
     var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
       obj.__proto__ = proto;
       return obj;
@@ -1282,6 +1305,7 @@ version: 4.8.0
         isBetween: isBetween,
         circulateIndex: circulateIndex,
         range: range,
+        getElementSize: getElementSize,
         setPrototypeOf: setPrototypeOf
     };
 
@@ -1330,10 +1354,6 @@ version: 4.8.0
       return FlickingError;
     }(Error);
 
-    /*
-     * Copyright (c) 2015 NAVER Corp.
-     * egjs projects are licensed under the MIT license
-     */
     /**
      * A component that manages viewport size
      * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
@@ -1345,7 +1365,8 @@ version: 4.8.0
       /**
        * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
        */
-      function Viewport(el) {
+      function Viewport(flicking, el) {
+        this._flicking = flicking;
         this._el = el;
         this._width = 0;
         this._height = 0;
@@ -1461,8 +1482,21 @@ version: 4.8.0
       __proto.resize = function () {
         var el = this._el;
         var elStyle = getStyle(el);
-        this._width = el.clientWidth;
-        this._height = el.clientHeight;
+        var useFractionalSize = this._flicking.useFractionalSize;
+        this._width = getElementSize({
+          el: el,
+          horizontal: true,
+          useFractionalSize: useFractionalSize,
+          useOffset: false,
+          style: elStyle
+        });
+        this._height = getElementSize({
+          el: el,
+          horizontal: false,
+          useFractionalSize: useFractionalSize,
+          useOffset: false,
+          style: elStyle
+        });
         this._padding = {
           left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
           right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
@@ -1916,7 +1950,7 @@ version: 4.8.0
     license: MIT
     author: NAVER Corp.
     repository: git+https://github.com/naver/agent.git
-    version: 2.4.2
+    version: 2.3.0
     */
     function some(arr, callback) {
       var length = arr.length;
@@ -1940,7 +1974,7 @@ version: 4.8.0
 
       return null;
     }
-    function getUserAgentString(agent) {
+    function getUserAgent(agent) {
       var userAgent = agent;
 
       if (typeof userAgent === "undefined") {
@@ -2106,18 +2140,15 @@ version: 4.8.0
     }, {
       test: "windows nt",
       id: "window"
-    }, {
-      test: "win32|windows",
-      id: "window"
     }, {
       test: "iphone|ipad|ipod",
       id: "ios",
       versionTest: "iphone os|cpu os"
     }, {
-      test: "macos|macintel|mac os x",
+      test: "mac os x",
       id: "mac"
     }, {
-      test: "android|linux armv81",
+      test: "android",
       id: "android"
     }, {
       test: "tizen",
@@ -2127,17 +2158,85 @@ version: 4.8.0
       id: "webos"
     }];
 
-    function isWebView(userAgent) {
-      return !!findPreset(WEBVIEW_PRESETS, userAgent).preset;
+    function parseUserAgentData(osData) {
+      var userAgentData = navigator.userAgentData;
+      var brands = (userAgentData.uaList || userAgentData.brands).slice();
+      var isMobile = userAgentData.mobile || false;
+      var firstBrand = brands[0];
+      var browser = {
+        name: firstBrand.brand,
+        version: firstBrand.version,
+        majorVersion: -1,
+        webkit: false,
+        webkitVersion: "-1",
+        chromium: false,
+        chromiumVersion: "-1",
+        webview: !!findPresetBrand(WEBVIEW_PRESETS, brands).brand
+      };
+      var os = {
+        name: "unknown",
+        version: "-1",
+        majorVersion: -1
+      };
+      browser.webkit = !browser.chromium && some(WEBKIT_PRESETS, function (preset) {
+        return findBrand(brands, preset);
+      });
+      var chromiumBrand = findPresetBrand(CHROMIUM_PRESETS, brands);
+      browser.chromium = !!chromiumBrand.brand;
+      browser.chromiumVersion = chromiumBrand.version;
+
+      if (!browser.chromium) {
+        var webkitBrand = findPresetBrand(WEBKIT_PRESETS, brands);
+        browser.webkit = !!webkitBrand.brand;
+        browser.webkitVersion = webkitBrand.version;
+      }
+
+      if (osData) {
+        var platform_1 = osData.platform.toLowerCase();
+        var result = find(OS_PRESETS, function (preset) {
+          return new RegExp("" + preset.test, "g").exec(platform_1);
+        });
+        os.name = result ? result.id : platform_1;
+        os.version = osData.platformVersion;
+      }
+
+      var browserBrand = findPresetBrand(BROWSER_PRESETS, brands);
+
+      if (browserBrand.brand) {
+        browser.name = browserBrand.brand;
+        browser.version = osData ? osData.uaFullVersion : browserBrand.version;
+      }
+
+      if (navigator.platform === "Linux armv8l") {
+        os.name = "android";
+      } else if (browser.webkit) {
+        os.name = isMobile ? "ios" : "mac";
+      }
+
+      if (os.name === "ios" && browser.webview) {
+        browser.version = "-1";
+      }
+
+      os.version = convertVersion(os.version);
+      browser.version = convertVersion(browser.version);
+      os.majorVersion = parseInt(os.version, 10);
+      browser.majorVersion = parseInt(browser.version, 10);
+      return {
+        browser: browser,
+        os: os,
+        isMobile: isMobile,
+        isHints: true
+      };
     }
-    function getLegacyAgent(userAgent) {
-      var nextAgent = getUserAgentString(userAgent);
+
+    function parseUserAgent(userAgent) {
+      var nextAgent = getUserAgent(userAgent);
       var isMobile = !!/mobi/g.exec(nextAgent);
       var browser = {
         name: "unknown",
         version: "-1",
         majorVersion: -1,
-        webview: isWebView(nextAgent),
+        webview: !!findPreset(WEBVIEW_PRESETS, nextAgent).preset,
         chromium: false,
         chromiumVersion: "-1",
         webkit: false,
@@ -2175,7 +2274,7 @@ version: 4.8.0
 
       if (browserPreset) {
         browser.name = browserPreset.id;
-        browser.version = browserVersion; // Early whale bugs
+        browser.version = browserVersion;
 
         if (browser.webview && os.name === "ios" && browser.name !== "safari") {
           browser.webview = false;
@@ -2190,80 +2289,6 @@ version: 4.8.0
         isHints: false
       };
     }
-
-    function getClientHintsAgent(osData) {
-      var userAgentData = navigator.userAgentData;
-      var brands = (userAgentData.uaList || userAgentData.brands).slice();
-      var fullVersionList = osData && osData.fullVersionList;
-      var isMobile = userAgentData.mobile || false;
-      var firstBrand = brands[0];
-      var platform = (osData && osData.platform || userAgentData.platform || navigator.platform).toLowerCase();
-      var browser = {
-        name: firstBrand.brand,
-        version: firstBrand.version,
-        majorVersion: -1,
-        webkit: false,
-        webkitVersion: "-1",
-        chromium: false,
-        chromiumVersion: "-1",
-        webview: !!findPresetBrand(WEBVIEW_PRESETS, brands).brand || isWebView(getUserAgentString())
-      };
-      var os = {
-        name: "unknown",
-        version: "-1",
-        majorVersion: -1
-      };
-      browser.webkit = !browser.chromium && some(WEBKIT_PRESETS, function (preset) {
-        return findBrand(brands, preset);
-      });
-      var chromiumBrand = findPresetBrand(CHROMIUM_PRESETS, brands);
-      browser.chromium = !!chromiumBrand.brand;
-      browser.chromiumVersion = chromiumBrand.version;
-
-      if (!browser.chromium) {
-        var webkitBrand = findPresetBrand(WEBKIT_PRESETS, brands);
-        browser.webkit = !!webkitBrand.brand;
-        browser.webkitVersion = webkitBrand.version;
-      }
-
-      var platfomResult = find(OS_PRESETS, function (preset) {
-        return new RegExp("" + preset.test, "g").exec(platform);
-      });
-      os.name = platfomResult ? platfomResult.id : "";
-
-      if (osData) {
-        os.version = osData.platformVersion;
-      }
-
-      if (fullVersionList && fullVersionList.length) {
-        var browserBrandByFullVersionList = findPresetBrand(BROWSER_PRESETS, fullVersionList);
-        browser.name = browserBrandByFullVersionList.brand || browser.name;
-        browser.version = browserBrandByFullVersionList.version || browser.version;
-      } else {
-        var browserBrand = findPresetBrand(BROWSER_PRESETS, brands);
-        browser.name = browserBrand.brand || browser.name;
-        browser.version = browserBrand.brand && osData ? osData.uaFullVersion : browserBrand.version;
-      }
-
-      if (browser.webkit) {
-        os.name = isMobile ? "ios" : "mac";
-      }
-
-      if (os.name === "ios" && browser.webview) {
-        browser.version = "-1";
-      }
-
-      os.version = convertVersion(os.version);
-      browser.version = convertVersion(browser.version);
-      os.majorVersion = parseInt(os.version, 10);
-      browser.majorVersion = parseInt(browser.version, 10);
-      return {
-        browser: browser,
-        os: os,
-        isMobile: isMobile,
-        isHints: true
-      };
-    }
     /**
      * Extracts browser and operating system information from the user agent string.
      * @ko 유저 에이전트 문자열에서 브라우저와 운영체제 정보를 추출한다.
@@ -2278,9 +2303,9 @@ version: 4.8.0
 
     function agent(userAgent) {
       if (typeof userAgent === "undefined" && hasUserAgentData()) {
-        return getClientHintsAgent();
+        return parseUserAgentData();
       } else {
-        return getLegacyAgent(userAgent);
+        return parseUserAgent(userAgent);
       }
     }
 
@@ -6132,7 +6157,9 @@ version: 4.8.0
         };
 
         this._onAxesChange = function () {
-          _this._dragged = true;
+          var _a;
+
+          _this._dragged = !!((_a = _this._panInput) === null || _a === void 0 ? void 0 : _a.isEnabled());
         };
 
         this._preventClickWhenDragged = function (e) {
@@ -7113,10 +7140,13 @@ version: 4.8.0
           targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
         } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
           // Move to the adjacent panel
-          targetAnchor = this._findAdjacentAnchor(posDelta, anchorAtCamera);
+          targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
         } else {
           // Restore to active panel
-          targetAnchor = anchorAtCamera;
+          return this.moveToPanel(activeAnchor.panel, {
+            duration: duration,
+            axesEvent: axesEvent
+          });
         }
 
         this._triggerIndexChangeEvent(targetAnchor.panel, position, axesEvent);
@@ -7187,11 +7217,20 @@ version: 4.8.0
         }
       };
 
-      __proto._findAdjacentAnchor = function (posDelta, anchorAtCamera) {
+      __proto._findAdjacentAnchor = function (position, posDelta, anchorAtCamera) {
         var _a;
 
         var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
+
+        if (camera.circularEnabled) {
+          var anchorIncludePosition = camera.findAnchorIncludePosition(position);
+
+          if (anchorIncludePosition && anchorIncludePosition.position !== anchorAtCamera.position) {
+            return anchorIncludePosition;
+          }
+        }
+
         var adjacentAnchor = (_a = posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) !== null && _a !== void 0 ? _a : anchorAtCamera;
         return adjacentAnchor;
       };
@@ -8947,7 +8986,7 @@ version: 4.8.0
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-imready
-    version: 1.3.0
+    version: 1.2.0
     */
 
     /*! *****************************************************************************
@@ -9034,12 +9073,8 @@ version: 4.8.0
 
       return !!target.getAttribute(prefix + "width");
     }
-    function hasLoadingAttribute(target, prefix) {
-      if (prefix === void 0) {
-        prefix = "data-";
-      }
-
-      return "loading" in target && target.getAttribute("loading") === "lazy" || !!target.getAttribute(prefix + "lazy");
+    function hasLoadingAttribute(target) {
+      return "loading" in target && target.getAttribute("loading") === "lazy";
     }
     function hasSkipAttribute(target, prefix) {
       if (prefix === void 0) {
@@ -9164,11 +9199,6 @@ version: 4.8.0
 
           if (e && e.type === "error") {
             _this.onError(_this.element);
-          }
-
-          if (_this.hasLoading && _this.checkElement()) {
-            // I'm not ready
-            return;
           } // I'm pre-ready and ready!
 
 
@@ -9184,7 +9214,7 @@ version: 4.8.0
         var prefix = _this.options.prefix;
         _this.hasDataSize = hasSizeAttribute(element, prefix);
         _this.isSkip = hasSkipAttribute(element, prefix);
-        _this.hasLoading = hasLoadingAttribute(element, prefix);
+        _this.hasLoading = hasLoadingAttribute(element);
         return _this;
       }
 
@@ -9570,7 +9600,6 @@ version: 4.8.0
 
         var tagName = element.tagName.toLowerCase();
         var loaders = this.options.loaders;
-        var prefix = options.prefix;
         var tags = Object.keys(loaders);
 
         if (loaders[tagName]) {
@@ -9580,7 +9609,7 @@ version: 4.8.0
         var loader = new ElementLoader(element, options);
         var children = toArray(element.querySelectorAll(tags.join(", ")));
         loader.setHasLoading(children.some(function (el) {
-          return hasLoadingAttribute(el, prefix);
+          return hasLoadingAttribute(el);
         }));
         var withPreReady = false;
         var childrenImReady = this.clone().on("error", function (e) {
@@ -9665,13 +9694,13 @@ version: 4.8.0
          * ```
          */
 
-        this.trigger(new ComponentEvent$1("error", {
+        this.trigger("error", {
           element: info.element,
           index: index,
           target: target,
           errorCount: this.getErrorCount(),
           totalErrorCount: ++this.totalErrorCount
-        }));
+        });
       };
 
       __proto.onPreReadyElement = function (index) {
@@ -9705,7 +9734,7 @@ version: 4.8.0
          * ```
          */
 
-        this.trigger(new ComponentEvent$1("preReadyElement", {
+        this.trigger("preReadyElement", {
           element: info.element,
           index: index,
           preReadyCount: this.preReadyCount,
@@ -9715,7 +9744,7 @@ version: 4.8.0
           isReady: this.isReady(),
           hasLoading: info.hasLoading,
           isSkip: info.isSkip
-        }));
+        });
       };
 
       __proto.onPreReady = function () {
@@ -9747,12 +9776,12 @@ version: 4.8.0
          * ```
          */
 
-        this.trigger(new ComponentEvent$1("preReady", {
+        this.trigger("preReady", {
           readyCount: this.readyCount,
           totalCount: this.totalCount,
           isReady: this.isReady(),
           hasLoading: this.hasLoading()
-        }));
+        });
       };
 
       __proto.onReadyElement = function (index) {
@@ -9786,7 +9815,7 @@ version: 4.8.0
          * ```
          */
 
-        this.trigger(new ComponentEvent$1("readyElement", {
+        this.trigger("readyElement", {
           index: index,
           element: info.element,
           hasError: info.hasError,
@@ -9800,7 +9829,7 @@ version: 4.8.0
           hasLoading: info.hasLoading,
           isPreReadyOver: this.isPreReadyOver,
           isSkip: info.isSkip
-        }));
+        });
       };
 
       __proto.onReady = function () {
@@ -9834,11 +9863,11 @@ version: 4.8.0
          * });
          * ```
          */
-        this.trigger(new ComponentEvent$1("ready", {
+        this.trigger("ready", {
           errorCount: this.getErrorCount(),
           totalErrorCount: this.totalErrorCount,
           totalCount: this.totalCount
-        }));
+        });
       };
 
       __proto.getErrorCount = function () {
@@ -10463,11 +10492,13 @@ version: 4.8.0
         } : {
           height: panelSize
         };
-        var firstPanelSizeObj = {
+
+        var firstPanelSizeObj = __assign$2({
           size: panelSize,
-          height: referencePanel.height,
           margin: referencePanel.margin
-        };
+        }, !flicking.horizontal && {
+          height: referencePanel.height
+        });
 
         if (!flicking.noPanelStyleOverride) {
           this._strategy.updatePanelSizes(flicking, panelSizeObj);
@@ -11001,17 +11032,32 @@ version: 4.8.0
 
 
       __proto.resize = function (cached) {
+        var _a;
+
         var el = this.element;
         var flicking = this._flicking;
-        var horizontal = flicking.horizontal;
+        var horizontal = flicking.horizontal,
+            useFractionalSize = flicking.useFractionalSize;
 
         if (cached) {
           this._size = cached.size;
           this._margin = __assign$2({}, cached.margin);
-          this._height = cached.height;
+          this._height = (_a = cached.height) !== null && _a !== void 0 ? _a : getElementSize({
+            el: el,
+            horizontal: false,
+            useFractionalSize: useFractionalSize,
+            useOffset: true,
+            style: getStyle(el)
+          });
         } else {
           var elStyle = getStyle(el);
-          this._size = horizontal ? el.offsetWidth : el.offsetHeight;
+          this._size = getElementSize({
+            el: el,
+            horizontal: horizontal,
+            useFractionalSize: useFractionalSize,
+            useOffset: true,
+            style: elStyle
+          });
           this._margin = horizontal ? {
             prev: parseFloat(elStyle.marginLeft || "0"),
             next: parseFloat(elStyle.marginRight || "0")
@@ -11019,7 +11065,13 @@ version: 4.8.0
             prev: parseFloat(elStyle.marginTop || "0"),
             next: parseFloat(elStyle.marginBottom || "0")
           };
-          this._height = horizontal ? el.offsetHeight : this._size;
+          this._height = horizontal ? getElementSize({
+            el: el,
+            horizontal: false,
+            useFractionalSize: useFractionalSize,
+            useOffset: true,
+            style: elStyle
+          }) : this._size;
         }
 
         this.updatePosition();
@@ -11729,10 +11781,12 @@ version: 4.8.0
             resizeDebounce = _8 === void 0 ? 0 : _8,
             _9 = _b.maxResizeDebounce,
             maxResizeDebounce = _9 === void 0 ? 100 : _9,
-            _10 = _b.externalRenderer,
-            externalRenderer = _10 === void 0 ? null : _10,
-            _11 = _b.renderExternal,
-            renderExternal = _11 === void 0 ? null : _11;
+            _10 = _b.useFractionalSize,
+            useFractionalSize = _10 === void 0 ? false : _10,
+            _11 = _b.externalRenderer,
+            externalRenderer = _11 === void 0 ? null : _11,
+            _12 = _b.renderExternal,
+            renderExternal = _12 === void 0 ? null : _12;
 
         var _this = _super.call(this) || this; // Internal states
 
@@ -11772,10 +11826,11 @@ version: 4.8.0
         _this._useResizeObserver = useResizeObserver;
         _this._resizeDebounce = resizeDebounce;
         _this._maxResizeDebounce = maxResizeDebounce;
+        _this._useFractionalSize = useFractionalSize;
         _this._externalRenderer = externalRenderer;
         _this._renderExternal = renderExternal; // Create core components
 
-        _this._viewport = new Viewport(getElement(root));
+        _this._viewport = new Viewport(_this, getElement(root));
         _this._autoResizer = new AutoResizer(_this);
         _this._renderer = _this._createRenderer();
         _this._camera = _this._createCamera();
@@ -12688,6 +12743,23 @@ version: 4.8.0
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "useFractionalSize", {
+        /**
+         * By enabling this, Flicking will calculate all internal size with CSS width computed with getComputedStyle.
+         * This can prevent 1px offset issue in some cases where panel size has the fractional part.
+         * All sizes will have the original size before CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform} is applied on the element.
+         * @ko 이 옵션을 활성화할 경우, Flicking은 내부의 모든 크기를 {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect getBoundingClientRect}를 이용하여 계산합니다.
+         * 이를 통해, 패널 크기에 소수점을 포함할 경우에 발생할 수 있는 일부 1px 오프셋 이슈를 해결 가능합니다.
+         * 모든 크기는 CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform}이 엘리먼트에 적용되기 이전의 크기를 사용할 것입니다.
+         * @type {boolean}
+         * @default false
+         */
+        get: function () {
+          return this._useFractionalSize;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "externalRenderer", {
         /**
          * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
@@ -13436,9 +13508,10 @@ version: 4.8.0
         var renderer = this._renderer;
         var control = this._control;
         var camera = this._camera;
-        var initialPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
-        if (!initialPanel) return;
-        var nearestAnchor = camera.findNearestAnchor(initialPanel.position);
+        var defaultPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
+        if (!defaultPanel) return;
+        var nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
+        var initialPanel = nearestAnchor && defaultPanel.index !== nearestAnchor.panel.index ? nearestAnchor.panel : defaultPanel;
         control.setActive(initialPanel, null, false);
 
         if (!nearestAnchor) {
@@ -13499,7 +13572,7 @@ version: 4.8.0
        */
 
 
-      Flicking.VERSION = "4.8.0";
+      Flicking.VERSION = "4.9.1";
       return Flicking;
     }(Component);