From f6e021d70f8e0a33b70de1029c9d530d5b96d9a2 Mon Sep 17 00:00:00 2001 From: Saq Imtiaz Date: Fri, 15 Jul 2022 16:37:27 +0200 Subject: [PATCH] Feat: dynamically refresh class for draggable widget DOM node instead of re-rendering the widget (#6787) --- core/modules/widgets/draggable.js | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/core/modules/widgets/draggable.js b/core/modules/widgets/draggable.js index 553257398..f759ab121 100644 --- a/core/modules/widgets/draggable.js +++ b/core/modules/widgets/draggable.js @@ -87,12 +87,32 @@ DraggableWidget.prototype.execute = function() { this.makeChildWidgets(); }; + +DraggableWidget.prototype.updateDomNodeClasses = function() { + var domNodeClasses = this.domNodes[0].className.split(" "), + oldClasses = this.draggableClasses.split(" "); + this.draggableClasses = this.getAttribute("class"); + //Remove classes assigned from the old value of class attribute + $tw.utils.each(oldClasses,function(oldClass){ + var i = domNodeClasses.indexOf(oldClass); + if(i !== -1) { + domNodeClasses.splice(i,1); + } + }); + //Add new classes from updated class attribute. + $tw.utils.pushTop(domNodeClasses,this.draggableClasses); + this.domNodes[0].setAttribute("class",domNodeClasses.join(" ")) +} + /* Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering */ DraggableWidget.prototype.refresh = function(changedTiddlers) { - var changedAttributes = this.computeAttributes(); - if($tw.utils.count(changedAttributes) > 0) { + var changedAttributes = this.computeAttributes(), + changedAttributesCount = $tw.utils.count(changedAttributes); + if(changedAttributesCount === 1 && changedAttributes["class"]) { + this.updateDomNodeClasses(); + } else if(changedAttributesCount > 0) { this.refreshSelf(); return true; } @@ -101,4 +121,4 @@ DraggableWidget.prototype.refresh = function(changedTiddlers) { exports.draggable = DraggableWidget; -})(); +})(); \ No newline at end of file