From b596a4bd12e5a00850ab23ee7e4a4133d5337b56 Mon Sep 17 00:00:00 2001
From: Simon Huber <huber.simon@protonmail.com>
Date: Sat, 9 Mar 2024 17:27:49 +0100
Subject: [PATCH] Update draggable.js no to refresh when enable attr changes

This updates the draggable widget so that if the enable attr changes it just adds/removes the tc-draggable class, the draggable attr and the necessary EventListeners
---
 core/modules/widgets/draggable.js | 49 ++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/core/modules/widgets/draggable.js b/core/modules/widgets/draggable.js
index 97e795ae4..bd2ef176d 100644
--- a/core/modules/widgets/draggable.js
+++ b/core/modules/widgets/draggable.js
@@ -60,19 +60,8 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 	// Insert the node into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
-	// Add event handlers
-	if(this.dragEnable) {
-		$tw.utils.makeDraggable({
-			domNode: domNode,
-			dragTiddlerFn: function() {return self.getAttribute("tiddler");},
-			dragFilterFn: function() {return self.getAttribute("filter");},
-			startActions: self.startActions,
-			endActions: self.endActions,
-			dragImageType: self.dragImageType,
-			widget: this,
-			selector: self.dragHandleSelector
-		});
-	}
+	// Make the DOM node draggable if needed
+	this.makeDraggable(domNode);
 	this.domNodes.push(domNode);
 };
 
@@ -92,6 +81,29 @@ DraggableWidget.prototype.execute = function() {
 	this.makeChildWidgets();
 };
 
+/*
+Make a DOM node draggable or remove the draggable attr and the EventListeners
+*/
+DraggableWidget.prototype.makeDraggable = function(domNode) {
+	if(this.dragEnable) {
+		// Add event handlers
+		$tw.utils.makeDraggable({
+			domNode: domNode,
+			dragTiddlerFn: function() {return self.getAttribute("tiddler");},
+			dragFilterFn: function() {return self.getAttribute("filter");},
+			startActions: self.startActions,
+			endActions: self.endActions,
+			dragImageType: self.dragImageType,
+			widget: this,
+			selector: self.dragHandleSelector
+		});
+	} else if(this.dragStartReference && this.dragEndReference) {
+		domNode.removeAttribute("draggable");
+		domNode.removeEventListener("dragstart",this.dragStartReference,false);
+		domNode.removeEventListener("dragend",this.dragEndReference,false);
+	}
+};
+
 
 DraggableWidget.prototype.updateDomNodeClasses = function() {
 	var domNodeClasses = this.domNodes[0].className.split(" "),
@@ -114,10 +126,19 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 DraggableWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.tag || changedAttributes.selector || changedAttributes.dragimagetype || changedAttributes.enable || changedAttributes.startactions || changedAttributes.endactions) {
+	if(changedAttributes.tag || changedAttributes.selector || changedAttributes.dragimagetype || changedAttributes.startactions || changedAttributes.endactions) {
 		this.refreshSelf();
 		return true;
 	} else {
+		if(changedAttributes.enable) {
+			this.dragEnable = this.getAttribute("enable","yes") === "yes";
+			this.makeDraggable(this.domNodes[0]);
+			if(!this.dragHandleSelector && this.dragEnable && !this.domNodes[0].classList.contains("tc-draggable")) {
+				this.domNodes[0].classList.add("tc-draggable");
+			} else if(!this.dragEnable && this.domNodes[0].classList.contains("tc-draggable")) {
+				this.domNodes[0].classList.remove("tc-draggable");
+			}
+		}
 		if(changedAttributes["class"]) {
 			this.updateDomNodeClasses();
 		}