@egjs/flicking 4.8.1 → 4.9.0

package/dist/flicking.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.8.1
+version: 4.9.0
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready')) :
@@ -780,6 +780,29 @@ version: 4.8.1
 
       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;
@@ -814,6 +837,7 @@ version: 4.8.1
         isBetween: isBetween,
         circulateIndex: circulateIndex,
         range: range,
+        getElementSize: getElementSize,
         setPrototypeOf: setPrototypeOf
     };
 
@@ -862,10 +886,6 @@ version: 4.8.1
       return FlickingError;
     }(Error);
 
-    /*
-     * Copyright (c) 2015 NAVER Corp.
-     * egjs projects are licensed under the MIT license
-     */
     /**
      * A component that manages viewport size
      * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
@@ -877,7 +897,8 @@ version: 4.8.1
       /**
        * @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;
@@ -993,8 +1014,21 @@ version: 4.8.1
       __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,
@@ -6068,7 +6102,8 @@ version: 4.8.1
       __proto.resize = function (cached) {
         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;
@@ -6076,7 +6111,13 @@ version: 4.8.1
           this._height = cached.height;
         } 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")
@@ -6084,7 +6125,13 @@ version: 4.8.1
             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();
@@ -6794,10 +6841,12 @@ version: 4.8.1
             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
 
@@ -6837,10 +6886,11 @@ version: 4.8.1
         _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();
@@ -7753,6 +7803,23 @@ version: 4.8.1
         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.
@@ -8564,7 +8631,7 @@ version: 4.8.1
        */
 
 
-      Flicking.VERSION = "4.8.1";
+      Flicking.VERSION = "4.9.0";
       return Flicking;
     }(Component);