Feat: add support for data attributes to Draggable and Droppable widgets (#7845)
This commit is contained in:
parent
f7a94879da
commit
142bc19a29
|
@ -52,6 +52,11 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
|
|||
classes.push("tc-draggable");
|
||||
}
|
||||
domNode.setAttribute("class",classes.join(" "));
|
||||
// Assign data- attributes and style. attributes
|
||||
this.assignAttributes(domNode,{
|
||||
sourcePrefix: "data-",
|
||||
destPrefix: "data-"
|
||||
});
|
||||
// Insert the node into the DOM and render any children
|
||||
parent.insertBefore(domNode,nextSibling);
|
||||
this.renderChildren(domNode,null);
|
||||
|
@ -108,13 +113,19 @@ DraggableWidget.prototype.updateDomNodeClasses = function() {
|
|||
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(),
|
||||
changedAttributesCount = $tw.utils.count(changedAttributes);
|
||||
if(changedAttributesCount === 1 && changedAttributes["class"]) {
|
||||
this.updateDomNodeClasses();
|
||||
} else if(changedAttributesCount > 0) {
|
||||
var changedAttributes = this.computeAttributes();
|
||||
if(changedAttributes.tag || changedAttributes.selector || changedAttributes.dragimagetype || changedAttributes.enable || changedAttributes.startactions || changedAttributes.endactions) {
|
||||
this.refreshSelf();
|
||||
return true;
|
||||
} else {
|
||||
if(changedAttributes["class"]) {
|
||||
this.assignDomNodeClasses();
|
||||
}
|
||||
this.assignAttributes(this.domNodes[0],{
|
||||
changedAttributes: changedAttributes,
|
||||
sourcePrefix: "data-",
|
||||
destPrefix: "data-"
|
||||
});
|
||||
}
|
||||
return this.refreshChildren(changedTiddlers);
|
||||
};
|
||||
|
|
|
@ -42,6 +42,11 @@ DroppableWidget.prototype.render = function(parent,nextSibling) {
|
|||
domNode = this.document.createElement(tag);
|
||||
this.domNode = domNode;
|
||||
this.assignDomNodeClasses();
|
||||
// Assign data- attributes and style. attributes
|
||||
this.assignAttributes(domNode,{
|
||||
sourcePrefix: "data-",
|
||||
destPrefix: "data-"
|
||||
});
|
||||
// Add event handlers
|
||||
if(this.droppableEnable) {
|
||||
$tw.utils.addEventListeners(domNode,[
|
||||
|
@ -166,8 +171,15 @@ DroppableWidget.prototype.refresh = function(changedTiddlers) {
|
|||
if(changedAttributes.tag || changedAttributes.enable || changedAttributes.disabledClass || changedAttributes.actions || changedAttributes.effect) {
|
||||
this.refreshSelf();
|
||||
return true;
|
||||
} else if(changedAttributes["class"]) {
|
||||
this.assignDomNodeClasses();
|
||||
} else {
|
||||
if(changedAttributes["class"]) {
|
||||
this.assignDomNodeClasses();
|
||||
}
|
||||
this.assignAttributes(this.domNodes[0],{
|
||||
changedAttributes: changedAttributes,
|
||||
sourcePrefix: "data-",
|
||||
destPrefix: "data-"
|
||||
});
|
||||
}
|
||||
return this.refreshChildren(changedTiddlers);
|
||||
};
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
title: Widgets/DataAttributes/DraggableWidget
|
||||
description: Data Attributes for DraggableWidget
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<$draggable tag="div" class="myclass" data-title="mytiddler" style.color="red">
|
||||
my tiddler
|
||||
</$draggable>
|
||||
<$draggable tag="div" class="myclass" data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}}>
|
||||
hello
|
||||
</$draggable>
|
||||
+
|
||||
title: Actions
|
||||
|
||||
<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
|
||||
+
|
||||
title: Temp
|
||||
color: black
|
||||
|
||||
Title1
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><div class="myclass tc-draggable" data-title="mytiddler" draggable="true" style="color:red;">my tiddler</div><div class="myclass tc-draggable" data-title="Title2" draggable="true" style="color:red;">hello</div></p>
|
|
@ -0,0 +1,27 @@
|
|||
title: Widgets/DataAttributes/DroppableWidget
|
||||
description: Data Attributes for DroppableWidget
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
<$droppable tag="div" class="myclass" data-title="mytiddler" style.color="red">
|
||||
my tiddler
|
||||
</$droppable>
|
||||
<$droppable tag="div" class="myclass" data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}}>
|
||||
hello
|
||||
</$droppable>
|
||||
+
|
||||
title: Actions
|
||||
|
||||
<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
|
||||
+
|
||||
title: Temp
|
||||
color: black
|
||||
|
||||
Title1
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p><div class="myclass tc-droppable" data-title="mytiddler" style="color:red;">my tiddler</div><div class="myclass tc-droppable" data-title="Title2" style="color:red;">hello</div></p>
|
Loading…
Reference in New Issue