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 https://github.com/mdbootstrap/bootstrap-material-design/issues/4, or mute the thread https://github.com/notifications/unsubscribe-auth/ATmdT2kl55gnb-QVQfZ8qTWFu5qwETNCks5qg5RngaJpZM4Jm-n0 .