Skip to content

Commit c6f4edb

Browse files
riccoarntzriccoarntz
committed
Merge branch 'beta'
# Conflicts: # package.json # yarn.lock
2 parents 224eff7 + 6a41e07 commit c6f4edb

File tree

13 files changed

+190
-72
lines changed

13 files changed

+190
-72
lines changed

‎example/bundle.js

Lines changed: 34 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ <h1 class="site-header-title">Muban <span>Transition Component</span></h1>
2020
class="dummy-foo"
2121
data-scroll-component>
2222

23-
<span class="dummy-foo-bg abs-fill js-background"></span>
23+
<span class="dummy-foo-bg abs-fill js-background">
24+
<div class="progress js-progress"></div>
25+
</span>
2426

2527
<div class="abs-center js-text-content">
2628
<h1 class="heading-01">Scroll Transition</h1>
@@ -42,7 +44,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
4244
data-component="dummy-foo"
4345
class="dummy-foo"
4446
data-scroll-component>
45-
<span class="dummy-foo-bg abs-fill js-background"></span>
47+
<span class="dummy-foo-bg abs-fill js-background">
48+
<div class="progress js-progress"></div>
49+
</span>
4650

4751
<div class="abs-center js-text-content">
4852
<h1 class="heading-01">Scroll Transition</h1>
@@ -66,7 +70,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
6670
data-component="dummy-foo"
6771
class="dummy-foo"
6872
data-scroll-component>
69-
<span class="dummy-foo-bg abs-fill js-background"></span>
73+
<span class="dummy-foo-bg abs-fill js-background">
74+
<div class="progress js-progress"></div>
75+
</span>
7076

7177
<div class="abs-center js-text-content">
7278
<h1 class="heading-01">Scroll Transition</h1>
@@ -90,7 +96,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
9096
data-component="dummy-foo"
9197
class="dummy-foo"
9298
data-scroll-component>
93-
<span class="dummy-foo-bg abs-fill js-background"></span>
99+
<span class="dummy-foo-bg abs-fill js-background">
100+
<div class="progress js-progress"></div>
101+
</span>
94102

95103
<div class="abs-center js-text-content">
96104
<h1 class="heading-01">Scroll Transition</h1>
@@ -114,7 +122,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
114122
data-component="dummy-foo"
115123
class="dummy-foo"
116124
data-scroll-component>
117-
<span class="dummy-foo-bg abs-fill js-background"></span>
125+
<span class="dummy-foo-bg abs-fill js-background">
126+
<div class="progress js-progress"></div>
127+
</span>
118128

119129
<div class="abs-center js-text-content">
120130
<h1 class="heading-01">Scroll Transition</h1>
@@ -138,7 +148,9 @@ <h2 class="heading-02 abs-center js-title">Regular Transition</h2>
138148
data-component="dummy-foo"
139149
class="dummy-foo"
140150
data-scroll-component>
141-
<span class="dummy-foo-bg abs-fill js-background"></span>
151+
<span class="dummy-foo-bg abs-fill js-background">
152+
<div class="progress js-progress"></div>
153+
</span>
142154

143155
<div class="abs-center js-text-content">
144156
<h1 class="heading-01">Scroll Transition</h1>

‎example/src/App.ts

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,22 @@ export default class App extends CoreComponent{
88
static displayName: string = 'app-root';
99

1010
public scrollTrackerComponentManager: ScrollTrackerComponentManager<IMubanTransitionMixin> = new ScrollTrackerComponentManager<IMubanTransitionMixin>({
11-
config: {
12-
setDebugLabel: true,
13-
debugBorderColor: 'red',
14-
resizeDebounce: 100,
15-
}
11+
inViewProgressEnabled: true,
12+
setDebugLabel: true,
13+
debugBorderColor: 'red',
14+
scrollThrottle: 100,
15+
resizeDebounce: 100,
16+
17+
enableSmoothScroll: true,
18+
smoothScrollOptions: {
19+
damping: 0.1,
20+
thumbMinSize: 20,
21+
renderByPixels: true,
22+
alwaysShowTracks: false,
23+
continuousScrolling: true,
24+
wheelEventTarget: null,
25+
plugins: {},
26+
},
1627
});
1728

1829
constructor(element: HTMLElement) {
@@ -36,7 +47,6 @@ export default class App extends CoreComponent{
3647
// clean up stuff when hot reloading
3748
if (this.scrollTrackerComponentManager) {
3849
this.scrollTrackerComponentManager.dispose();
39-
this.scrollTrackerComponentManager = null;
4050
}
4151
}
4252
}

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

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
import CoreComponent from 'muban-core/lib/CoreComponent';
2-
import getComponentForElement from 'muban-core/lib/utils/getComponentForElement';
3-
import DummyFooPopup from '../../DummyFooPopup/DummyFooPopup';
2+
// import getComponentForElement from 'muban-core/lib/utils/getComponentForElement';
3+
// import DummyFooPopup from '../../DummyFooPopup/DummyFooPopup';
44
import DummyFooTransitionController from './DummyFooTransitionController';
55
import mubanTransitionMixin from '../../../../../src/lib/mixin/MubanTransitionMixin';
66
import mubanTransitionCoreMixin from '../../../../../src/lib/mixin/MubanTransitionCoreMixin';
77

88
export default class DummyFoo extends mubanTransitionMixin(mubanTransitionCoreMixin(CoreComponent)) {
99
static displayName: string = 'dummy-foo';
10-
public transitionController: DummyFooTransitionController;
10+
// public transitionController: DummyFooTransitionController;
1111

12-
private dummyFooPopup: DummyFoo;
12+
// private dummyFooPopup: DummyFoo;
1313

1414
constructor(public element: HTMLElement) {
1515
super(element);
1616

1717
this.transitionController = new DummyFooTransitionController(this);
1818
this.addEventListeners();
19-
this.dummyFooPopup = getComponentForElement(this.element.querySelector(`[data-component="${DummyFooPopup.displayName}"]`));
19+
// this.dummyFooPopup = getComponentForElement(this.element.querySelector(`[data-component="${DummyFooPopup.displayName}"]`));
20+
}
21+
22+
/**
23+
* @public
24+
* @method inViewProgress
25+
*/
26+
public inViewProgress(progress:number):void
27+
{
28+
(<HTMLElement>this.element.querySelector('.js-progress')).style.width = `${progress * 100}%`;
29+
30+
console.log(progress);
2031
}
2132

2233
/**
@@ -28,7 +39,6 @@ export default class DummyFoo extends mubanTransitionMixin(mubanTransitionCoreMi
2839

2940
}
3041

31-
3242
/**
3343
* @private
3444
* @method addEventListeners
@@ -42,7 +52,7 @@ export default class DummyFoo extends mubanTransitionMixin(mubanTransitionCoreMi
4252
* @method handleOpenPopupClick
4353
*/
4454
private handleOpenPopupClick(): void {
45-
this.dummyFooPopup.transitionIn();
55+
// this.dummyFooPopup.transitionIn();
4656
}
4757

4858
public dispose() {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ class DummyFooTransitionController extends MubanTransitionController {
1818
*/
1919
protected setupTransitionInTimeline(
2020
timeline:TimelineMax,
21-
parent:DummyFoo
21+
parent:any
2222
): void {
2323
parent.test();
2424

‎example/src/style/screen.css

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ body {
44
margin: 0;
55
color: #6c757d;
66
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
7+
height: 100%;
78
}
89

910
h1,h2,h3,h4 {
@@ -97,6 +98,14 @@ h1,h2,h3,h4 {
9798
position: relative;
9899
}
99100

101+
.progress {
102+
position: absolute;
103+
top: 0;
104+
left: 0;
105+
width: 0;
106+
height: 100%;
107+
background-color: blue;
108+
}
100109

101110
.site-header {
102111
position: fixed;
@@ -128,6 +137,7 @@ h1,h2,h3,h4 {
128137
text-align: center;
129138
white-space: nowrap;
130139
color: #41a6ff;
140+
border-bottom: 1px dotted white;
131141
}
132142

133143
.dummy-foo-bg {
@@ -139,7 +149,7 @@ h1,h2,h3,h4 {
139149
}
140150

141151
.dummy-foo:nth-child(n+2) .dummy-foo-bg {
142-
background-color: white;
152+
/*background-color: white;*/
143153
}
144154

145155
/* Dummy Foo POPUP */

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
"eslint-import-resolver-typescript": "^1.0.2",
8585
"eslint-plugin-import": "^2.8.0",
8686
"eslint-plugin-prettier": "^2.4.0",
87-
"gsap": "^2.1.2",
87+
"gsap": "^2.0.1",
8888
"husky": "^0.14.3",
8989
"jsdom": "^11.5.1",
9090
"jsdom-global": "^3.0.2",
@@ -110,10 +110,10 @@
110110
"lodash": "^4.17.5",
111111
"muban-core": "^1.8.3",
112112
"node-run-cmd": "^1.0.1",
113-
"scroll-tracker-component-manager": "^1.1.1",
113+
"scroll-tracker-component-manager": "^2.1.1",
114114
"seng-disposable": "^1.1.3",
115115
"seng-event": "^1.2.3",
116-
"transition-controller": "^1.2.12"
116+
"transition-controller": "^1.3.1"
117117
},
118118
"peerDependencies": {
119119
"gsap": "^2.0.1"

‎src/lib/interface/IMubanTransitionMixin.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,13 @@ export interface IMubanTransitionMixin extends IMubanTransitionCoreMixin {
3131
* it's not transitioned in it will still try to transitionIn */
3232
beyondView(): void;
3333

34+
/**
35+
* @public
36+
* @method inViewProgress
37+
* @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.
38+
*/
39+
inViewProgress(progress: number): void;
40+
3441
/**
3542
* Calling transition in will trigger transitionIn on your transition controller and
3643
* start the desired timeline.
@@ -75,4 +82,19 @@ export interface IMubanTransitionMixin extends IMubanTransitionCoreMixin {
7582
* Setting this number to for example 0.5 will trigger the enterView method when the component is already visible for 50% within your viewport.
7683
*/
7784
enterViewThreshold: number;
85+
86+
/**
87+
* @description: same as enterViewThreshold but then used as an offset from when your inViewProgress will start
88+
*/
89+
inViewProgressThreshold: number;
90+
91+
/**
92+
* @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
93+
*/
94+
hasEntered: boolean;
95+
96+
/**
97+
* @description: PropertyName of the component where we will store the progress of its visibility
98+
*/
99+
currentViewProgress: number;
78100
}

‎src/lib/mixin/MubanTransitionMixin.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ function mubanTransitionMixin<TBase extends Constructor<IMubanTransitionCoreMixi
99
return class MubanTransitionMixin extends Base {
1010
public transitionController: AbstractTransitionController<IMubanTransitionMixin>;
1111
public enterViewThreshold: number = 0.25;
12+
public inViewProgressThreshold: number = 0;
1213
public hasEntered: boolean = false;
14+
public currentViewProgress: number = 0;
1315

1416
constructor(...args: any[]) {
1517
super(...args);
@@ -24,6 +26,9 @@ function mubanTransitionMixin<TBase extends Constructor<IMubanTransitionCoreMixi
2426
this.stopLoopingAnimation();
2527
}
2628

29+
// @ts-ignore
30+
public inViewProgress(progress: number): void {}
31+
2732
public beyondView(): void {
2833
if (!this.hasEntered) {
2934
// Todo maybe seek to progress(1) to avoid (unnecessary) performance issue's

‎test/MubanTransitionMixin.spec.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@ describe('MubanTransitionMixin.spec', () => {
6060
});
6161
});
6262

63+
describe('inViewProgress', function () {
64+
it('should inViewProgress the component', function () {
65+
expect(component.inViewProgress()).to.be.undefined;
66+
});
67+
});
68+
6369
describe('leaveView', function () {
6470
it('should leaveView the component', function () {
6571
expect(component.leaveView()).to.be.undefined;

‎test/util/App.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,14 @@ import AppTransitionController from './AppTransitionController';
77
import mubanTransitionCoreMixin from '../../src/lib/mixin/MubanTransitionCoreMixin';
88
import mubanTransitionMixin from '../../src/lib/mixin/MubanTransitionMixin';
99

10-
export default class App extends mubanTransitionMixin(mubanTransitionCoreMixin(CoreComponent)){
10+
export default class App extends mubanTransitionMixin(mubanTransitionCoreMixin(CoreComponent)) {
1111
static displayName: string = 'app-root';
1212
public transitionController: AppTransitionController;
1313

1414
public scrollTrackerComponentManager: ScrollTrackerComponentManager<IMubanTransitionMixin> = new ScrollTrackerComponentManager<IMubanTransitionMixin>({
15-
config: {
16-
setDebugLabel: true,
17-
debugBorderColor: 'red',
18-
resizeDebounce: 100,
19-
}
15+
setDebugLabel: true,
16+
debugBorderColor: 'red',
17+
resizeDebounce: 100,
2018
});
2119

2220
constructor(element: HTMLElement) {

‎tool/convert/src/app/component/layout/app/App.ts

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,22 @@ export default class App extends AbstractComponent {
77
static displayName: string = 'app-root';
88

99
public scrollTrackerComponentManager: ScrollTrackerComponentManager<IMubanTransitionMixin> = new ScrollTrackerComponentManager<IMubanTransitionMixin>({
10-
config: {
11-
setDebugLabel: true,
12-
debugBorderColor: 'red',
13-
resizeDebounce: 100,
14-
}
10+
inViewProgressEnabled: false,
11+
setDebugLabel: true,
12+
debugBorderColor: 'red',
13+
scrollThrottle: 100,
14+
resizeDebounce: 100,
15+
16+
enableSmoothScroll: false,
17+
smoothScrollOptions: {
18+
damping: 0.1,
19+
thumbMinSize: 20,
20+
renderByPixels: true,
21+
alwaysShowTracks: false,
22+
continuousScrolling: true,
23+
wheelEventTarget: null,
24+
plugins: {},
25+
},
1526
});
1627

1728
constructor(element: HTMLElement) {
@@ -31,7 +42,6 @@ export default class App extends AbstractComponent {
3142
// clean up stuff when hot reloading
3243
if (this.scrollTrackerComponentManager) {
3344
this.scrollTrackerComponentManager.dispose();
34-
this.scrollTrackerComponentManager = null;
3545
}
3646
}
3747
}

0 commit comments

Comments
 (0)