1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-26 19:47:20 +00:00

Remove wikify operator and refactor palette preview

The implementation of the palette preview is much less elegant like this, but it does work
This commit is contained in:
Jeremy Ruston 2024-11-07 18:30:39 +00:00
parent a4d930322e
commit 250e57cd79
14 changed files with 140 additions and 352 deletions

View File

@ -1,37 +0,0 @@
/*\
title: $:/core/modules/filters/wikify.js
type: application/javascript
module-type: filteroperator
Filter operator wikifying each string in the input list and returning the result as a list of strings
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
/*
Export our filter function
*/
exports.wikify = function(source,operator,options) {
var output = operator.operands[0],
mode = operator.operands[1],
type = operator.operands[2],
results = [];
source(function(tiddler,title) {
var wikifier = new $tw.utils.Wikifier({
wiki: options.wiki,
widget: options.widget,
text: title,
type: type,
mode: mode,
output: output
});
results.push(wikifier.getResult());
});
return results;
};
})();

View File

@ -1,108 +0,0 @@
/*\
title: $:/core/modules/utils/wikifier.js
type: application/javascript
module-type: utils
A high level helper class for parsing and wikification
\*/
(function(){
/*
Options include:
wiki: wiki to be used for wikification
widget: optional widget to be used as parent of wikified text
text: text to be parsed/wikified
type: type of the text
mode: inline or block
output: text, formattedtext, html, parsetree or widgettree
*/
function Wikifier(options) {
this.wiki = options.wiki || $tw.wiki;
this.widget = options.widget || $tw.rootWidget;
this.text = options.text || "";
this.type = options.type || "";
this.mode = options.mode || "block";
this.output = options.output || "text";
// Create the parse tree
this.parser = this.wiki.parseText(this.type,this.text,{
parseAsInline: this.mode === "inline"
});
// Create the widget tree
this.widgetNode = this.wiki.makeWidget(this.parser,{
document: $tw.fakeDocument,
parentWidget: this.widget
});
// Render the widget tree to the container
this.container = $tw.fakeDocument.createElement("div");
this.widgetNode.render(this.container,null);
};
Wikifier.prototype.refresh = function(changedTiddlers) {
// Refresh the widget tree
return this.widgetNode.refresh(changedTiddlers);
};
/*
Return the result string
*/
Wikifier.prototype.getResult = function() {
var result;
switch(this.output) {
case "text":
result = this.container.textContent;
break;
case "formattedtext":
result = this.container.formattedTextContent;
break;
case "html":
result = this.container.innerHTML;
break;
case "parsetree":
result = JSON.stringify(this.parser.tree,0,$tw.config.preferences.jsonSpaces);
break;
case "widgettree":
result = JSON.stringify(this.getWidgetTree(),0,$tw.config.preferences.jsonSpaces);
break;
}
return result;
};
/*
Return a string of the widget tree
*/
Wikifier.prototype.getWidgetTree = function() {
var copyNode = function(widgetNode,resultNode) {
var type = widgetNode.parseTreeNode.type;
resultNode.type = type;
switch(type) {
case "element":
resultNode.tag = widgetNode.parseTreeNode.tag;
break;
case "text":
resultNode.text = widgetNode.parseTreeNode.text;
break;
}
if(Object.keys(widgetNode.attributes || {}).length > 0) {
resultNode.attributes = {};
$tw.utils.each(widgetNode.attributes,function(attr,attrName) {
resultNode.attributes[attrName] = widgetNode.getAttribute(attrName);
});
}
if(Object.keys(widgetNode.children || {}).length > 0) {
resultNode.children = [];
$tw.utils.each(widgetNode.children,function(widgetChildNode) {
var node = {};
resultNode.children.push(node);
copyNode(widgetChildNode,node);
});
}
},
results = {};
copyNode(this.widgetNode,results);
return results;
};
exports.Wikifier = Wikifier;
})();

View File

@ -341,19 +341,7 @@ Widget.prototype.makeFakeWidgetWithVariables = function(variables) {
},
makeFakeWidgetWithVariables: self.makeFakeWidgetWithVariables,
resolveVariableParameters: self.resolveVariableParameters,
wiki: self.wiki,
get variables() {
// We have to inefficiently fake the variables hashmap. It would be better to refactor the places
// that make direct access to the variables hashmap
const v = Object.create(self.parentWidget.variables || null);
$tw.utils.each(variables,function(value,name) {
v[name] = {value: value};
});
return v;
},
getAncestorCount: function() {
return 0;
}
wiki: self.wiki
};
};

View File

@ -39,22 +39,89 @@ Compute the internal state of the widget
WikifyWidget.prototype.execute = function() {
// Get our parameters
this.wikifyName = this.getAttribute("name");
// Create the wikifier
this.wikifier = new $tw.utils.Wikifier({
wiki: this.wiki,
widget: this,
text: this.getAttribute("text"),
type: this.getAttribute("type"),
mode: this.getAttribute("mode","block"),
output: this.getAttribute("output","text")
this.wikifyText = this.getAttribute("text");
this.wikifyType = this.getAttribute("type");
this.wikifyMode = this.getAttribute("mode","block");
this.wikifyOutput = this.getAttribute("output","text");
// Create the parse tree
this.wikifyParser = this.wiki.parseText(this.wikifyType,this.wikifyText,{
parseAsInline: this.wikifyMode === "inline"
});
this.wikifyResult = this.wikifier.getResult();
// Create the widget tree
this.wikifyWidgetNode = this.wiki.makeWidget(this.wikifyParser,{
document: $tw.fakeDocument,
parentWidget: this
});
// Render the widget tree to the container
this.wikifyContainer = $tw.fakeDocument.createElement("div");
this.wikifyWidgetNode.render(this.wikifyContainer,null);
this.wikifyResult = this.getResult();
// Set context variable
this.setVariable(this.wikifyName,this.wikifyResult);
// Construct the child widgets
this.makeChildWidgets();
};
/*
Return the result string
*/
WikifyWidget.prototype.getResult = function() {
var result;
switch(this.wikifyOutput) {
case "text":
result = this.wikifyContainer.textContent;
break;
case "formattedtext":
result = this.wikifyContainer.formattedTextContent;
break;
case "html":
result = this.wikifyContainer.innerHTML;
break;
case "parsetree":
result = JSON.stringify(this.wikifyParser.tree,0,$tw.config.preferences.jsonSpaces);
break;
case "widgettree":
result = JSON.stringify(this.getWidgetTree(),0,$tw.config.preferences.jsonSpaces);
break;
}
return result;
};
/*
Return a string of the widget tree
*/
WikifyWidget.prototype.getWidgetTree = function() {
var copyNode = function(widgetNode,resultNode) {
var type = widgetNode.parseTreeNode.type;
resultNode.type = type;
switch(type) {
case "element":
resultNode.tag = widgetNode.parseTreeNode.tag;
break;
case "text":
resultNode.text = widgetNode.parseTreeNode.text;
break;
}
if(Object.keys(widgetNode.attributes || {}).length > 0) {
resultNode.attributes = {};
$tw.utils.each(widgetNode.attributes,function(attr,attrName) {
resultNode.attributes[attrName] = widgetNode.getAttribute(attrName);
});
}
if(Object.keys(widgetNode.children || {}).length > 0) {
resultNode.children = [];
$tw.utils.each(widgetNode.children,function(widgetChildNode) {
var node = {};
resultNode.children.push(node);
copyNode(widgetChildNode,node);
});
}
},
results = {};
copyNode(this.wikifyWidgetNode,results);
return results;
};
/*
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
*/
@ -66,9 +133,9 @@ WikifyWidget.prototype.refresh = function(changedTiddlers) {
return true;
} else {
// Refresh the widget tree
if(this.wikifier.refresh(changedTiddlers)) {
if(this.wikifyWidgetNode.refresh(changedTiddlers)) {
// Check if there was any change
var result = this.wikifier.getResult();
var result = this.getResult();
if(result !== this.wikifyResult) {
// If so, save the change
this.wikifyResult = result;

View File

@ -2,50 +2,69 @@ title: $:/snippets/currpalettepreview
\whitespace trim
\function colour(name)
[<currentTiddler>getindex<name>] :else[{$:/palettes/Vanilla}getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :and[wikify[text],[inline]]
\procedure colour(name)
\whitespace trim
<$transclude $tiddler=<<currentTiddler>> $index=<<name>>>
<$transclude $tiddler="$:/palettes/Vanilla" $index=<<name>>>
<$transclude $tiddler={{{ [[$:/config/DefaultColourMappings/]addsuffix<name>] }}}/>
</$transclude>
</$transclude>
\end colour
\procedure palette-preview-thumbnail-tiddler(title)
<div class="tc-palette-preview-thumbnail-tiddler" style.backgroundColor=<<colour tiddler-background>>>
<div class="tc-palette-preview-thumbnail-tiddler-header">
<div class="tc-palette-preview-thumbnail-tiddler-title" style.color=<<colour tiddler-title-foreground>>>
<$text text=<<title>>/>
\widget $colour.div(class,styleName,styleColour)
<%if [<styleName>!match[]] %>
<$wikify name="colour-result" text={{{ [[<<colour ]addsuffix<styleColour>addsuffix[>>]] }}} mode="inline">
<div class=<<class>> style={{{ [<styleName>addsuffix[:]addsuffix<colour-result>addsuffix[;]] }}}>
<$slot $name="ts-raw"/>
</div>
<div class="tc-palette-preview-thumbnail-tiddler-toolbar" style.fill=<<colour tiddler-controls-foreground>>>
</$wikify>
<%else%>
<div class=<<class>>>
<$slot $name="ts-raw"/>
</div>
<%endif%>
\end $colour.div
\procedure palette-preview-thumbnail-tiddler(title)
<$colour.div class="tc-palette-preview-thumbnail-tiddler" styleName="background-color" styleColour="tiddler-background">
<$colour.div class="tc-palette-preview-thumbnail-tiddler-header">
<$colour.div class="tc-palette-preview-thumbnail-tiddler-title" styleName="color" styleColour="tiddler-title-foreground">
<$text text=<<title>>/>
</$colour.div>
<$colour.div class="tc-palette-preview-thumbnail-tiddler-toolbar" styleName="fill" styleColour="tiddler-controls-foreground">
{{$:/core/images/down-arrow}}
{{$:/core/images/edit-button}}
{{$:/core/images/close-button}}
</div>
</div>
<div class="tc-palette-preview-thumbnail-tiddler-subtitle" style.color=<<colour tiddler-subtitle-foreground>>>
</$colour.div>
</$colour.div>
<$colour.div class="tc-palette-preview-thumbnail-tiddler-subtitle" styleName="color" styleColour="tiddler-subtitle-foreground">
Motovun Jack
</div>
<div class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour foreground>>>
</$colour.div>
<$colour.div class="tc-palette-preview-thumbnail-tiddler-body" styleName="color" styleColour="foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam efficitur velit tortor, sit amet tristique felis viverra sit amet. Nullam posuere facilisis purus sed consectetur. Integer vel elit euismod, posuere ligula et, dictum tellus. Donec in odio diam. Sed metus magna, placerat at ligula et, imperdiet sagittis ex.
</div>
</div>
</$colour.div>
</$colour.div>
\end palette-preview-thumbnail-tiddler
\procedure palette-preview-thumbnail()
<div class="tc-palette-preview-thumbnail" style.backgroundColor=<<colour page-background>>>
<div class="tc-palette-preview-thumbnail-story">
<$colour.div class="tc-palette-preview-thumbnail" styleName="background-color" styleColour="page-background">
<$colour.div class="tc-palette-preview-thumbnail-story">
<<palette-preview-thumbnail-tiddler "HelloThere">>
<<palette-preview-thumbnail-tiddler "Getting Started">>
</div>
<div class="tc-palette-preview-thumbnail-sidebar" style.color=<<colour sidebar-foreground>>>
<div class="tc-palette-preview-thumbnail-sidebar-title">
</$colour.div>
<$colour.div class="tc-palette-preview-thumbnail-sidebar" styleName="color" styleColour="sidebar-foreground">
<$colour.div class="tc-palette-preview-thumbnail-sidebar-title">
~TiddlyWiki
</div>
<div class="tc-palette-preview-thumbnail-sidebar-subtitle">
</$colour.div>
<$colour.div class="tc-palette-preview-thumbnail-sidebar-subtitle">
a non-linear personal web notebook
</div>
<div class="tc-palette-preview-thumbnail-sidebar-search" style.backgroundColor=<<colour background>>>
<div class="tc-palette-preview-thumbnail-sidebar-search-box">
</div>
</div>
</div>
</div>
</$colour.div>
<$colour.div class="tc-palette-preview-thumbnail-sidebar-search" styleName="background-color" styleColour="background">
<$colour.div class="tc-palette-preview-thumbnail-sidebar-search-box">
</$colour.div>
</$colour.div>
</$colour.div>
</$colour.div>
\end palette-preview-thumbnail
<<palette-preview-thumbnail>>

View File

@ -1,13 +1,17 @@
title: $:/core/macros/CSS
tags: $:/tags/Macro
\function colour(name)
[{$:/palette}getindex<name>] :else[{$:/palettes/Vanilla}getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :and[wikify[text],[inline]]
\end colour
<!-- Needs to stay that way for backwards compatibility. See GH issue: #8326 -->
\define colour(name)
\whitespace trim
<$transclude tiddler={{$:/palette}} index="$name$">
<$transclude tiddler="$:/palettes/Vanilla" index="$name$">
<$transclude tiddler="$:/config/DefaultColourMappings/$name$"/>
</$transclude>
</$transclude>
\end
\function color(name)
[function[colour],<name>]
\end color
\define color(name) <<colour $name$>>
\define box-shadow(shadow)
``

View File

@ -6,12 +6,11 @@ tags: [[$:/tags/wiki-test-spec]]
title: Output
\parsermode inline
\import [subfilter{$:/core/config/GlobalImportFilter}]
<$text text={{{ [subfilter{Filter}] }}}/>
+
title: Filter
[function[colour],[primary]colour-darken[0.5]]
[[#5778d8]colour-darken[0.5]]
+
title: ExpectedResult

View File

@ -1,18 +0,0 @@
title: Operators/Colour/ColourFunctionDiv
description: Simple colour function applied to a DIV
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
title: Output
\parsermode inline
\import [subfilter{$:/core/config/GlobalImportFilter}]
<div style.background=<<colour page-background>>>
Something
</div>
+
title: ExpectedResult
<div style="background:#f4f4f4;">
Something
</div>

View File

@ -1,18 +0,0 @@
title: Operators/Colour/ColourFunctionSimple
description: Simple colour function
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
title: Output
\parsermode inline
\import [subfilter{$:/core/config/GlobalImportFilter}]
<$text text={{{ [subfilter{Filter}] }}}/>
+
title: Filter
[function[colour],[background]]
+
title: ExpectedResult
#ffffff

View File

@ -6,12 +6,11 @@ tags: [[$:/tags/wiki-test-spec]]
title: Output
\parsermode inline
\import [subfilter{$:/core/config/GlobalImportFilter}]
<$text text={{{ [subfilter{Filter}] }}}/>
+
title: Filter
[function[colour],[primary]colour-lighten[0.5]]
[[#5778d8]colour-lighten[0.5]]
+
title: ExpectedResult

View File

@ -6,12 +6,11 @@ tags: [[$:/tags/wiki-test-spec]]
title: Output
\parsermode inline
\import [subfilter{$:/core/config/GlobalImportFilter}]
<$text text={{{ [subfilter{Filter}] }}}/>
+
title: Filter
=[function[colour],[primary]colour-oklch[0.5]] =[function[colour],[primary]colour-oklch:l[0.5]] +[join[,]]
=[[#5778d8]colour-oklch[0.5]] =[[#5778d8]colour-oklch:l[0.5]] +[join[,]]
+
title: ExpectedResult

View File

@ -1,21 +0,0 @@
title: Operators/Wikify/TextMode
description: Simple wikify operator
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
title: Output
\parsermode inline
<$text text={{{ [subfilter{Filter}] }}}/>
+
title: Filter
[{Text}wikify[html],[inline],[text/vnd.tiddlywiki]]
+
title: Text
This is ''the text'' that is __wikified__
+
title: ExpectedResult
This is &lt;strong&gt;the text&lt;/strong&gt; that is &lt;u&gt;wikified&lt;/u&gt;

View File

@ -1,64 +0,0 @@
title: Operators/Wikify/ParseTreeMode
description: Simple wikify operator
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
title: Output
\parsermode inline
<$text text={{{ [subfilter{Filter}] }}}/>
+
title: Filter
[{Text}wikify[parsetree],[inline],[text/vnd.tiddlywiki]]
+
title: Text
This is ''the text'' that is __wikified__
+
title: ExpectedResult
[
{
"type": "text",
"text": "This is ",
"start": 0,
"end": 8
},
{
"type": "element",
"tag": "strong",
"children": [
{
"type": "text",
"text": "the text",
"start": 10,
"end": 18
}
],
"start": 8,
"end": 20,
"rule": "bold"
},
{
"type": "text",
"text": " that is ",
"start": 20,
"end": 29
},
{
"type": "element",
"tag": "u",
"children": [
{
"type": "text",
"text": "wikified",
"start": 31,
"end": 39
}
],
"start": 29,
"end": 41,
"rule": "underscore"
}
]

View File

@ -1,21 +0,0 @@
title: Operators/Wikify/TextMode
description: Simple wikify operator
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
title: Output
\parsermode inline
<$text text={{{ [subfilter{Filter}] }}}/>
+
title: Filter
[{Text}wikify[text],[inline],[text/vnd.tiddlywiki]]
+
title: Text
This is ''the text'' that is __wikified__
+
title: ExpectedResult
This is the text that is wikified