1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-08-04 12:58:01 +00:00

feat: styleblock

This commit is contained in:
lin onetwo 2024-08-08 23:52:48 +08:00
parent 078cd5fba2
commit 7c73f1f922
2 changed files with 28 additions and 30 deletions

View File

@ -75,54 +75,52 @@ exports.parse = function() {
exports.serialize = function(tree, serialize) { exports.serialize = function(tree, serialize) {
// serialize: function that serializes an array of nodes or a single node to a string // serialize: function that serializes an array of nodes or a single node to a string
var result = []; var lines = [];
var classes = []; var classes = [];
var styles = []; var styles = [];
// Collect all unique classes and styles from child nodes // Same classes are set to each children. So only collect from first child.
for(var i = 0; i < tree.children.length; i++) { var node = tree.children[0];
var node = tree.children[i]; if(node && node.attributes && node.attributes.class) {
if(node.attributes && node.attributes.class) { var nodeClasses = node.attributes.class.value.split(" ");
var nodeClasses = node.attributes.class.value.split(" "); for(var j = 0; j < nodeClasses.length; j++) {
for(var j = 0; j < nodeClasses.length; j++) { if(classes.indexOf(nodeClasses[j]) === -1) {
if(classes.indexOf(nodeClasses[j]) === -1) { classes.push(nodeClasses[j]);
classes.push(nodeClasses[j]);
}
} }
} }
if(node.attributes && node.attributes.style) { }
var nodeStyles = node.attributes.style.value.split(";"); if(node && node.attributes && node.attributes.style) {
for(var k = 0; k < nodeStyles.length; k++) { var nodeStyles = node.attributes.style.value.split(";");
var style = nodeStyles[k].trim(); for(var k = 0; k < nodeStyles.length; k++) {
if(style && styles.indexOf(style) === -1) { var style = nodeStyles[k].trim();
styles.push(style); if(style && styles.indexOf(style) === -1) {
} styles.push(style);
} }
} }
} }
// Add the style block header if there are any classes or styles // Add the style block header, sort styles first, and classes later. Original order is not preserved intentionally for simplicity.
if(classes.length > 0 || styles.length > 0) { if(classes.length > 0 || styles.length > 0) {
if(styles.length > 0) { if(styles.length > 0) {
result.push("@@"); lines.push("@@");
result.push(styles.join(";")); lines.push(styles.join(";"));
result.push(";\n"); lines.push(";\n");
} }
if(classes.length > 0) { if(classes.length > 0) {
result.push("@@."); lines.push("@@.");
result.push(classes.join(".")); lines.push(classes.join("."));
result.push("\n"); lines.push("\n");
} }
} }
// Serialize each child node and add to result // Serialize each child node and add to result
for(var i = 0; i < tree.children.length; i++) { for(var i = 0; i < tree.children.length; i++) {
result.push(serialize(tree.children[i])); lines.push(serialize(tree.children[i]));
} }
var result = lines.join("").trimEnd();
// Add the closing @@ for the style block // Add the closing @@ for the style block
result.push("@@"); result += "\n@@\n\n"
return result.join(""); return result;
}; };
})(); })();

View File

@ -315,11 +315,11 @@ describe("WikiAST serialization unit tests", function () {
wiki.addTiddler({ wiki.addTiddler({
title: "StyleBlockTest", title: "StyleBlockTest",
text: "@@.myClass\n@@background-color:red;\nThis paragraph will have the CSS class `myClass`.\n\n* The `<ul>` around this list will also have the class `myClass`\n* List item 2\n@@\n\n@@font-size:1.5em;\n@@.coloured-text\n@@.coloured-bg\n* Block content\n* With custom style and classes\n@@", text: "@@background-color:red;\n@@.myClass\nThis paragraph will have the CSS class `myClass`.\n\n* The `<ul>` around this list will also have the class `myClass`\n* List item 2\n@@\n\n@@font-size:1.5em;\n@@.coloured-text.coloured-bg\n* Block content\n* With custom style and classes\n@@",
}); });
wiki.addTiddler({ wiki.addTiddler({
title: "StyleBlockTest2", title: "StyleBlockTest2",
text: "@@.myFirstClass.mySecondClass\n@@width:100px;.myThirdClass\nThis is a paragraph\n@@\n\n@@background-color:lightcyan;\n* Item one\n* Item two\n@@", text: "@@width:100px;\n@@.myFirstClass.mySecondClass.myThirdClass\nThis is a paragraph\n@@\n\n@@background-color:lightcyan;\n* Item one\n* Item two\n@@",
}); });
it("should serialize style blocks correctly", function () { it("should serialize style blocks correctly", function () {
var serialized = $tw.utils.serializeParseTree(wiki.parseTiddler("StyleBlockTest").tree).trimEnd(); var serialized = $tw.utils.serializeParseTree(wiki.parseTiddler("StyleBlockTest").tree).trimEnd();