mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-03-22 11:26:56 +00:00
Replace classed blocks and runs with styled blocks and runs
This commit is contained in:
Jeremy Ruston
parent
982b6a8773
commit
6fae946bda
@ -1,50 +0,0 @@
|
||||
/*\
|
||||
title: $:/core/modules/parsers/wikiparser/rules/classblock.js
|
||||
type: application/javascript
|
||||
module-type: wikirule
|
||||
|
||||
Wiki text block rule for assigning classes to paragraphs and other blocks. For example:
|
||||
|
||||
{{{
|
||||
{{myClass{
|
||||
This paragraph will have the CSS class `myClass`.
|
||||
|
||||
* The `<ul>` around this list will also have the class `myClass`
|
||||
* List item 2
|
||||
|
||||
}}}
|
||||
}}}
|
||||
|
||||
Note that the opening and closing braces both must be immediately followed by a newline.
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
exports.name = "classblock";
|
||||
exports.types = {block: true};
|
||||
|
||||
exports.init = function(parser) {
|
||||
this.parser = parser;
|
||||
// Regexp to match
|
||||
this.matchRegExp = /\{\{([^\{\r\n]+)\{\r?\n/mg;
|
||||
};
|
||||
|
||||
exports.parse = function() {
|
||||
var reEndString = "(\\}\\}\\}$(?:\\r?\\n)?)";
|
||||
// Get the class
|
||||
var classString = this.match[1];
|
||||
// Move past the match
|
||||
this.parser.pos = this.matchRegExp.lastIndex;
|
||||
// Parse the body
|
||||
var tree = this.parser.parseBlocks(reEndString);
|
||||
for(var t=0; t<tree.length; t++) {
|
||||
$tw.utils.addClassToParseTreeNode(tree[t],classString);
|
||||
}
|
||||
return tree;
|
||||
};
|
||||
|
||||
})();
|
||||
@ -1,52 +0,0 @@
|
||||
/*\
|
||||
title: $:/core/modules/parsers/wikiparser/rules/classinline.js
|
||||
type: application/javascript
|
||||
module-type: wikirule
|
||||
|
||||
Wiki text inline rule for assigning classes to runs of text. For example:
|
||||
|
||||
{{{
|
||||
{{myClass{This text will have the CSS class `myClass`.
|
||||
|
||||
* This will not be recognised as a list
|
||||
|
||||
List item 2}}}
|
||||
}}}
|
||||
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
exports.name = "classinline";
|
||||
exports.types = {inline: true};
|
||||
|
||||
exports.init = function(parser) {
|
||||
this.parser = parser;
|
||||
// Regexp to match
|
||||
this.matchRegExp = /\{\{([^\{\r\n]+)\{/mg;
|
||||
};
|
||||
|
||||
exports.parse = function() {
|
||||
var reEnd = /(\}\}\})/g;
|
||||
// Get the class
|
||||
var classString = this.match[1];
|
||||
// Move past the match
|
||||
this.parser.pos = this.matchRegExp.lastIndex;
|
||||
// Parse the run up to the terminator
|
||||
var tree = this.parser.parseInlineRun(reEnd,{eatTerminator: true});
|
||||
// Return the classed span
|
||||
return [{
|
||||
type: "element",
|
||||
tag: "span",
|
||||
attributes: {
|
||||
"class": {type: "string", value: classString}
|
||||
},
|
||||
children: tree
|
||||
}];
|
||||
};
|
||||
|
||||
})();
|
||||
73
core/modules/parsers/wikiparser/rules/styleblock.js
Normal file
73
core/modules/parsers/wikiparser/rules/styleblock.js
Normal file
@ -0,0 +1,73 @@
|
||||
/*\
|
||||
title: $:/core/modules/parsers/wikiparser/rules/styleblock.js
|
||||
type: application/javascript
|
||||
module-type: wikirule
|
||||
|
||||
Wiki text block rule for assigning styles and classes to paragraphs and other blocks. For example:
|
||||
|
||||
```
|
||||
@@.myClass
|
||||
@@background-color:red;
|
||||
This paragraph will have the CSS class `myClass`.
|
||||
|
||||
* The `<ul>` around this list will also have the class `myClass`
|
||||
* List item 2
|
||||
|
||||
@@
|
||||
```
|
||||
|
||||
Note that classes and styles can be mixed subject to the rule that styles must precede classes. For example
|
||||
|
||||
```
|
||||
@@.myFirstClass.mySecondClass
|
||||
@@width:100px;.myThirdClass
|
||||
This is a paragraph
|
||||
@@
|
||||
```
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
exports.name = "styleblock";
|
||||
exports.types = {block: true};
|
||||
|
||||
exports.init = function(parser) {
|
||||
this.parser = parser;
|
||||
// Regexp to match
|
||||
this.matchRegExp = /@@((?:[^\.\r\n\s:]+:[^\r\n;]+;)+)?(\.(?:[^\r\n\s]+))?\r?\n/mg;
|
||||
};
|
||||
|
||||
exports.parse = function() {
|
||||
var reEndString = "@@$(?:\\r?\\n)?";
|
||||
var classes = [], styles = [];
|
||||
do {
|
||||
// Get the class and style
|
||||
if(this.match[1]) {
|
||||
styles.push(this.match[1]);
|
||||
}
|
||||
if(this.match[2]) {
|
||||
classes.push(this.match[2]);
|
||||
}
|
||||
// Move past the match
|
||||
this.parser.pos = this.matchRegExp.lastIndex;
|
||||
// Look for another line of classes and styles
|
||||
this.match = this.matchRegExp.exec(this.parser.source);
|
||||
} while(this.match && this.match.index === this.parse.pos);
|
||||
// Parse the body
|
||||
var tree = this.parser.parseBlocks(reEndString);
|
||||
for(var t=0; t<tree.length; t++) {
|
||||
if(classes.length > 0) {
|
||||
$tw.utils.addClassToParseTreeNode(tree[t],classes.join(" "));
|
||||
}
|
||||
if(styles.length > 0) {
|
||||
$tw.utils.addAttributeToParseTreeNode(tree[t],"style",styles.join(""));
|
||||
}
|
||||
}
|
||||
return tree;
|
||||
};
|
||||
|
||||
})();
|
||||
55
core/modules/parsers/wikiparser/rules/styleinline.js
Normal file
55
core/modules/parsers/wikiparser/rules/styleinline.js
Normal file
@ -0,0 +1,55 @@
|
||||
/*\
|
||||
title: $:/core/modules/parsers/wikiparser/rules/styleinline.js
|
||||
type: application/javascript
|
||||
module-type: wikirule
|
||||
|
||||
Wiki text inline rule for assigning styles and classes to inline runs. For example:
|
||||
|
||||
```
|
||||
@@.myClass This is some text with a class@@
|
||||
@@background-color:red;This is some text with a background colour@@
|
||||
@@width:100px;.myClass This is some text with a class and a width@@
|
||||
```
|
||||
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
exports.name = "styleinline";
|
||||
exports.types = {inline: true};
|
||||
|
||||
exports.init = function(parser) {
|
||||
this.parser = parser;
|
||||
// Regexp to match
|
||||
this.matchRegExp = /@@((?:[^\.\r\n\s:]+:[^\r\n;]+;)+)?(\.(?:[^\r\n\s]+)\s+)?/mg;
|
||||
};
|
||||
|
||||
exports.parse = function() {
|
||||
var reEnd = /@@/g;
|
||||
// Get the styles and class
|
||||
var stylesString = this.match[1],
|
||||
classString = this.match[2] ? this.match[2].split(".").join(" ") : undefined;
|
||||
// Move past the match
|
||||
this.parser.pos = this.matchRegExp.lastIndex;
|
||||
// Parse the run up to the terminator
|
||||
var tree = this.parser.parseInlineRun(reEnd,{eatTerminator: true});
|
||||
// Return the classed span
|
||||
var node = {
|
||||
type: "element",
|
||||
tag: "span",
|
||||
children: tree
|
||||
};
|
||||
if(classString) {
|
||||
$tw.utils.addClassToParseTreeNode(node,classString);
|
||||
}
|
||||
if(stylesString) {
|
||||
$tw.utils.addAttributeToParseTreeNode(node,"style",stylesString);
|
||||
}
|
||||
return [node];
|
||||
};
|
||||
|
||||
})();
|
||||
@ -8,7 +8,8 @@ New paragraph
|
||||
\end
|
||||
\define another(first:default second third:default3) that is
|
||||
|
||||
{{something{
|
||||
@@.something
|
||||
@@background-color:green;
|
||||
* This
|
||||
*.disabled Is a
|
||||
* List!!
|
||||
@ -28,17 +29,17 @@ And this is an inline transclusion {{Acknowledgements}width:40;height:50;}.one
|
||||
|
||||
---
|
||||
|
||||
{{{
|
||||
```
|
||||
Some monospaced
|
||||
}}}
|
||||
```
|
||||
|
||||
This is a {{myClass{normal}}} para and one `with` so<!--and a comment-->me {{{code}}} blocks -- and both kinds of dashes --- just for the fun of it. And ''some bold'' text and //italics//, ^^superscript^^ and ,,subscript,, and even some __underlined text__. Oh a ~~strikethrough~~.
|
||||
This is a @@.myClass normal@@ para and @@background-color:red; one@@ `with` so<!--and a comment-->me `code` blocks -- and both kinds of dashes --- just for the fun of it. And ''some bold'' text and //italics//, ^^superscript^^ and ,,subscript,, and even some __underlined text__. Oh a ~~strikethrough~~.
|
||||
|
||||
|
||||
some text ~~strike start -- ndash --- mdash strike end~~ -> nok
|
||||
|
||||
|
||||
}}}
|
||||
@@
|
||||
|
||||
<!--This is another comment-->
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user