Toggle animation and layoutEnd event #11

jitsmaster · 2017-02-04T22:34:59Z

Added css based animation when split area toggle visibility. The animation is off by default

add layoutEnd event on transitionend during split area visibility toggle.

of area, instead of conditional create the area. Also, extracted some hard-coded styles into css classes, that will be contained within the component.

transitionend events of the split areas, after show/hide animations finishes. Also, upgrade Angular 2 to 2.4.3.

are supported in native view encapsulation

bertrandg · 2017-02-06T16:59:15Z

src/split.component.ts

@@ -201,6 +207,21 @@ export class SplitComponent implements OnChanges, OnDestroy {
            this.areas.sort((a, b) => +a.orderUser - +b.orderUser);
        }

+        if (this.areas.length > 1) {
+            var l = this.areas.length;


Unused var..

bertrandg · 2017-02-06T16:59:32Z

src/split.component.ts

@@ -201,6 +207,21 @@ export class SplitComponent implements OnChanges, OnDestroy {
            this.areas.sort((a, b) => +a.orderUser - +b.orderUser);
        }

+        if (this.areas.length > 1) {
+            var l = this.areas.length;
+            var c = 0;


Unused var..

bertrandg · 2017-02-06T17:06:13Z

src/split.component.ts

+        if (this.areas.length > 1) {
+            var l = this.areas.length;
+            var c = 0;
+            var sub = this.areas[0].component.sizingEnd


Weird stuff that could lead to increasing number of subscriptions (refresh is called a lot of times).
'debounceTime' of 500ms make the EventEmitter emits at wrong times I imagine?
I will try to find a way to avoid a subscribtion to child eventEmitters... For me, splitArea components should notify split component directly calling a function on it because they already have it injected.

bertrandg · 2017-02-06T17:07:02Z

I didn't play with it already but I've seen several things to change before merging it.

bertrandg · 2017-02-06T17:17:24Z

I'm afraid layoutEnd event name could lead to confusion between use of *ngIf and [visible].
visibleTransitionEnd should be clearer about the target.

And I will make a warning about using [visible] instead of *ngIf, that's a good thing to have the option for specific cases but it could lead to performance degradation due to all DOM/bindings/components still calculated even if not visible.

jitsmaster · 2017-02-07T01:07:13Z

Thank you very much for looking into it. Unfortunately I can't do anything yet. Snow storm hit Seattle area. My house is out of power. Estimated to be fixed by tomorrow. Then I can get back on it.

You did some great refactors to my last pull request. Appreciate it.

bertrandg · 2017-02-07T08:06:11Z

No problem! :)
Take care of you and your home.

jitsmaster · 2017-02-14T16:34:46Z

Finally have time to get back on it. "visibleTransitionEnd" is a better name. I am thinking about the possibility of having layoutEnd to include ngIf scenarios too. But that is a much bigger refactor, means to hook up observables in tabs toggling, so the ngIf can use async pipes, and split component and capture those events and use layoutEnd.

We will just call the event visibleTransitionEnd for now.

I will put it the simple fixes and look into simple area event for visibility toggle

bertrandg · 2017-02-14T16:47:20Z

Cool, take a look at this plunker, I found a way to avoid any subscription in split.component:
https://plnkr.co/edit/epjWLs?p=preview
Let me know if you want to add it or I will do it myself during the merge.

Yes having transition for ngIf too would be awesome but I have really no idea how it could works..

jitsmaster · 2017-02-14T17:37:17Z

Are you talking about using Subject and asObservable?

The subject still needs to be triggered somehow.

I am putting together the changes now that will reduce the amount of subscriptions, and clean them up up front.

jitsmaster · 2017-02-14T17:38:01Z

I normally use BehaviorSubject, because it can be triggered repeatedly. Subject is normally for fire and forget

Ditched the centralized merged subscriptions and hooked up to invididual area sizingEnd event. Prevent multiple firing of sizingEnd event from split areas, by limiting to flex-basis only on the event property. Update comments on visibleTransitionEnd to better describing how to subscribe to it. Use BehaviorSubject instead of eventemitter to prevent outside party triggering this event.

jitsmaster · 2017-02-14T19:03:06Z

Done.
I figured out what is causing the repeated transitionend hits. So merging is no longer that needed anymore.
Each are gets one subscription in its life time only.

I kept the structure of subject.asObservable. It is not very necessary, just prevent outside party from triggering the event. You can change it back to EventEmitter if you feel like it.

bertrandg · 2017-02-14T20:31:04Z

My plunker was about the fact I avoided any subscription inside split.component.ts (no .subscribe() .unsubscribe()). The only subscription occurs if, and only if, user request it from outside in his template:
<split (visibleTransitionEnd)="log($event)">

I used Subject in the plunker because angular EventEmitter extends it.
From what I've just learned, BehaviorSubject differ from it just by sending its last value when we subscribe to it, not needed here it seems...
http://stackoverflow.com/questions/39494058/angular-2-behavior-subject-vs-observable

I will try to merge it next weekend.

jitsmaster · 2017-02-14T20:45:35Z

Thank you

jitsmaster · 2017-02-14T20:53:28Z

I see what you mean.
We could have the area directly call the subject in the split component. I always avoided that practice, because that will tight-couple the split component and its areas. I guess they are already tightly coupled, so it is no big deal.

I will make that change.

remove the sizingEnd event from areas, and have them directly invoke notify function on split component. Area was already tightly coupled with split component, so this is a better way to make thing happen.

jitsmaster · 2017-02-14T21:07:24Z

The last changed removed the event driven system altogether for for visibleTransitionEnd event gets triggered.

bertrandg · 2017-02-15T13:49:26Z

Yes you got it,
It simplify the code and, like you said, they are already tight-coupled because split is injected in splitArea.

Now, if there isn't need for debounce/distinctUntilChange/merge.. operators anymore, we can get rid of _visibleTransitionEndSub, transform visibleTransitionEnd to:
@Output() visibleTransitionEnd = new EventEmitter<Array<number>>(false);
and directly call it from notify().

I was asking myself, just by curiosity, what is your use case which need visibleTransitionEnd from outside? What do you do when handling it?

thanks ;)

jitsmaster · 2017-02-15T17:46:22Z

The use case is same as dragEnd. I am doing some crazy Angular 2 implementation by use angular component as shell to wrap up dojo widgets. Those dojo widgets are manually layed out and depending on the event to resize itself. I have left panel in the split container that toggle on/off all the time, and right side content widgets need to listen to the toggle event and resize itself.

jitsmaster · 2017-02-28T20:41:05Z

Have you had he chance to merge it in last weekend?

Sorry for bug you, but AOT compiler doesn't like npm links

node module

jitsmaster · 2017-03-01T23:18:32Z

Actually, no worry. I figured out how to to npm install directly from github repo. Just some minor twick on .gitignore to make things work.

Glad you are including everything in dist folder. All I have to do is removing the src in dist folder to fix AOT compiler issue.

I am good for now.

bertrandg · 2017-03-04T20:31:57Z

I'm on it, I merged it and pushed it in 'test-pr' branch:
https://github.com/bertrandg/angular-split/tree/test-pr

But when testing, I've seen that visibleTransitionEnd event is sent X times (once for each areas) for one toggling..
https://plnkr.co/edit/GyQnxE?p=preview
Check it and tell me if it was same behavior on your version or if it comes from the way I merged it.

jitsmaster · 2017-03-05T07:29:58Z

That was the reason I went with the more complex approach to debounce the event and make it only fire once. It is indeed what I see.
It doesn't cause too much problem for actual implementations, since the subscription part can always debounce it .

Do you want me to revert it back to the old way?

bertrandg · 2017-03-06T10:37:47Z

Ok, no thanks I will add it.

bertrandg · 2017-03-11T21:59:29Z

Merged and published 0.1.20 :)

jitsmaster · 2017-03-11T22:01:53Z

You da man. Thank you very much. Pleasure working with you.

…

On Sat, Mar 11, 2017, 1:59 PM bertrandg ***@***.***> wrote: Closed #11 <#11>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#11 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APGpof99s1_XSTNOtb4SaZUdqWJHrwx-ks5rkxlBgaJpZM4L3T3b> .

bertrandg · 2017-03-11T22:59:34Z

Thanks to participate there.
I'm happy to see people using and improving angular-split!

jitsmaster and others added 7 commits January 24, 2017 16:45

Introduced possibility to animate area toggle, when using the visibility

ee14002

of area, instead of conditional create the area. Also, extracted some hard-coded styles into css classes, that will be contained within the component.

Added layoutEnd event for split component, it is hooked up to

cee8d50

transitionend events of the split areas, after show/hide animations finishes. Also, upgrade Angular 2 to 2.4.3.

Merge branch 'master' of https://github.com/jitsmaster/angular-split

2801916

Merge branch 'visibility'

923d26c

Merge from main fork

49d3a7a

Merge branch 'bertrandg-master' into toggleAnimation

0e713cf

Test to make sure that animation css

28d584d

are supported in native view encapsulation

bertrandg reviewed Feb 6, 2017

View reviewed changes

jitsmaster added 2 commits February 14, 2017 10:53

Merge from master

46ab05f

Refactor visibleTransitionEnd triggering.

9a030ef

remove the sizingEnd event from areas, and have them directly invoke notify function on split component. Area was already tightly coupled with split component, so this is a better way to make thing happen.

Expose areas on split component as public to support AOT compilation as

b46980a

node module

bertrandg closed this Mar 11, 2017

angular-split locked and limited conversation to collaborators Feb 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Toggle animation and layoutEnd event #11

Toggle animation and layoutEnd event #11

jitsmaster commented Feb 4, 2017

bertrandg Feb 6, 2017

bertrandg Feb 6, 2017

bertrandg Feb 6, 2017

bertrandg commented Feb 6, 2017

bertrandg commented Feb 6, 2017

jitsmaster commented Feb 7, 2017

bertrandg commented Feb 7, 2017

jitsmaster commented Feb 14, 2017

bertrandg commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

bertrandg commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

jitsmaster commented Feb 14, 2017 •

edited

Loading

bertrandg commented Feb 15, 2017

jitsmaster commented Feb 15, 2017

jitsmaster commented Feb 28, 2017

jitsmaster commented Mar 1, 2017

bertrandg commented Mar 4, 2017

jitsmaster commented Mar 5, 2017

bertrandg commented Mar 6, 2017

bertrandg commented Mar 11, 2017

jitsmaster commented Mar 11, 2017 via email

bertrandg commented Mar 11, 2017

Toggle animation and layoutEnd event #11

Toggle animation and layoutEnd event #11

Conversation

jitsmaster commented Feb 4, 2017

bertrandg Feb 6, 2017

Choose a reason for hiding this comment

bertrandg Feb 6, 2017

Choose a reason for hiding this comment

bertrandg Feb 6, 2017

Choose a reason for hiding this comment

bertrandg commented Feb 6, 2017

bertrandg commented Feb 6, 2017

jitsmaster commented Feb 7, 2017

bertrandg commented Feb 7, 2017

jitsmaster commented Feb 14, 2017

bertrandg commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

bertrandg commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

jitsmaster commented Feb 14, 2017

jitsmaster commented Feb 14, 2017 • edited Loading

bertrandg commented Feb 15, 2017

jitsmaster commented Feb 15, 2017

jitsmaster commented Feb 28, 2017

jitsmaster commented Mar 1, 2017

bertrandg commented Mar 4, 2017

jitsmaster commented Mar 5, 2017

bertrandg commented Mar 6, 2017

bertrandg commented Mar 11, 2017

jitsmaster commented Mar 11, 2017 via email

bertrandg commented Mar 11, 2017

jitsmaster commented Feb 14, 2017 •

edited

Loading