feat: add intersection option (naver#46)

* docs: remove auto generated docs file

* feat: add intersection option

* test: test intersection option

* docs: add intersection example

* fix: fix ga

* chore: bump @cfcs, @egjs/axes

Author: daybrush

jsdoc.json

@@ -36,7 +36,7 @@
     },
     "applicationName": "eg.Conveyer",
     "disqus": "egjs",
-    "googleAnalytics": "G-3VG8ZPB0QT",
+    "googleAnalytics": "G-LWLTCXMENE",
     "openGraph": {
       "title": "",
       "type": "website",

packages/conveyer/package.json

@@ -36,8 +36,8 @@
 		"dist/*"
 	],
 	"dependencies": {
-		"@cfcs/core": "~0.0.13",
-		"@egjs/axes": "^3.8.5",
+		"@cfcs/core": "^0.1.0",
+		"@egjs/axes": "^3.9.0",
 		"@egjs/component": "^3.0.1"
 	},
 	"devDependencies": {

packages/conveyer/src/Conveyer.ts

@@ -164,6 +164,7 @@ class Conveyer extends Component<ConveyerEvents> {
     const length = items.length;
     const endPos = pos + size;
     const sibling = options.sibling;
+    const intersection = options.intersection;
     const startVirtualItem = { pos: 0, size: 0 };
     const endVirtualItem = { pos: scrollSize, size: 0 };
 
@@ -180,13 +181,13 @@ class Conveyer extends Component<ConveyerEvents> {
       if (pos < 0) {
         return null;
       }
-      const selectedItems = [...items].reverse().filter(item => {
+      const selectedItems = items.filter(item => {
         const itemSize = item.size;
         const dist = item.pos - pos;
         const dist2 = dist + itemSize;
 
-        return (dist >= 0) || (dist2 >= 0 && (!itemSize || Math.abs(dist2) / itemSize >= hitTest));
-      }).reverse();
+        return (dist >= 0) || (dist2 >= 0 && (intersection || !itemSize || Math.abs(dist2) / itemSize >= hitTest));
+      });
 
       selectedItem = (selectedItems[0] === startVirtualItem && selectedItems[1]) || selectedItems[0];
     } else if (target === "end") {
@@ -198,7 +199,7 @@ class Conveyer extends Component<ConveyerEvents> {
         const dist = item.pos + itemSize - endPos;
         const dist2 = dist - itemSize;
 
-        return dist <= 0 || (dist2 <= 0 && (!itemSize || Math.abs(dist2) / itemSize >= hitTest));
+        return dist <= 0 || (dist2 <= 0 && (intersection || !itemSize || Math.abs(dist2) / itemSize >= hitTest));
       }).reverse();
 
       selectedItem = (selectedItems[0] === endVirtualItem && selectedItems[1]) || selectedItems[0];
@@ -208,16 +209,16 @@ class Conveyer extends Component<ConveyerEvents> {
         const dist = item.pos + itemSize - pos;
         const dist2 = dist - itemSize;
 
-        return dist <= 0 || (dist2 <= 0 && (!itemSize || Math.abs(dist2) / itemSize >= hitTest));
+        return dist <= 0 || (dist2 <= 0 && (intersection || !itemSize || Math.abs(dist2) / itemSize >= hitTest));
       }).reverse()[0];
     } else if (target === "next") {
-      selectedItem = items.reverse().filter(item => {
+      selectedItem = items.filter(item => {
         const itemSize = item.size;
         const dist = item.pos - endPos;
         const dist2 = dist + itemSize;
 
-        return dist >= 0 || (dist2 >= 0 && (!itemSize || Math.abs(dist2) / itemSize >= hitTest));
-      }).reverse()[0];
+        return dist >= 0 || (dist2 >= 0 && (intersection || !itemSize || Math.abs(dist2) / itemSize >= hitTest));
+      })[0];
     } else {
       return this._getItem(target);
     }
@@ -435,6 +436,7 @@ class Conveyer extends Component<ConveyerEvents> {
     if (options.useDrag) {
       axes.connect(options.horizontal ? ["scroll", ""] : ["", "scroll"], new PanInput(scrollAreaElement, {
         preventClickOnDrag: options.preventClickOnDrag,
+        preventDefaultOnDrag: options.preventDefaultOnDrag,
         inputType: ["mouse"],
         touchAction: "auto",
       }));

packages/conveyer/src/types.ts

@@ -16,6 +16,7 @@ import Conveyer from "./Conveyer";
  * @property - The maximum amount of time the scroll event does not fire for the finishScroll event to be triggered. (default: 100) <ko> finishScroll 이벤트가 발생되기 위한 scroll 이벤트가 발생하지 않는 최대 시간. (default: 100)</ko>
  * @property - Whether to prevent being selected. (default: true) <ko>셀렉트가 되는 것을 막을지 여부. (default: true) </ko>
  * @property - Whether to prevent click event when dragging. (default: false) <ko>드래그하면 클릭이벤트를 막을지 여부. (default: true)</ko>
+ * @property - Whether to use the {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} when the user starts dragging <ko>사용자가 드래그를 시작할 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} 실행 여부</ko>
  * @property - Whether to automatically initialize when an instance is created. If set to false, initialization is possible while calling the init method. (default: true) <ko>인스턴스를 생성할 때 자동으로 초기화할지 여부. false로 설정하면 init 메서드를 호출하면서 초기화가 가능하다. (default: true)</ko>
  * @property - If this option is enabled on a Conveyer placed inside an egjs component that has the same scroll direction including the Conveyer itself. The parent component moves in the same direction after the Conveyer reaches the first/last scroll position. <ko>Conveyer 자신을 포함해서 동일한 스크롤 방향을 가진 egjs 컴포넌트 내부에 배치된 Conveyer에서 이 옵션을 활성화하면 Conveyer가 첫/마지막 스크롤 위치에 도달한 뒤부터 같은 방향으로 상위 컴포넌트가 움직인다.</ko>
  */
@@ -28,6 +29,7 @@ export interface ConveyerOptions {
   scrollDebounce?: number;
   preventDefault?: boolean;
   preventClickOnDrag?: boolean;
+  preventDefaultOnDrag?: boolean;
   autoInit?: boolean;
   nested?: boolean;
 }
@@ -60,11 +62,25 @@ export interface ConveyerReactiveState {
 
 /**
  * @typedef
- * @property - size ratio to find items. (default: 1) <ko>아이템을 찾기 위한 사이즈 비율. (default: 1)</ko>
- * @property - The number of items next to the item's index to return. (default: 0) <ko>해당 아이템의 index에서 얼마나 옆에 있는 아이템을 반환할지 개수 (default: 0)</ko>
  */
 export interface FindItemOptions {
+  /**
+   * size ratio to find items.
+   * <ko>아이템을 찾기 위한 사이즈 비율.</ko>
+   * @default 1
+   */
   hitTest?: number;
+  /**
+   * Whether to include items that intersect on the side
+   * <ko>사이드에 교차하는 아이템까지 포함할지 여부.</ko>
+   * @default 0
+   */
+  intersection?: boolean;
+  /**
+   * The number of items next to the item's index to return.
+   * <ko>해당 아이템의 index에서 얼마나 옆에 있는 아이템을 반환할지 개수.</ko>
+   * @default 0
+   */
   sibling?: number;
 }
 

packages/conveyer/test/unit/Conveyer.spec.ts

@@ -531,6 +531,51 @@ describe("test Conveyer", () => {
         expect(items.scrollLeft).to.be.equals(400);
         expect(conveyer.scrollPos).to.be.equals(400);
       });
+      it("should check it target(3) moves start when target is end (intersection) and align is start", async () => {
+        // Given
+        const items = document.querySelector<HTMLElement>(".items")!;
+
+        conveyer = new Conveyer(".items");
+
+        items.scrollBy(100, 0);
+        await waitFor(100);
+
+        // When
+        // 2 3(end) 4(intersection) 5(next)
+        // to
+        // 3 4 5
+        conveyer.scrollIntoView("end", {
+          align: "start",
+          intersection: true,
+        });
+        await waitFor(100);
+
+        // Then
+
+        expect(items.scrollLeft).to.be.equals(600);
+        expect(conveyer.scrollPos).to.be.equals(600);
+      });
+      it("should check it target(3) moves start when target is end (intersection) and align is start", async () => {
+        // Given
+        conveyer = new Conveyer(".items");
+        // 1 (prev) 2(intersection) 3 (start) 4 5
+        conveyer.scrollTo(300);
+        await waitFor(100);
+
+        // When
+        // to
+        // 1 2 3
+        conveyer.scrollIntoView("start", {
+          align: "end",
+          intersection: true,
+        });
+        await waitFor(100);
+
+        // Then
+        const items = document.querySelector<HTMLElement>(".items")!;
+        expect(items.scrollLeft).to.be.equals(0);
+        expect(conveyer.scrollPos).to.be.equals(0);
+      });
       it("should check it target(4) moves start when target is end and sibling(1)", async () => {
         // Given
         conveyer = new Conveyer(".items");

packages/docs/.gitignore

@@ -7,6 +7,8 @@
 # Generated files
 .docusaurus
 .cache-loader
+/i18n/ko
+/docs/api
 
 # Misc
 .DS_Store
@@ -18,3 +20,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+