Merge branch 'beta'

# Conflicts: # package.json # yarn.lock
tworrisb · May 16, 2019 · c6f4edb · c6f4edb
2 parents 224eff7 + 6a41e07
commit c6f4edb
Show file tree

Hide file tree

Showing 13 changed files with 190 additions and 72 deletions.
diff --git a/example/bundle.js b/example/bundle.js
diff --git a/example/index.html b/example/index.html
@@ -20,7 +20,9 @@ <h1 class="site-header-title">Muban <span>Transition Component</span></h1>
       class="dummy-foo"
       data-scroll-component>
 
-      <span class="dummy-foo-bg abs-fill js-background"></span>
+      <span class="dummy-foo-bg abs-fill js-background">
+        <div class="progress js-progress"></div>
+      </span>
 
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
@@ -42,7 +44,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       data-component="dummy-foo"
       class="dummy-foo"
       data-scroll-component>
-      <span class="dummy-foo-bg abs-fill js-background"></span>
+      <span class="dummy-foo-bg abs-fill js-background">
+        <div class="progress js-progress"></div>
+      </span>
 
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
@@ -66,7 +70,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       data-component="dummy-foo"
       class="dummy-foo"
       data-scroll-component>
-      <span class="dummy-foo-bg abs-fill js-background"></span>
+      <span class="dummy-foo-bg abs-fill js-background">
+        <div class="progress js-progress"></div>
+      </span>
 
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
@@ -90,7 +96,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       data-component="dummy-foo"
       class="dummy-foo"
       data-scroll-component>
-      <span class="dummy-foo-bg abs-fill js-background"></span>
+      <span class="dummy-foo-bg abs-fill js-background">
+        <div class="progress js-progress"></div>
+      </span>
 
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
@@ -114,7 +122,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       data-component="dummy-foo"
       class="dummy-foo"
       data-scroll-component>
-      <span class="dummy-foo-bg abs-fill js-background"></span>
+      <span class="dummy-foo-bg abs-fill js-background">
+        <div class="progress js-progress"></div>
+      </span>
 
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
@@ -138,7 +148,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       data-component="dummy-foo"
       class="dummy-foo"
       data-scroll-component>
-      <span class="dummy-foo-bg abs-fill js-background"></span>
+      <span class="dummy-foo-bg abs-fill js-background">
+        <div class="progress js-progress"></div>
+      </span>
 
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>

diff --git a/example/src/App.ts b/example/src/App.ts
@@ -8,11 +8,22 @@ export default class App extends CoreComponent{
   static displayName: string = 'app-root';
 
   public scrollTrackerComponentManager: ScrollTrackerComponentManager<IMubanTransitionMixin> = new ScrollTrackerComponentManager<IMubanTransitionMixin>({
-    config: {
-      setDebugLabel: true,
-      debugBorderColor: 'red',
-      resizeDebounce: 100,
-    }
+    inViewProgressEnabled: true,
+    setDebugLabel: true,
+    debugBorderColor: 'red',
+    scrollThrottle: 100,
+    resizeDebounce: 100,
+
+    enableSmoothScroll: true,
+    smoothScrollOptions: {
+      damping: 0.1,
+      thumbMinSize: 20,
+      renderByPixels: true,
+      alwaysShowTracks: false,
+      continuousScrolling: true,
+      wheelEventTarget: null,
+      plugins: {},
+    },
   });
 
   constructor(element: HTMLElement) {
@@ -36,7 +47,6 @@ export default class App extends CoreComponent{
     // clean up stuff when hot reloading
     if (this.scrollTrackerComponentManager) {
       this.scrollTrackerComponentManager.dispose();
-      this.scrollTrackerComponentManager = null;
     }
   }
 }
diff --git a/example/src/component/block/DummyFoo/DummyFoo.ts b/example/src/component/block/DummyFoo/DummyFoo.ts
@@ -1,22 +1,33 @@
 import CoreComponent from 'muban-core/lib/CoreComponent';
-import getComponentForElement from 'muban-core/lib/utils/getComponentForElement';
-import DummyFooPopup from '../../DummyFooPopup/DummyFooPopup';
+// import getComponentForElement from 'muban-core/lib/utils/getComponentForElement';
+// import DummyFooPopup from '../../DummyFooPopup/DummyFooPopup';
 import DummyFooTransitionController from './DummyFooTransitionController';
 import mubanTransitionMixin from '../../../../../src/lib/mixin/MubanTransitionMixin';
 import mubanTransitionCoreMixin from '../../../../../src/lib/mixin/MubanTransitionCoreMixin';
 
 export default class DummyFoo extends mubanTransitionMixin(mubanTransitionCoreMixin(CoreComponent)) {
   static displayName: string = 'dummy-foo';
-  public transitionController: DummyFooTransitionController;
+  // public transitionController: DummyFooTransitionController;
 
-  private dummyFooPopup: DummyFoo;
+  // private dummyFooPopup: DummyFoo;
 
   constructor(public element: HTMLElement) {
     super(element);
 
     this.transitionController = new DummyFooTransitionController(this);
     this.addEventListeners();
-    this.dummyFooPopup = getComponentForElement(this.element.querySelector(`[data-component="${DummyFooPopup.displayName}"]`));
+    // this.dummyFooPopup = getComponentForElement(this.element.querySelector(`[data-component="${DummyFooPopup.displayName}"]`));
+  }
+
+  /**
+   * @public
+   * @method inViewProgress
+   */
+  public inViewProgress(progress:number):void
+  {
+    (<HTMLElement>this.element.querySelector('.js-progress')).style.width = `${progress * 100}%`;
+
+    console.log(progress);
   }
 
   /**
@@ -28,7 +39,6 @@ export default class DummyFoo extends mubanTransitionMixin(mubanTransitionCoreMi
 
   }
 
-
   /**
    * @private
    * @method addEventListeners
@@ -42,7 +52,7 @@ export default class DummyFoo extends mubanTransitionMixin(mubanTransitionCoreMi
    * @method handleOpenPopupClick
    */
   private handleOpenPopupClick(): void {
-    this.dummyFooPopup.transitionIn();
+    // this.dummyFooPopup.transitionIn();
   }
 
   public dispose() {

diff --git a/example/src/component/block/DummyFoo/DummyFooTransitionController.ts b/example/src/component/block/DummyFoo/DummyFooTransitionController.ts
@@ -18,7 +18,7 @@ class DummyFooTransitionController extends MubanTransitionController {
    */
   protected setupTransitionInTimeline(
     timeline:TimelineMax,
-    parent:DummyFoo
+    parent:any
   ): void {
     parent.test();
 

diff --git a/example/src/style/screen.css b/example/src/style/screen.css
@@ -4,6 +4,7 @@ body {
   margin: 0;
   color: #6c757d;
   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
+  height: 100%;
 }
 
 h1,h2,h3,h4 {
@@ -97,6 +98,14 @@ h1,h2,h3,h4 {
   position: relative;
 }
 
+.progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background-color: blue;
+}
 
 .site-header {
   position: fixed;
@@ -128,6 +137,7 @@ h1,h2,h3,h4 {
   text-align: center;
   white-space: nowrap;
   color: #41a6ff;
+  border-bottom: 1px dotted white;
 }
 
 .dummy-foo-bg {
@@ -139,7 +149,7 @@ h1,h2,h3,h4 {
 }
 
 .dummy-foo:nth-child(n+2) .dummy-foo-bg {
-  background-color: white;
+  /*background-color: white;*/
 }
 
   /* Dummy Foo POPUP */

diff --git a/package.json b/package.json
@@ -84,7 +84,7 @@
     "eslint-import-resolver-typescript": "^1.0.2",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-prettier": "^2.4.0",
-    "gsap": "^2.1.2",
+    "gsap": "^2.0.1",
     "husky": "^0.14.3",
     "jsdom": "^11.5.1",
     "jsdom-global": "^3.0.2",
@@ -110,10 +110,10 @@
     "lodash": "^4.17.5",
     "muban-core": "^1.8.3",
     "node-run-cmd": "^1.0.1",
-    "scroll-tracker-component-manager": "^1.1.1",
+    "scroll-tracker-component-manager": "^2.1.1",
     "seng-disposable": "^1.1.3",
     "seng-event": "^1.2.3",
-    "transition-controller": "^1.2.12"
+    "transition-controller": "^1.3.1"
   },
   "peerDependencies": {
     "gsap": "^2.0.1"

diff --git a/src/lib/interface/IMubanTransitionMixin.ts b/src/lib/interface/IMubanTransitionMixin.ts
@@ -31,6 +31,13 @@ export interface IMubanTransitionMixin extends IMubanTransitionCoreMixin {
    * it's not transitioned in it will still try to transitionIn */
   beyondView(): void;
 
+  /**
+   * @public
+   * @method inViewProgress
+   * @description triggered every time the scroll-position changes and your component is within the viewport. This method will have the parameter progress which is a number between 0-1.
+   */
+  inViewProgress(progress: number): void;
+
   /**
    * Calling transition in will trigger transitionIn on your transition controller and
    * start the desired timeline.
@@ -75,4 +82,19 @@ export interface IMubanTransitionMixin extends IMubanTransitionCoreMixin {
    * Setting this number to for example 0.5 will trigger the enterView method when the component is already visible for 50% within your viewport.
    */
   enterViewThreshold: number;
+
+  /**
+   * @description: same as enterViewThreshold but then used as an offset from when your inViewProgress will start
+   */
+  inViewProgressThreshold: number;
+
+  /**
+   * @description: PropertyName of the component that should is by default set to false. Will be set to value if it has passed the viewport once already
+   */
+  hasEntered: boolean;
+
+  /**
+   * @description: PropertyName of the component where we will store the progress of its visibility
+   */
+  currentViewProgress: number;
 }
diff --git a/src/lib/mixin/MubanTransitionMixin.ts b/src/lib/mixin/MubanTransitionMixin.ts
@@ -9,7 +9,9 @@ function mubanTransitionMixin<TBase extends Constructor<IMubanTransitionCoreMixi
   return class MubanTransitionMixin extends Base {
     public transitionController: AbstractTransitionController<IMubanTransitionMixin>;
     public enterViewThreshold: number = 0.25;
+    public inViewProgressThreshold: number = 0;
     public hasEntered: boolean = false;
+    public currentViewProgress: number = 0;
 
     constructor(...args: any[]) {
       super(...args);
@@ -24,6 +26,9 @@ function mubanTransitionMixin<TBase extends Constructor<IMubanTransitionCoreMixi
       this.stopLoopingAnimation();
     }
 
+    // @ts-ignore
+    public inViewProgress(progress: number): void {}
+
     public beyondView(): void {
       if (!this.hasEntered) {
         // Todo maybe seek to progress(1) to avoid (unnecessary) performance issue's

diff --git a/test/MubanTransitionMixin.spec.ts b/test/MubanTransitionMixin.spec.ts
@@ -60,6 +60,12 @@ describe('MubanTransitionMixin.spec', () => {
     });
   });
 
+  describe('inViewProgress', function () {
+    it('should inViewProgress the component', function () {
+      expect(component.inViewProgress()).to.be.undefined;
+    });
+  });
+
   describe('leaveView', function () {
     it('should leaveView the component', function () {
       expect(component.leaveView()).to.be.undefined;

diff --git a/test/util/App.ts b/test/util/App.ts
@@ -7,16 +7,14 @@ import AppTransitionController from './AppTransitionController';
 import mubanTransitionCoreMixin from '../../src/lib/mixin/MubanTransitionCoreMixin';
 import mubanTransitionMixin from '../../src/lib/mixin/MubanTransitionMixin';
 
-export default class App extends mubanTransitionMixin(mubanTransitionCoreMixin(CoreComponent)){
+export default class App extends mubanTransitionMixin(mubanTransitionCoreMixin(CoreComponent)) {
   static displayName: string = 'app-root';
   public transitionController: AppTransitionController;
 
   public scrollTrackerComponentManager: ScrollTrackerComponentManager<IMubanTransitionMixin> = new ScrollTrackerComponentManager<IMubanTransitionMixin>({
-    config: {
-      setDebugLabel: true,
-      debugBorderColor: 'red',
-      resizeDebounce: 100,
-    }
+    setDebugLabel: true,
+    debugBorderColor: 'red',
+    resizeDebounce: 100,
   });
 
   constructor(element: HTMLElement) {

diff --git a/tool/convert/src/app/component/layout/app/App.ts b/tool/convert/src/app/component/layout/app/App.ts
@@ -7,11 +7,22 @@ export default class App extends AbstractComponent {
   static displayName: string = 'app-root';
 
   public scrollTrackerComponentManager: ScrollTrackerComponentManager<IMubanTransitionMixin> = new ScrollTrackerComponentManager<IMubanTransitionMixin>({
-    config: {
-      setDebugLabel: true,
-      debugBorderColor: 'red',
-      resizeDebounce: 100,
-    }
+    inViewProgressEnabled: false,
+    setDebugLabel: true,
+    debugBorderColor: 'red',
+    scrollThrottle: 100,
+    resizeDebounce: 100,
+
+    enableSmoothScroll: false,
+    smoothScrollOptions: {
+      damping: 0.1,
+      thumbMinSize: 20,
+      renderByPixels: true,
+      alwaysShowTracks: false,
+      continuousScrolling: true,
+      wheelEventTarget: null,
+      plugins: {},
+    },
   });
 
   constructor(element: HTMLElement) {
@@ -31,7 +42,6 @@ export default class App extends AbstractComponent {
     // clean up stuff when hot reloading
     if (this.scrollTrackerComponentManager) {
       this.scrollTrackerComponentManager.dispose();
-      this.scrollTrackerComponentManager = null;
     }
   }
 }