Merge branch 'master' into colour-improvements

This commit is contained in:
Jeremy Ruston
2024-10-30 20:38:58 +00:00
35 changed files with 555 additions and 351 deletions
+49 -21
View File
@@ -56,36 +56,64 @@ Object.defineProperty(TW_TextNode.prototype, "formattedTextContent", {
}
});
var TW_Element = function(tag,namespace) {
var TW_Style = function(el) {
// Define the internal style object
var styleObject = {
// Method to get the entire style object
get: function() {
return el._style;
},
// Method to set styles using a string (e.g. "color:red; background-color:blue;")
set: function(str) {
var self = this;
str = str || "";
$tw.utils.each(str.split(";"),function(declaration) {
var parts = declaration.split(":"),
name = $tw.utils.trim(parts[0]),
value = $tw.utils.trim(parts[1]);
if(name && value) {
el._style[$tw.utils.convertStyleNameToPropertyName(name)] = value;
}
});
},
// Method to set a specific property without transforming the property name, such as a custom property
setProperty: function(name, value) {
el._style[name] = value;
}
};
// Return a Proxy to handle direct access to individual style properties
return new Proxy(styleObject, {
get: function(target, property) {
// If the property exists on styleObject, return it (get, set, setProperty methods)
if (property in target) {
return target[property];
}
// Otherwise, return the corresponding property from _style
return el._style[$tw.utils.convertStyleNameToPropertyName(property)] || "";
},
set: function(target, property, value) {
// Set the property in _style
el._style[$tw.utils.convertStyleNameToPropertyName(property)] = value;
return true;
}
});
};
var TW_Element = function(tag, namespace) {
bumpSequenceNumber(this);
this.isTiddlyWikiFakeDom = true;
this.tag = tag;
this.attributes = {};
this.isRaw = false;
this.children = [];
this._style = {};
this._style = {}; // Internal style object
this.style = new TW_Style(this); // Proxy for style management
this.namespaceURI = namespace || "http://www.w3.org/1999/xhtml";
};
Object.setPrototypeOf(TW_Element.prototype,TW_Node.prototype);
Object.defineProperty(TW_Element.prototype, "style", {
get: function() {
return this._style;
},
set: function(str) {
var self = this;
str = str || "";
$tw.utils.each(str.split(";"),function(declaration) {
var parts = declaration.split(":"),
name = $tw.utils.trim(parts[0]),
value = $tw.utils.trim(parts[1]);
if(name && value) {
self._style[$tw.utils.convertStyleNameToPropertyName(name)] = value;
}
});
}
});
Object.setPrototypeOf(TW_Element.prototype,TW_Node.prototype);
Object.defineProperty(TW_Element.prototype, "nodeType", {
get: function() {
@@ -105,7 +133,7 @@ TW_Element.prototype.setAttribute = function(name,value) {
throw "Cannot setAttribute on a raw TW_Element";
}
if(name === "style") {
this.style = value;
this.style.set(value);
} else {
this.attributes[name] = value + "";
}
+26 -5
View File
@@ -125,11 +125,23 @@ DroppableWidget.prototype.handleDropEvent = function(event) {
// Remove highlighting
$tw.utils.removeClass(this.domNodes[0],"tc-dragover");
// Try to import the various data types we understand
$tw.utils.importDataTransfer(dataTransfer,null,function(fieldsArray) {
fieldsArray.forEach(function(fields) {
self.performActions(fields.title || fields.text,event);
if(this.droppableActions) {
$tw.utils.importDataTransfer(dataTransfer,null,function(fieldsArray) {
fieldsArray.forEach(function(fields) {
self.performActions(fields.title || fields.text,event);
});
});
});
}
// Send a TitleList to performListActions
if(this.droppableListActions) {
$tw.utils.importDataTransfer(dataTransfer,null,function(fieldsArray) {
var titleList = [];
fieldsArray.forEach(function(fields) {
titleList.push(fields.title || fields.text);
});
self.performListActions($tw.utils.stringifyList(titleList),event);
});
}
// Tell the browser that we handled the drop
event.preventDefault();
// Stop the drop ripple up to any parent handlers
@@ -137,6 +149,13 @@ DroppableWidget.prototype.handleDropEvent = function(event) {
return false;
};
DroppableWidget.prototype.performListActions = function(titleList,event) {
if(this.droppableListActions) {
var modifierKey = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
this.invokeActionString(this.droppableListActions,this,event,{actionTiddlerList: titleList, modifier: modifierKey});
}
};
DroppableWidget.prototype.performActions = function(title,event) {
if(this.droppableActions) {
var modifierKey = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
@@ -149,6 +168,7 @@ Compute the internal state of the widget
*/
DroppableWidget.prototype.execute = function() {
this.droppableActions = this.getAttribute("actions");
this.droppableListActions = this.getAttribute("listActions");
this.droppableEffect = this.getAttribute("effect","copy");
this.droppableTag = this.getAttribute("tag");
this.droppableEnable = (this.getAttribute("enable") || "yes") === "yes";
@@ -168,7 +188,8 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
*/
DroppableWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
if(changedAttributes.tag || changedAttributes.enable || changedAttributes.disabledClass || changedAttributes.actions || changedAttributes.effect) {
if(changedAttributes.tag || changedAttributes.enable || changedAttributes.disabledClass ||
changedAttributes.actions|| changedAttributes.listActions || changedAttributes.effect) {
this.refreshSelf();
return true;
} else {
+10 -10
View File
@@ -65,6 +65,16 @@ GenesisWidget.prototype.execute = function() {
children: this.parseTreeNode.children || [],
isNotRemappable: !this.genesisRemappable
}];
// Apply attributes in $names/$values
this.attributeNames = [];
this.attributeValues = [];
if(this.genesisNames && this.genesisValues) {
this.attributeNames = this.wiki.filterTiddlers(self.genesisNames,this);
this.attributeValues = this.wiki.filterTiddlers(self.genesisValues,this);
$tw.utils.each(this.attributeNames,function(varname,index) {
$tw.utils.addAttributeToParseTreeNode(parseTreeNodes[0],varname,self.attributeValues[index] || "");
});
}
// Apply explicit attributes
$tw.utils.each($tw.utils.getOrderedAttributesFromParseTreeNode(this.parseTreeNode),function(attribute) {
var name = attribute.name;
@@ -79,16 +89,6 @@ GenesisWidget.prototype.execute = function() {
}
$tw.utils.addAttributeToParseTreeNode(parseTreeNodes[0],$tw.utils.extend({},attribute,{name: name}));
});
// Apply attributes in $names/$values
this.attributeNames = [];
this.attributeValues = [];
if(this.genesisNames && this.genesisValues) {
this.attributeNames = this.wiki.filterTiddlers(self.genesisNames,this);
this.attributeValues = this.wiki.filterTiddlers(self.genesisValues,this);
$tw.utils.each(this.attributeNames,function(varname,index) {
$tw.utils.addAttributeToParseTreeNode(parseTreeNodes[0],varname,self.attributeValues[index] || "");
});
}
// Construct the child widgets
this.makeChildWidgets(parseTreeNodes);
};
+5
View File
@@ -440,6 +440,11 @@ Widget.prototype.assignAttributes = function(domNode,options) {
destPrefix = options.destPrefix || "",
EVENT_ATTRIBUTE_PREFIX = "on";
var assignAttribute = function(name,value) {
// Process any CSS custom properties
if(name.substr(0,2) === "--" && name.length > 2) {
domNode.style.setProperty(name,value);
return;
}
// Process any style attributes before considering sourcePrefix and destPrefix
if(name.substr(0,6) === "style." && name.length > 6) {
domNode.style[$tw.utils.unHyphenateCss(name.substr(6))] = value;