mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2026-09-05 09:38:53 +00:00
Merge branch 'master' into colour-improvements
This commit is contained in:
@@ -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 + "";
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user