diff --git a/src/components/fabSpeedDial/demoBasicUsage/index.html b/src/components/fabSpeedDial/demoBasicUsage/index.html index 4d78006f67b..939bd91d5ae 100644 --- a/src/components/fabSpeedDial/demoBasicUsage/index.html +++ b/src/components/fabSpeedDial/demoBasicUsage/index.html @@ -43,10 +43,9 @@
Open/Closed - - Open - Closed - + + Open +
diff --git a/src/components/fabSpeedDial/fabController.js b/src/components/fabSpeedDial/fabController.js index 01ab1b88ae9..967ca061c15 100644 --- a/src/components/fabSpeedDial/fabController.js +++ b/src/components/fabSpeedDial/fabController.js @@ -7,7 +7,7 @@ function FabController($scope, $element, $animate, $mdUtil, $mdConstant, $timeout) { var vm = this; - // NOTE: We use async evals below to avoid conflicts with any existing digest loops + // NOTE: We use async eval(s) below to avoid conflicts with any existing digest loops vm.open = function() { $scope.$evalAsync("vm.isOpen = true"); @@ -142,8 +142,12 @@ function enableKeyboard() { $element.on('keydown', keyPressed); - angular.element(document).on('click', checkForOutsideClick); - angular.element(document).on('touchend', checkForOutsideClick); + + // On the next tick, setup a check for outside clicks; we do this on the next tick to avoid + // clicks/touches that result in the isOpen attribute changing (e.g. a bound radio button) + $mdUtil.nextTick(function() { + angular.element(document).on('click touchend', checkForOutsideClick); + }); // TODO: On desktop, we should be able to reset the indexes so you cannot tab through, but // this breaks accessibility, especially on mobile, since you have no arrow keys to press @@ -152,8 +156,7 @@ function disableKeyboard() { $element.off('keydown', keyPressed); - angular.element(document).off('click', checkForOutsideClick); - angular.element(document).off('touchend', checkForOutsideClick); + angular.element(document).off('click touchend', checkForOutsideClick); } function checkForOutsideClick(event) { diff --git a/src/components/fabSpeedDial/fabSpeedDial.js b/src/components/fabSpeedDial/fabSpeedDial.js index bd9c29b23cd..7f8f538becd 100644 --- a/src/components/fabSpeedDial/fabSpeedDial.js +++ b/src/components/fabSpeedDial/fabSpeedDial.js @@ -148,21 +148,27 @@ var newPosition, axis; var styles = item.style; + // Make sure to account for differences in the dimensions of the trigger verses the items + // so that we can properly center everything; this helps hide the item's shadows behind + // the trigger. + var triggerItemHeightOffset = (triggerElement.clientHeight - item.clientHeight) / 2; + var triggerItemWidthOffset = (triggerElement.clientWidth - item.clientWidth) / 2; + switch (ctrl.direction) { case 'up': - newPosition = item.scrollHeight * (index + 1); + newPosition = (item.scrollHeight * (index + 1) + triggerItemHeightOffset); axis = 'Y'; break; case 'down': - newPosition = -item.scrollHeight * (index + 1); + newPosition = -(item.scrollHeight * (index + 1) + triggerItemHeightOffset); axis = 'Y'; break; case 'left': - newPosition = item.scrollWidth * (index + 1); + newPosition = (item.scrollWidth * (index + 1) + triggerItemWidthOffset); axis = 'X'; break; case 'right': - newPosition = -item.scrollWidth * (index + 1); + newPosition = -(item.scrollWidth * (index + 1) + triggerItemWidthOffset); axis = 'X'; break; }