fix(core): Fix scrolling in modal highlighting navigation

spinnaker · May 6, 2017 · 7a61b3d · 7a61b3d
1 parent df8dbab
commit 7a61b3d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/app/scripts/modules/core/modal/wizard/v2modalWizard.component.html b/app/scripts/modules/core/modal/wizard/v2modalWizard.component.html
@@ -23,7 +23,9 @@ <h3>{{$ctrl.wizard.heading}}</h3>
         <div class="steps"
              ng-transclude
              sticky-headers
-             waypoint-container></div>
+             waypoint-container
+             waypoint-offset="120"
+             waypoint-container-key="#modal-wizard"></div>
       </div>
     </div>
   </div>

diff --git a/app/scripts/modules/core/utils/utils.module.js b/app/scripts/modules/core/utils/utils.module.js
@@ -16,4 +16,6 @@ module.exports = angular.module('spinnaker.utils', [
   require('./infiniteScroll.directive.js'),
   RENDER_IF_FEATURE,
   STICKY_HEADER_COMPONENT,
+  require('./waypoints/waypoint.directive'),
+  require('./waypoints/waypointContainer.directive'),
 ]);
diff --git a/app/scripts/modules/core/utils/waypoints/waypoint.directive.js b/app/scripts/modules/core/utils/waypoints/waypoint.directive.js
@@ -1,8 +1,12 @@
 'use strict';
 
+import { WAYPOINT_SERVICE } from './waypoint.service';
+
 let angular = require('angular');
 
-module.exports = angular.module('spinnaker.core.utils.waypoints.container.directive', [])
+module.exports = angular.module('spinnaker.core.utils.waypoints.container.directive', [
+  WAYPOINT_SERVICE
+])
   .directive('waypoint', function () {
     return {
       restrict: 'A',

diff --git a/app/scripts/modules/core/utils/waypoints/waypoint.service.ts b/app/scripts/modules/core/utils/waypoints/waypoint.service.ts
@@ -5,7 +5,7 @@ import { $timeout, $rootScope } from 'ngimport';
 
 interface IViewPlacement {
   top: number;
-  elem: Element;
+  elem: string;
 }
 
 interface IWaypoint {
@@ -48,7 +48,7 @@ export class WaypointService {
           waypoints.each((_index, waypoint) => {
             const waypointRect = waypoint.getBoundingClientRect();
             if (waypointRect.bottom >= topThreshold && waypointRect.top <= containerRect.bottom) {
-                inView.push({ top: waypointRect.top, elem: waypoint });
+                inView.push({ top: waypointRect.top, elem: waypoint.getAttribute('waypoint') });
             }
           });
           this.waypointRegistry[key] = {
@@ -86,7 +86,7 @@ export class WaypointService {
             containerScrollTop = container.scrollTop();
 
       candidates.every((candidate) => {
-        const elem = $(candidate.elem);
+        const elem = $('[waypoint="' + candidate.elem + '"]', container);
         if (elem.length) {
           container.scrollTop(containerScrollTop + elem.offset().top - candidate.top);
           container.trigger('scroll');