fix casting of getTimeline/getComponent to IMubanTransitionMixin instead of the parentController.

Author: riccoarntz

example/index.html

@@ -26,6 +26,7 @@ <h1 class="site-header-title">Muban <span>Transition Component</span></h1>
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
         <button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
+        <button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
         <h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
         <div class="looping-animation js-loop-animation"></div>
       </div>
@@ -47,6 +48,7 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
         <button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
+        <button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
 
         <h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
         <div class="looping-animation js-loop-animation"></div>
@@ -70,6 +72,7 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
         <button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
+        <button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
 
         <h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
         <div class="looping-animation js-loop-animation"></div>
@@ -93,6 +96,7 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
         <button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
+        <button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
 
         <h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
         <div class="looping-animation js-loop-animation"></div>
@@ -116,6 +120,7 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
         <button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
+        <button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
 
         <h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
         <div class="looping-animation js-loop-animation"></div>
@@ -139,6 +144,7 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
       <div class="abs-center js-text-content">
         <h1 class="heading-01">Scroll Transition</h1>
         <button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
+        <button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
 
         <h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
         <div class="looping-animation js-loop-animation"></div>

example/src/component/DummyFooPopup/DummyFooPopupTransitionController.ts

@@ -2,7 +2,7 @@ import MubanTransitionController from '../../../../src/lib/util/MubanTransitionC
 import { Expo, Back, TimelineMax } from 'gsap';
 import DummyFooPopup from './DummyFooPopup';
 
-class DummyFooPopupTransitionController extends MubanTransitionController<DummyFooPopup> {
+class DummyFooPopupTransitionController extends MubanTransitionController {
   /**
    * @public
    * @method setupTransitionInTimeline

example/src/component/block/DummyFoo/DummyFooTransitionController.ts

@@ -2,8 +2,10 @@ import MubanTransitionController from '../../../../../src/lib/util/MubanTransiti
 import { Expo, TimelineMax } from 'gsap';
 import TransitionDirection from 'transition-controller/lib/enum/TransitionDirection';
 import DummyFoo from './DummyFoo';
+import getComponentForElement from 'muban-core/lib/utils/getComponentForElement';
+import PrimaryButton from '../../button/PrimaryButton/PrimaryButton';
 
-class DummyFooTransitionController extends MubanTransitionController<DummyFoo> {
+class DummyFooTransitionController extends MubanTransitionController {
 
   /**
    * Use this method to setup your transition in timeline
@@ -21,7 +23,6 @@ class DummyFooTransitionController extends MubanTransitionController<DummyFoo> {
     parent.test();
 
     const textContent:HTMLElement = parent.getElement('.js-text-content');
-    const primaryButton:HTMLElement = parent.getElement('.js-button-open');
     const loopingTitle:HTMLElement = parent.getElement('.js-looping-title');
     const loopingAnimation:HTMLElement = parent.getElement('.js-loop-animation');
 
@@ -31,7 +32,10 @@ class DummyFooTransitionController extends MubanTransitionController<DummyFoo> {
     timeline.from(textContent, 0.8, {opacity: 0}, 'afterBg');
     timeline.from(textContent, 0.8, {y: 30, ease: Expo.easeOut, clearProps: 'all'}, 'afterBg');
 
-    timeline.add(this.getTimeline(primaryButton, TransitionDirection.IN), 'afterBg+=0.2');
+    const component = <PrimaryButton>getComponentForElement(parent.getElement('.js-button-open'));
+
+    timeline.add(this.getTimeline(component, TransitionDirection.IN), 'afterBg+=0.2');
+    timeline.add(this.getTimeline(<HTMLElement>parent.getElement('.js-button-open-2'), TransitionDirection.IN), 'afterBg+=0.2');
 
     timeline.from(loopingTitle, 0.8, {opacity: 0}, 'afterBg+=0.4');
     timeline.from(loopingTitle, 0.8, {y: 20, ease: Expo.easeOut}, 'afterBg+=0.4');

example/src/component/button/PrimaryButton/PrimaryButtonTransitionController.ts

@@ -2,7 +2,7 @@ import MubanTransitionController from '../../../../../src/lib/util/MubanTransiti
 import { Expo, TimelineMax } from 'gsap';
 import PrimaryButton from './PrimaryButton';
 
-class PrimaryButtonTransitionController extends MubanTransitionController<PrimaryButton> {
+class PrimaryButtonTransitionController extends MubanTransitionController {
   /**
    * Use this method to setup your transition in timeline
    *

src/lib/util/MubanTransitionController.ts

@@ -4,25 +4,29 @@ import isElement from 'lodash/isElement';
 import isString from 'lodash/isString';
 import { IMubanTransitionMixin } from '../interface/IMubanTransitionMixin';
 
-export default abstract class MubanTransitionController<
-  T extends IMubanTransitionMixin
-> extends AbstractTransitionController<T> {
+export default abstract class MubanTransitionController extends AbstractTransitionController<
+  IMubanTransitionMixin
+> {
   /**
    * This method finds a component based on a string, a html element or the instance.
    *
    * @protected
    * @param {string | HTMLElement | IMubanTransitionMixin} component
    * @returns {IMubanTransitionMixin}
    */
-  protected getComponent(component: string | HTMLElement | T): T {
-    let instance: T;
+  protected getComponent(
+    component: string | HTMLElement | IMubanTransitionMixin,
+  ): IMubanTransitionMixin {
+    let instance: IMubanTransitionMixin;
 
     if (isElement(component)) {
-      instance = getComponentForElement<T>(<HTMLElement>component);
+      instance = getComponentForElement<IMubanTransitionMixin>(<HTMLElement>component);
     } else if (isString(component)) {
-      instance = getComponentForElement<T>(this.parentController.getElement(<string>component));
+      instance = getComponentForElement<IMubanTransitionMixin>(
+        this.parentController.getElement(<string>component),
+      );
     } else {
-      instance = <T>component;
+      instance = <IMubanTransitionMixin>component;
     }
 
     if (instance === undefined) {

tool/convert.js

@@ -6,7 +6,7 @@ const actions = [
   {
     type: actionType.RUN,
     label: 'Update the seng-generator template path.',
-    command: 'sg settings -t ./build-tools/template,./node_modules/muban-transition-component/template',
+    command: 'sg settings -t ./build-tools/generator-template,./node_modules/muban-transition-component/template',
   },
   {
     type: actionType.REPLACE,
@@ -16,7 +16,6 @@ const actions = [
   }
 ];
 
-
 confirm('Running this script will replace/adapt files, are you running this on a clean project?', function (ok) {
   if (ok) {
     sequentialPromises(parseActions(actions))