AnimateCSS #3113

bugsounet · 2023-05-28T12:21:11Z

Hi,

This is my testing code for AnimateCSS for show(), hide(), updateDom()

Naturally, we have to do better !

I voluntarily modify newsfeed and compliments in order to test

Note: I will correct checks later... it's a test...

install animate.css in vendor create animateCSS.js modify index.html

bugsounet · 2023-05-28T13:08:21Z

ok... I will solve localy :/

codecov-commenter · 2023-05-28T21:16:39Z

Codecov Report

Merging #3113 (2d5effc) into develop (9d49196) will decrease coverage by 0.49%.
The diff coverage is 1.03%.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

@@             Coverage Diff             @@
##           develop    #3113      +/-   ##
===========================================
- Coverage    26.15%   25.66%   -0.49%     
===========================================
  Files           53       54       +1     
  Lines        11502    11760     +258     
===========================================
+ Hits          3008     3018      +10     
- Misses        8494     8742     +248

Files Changed	Coverage Δ
js/animateCSS.js	`0.00% <0.00%> (ø)`
js/loader.js	`0.00% <0.00%> (ø)`
js/main.js	`0.00% <0.00%> (ø)`
js/module.js	`68.24% <75.00%> (ø)`

... and 2 files with indirect coverage changes

bugsounet · 2023-05-28T21:37:36Z

~ Issue #3111 ~

So...

I purpose to you to make a test with newsfeed module
just change lines 304 and 308 with : this.updateDom(this.config.animationSpeed, 3, 14);

syntax: updateDom(speed, animateOut, animateIn)
animateOut, animateIn number value are available there and it's the result of the animated names from the Animate.style website

Result: The news will come from the left, wait in the middle and come out the right

Note: I repeat, it's a testing code, and need to be really merged properly with hideModule, showModule function of main.js

khassel · 2023-06-05T20:01:16Z

Result: The news will come from the left, wait in the middle and come out the right

tested this with the same result

bugsounet · 2023-06-06T16:30:51Z

@rejas says Start with a very simple animation so we can discuss the actual implementation?

I know, I have to do better implementation
It's just a testing code actually.

Should I do better? (Of course)
Are you really interested in this optional feature?

rejas · 2023-06-06T18:26:42Z

@rejas says Start with a very simple animation so we can discuss the actual implementation?

I know, I have to do better implementation It's just a testing code actually.

Should I do better? (Of course) Are you really interested in this optional feature?

Sorry for not being more active on your PR, I really like the feature but with a newborn I cant concentrate right now much on these PRs (contrary to small stuff like dependency updates that dont take much brain power)

Expect more feedback next week, then I might have more time to think about it.

bugsounet · 2023-06-06T18:48:14Z

@rejas: congratulations to you ! This is happiness !

Take your time, a newborn is more important than this PR (I know the time and energy it takes!)

bugsounet · 2023-06-10T09:00:43Z

I will try to do something cleaner because a test code is not made to be in production

bugsounet · 2023-06-10T12:40:26Z

I realize that it's not that easy to do something cleaner

@rejas, Veeck when you have some time, can you inspect ?
It's always better to have another opinion

rejas · 2023-06-10T20:53:14Z

just change lines 304 and 308 with : this.updateDom(this.config.animationSpeed, 3, 14);

Would it be possible to have something more "verbose" when calling the updateDom? Something more like this.updateDom(this.config.animationSpeed, Animate.Bounce, Animate.FadeOut);
which would make it more readable for developers?

Also what do you think about having the module animation configurable (just like position):

		{
			module: "clock",
			position: "top_left",
                        animateIn: "bounce",
                        animateOut: "fade_out",
		},

?

As for the cleanliness of the code: I dont mind testing code in there, as long as the API to the modules is well-thought of. The actual implementation can be changed easily later, the API stays for a long time :-)

bugsounet · 2023-06-11T12:29:17Z

Oh yes!!! very good idea.
I will try to do something about it

You prefer Animate.Bounce , Animate.FadeOut, Animate.xxx
I will create an object to manage this then

On the other hand, what bothers me, if we put all the animations in the same object that would mean that we can use the "animateOut" in the "animateIn" and vice versa
That's why I separated the animations

I think you would like that if the name of the requested animation does not exist, we fall back on the default MM² animation

Warning:

don't forget that animations add a class at the module position (it's add animate__animated <animation name> classes)
this necessarily breaks the test suite
You will have to review your test suite :/

…nfig * add animateIn and animateOut in module definition * use directly the name of the animation * option.animate use the name of animation * can't be override with option.animate if animateIn / animateOut are defined in module definition

…nfig

bugsounet · 2023-06-11T16:26:25Z

(sometime e2e scares me...)

bugsounet · 2023-06-11T19:21:15Z

Just because humm... I'm crazy !

I just add possibility to use animateIn on start of MM²

@rejas : what do you think about that ?

Result:

bugsounet · 2023-09-02T10:43:04Z

@rejas : Veeck,
this must be good for me

If you want to see again ;)

can I start writing the doc?

js/animateCSS.js

js/main.js

js/module.js

rejas · 2023-09-05T06:50:19Z

sorry for the long turnaroundtime, lots of stuff to do and the cold is already creeping in...

* (animateCSS.js) `_AnimateCSSIn` -> `AnimateCSSIn` * (animateCSS.js) `_AnimateCSSOut` -> `AnimateCSSOut` * (main.js) Rename `AnimateCSSOut` and `AnimateCSSIn` in accord with animateCSS.js * (main.js) Add Log.debug in animate functionality * (main.js) correct var haveAnimateName to let haveAnimateName * (main.js) Add options object for updateDom() for control speed and animate * (module.js) change value name speed -> updateOptions for more visibility and in accord with new functionality

bugsounet · 2023-09-06T18:46:40Z

no problem, I'm just doing my best for the next release :)

Note: when #3179 is fixed, can you retry test suite?
It's works in local but...

Thx Veeck

KristjanESPERANTO · 2023-09-06T23:01:13Z

With #3181 the test shouldn't fail anymore.

I'm looking forward to this feature. Thanks @bugsounet 🙂

rejas · 2023-09-07T04:37:22Z

Merged develop myseld, lets see the test results :-)

bugsounet · 2023-09-07T05:12:23Z

Happy crazy test! 😁

js/main.js

rejas · 2023-09-08T05:43:20Z

Ah, screw it, will merge it, we can cleanup further later if necessary (and I dont want to have @bugsounet waiting longer). This is too nice to not have, thx a lot for your work!

bugsounet · 2023-09-08T07:50:10Z

I will start to write MagicMirror Doc

Note: It’s a shame there isn’t a develop branch on the doc
To see the result of the formatting once written (and correct if necessary)

rejas · 2023-09-08T08:30:45Z

That's a good idea to have a develop branch, where we could collect the changes until the next release. Then we would merge it into the main branch.

bugsounet · 2023-09-08T08:40:08Z

we will also have to see with @MichMich
it would be perfect if we had a "point of view" develop of this branch

something like "https://dev-docs.magicmirror.builders/" to see develop branch result
just for see if formating is correct before merging it

MichMich · 2023-09-08T09:38:23Z

I've added a develop branch to the docs repo which is synced with https://develop.docs.magicmirror.builders. Let me know if there is anything else I can do.

bugsounet · 2023-09-08T09:44:12Z

Thx @MichMich,
It's perfect for the moment !

bugsounet · 2023-09-16T07:24:32Z

@rejas:

I see this bugs:

AnimateCSS merge hide() and show() animated css class when we do multiple call

--> result it will stay en hide state

I think event listener (is animateCSS file) is not a proper solution
I will correct soon as possible

… multiple call (#3200) PR: #3113 I see this bugs: AnimateCSS merge hide() and show() animated css class when we do multiple call --> result it will stay en hide state I think event listener (is animateCSS file) is not a proper solution I correct it with like traditional code with timer Fix too: AnimateIn on first start

bugsounet added 8 commits May 27, 2023 18:57

begin coding with animateCSS

f93ca79

install animate.css in vendor create animateCSS.js modify index.html

testing code for AnimateCSS

5d554ea

test AnimateCSS with compliments and newsfeed default modules

0c6525a

decrease default animation time for testing

7a50605

missing AnimateCSS credit

bfcd079

update ChangeLog

7fc20b2

delete some warnings...

aabc2d5

typo

ab2a28b

bugsounet added 2 commits May 28, 2023 15:31

correct all errors / warn

064cb01

testing code purpose

80deac1

bugsounet added 4 commits June 10, 2023 14:09

testing with new code

7ca8d70

in accord with test:e2e

d0b083c

testing with new code

3a7c905

Merge branch 'develop' into develop

e28d638

bugsounet added 4 commits June 11, 2023 18:07

add possibity to use animateIn and animateOut in module definition co…

cc3c580

…nfig

update change log // update fonctions definitions

15bf134

update change log // update fonctions definitions

c0d1215

bugsounet added 2 commits June 11, 2023 21:09

Apply AnimateIn rules on the first start

f5e2a8d

Apply AnimateIn rules on the first start

e53cf30

bugsounet added 2 commits September 2, 2023 12:25

review animateCSS rules

c3e2719

Merge branch 'develop' into develop

fde5168

rejas requested changes Sep 5, 2023

View reviewed changes

js/animateCSS.js Outdated Show resolved Hide resolved

js/animateCSS.js Outdated Show resolved Hide resolved

js/main.js Outdated Show resolved Hide resolved

js/main.js Outdated Show resolved Hide resolved

js/module.js Outdated Show resolved Hide resolved

bugsounet added 3 commits September 6, 2023 18:36

missing new definition

a405b26

correct var -> let

ffa2f5d

bugsounet requested a review from rejas September 6, 2023 18:51

Merge branch 'develop' into animate

2d5effc

rejas requested changes Sep 7, 2023

View reviewed changes

js/main.js Show resolved Hide resolved

rejas added this to the 2.24 milestone Sep 7, 2023

rejas merged commit a92b3d3 into MagicMirrorOrg:develop Sep 8, 2023

bugsounet deleted the develop branch September 8, 2023 07:46

bugsounet mentioned this pull request Sep 17, 2023

Fix: AnimateCSS merge hide() and show() animated css class when we do multiple call #3200

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AnimateCSS #3113

AnimateCSS #3113

bugsounet commented May 28, 2023 •

edited

Loading

bugsounet commented May 28, 2023

codecov-commenter commented May 28, 2023 •

edited

Loading

bugsounet commented May 28, 2023 •

edited

Loading

khassel commented Jun 5, 2023

bugsounet commented Jun 6, 2023

rejas commented Jun 6, 2023

bugsounet commented Jun 6, 2023

bugsounet commented Jun 10, 2023

bugsounet commented Jun 10, 2023 •

edited

Loading

rejas commented Jun 10, 2023

bugsounet commented Jun 11, 2023

bugsounet commented Jun 11, 2023

bugsounet commented Jun 11, 2023 •

edited

Loading

bugsounet commented Sep 2, 2023 •

edited

Loading

rejas commented Sep 5, 2023

bugsounet commented Sep 6, 2023

KristjanESPERANTO commented Sep 6, 2023

rejas commented Sep 7, 2023

bugsounet commented Sep 7, 2023

rejas commented Sep 8, 2023

bugsounet commented Sep 8, 2023

rejas commented Sep 8, 2023

bugsounet commented Sep 8, 2023

MichMich commented Sep 8, 2023

bugsounet commented Sep 8, 2023

bugsounet commented Sep 16, 2023

AnimateCSS #3113

AnimateCSS #3113

Conversation

bugsounet commented May 28, 2023 • edited Loading

bugsounet commented May 28, 2023

codecov-commenter commented May 28, 2023 • edited Loading

Codecov Report

bugsounet commented May 28, 2023 • edited Loading

khassel commented Jun 5, 2023

bugsounet commented Jun 6, 2023

rejas commented Jun 6, 2023

bugsounet commented Jun 6, 2023

bugsounet commented Jun 10, 2023

bugsounet commented Jun 10, 2023 • edited Loading

rejas commented Jun 10, 2023

bugsounet commented Jun 11, 2023

bugsounet commented Jun 11, 2023

bugsounet commented Jun 11, 2023 • edited Loading

bugsounet commented Sep 2, 2023 • edited Loading

rejas commented Sep 5, 2023

bugsounet commented Sep 6, 2023

KristjanESPERANTO commented Sep 6, 2023

rejas commented Sep 7, 2023

bugsounet commented Sep 7, 2023

rejas commented Sep 8, 2023

bugsounet commented Sep 8, 2023

rejas commented Sep 8, 2023

bugsounet commented Sep 8, 2023

MichMich commented Sep 8, 2023

bugsounet commented Sep 8, 2023

bugsounet commented Sep 16, 2023

bugsounet commented May 28, 2023 •

edited

Loading

codecov-commenter commented May 28, 2023 •

edited

Loading

bugsounet commented May 28, 2023 •

edited

Loading

bugsounet commented Jun 10, 2023 •

edited

Loading

bugsounet commented Jun 11, 2023 •

edited

Loading

bugsounet commented Sep 2, 2023 •

edited

Loading