Emit an event on resize about ui-layout

[mindjuice]

Any chance of this making it into next week's release? I see there is a TODO in the current beta. :-)

If not, I can look into adding it as I need to know when resizes occur.

Ideally, it could be configured to output an event continuously as you resize or just when the mouse is released.

[jbro-io]

Yeah I can probably work it in to the mouse release event for the time being. Is there any specific data you'd be looking for to be passed with the event? Or is the event itself enough?

[mindjuice]

Would be great if it could pass along the id of the div that got resized so we can do the right thing based on what was resized.

This would require that the div actually have an id though. This obviously isn't an onerous requirement, but you'd need to handle the case where the div has no id. I guess if it doesn't have an id, then don't fire the event or else fire a "global" resized event with no id.

Short term, I could probably just assume that any "resize" event means everything resized and run any/all code that handles size changes. What I need to do isn't performance critical.

[nevcos]

I think that ui-layout should trigger those 3 events:

// Triggered on mouse move, while dragging:
$element.trigger("resize"); 

// Triggered on mouse down, when start dragging
$element.trigger("resizeStart");

// Triggered on mouse up, after dragging */
$element.trigger("resizeStop"); 

The events could be triggered on affected containers, so the user can bind to the event only on a specific container.

Additionally, this must be protected so it does not capture the self triggered event:

angular.element($window).bind('resize', onResize);

[OverZealous]

👍

I think this is really, really important. I have some CodeMirror instances inside ui-layout, and they absolutely need to be refreshed when a resize occurs. I'm really stumped as to how to handle them right now, without seriously customizing ui-layout.

[mindjuice]

I added the following to the end of draw():

//TODO: dispatch container resize event
var containerIds = [];
containerIds.push( beforeContainer.element.context.id );
containerIds.push( afterContainer.element.context.id );
$scope.$broadcast("resize", containerIds);

Then in my app, I added the following:

return angular.element( $window ).bind( 'resize', function() {
   $scope.someFunctionOfYoursToRespondToResizeEvent();
   return $scope.$apply();
} );

Not the best solution, but it is enough for my case. I ended up not using the containerIds, but they might be useful for you depending on what you are doing.

[OverZealous]

For others who need this now, and don't want to modify the existing ui-layout module, I have a decent-enough hack that enables a global event simply by including this module in your applications:

angular.module('oz.components.ui-layout-events', [
    'ui.layout'
])

    .directive('uiLayout', function($timeout, $rootScope) {
        var methods = ['updateDisplay', 'toggleBefore', 'toggleAfter', 'mouseUpHandler', 'mouseMoveHandler'],
            timer;

        function fireEvent() {
            if(timer) $timeout.cancel(timer);
            timer = $timeout(function() {
                $rootScope.$broadcast('ui.layout.resize');
                timer = null;
            }, 50);
        }

        return {
            restrict: 'AE',
            require: '^uiLayout',
            link: function(scope, elem, attrs, uiLayoutCtrl) {
                angular.forEach(methods, function(method) {
                    var oldFn = uiLayoutCtrl[method];
                    uiLayoutCtrl[method] = function() {
                        oldFn.apply(uiLayoutCtrl, arguments);
                        fireEvent();
                    };
                });
            }
        };
    });

What this does is $broadcast an event on $rootScope any time UI-Layout updates, toggles a section, or resizes a splitter. It uses $timeout to debounce the messages so it only fires once every 50ms or longer if you are dragging (so you don't get slow dragging due to a bunch of restyling events).

It works by overlapping the uiLayout directive (a totally awesome feature of Angular), and wrapping the existing methods for the uiLayout controller.

[mawic]

Are you still working on this? It would be great.
I tried OverZealous's workaround. But it continuously fires an event, if a container is resized. However, I only need an event at the end, like $element.trigger("resizeStop");

Do you have an idea how to solve it? Thanks!

[darabos]

It works great in 1.1.1, thanks a million! 👍

[SomeKittens]

@darabos glad you liked it!