Setup

The muban-transition-component works with muban, first start with a clean checkout of the muban framework and then follow the steps!

Manual setup

Setup the seng-generator

Nobody likes typing the same code over and over again, to automatically generate code you can use the seng-generator. This generator uses templates to output code, the muban-transition-component includes custom templates that can be used for generating transition-blocks and transition-components. To add these templates to the seng-generator you run the following command in the root of your project:

sg init

This wil let you modify the default configuration of the seng-generator, in our case we want to modify the template path. When it comes up you should modify it to be the following:

./build-tools/generator-template,./node_modules/muban-transition-component/template

Scaffold the AbstractTranstionBlock/Component.ts

node ./node_modules/muban-transition-component/tool/scaffold.js

Modify/Covert the App.ts

Modify the src/app/component/layout/app/App.ts to add the scroll-tracker-component-manager, read documentation to see what options you can pass to the constructor.

import getComponentForElement from 'muban-core/lib/utils/getComponentForElement';
import { IMubanTransitionMixin, MubanTransitionVariable } from 'muban-transition-component';
import { ScrollTrackerComponentManager } from 'scroll-tracker-component-manager';
import AbstractComponent from '../../AbstractComponent';

export default class App extends AbstractComponent {
  public static readonly displayName: string = 'app-root';

  public readonly scrollTrackerComponentManager: ScrollTrackerComponentManager<
    IMubanTransitionMixin
    > = new ScrollTrackerComponentManager<IMubanTransitionMixin>({
    inViewProgressEnabled: false,
    setDebugLabel: true,
    debugBorderColor: 'red',
    scrollThrottle: 100,
    resizeDebounce: 100,
    // When this is enabled you should set the container(body) to a fixed height(100%).
    enableSmoothScroll: false,
    smoothScrollOptions: {
      damping: 0.1,
      thumbMinSize: 20,
      renderByPixels: true,
      alwaysShowTracks: false,
      continuousScrolling: true,
      wheelEventTarget: null,
      plugins: {},
    },
  });

  // eslint-disable-next-line no-useless-constructor
  public constructor(element: HTMLElement) {
    super(element);

    // for generic app logic
  }

  /**
   * @public
   * @method allComponentsConstructed
   */
  public adopted(): void {
    this.getElements(`[${MubanTransitionVariable.scrollComponentAttribute}]`).forEach(
      (element: HTMLElement) => {
        this.scrollTrackerComponentManager.addComponentToScrollTracker(getComponentForElement(
          element,
        ) as IMubanTransitionMixin);
      },
    );
  }

  public dispose() {
    // clean up stuff when hot reloading
    if (this.scrollTrackerComponentManager) {
      this.scrollTrackerComponentManager.dispose();
    }
    super.dispose();
  }
}

Automated setup

For those who do not care about the steps to setup the project you can run the convert and scaffold script to do this for you! Make sure you are in the root of a clean muban project and run the following command:

node ./node_modules/muban-transition-component/tool/scaffold.js
node ./node_modules/muban-transition-component/tool/convert.js