mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-06-03 15:14:07 +00:00
Code Issues Releases Wiki Activity

Button and Droppable widgets: improve refresh handling for classes (#5091)

Browse Source 
* Button and Droppable widgets: improve refesh handling for classes

* Added comment regarding handling of class attribute
This commit is contained in:
saqimtiaz 2020-11-22 22:13:24 +01:00 committed by GitHub
parent 530b4308e3
commit 3c195b05cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
core/modules/widgets/button.js
View File

@ -27,33 +27,22 @@ ButtonWidget.prototype = new Widget();
Render this widget into the DOM Render this widget into the DOM
*/ */
ButtonWidget.prototype.render = function(parent,nextSibling) { ButtonWidget.prototype.render = function(parent,nextSibling) {
var self = this; var self = this,
tag = "button",
domNode;
// Remember parent // Remember parent
this.parentDomNode = parent; this.parentDomNode = parent;
// Compute attributes and execute state // Compute attributes and execute state
this.computeAttributes(); this.computeAttributes();
this.execute(); this.execute();
// Create element // Create element
var tag = "button";
if(this.buttonTag && $tw.config.htmlUnsafeElements.indexOf(this.buttonTag) === -1) { if(this.buttonTag && $tw.config.htmlUnsafeElements.indexOf(this.buttonTag) === -1) {
tag = this.buttonTag; tag = this.buttonTag;
} }
var domNode = this.document.createElement(tag); domNode = this.document.createElement(tag);
this.domNode = domNode;
// Assign classes // Assign classes
var classes = this["class"].split(" ") || [], this.assignDomNodeClasses();
isPoppedUp = (this.popup || this.popupTitle) && this.isPoppedUp();
if(this.selectedClass) {
if((this.set || this.setTitle) && this.setTo && this.isSelected()) {
$tw.utils.pushTop(classes,this.selectedClass.split(" "));
}
if(isPoppedUp) {
$tw.utils.pushTop(classes,this.selectedClass.split(" "));
}
}
if(isPoppedUp) {
$tw.utils.pushTop(classes,"tc-popup-handle");
}
domNode.className = classes.join(" ");
// Assign other attributes // Assign other attributes
if(this.style) { if(this.style) {
domNode.setAttribute("style",this.style); domNode.setAttribute("style",this.style);
@ -200,10 +189,10 @@ ButtonWidget.prototype.execute = function() {
this.setTo = this.getAttribute("setTo"); this.setTo = this.getAttribute("setTo");
this.popup = this.getAttribute("popup"); this.popup = this.getAttribute("popup");
this.hover = this.getAttribute("hover"); this.hover = this.getAttribute("hover");
this["class"] = this.getAttribute("class","");
this["aria-label"] = this.getAttribute("aria-label"); this["aria-label"] = this.getAttribute("aria-label");
this.tooltip = this.getAttribute("tooltip"); this.tooltip = this.getAttribute("tooltip");
this.style = this.getAttribute("style"); this.style = this.getAttribute("style");
// Class attribute is handled in assignDomNodeClasses()
this.selectedClass = this.getAttribute("selectedClass"); this.selectedClass = this.getAttribute("selectedClass");
this.defaultSetValue = this.getAttribute("default",""); this.defaultSetValue = this.getAttribute("default","");
this.buttonTag = this.getAttribute("tag"); this.buttonTag = this.getAttribute("tag");
@ -219,14 +208,33 @@ ButtonWidget.prototype.execute = function() {
this.makeChildWidgets(); this.makeChildWidgets();
}; };
ButtonWidget.prototype.assignDomNodeClasses = function() {
var classes = this.getAttribute("class","").split(" "),
isPoppedUp = (this.popup || this.popupTitle) && this.isPoppedUp();
if(this.selectedClass) {
if((this.set || this.setTitle) && this.setTo && this.isSelected()) {
$tw.utils.pushTop(classes,this.selectedClass.split(" "));
}
if(isPoppedUp) {
$tw.utils.pushTop(classes,this.selectedClass.split(" "));
}
}
if(isPoppedUp) {
$tw.utils.pushTop(classes,"tc-popup-handle");
}
this.domNode.className = classes.join(" ");
}
/* /*
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
*/ */
ButtonWidget.prototype.refresh = function(changedTiddlers) { ButtonWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes(); var changedAttributes = this.computeAttributes();
if(changedAttributes.actions || changedAttributes.to || changedAttributes.message || changedAttributes.param || changedAttributes.set || changedAttributes.setTo || changedAttributes.popup || changedAttributes.hover || changedAttributes["class"] || changedAttributes.selectedClass || changedAttributes.style || changedAttributes.dragFilter || changedAttributes.dragTiddler || (this.set && changedTiddlers[this.set]) || (this.popup && changedTiddlers[this.popup]) || (this.popupTitle && changedTiddlers[this.popupTitle]) || changedAttributes.setTitle || changedAttributes.setField || changedAttributes.setIndex || changedAttributes.popupTitle || changedAttributes.disabled) { if(changedAttributes.actions || changedAttributes.to || changedAttributes.message || changedAttributes.param || changedAttributes.set || changedAttributes.setTo || changedAttributes.popup || changedAttributes.hover || changedAttributes.selectedClass || changedAttributes.style || changedAttributes.dragFilter || changedAttributes.dragTiddler || (this.set && changedTiddlers[this.set]) || (this.popup && changedTiddlers[this.popup]) || (this.popupTitle && changedTiddlers[this.popupTitle]) || changedAttributes.setTitle || changedAttributes.setField || changedAttributes.setIndex || changedAttributes.popupTitle || changedAttributes.disabled) {
this.refreshSelf(); this.refreshSelf();
return true; return true;
} else if(changedAttributes["class"]) {
this.assignDomNodeClasses();
} }
return this.refreshChildren(changedTiddlers); return this.refreshChildren(changedTiddlers);
}; };

23
core/modules/widgets/droppable.js
View File

@ -27,21 +27,21 @@ DroppableWidget.prototype = new Widget();
Render this widget into the DOM Render this widget into the DOM
*/ */
DroppableWidget.prototype.render = function(parent,nextSibling) { DroppableWidget.prototype.render = function(parent,nextSibling) {
var self = this; var self = this,
tag = this.parseTreeNode.isBlock ? "div" : "span",
domNode;
// Remember parent // Remember parent
this.parentDomNode = parent; this.parentDomNode = parent;
// Compute attributes and execute state // Compute attributes and execute state
this.computeAttributes(); this.computeAttributes();
this.execute(); this.execute();
var tag = this.parseTreeNode.isBlock ? "div" : "span";
if(this.droppableTag && $tw.config.htmlUnsafeElements.indexOf(this.droppableTag) === -1) { if(this.droppableTag && $tw.config.htmlUnsafeElements.indexOf(this.droppableTag) === -1) {
tag = this.droppableTag; tag = this.droppableTag;
} }
// Create element and assign classes // Create element and assign classes
var domNode = this.document.createElement(tag), domNode = this.document.createElement(tag);
classes = (this.droppableClass || "").split(" "); this.domNode = domNode;
classes.push("tc-droppable"); this.assignDomNodeClasses();
domNode.className = classes.join(" ");
// Add event handlers // Add event handlers
if(this.droppableEnable) { if(this.droppableEnable) {
$tw.utils.addEventListeners(domNode,[ $tw.utils.addEventListeners(domNode,[
@ -144,20 +144,27 @@ DroppableWidget.prototype.execute = function() {
this.droppableActions = this.getAttribute("actions"); this.droppableActions = this.getAttribute("actions");
this.droppableEffect = this.getAttribute("effect","copy"); this.droppableEffect = this.getAttribute("effect","copy");
this.droppableTag = this.getAttribute("tag"); this.droppableTag = this.getAttribute("tag");
this.droppableClass = this.getAttribute("class");
this.droppableEnable = (this.getAttribute("enable") || "yes") === "yes"; this.droppableEnable = (this.getAttribute("enable") || "yes") === "yes";
// Make child widgets // Make child widgets
this.makeChildWidgets(); this.makeChildWidgets();
}; };
DroppableWidget.prototype.assignDomNodeClasses = function() {
var classes = this.getAttribute("class","").split(" ");
classes.push("tc-droppable");
this.domNode.className = classes.join(" ");
};
/* /*
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
*/ */
DroppableWidget.prototype.refresh = function(changedTiddlers) { DroppableWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes(); var changedAttributes = this.computeAttributes();
if(changedAttributes["class"] || changedAttributes.tag || changedAttributes.enable) { if(changedAttributes.tag || changedAttributes.enable) {
this.refreshSelf(); this.refreshSelf();
return true; return true;
} else if(changedAttributes["class"]) {
this.assignDomNodeClasses();
} }
return this.refreshChildren(changedTiddlers); return this.refreshChildren(changedTiddlers);
}; };