From 933b8520ff924cbbfd537695a17782f7b896769c Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 12 May 2021 19:43:59 -0400
Subject: [PATCH] Afform GUI - Scroll fieldset into view when selecting entity

---
 ext/afform/admin/ang/afGuiEditor.css              |  2 +-
 .../ang/afGuiEditor/afGuiEditor.component.js      | 15 +++++++++++++++
 .../admin/ang/afGuiEditor/afGuiEditorPalette.html |  2 +-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css
index 5025b6e280..8b4adca911 100644
--- a/ext/afform/admin/ang/afGuiEditor.css
+++ b/ext/afform/admin/ang/afGuiEditor.css
@@ -175,11 +175,11 @@ body.af-gui-dragging {
   position: relative;
   padding: 22px 3px 3px;
   min-height: 40px;
-  display: block;
   margin-bottom: 10px;
   margin-top: 10px;
 }
 
+#afGuiEditor af-gui-container,
 #afGuiEditor af-gui-markup,
 #afGuiEditor af-gui-field,
 #afGuiEditor af-gui-edit-options {
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
index cf5e27e00b..3cc9b9b59f 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
@@ -151,6 +151,9 @@
           delete $scope.entities[type + num].loading;
           if (selectTab) {
             editor.selectEntity(type + num);
+            $timeout(function() {
+              editor.scrollToEntity(type + num);
+            });
           }
           $timeout(editor.adjustTabWidths);
         }
@@ -188,6 +191,18 @@
         return $scope.selectedEntityName;
       };
 
+      // Scroll an entity's first fieldset into view of the canvas
+      this.scrollToEntity = function(entityName) {
+        var $canvas = $('#afGuiEditor-canvas-body'),
+          $entity = $('.af-gui-container-type-fieldset[data-entity="' + entityName + '"]').first(),
+          // Scrolltop value needed to place entity's fieldset at top of canvas
+          scrollValue = $canvas.scrollTop() + ($entity.offset().top - $canvas.offset().top),
+          // Maximum possible scrollTop (height minus contents height, adjusting for padding)
+          maxScroll = $('#afGuiEditor-canvas-body > *').height() - $canvas.height() + 20;
+        // Exceeding the maximum scrollTop breaks the animation so keep it under the limit
+        $canvas.animate({scrollTop: scrollValue > maxScroll ? maxScroll : scrollValue}, 500);
+      };
+
       this.getAfform = function() {
         return $scope.afform;
       };
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html b/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html
index 4da70867cb..8d3b16fe44 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html
@@ -8,7 +8,7 @@
         </a>
       </li>
       <li role="presentation" ng-repeat="entity in entities" class="fluid-width-tab" ng-class="{active: selectedEntityName === entity.name}" title="{{ entity.label }}">
-        <a href ng-click="editor.selectEntity(entity.name)">
+        <a href ng-click="editor.selectEntity(entity.name); editor.scrollToEntity(entity.name);">
           <i class="crm-i {{:: editor.meta.entities[entity.type].icon }}"></i>
           <span ng-if="!entity.loading && editor.allowEntityConfig && selectedEntityName === entity.name" crm-ui-editable ng-model="entity.label" ng-change="editor.adjustTabWidths()">{{ entity.label }}</span>
           <span ng-if="!entity.loading && !(editor.allowEntityConfig && selectedEntityName === entity.name)">{{ entity.label }}</span>
-- 
2.25.1