Merge pull request #5 from gen-tech/horizontal-scroll

Horizontal scroll

.travis.yml

@@ -17,7 +17,6 @@ after_success:
   - npm run cover
 before_deploy:
   - npm run prepare-github-pages
-  - gtvu $TRAVIS_TAG --safe
 deploy:
   - provider: pages
     skip-cleanup: true

package.json

@@ -6,17 +6,17 @@
   "typings": "index.d.ts",
   "homepage": "https://gen-tech.github.io/scroll-manager",
   "scripts": {
-    "document": "typedoc --out docs --excludeNotExported --excludePrivate --disableOutputCheck --gitRevision master",
+    "document": "typedoc --out docs --excludeNotExported --excludePrivate --disableOutputCheck --gitRevision master --exclude \"**/*index.ts\"",
     "prepare-github-pages": "npm run document && echo \"\" > ./docs/.nojekyll",
     "test": "karma start ./karma.conf.js --single-run",
     "test:debug": "karma start",
     "cover": "cat ./coverage/lcovonly | coveralls",
     "publish:config-npm": "replace '<EMAIL>' $NPM_EMAIL .npmrc && replace '<TOKEN>' $NPM_TOKEN .npmrc",
     "publish:copy-files": "cpy 'LICENSE' 'README.md' '.npmrc' '.npmignore' 'package.json' dist",
     "publish:pack": "cd dist && npm pack",
-    "publish:prepare": "tsc && npm run publish:config-npm && npm run publish:copy-files && npm run publish:pack",
-    "publish:package": "npm publish ./dist/gen-tech-scroll-manager-$TRAVIS_TAG.tgz",
-    "prepare-and-publish": "npm run publish:prepare && npm run publish:package"
+    "publish:prepare": "gtvu $TRAVIS_TAG && tsc && npm run publish:config-npm && npm run publish:copy-files && npm run publish:pack",
+    "publish:publish": "npm publish ./dist/gen-tech-scroll-manager-$TRAVIS_TAG.tgz",
+    "prepare-and-publish": "npm run publish:prepare && npm run publish:publish"
   },
   "repository": {
     "type": "git",

src/index.ts

@@ -2,6 +2,21 @@ import { ScrollManager } from "./scroll-manager";
 
 export { ScrollManager } from "./scroll-manager";
 export { ScrollObserver } from "./scroll-observer";
-export { ScrollToElementOptions, ScrollableContent, ScrollDirection, ScrollPhase } from "./models";
 
+export {
+  ScrollToElementOptions,
+  ScrollableContent,
+  ScrollDirection,
+  ScrollPhase,
+  ScrollPosition,
+  HorizontalScrollDirection,
+  VerticalScrollDirection,
+  RemainingScrollPosition
+} from "./models";
+
+/**
+ * ### Scroll Manager
+ *
+ * Default Scroll Manager Instance
+ */
 export default new ScrollManager();

src/models/index.ts

@@ -1,4 +1,6 @@
+export * from "./scroll-buffer.interface";
 export * from "./scroll-direction.enum";
 export * from "./scroll-phase.enum";
+export * from "./scroll-position.interface";
 export * from "./scroll-to-element-options.interface";
 export * from "./scrollable-content.type";

src/models/scroll-buffer.interface.ts

@@ -0,0 +1,28 @@
+import { Observable } from "rxjs";
+import { ScrollPosition } from './scroll-position.interface';
+
+/**
+ * Scroll Buffer Object to use in every observer instance
+ */
+export interface Buffer {
+  /**
+   * Cache for observables of both positions
+   */
+  both: {
+    [key: number]: Observable<ScrollPosition>;
+  };
+
+  /**
+   * Cache for observable of x position
+   */
+  x: {
+    [key: number]: Observable<number>;
+  };
+
+  /**
+   * Cache for observable of x position
+   */
+  y: {
+    [key: number]: Observable<number>;
+  };
+}

src/models/scroll-direction.enum.ts

@@ -1,24 +1,23 @@
 /**
- * ### Scroll Direction
+ * ### Vertical Scroll Direction
  */
-export enum ScrollDirection {
-  /**
-   * Scrolling up
-   */
-  UP,
-
-  /**
-   * Scrolling down
-   */
-  DOWN,
+export enum VerticalScrollDirection {
+  TOP = 1 << 0,
+  BOTTOM = 1 << 1
+}
 
-  /**
-   * Scrolling left
-   */
-  LEFT,
+/**
+ * ### Horizontal Scroll Direction
+ */
+export enum HorizontalScrollDirection {
+  LEFT = 1 << 2,
+  RIGHT = 1 << 3
+}
 
-  /**
-   * Scrolling right
-   */
-  RIGHT,
-}
+/**
+ * ### Scroll Direction
+ */
+export const ScrollDirection = {
+  ...VerticalScrollDirection,
+  ...HorizontalScrollDirection
+}

src/models/scroll-position.interface.ts

@@ -0,0 +1,31 @@
+/**
+ * ### Scroll Position
+ * Represents the scroll positions
+ */
+export interface ScrollPosition {
+  /**
+   * Top position in pixels
+   */
+  top: number;
+
+  /**
+   * Left position in pixels
+   */
+  left: number;
+}
+
+/**
+ * ### Remaining Scroll Position
+ * Represents the remaining scroll positions
+ */
+export interface RemainingScrollPosition {
+  /**
+   * Bottom position in pixels
+   */
+  bottom: number;
+
+  /**
+   * Right position in pixels
+   */
+  right: number;
+}

src/models/scroll-to-element-options.interface.ts

@@ -12,5 +12,11 @@ export interface ScrollToElementOptions {
    * Space between the window top and the element will be scrolled into
    * @default 0
    */
-	offset?: number;
+	offsetTop?: number;
+
+  /**
+   * Space between the window left and the element will be scrolled into
+   * @default 0
+   */
+	offsetLeft?: number;
 }

src/models/scrollable-content.type.ts

@@ -1,4 +1,4 @@
 /**
- * Scrollable Content
+ * ### Scrollable Content
  */
 export type ScrollableContent = Document | HTMLElement;

src/scroll-manager.spec.ts

@@ -1,4 +1,3 @@
-import "jasmine";
 import { Subscription } from "rxjs";
 
 import { ScrollManager } from "./scroll-manager";
@@ -76,7 +75,7 @@ describe("Scroll Manager", () => {
     const manager = new ScrollManager();
 
     manager
-      .scrollToElement(testContainer, {offset: 50})
+      .scrollToElement(testContainer, {offsetTop: 50})
       .then(() => {
         expect(testContainer.getBoundingClientRect().top).toBe(-50);
         done();

src/scroll-manager.ts

@@ -2,7 +2,7 @@ import "smoothscroll-polyfill";
 
 import { first } from "rxjs/operators";
 import { ScrollObserver } from "./scroll-observer";
-import { ScrollToElementOptions, ScrollableContent } from './models';
+import { ScrollToElementOptions, ScrollableContent, ScrollPosition } from './models';
 
 /**
  * ### Scroll Manager
@@ -63,8 +63,8 @@ export class ScrollManager {
 	}
 
 	/**
-	 * ### Scroll the window into an element
-   *
+	 * ### Scroll to Element
+   * Scroll the window into an element
    * * * *
    * Example:
    * ```typescript
@@ -79,18 +79,22 @@ export class ScrollManager {
 	 */
 	public scrollToElement(
 		element: HTMLElement,
-		{animate = true, offset = 0 }: ScrollToElementOptions = {animate: true, offset: 0}
-	): Promise<number> {
-		window.scrollBy({top: element.getBoundingClientRect().top + offset, behavior: animate ? "smooth" : "instant"});
+		{animate = true, offsetTop = 0, offsetLeft = 0 }: ScrollToElementOptions = {animate: true, offsetTop: 0, offsetLeft: 0}
+	): Promise<ScrollPosition> {
+    const { top, left } = element.getBoundingClientRect();
+
+    window.scrollBy({top: top + offsetTop, left: left + offsetLeft, behavior: animate ? "smooth" : "instant"});
+
 		return this.root.scrollEnd.pipe(first()).toPromise();
 	}
 
 	/**
 	 * Scrolls to the top smoothly
    * @returns A promise which resolves when the scrolling is completed
 	 */
-	public scrollTop(): Promise<number> {
-		window.scrollTo({top: 0, behavior: "smooth"});
+	public scrollTop(): Promise<ScrollPosition> {
+    window.scrollTo({top: 0, behavior: "smooth"});
+
 		return this.root.scrollEnd.pipe(first()).toPromise();
 	}
 }