fix(uiGridAutoResize): Changed [0].clientHeight to gridUtil.elementHe…

[tfilo]

I made change based on this issue: #6481
I changed $elm[0].clientHeight to gridUtil.elementHeight($elm) and $elm[0].clientHeight to gridUtil.elementWidth($elm).
I made another change too. I merged two watchers into one watchGroup. And I changed how uiGridCtrl.grid.refresh(); is called. Looks like it needs to be called inside

$scope.$apply(function(){ uiGridCtrl.grid.refresh(); }); 

because without that it cause some problems when resizing grid with many columns. All tests still pass without problem.

[mportuga]

Why do you need to use the toString prior to comparing?

[tfilo]

I used toString because it's simples method how to compare two arrays in javascript. Method toString is supported in all browsers. And I can't directly compare two arrays because newValues === oldValues will always return false because it will compare if instance of array is same. It will not check if content is the same. But when I convert arrays to string, if the content is same, I will get two identical strings and is easy to compare two strings. But I am open to any suggestions how to make it more correct.

[tfilo]

Now when I think about it I changed it to angular.equals. It's better way in angular to compare arrays. Thanks for questioning.

[mportuga]

Whys is a timeout needed here? Specially if the time is set to 0.

[tfilo]

Here they talk about it more. https://stackoverflow.com/questions/22346990/why-is-using-ifscope-phase-scope-apply-an-anti-pattern

If I called scope apply directly, it offten happens that I saw error in javascript console because apply was called in middle of another digest cycle. Which lead to error in javascript. So when I was looking to other solutions. This looked like best one.

[tfilo]

After I consider all negatives of implementation with watcher I made other changes to prevent negative impact on performance. This latest implementation check width and height with watcher but instead of changing grid size directly it creates timeout. And if some another change occur before this timeout, it will set new timeout and cancel old one. So changes to grid will only happen after you stop resizing window.

So it should be even better with performance like original solution with interval 250ms. I know that there was even suggestions to replace watcher with event but I don't know how to do that. If you listen only event on windows resize, you will miss resize of grid parent container when some content of page change. For example hiding side menu. And I didn't find any solution how to make onResize based on parent container. So it is on you if you accept my solution. If someone can implement better solution I will glad to learn something new.