v3.4.0 mdbootstrap and ui-router. waves-effect not working

[coreystinson2]

Please note this is for version 3.4.0.

Hi,
I would like to share a problem and solution I came across this morning whilst integrating mdbootstrap with my application. My stack is routed with the angular ui-router component and I was noticing that none of my buttons were getting the waves-effect ripple animation.

After some debugging I found this to be due to when the Waves are initialized with the displayEffect() function.

document.addEventListener('DOMContentLoaded', function () {
  Waves.displayEffect();
}, false);

With the angular ui-router component, the DOMContentLoaded method is fired prematurely to an application being fully loaded and instead I found hooking into the ui-router API event $viewContentLoaded to manually call the event, initialized the ripples properly.

$rootScope.$on('$viewContentLoaded', function() {
  Waves.displayEffect();
});

My next foreseeable problem will be with modals when they are initialized, or any other DOM manipulation that doesn't come from the ui-router skipping the $viewContentLoaded event.
Will keep post updated.

[mdbootstrap]

Hi,

thank you for information. We'll keep in mind this issue.

Best Regards,

On 18 August 2016 at 01:08, Corey Cacic notifications@github.com wrote:

Please note this is for version 3.4.0.

Hi,
I would like to share a problem and solution I came across this morning
whilst integrating mdbootstrap with my application. My stack is routed with
the angular ui-router component and I was noticing that none of my buttons
were getting the waves-effect ripple animation.

After some debugging I found this to be due to when the Waves are
initialized with the displayEffect() function.

document.addEventListener('DOMContentLoaded', function () {
Waves.displayEffect();
}, false);

With the angular ui-router component, the DOMContentLoaded method is
fired prematurely to an application being fully loaded and instead I found
hooking into the ui-router API event $viewContentLoaded to manually call
the event, initialized the ripples properly.

$rootScope.$on('$viewContentLoaded', function() {
Waves.displayEffect();
});

My next foreseeable problem will be with modals when they are initialized,
or any other DOM manipulation that doesn't come from the ui-router skipping
the $viewContentLoaded event.
Will keep post updated.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
mdbootstrap/bootstrap-material-design#4, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ATmdT2kl55gnb-QVQfZ8qTWFu5qwETNCks5qg5RngaJpZM4Jm-n0
.