From 67120a3d75bb1bf4ec02e2af68365fbdffe2fb04 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 6 Oct 2021 13:42:27 -0400
Subject: [PATCH] Afform - ensure dragging classes are removed when not sorting
---
ext/afform/admin/ang/afGuiEditor.js | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/ext/afform/admin/ang/afGuiEditor.js b/ext/afform/admin/ang/afGuiEditor.js
index 3ecfdeadc2bd..aca9acb706dc 100644
--- a/ext/afform/admin/ang/afGuiEditor.js
+++ b/ext/afform/admin/ang/afGuiEditor.js
@@ -180,19 +180,24 @@
CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').done(function() {
$('#af-gui-icon-picker').crmIconPicker();
});
- // Add css class while dragging
+ // Add css classes while dragging
$(document)
+ // When dragging an item over a container, add a class to highlight the target
.on('sortover', function(e) {
$('.af-gui-container').removeClass('af-gui-dragtarget');
$(e.target).closest('.af-gui-container').addClass('af-gui-dragtarget');
})
+ // Un-highlight when dragging out of a container
.on('sortout', '.af-gui-container', function() {
$(this).removeClass('af-gui-dragtarget');
})
+ // Add body class which puts the entire UI into a "dragging" state
.on('sortstart', '#afGuiEditor', function() {
$('body').addClass('af-gui-dragging');
})
- .on('sortstop', function() {
+ // Ensure dragging classes are removed when not sorting
+ // Listening to multiple event types because sort* events are not 100% reliable
+ .on('sortbeforestop mouseenter', function() {
$('body').removeClass('af-gui-dragging');
$('.af-gui-dragtarget').removeClass('af-gui-dragtarget');
});