From 24e4a54758868abbc79cb66dfe5c3f22ab70bd8c Mon Sep 17 00:00:00 2001 From: ndudenhoeffer Date: Wed, 29 Jul 2015 06:58:47 -0500 Subject: [PATCH] feat(events): Broadcast events on resize and toggle Events are now broadcast on the ui-layout controller scope when on both resize and toggle. closes #34 --- README.md | 24 ++++++++++++++++++++++++ src/ui-layout.js | 12 ++++++++++-- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a8d3bc7..de58a9f 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,30 @@ percentage ``` +## Events + +Events are broadcast on the scope where ui-layout is attached. This means they are available to any controller inside of a ui-layout container. + +### ui.layout.toggle + +Dispatched when a container is opened or closed using the chevron buttons. +''' +$scope.$on('ui.layout.toggle', function(e, container){ + if ( container.size > 0 ){ + console.log('container is open!'); + } +}); +''' + +### ui.layout.resize + +Dispatched as a splitbar is dragged, debounced to occur only every 50ms. + +''' +$scope.$on('ui.layout.resize', function(e, beforeContainer, afterContainer){}); +''' + + ## Testing We use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt: diff --git a/src/ui-layout.js b/src/ui-layout.js index f0f0531..ff73b2a 100644 --- a/src/ui-layout.js +++ b/src/ui-layout.js @@ -4,7 +4,7 @@ * UI.Layout */ angular.module('ui.layout', []) - .controller('uiLayoutCtrl', ['$scope', '$attrs', '$element', 'LayoutContainer', function uiLayoutCtrl($scope, $attrs, $element, LayoutContainer) { + .controller('uiLayoutCtrl', ['$scope', '$attrs', '$element', '$timeout', 'LayoutContainer', function uiLayoutCtrl($scope, $attrs, $element, $timeout, LayoutContainer) { var ctrl = this; var opts = angular.extend({}, $scope.$eval($attrs.uiLayout), $scope.$eval($attrs.options)); var numOfSplitbars = 0; @@ -43,6 +43,7 @@ angular.module('ui.layout', []) ctrl.updateDisplay(); }; + var debounceEvent; function draw() { var position = ctrl.sizeProperties.flowProperty; var dividerSize = parseInt(opts.dividerSize); @@ -90,7 +91,12 @@ angular.module('ui.layout', []) // move the splitbar ctrl.movingSplitbar[position] = newPosition; - //TODO: dispatch container resize event + // broadcast an event that resize happened (debounced to 50ms) + if(debounceEvent) $timeout.cancel(debounceEvent); + debounceEvent = $timeout(function() { + $scope.$broadcast('ui.layout.resize', beforeContainer, afterContainer); + debounceEvent = null; + }, 50); } } } @@ -395,6 +401,7 @@ angular.module('ui.layout', []) } } }); + $scope.$broadcast('ui.layout.toggle', c); return c.collapsed; }; @@ -439,6 +446,7 @@ angular.module('ui.layout', []) if(prevContainer) prevContainer.size -= (c.actualSize + endDiff); } }); + $scope.$broadcast('ui.layout.toggle', c); return c.collapsed; };