From 3e151c40f59a754fe0ae296b65a90b460bf786de Mon Sep 17 00:00:00 2001 From: Rohan Mitchell Date: Thu, 6 Nov 2014 17:52:10 +1100 Subject: [PATCH] WIP: Smooth scroll to checkout errors --- .../checkout/accordion_controller.js.coffee | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/darkswarm/controllers/checkout/accordion_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/checkout/accordion_controller.js.coffee index c2726f0d53..d28437dd21 100644 --- a/app/assets/javascripts/darkswarm/controllers/checkout/accordion_controller.js.coffee +++ b/app/assets/javascripts/darkswarm/controllers/checkout/accordion_controller.js.coffee @@ -1,9 +1,10 @@ -Darkswarm.controller "AccordionCtrl", ($scope, storage, $timeout, CurrentHub) -> +Darkswarm.controller "AccordionCtrl", ($scope, storage, $timeout, $document, CurrentHub) -> $scope.accordion = details: true + billing: false shipping: false payment: false - billing: false + $scope.accordionSections = ["details", "billing", "shipping", "payment"] storage.bind $scope, "accordion", {storeName: "accordion_#{$scope.order.id}#{CurrentHub.hub.id}#{$scope.order.user_id}"} $scope.show = (section)-> @@ -11,10 +12,17 @@ Darkswarm.controller "AccordionCtrl", ($scope, storage, $timeout, CurrentHub) -> $scope.$on 'purchaseFormInvalid', (event, form) -> # Scroll to first invalid section - # TODO: hide all first - # TODO: Use Object.keys($scope.accordion) - sections = ["details", "billing", "shipping", "payment"] - for section in sections + for section in $scope.accordionSections if not form[section].$valid $scope.show section + + # If we call scrollTo() directly after show(), when one of the accordions above the + # scroll location is closed by show(), scrollTo() will scroll to the old location of + # the element. Putting this in a zero-length timeout is enough delay for the DOM to + # have updated. + $timeout -> + # Scrolling is confused by our position:fixed top bar - add an offset to scroll + # to the correct location, plus 5px buffer + offset_height = $("nav.top-bar").height() + 5 + $document.scrollTo $("##{section}"), offset_height, 500 break