diff options
| author | lonkaars <loek@pipeframe.xyz> | 2022-12-27 12:33:35 +0100 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2022-12-27 12:33:35 +0100 |
| commit | 23daec1b60a43f74de0b2c96647d597b9c3271d6 (patch) | |
| tree | ec0a9f7fa4b3e1d60afda42f6335287c200640ac | |
| parent | 240bd18fd2d1894522d067287f0ecb3fd4e7cb46 (diff) | |
parse \n into <br>, minify css, and parse elements with parse class
| -rw-r--r-- | .gitignore | 2 | ||||
| -rw-r--r-- | back-template.m4 | 16 | ||||
| -rw-r--r-- | card/card.html | 2 | ||||
| -rw-r--r-- | card/card.js | 19 | ||||
| -rw-r--r-- | front-template.m4 | 10 | ||||
| -rw-r--r-- | makefile | 7 |
6 files changed, 28 insertions, 28 deletions
@@ -1,2 +1,2 @@ *.html -*.min.js +*.min.* diff --git a/back-template.m4 b/back-template.m4 index b0b7eda..d948b80 100644 --- a/back-template.m4 +++ b/back-template.m4 @@ -1,15 +1,11 @@ <div class="card back"> -<span class="sentence">{{Complete sentence}}</span> +<span class="parse sentence foreign">{{Complete sentence}}</span> <hr class="split"> -<span class="target-word-reading">{{Target word reading}}</span> -<span class="target-word-translation">{{Target word translation}}</span> -<span class="sentence-translation">{{Complete sentence translation}}</span> +<span class="target-word-reading foreign">{{Target word reading}}</span> +<span class="target-word-translation native">{{Target word translation}}</span> +<span class="sentence-translation native">{{Complete sentence translation}}</span> </div> -<style> -undivert(`card/card.css') -</style> -<script defer> -undivert(`card.min.js') -</script> +<style>undivert(`card.min.css')</style> +<script defer>undivert(`card.min.js')</script> diff --git a/card/card.html b/card/card.html index 9165bf1..908be68 100644 --- a/card/card.html +++ b/card/card.html @@ -9,7 +9,7 @@ <body> <div class="card back"> -<span class="sentence foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\*escape\* (test)</span> +<span class="parse sentence foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span> <hr class="split"> <span class="target-word-reading foreign">立つ【た・つ】</span> <span class="target-word-translation native">To stand</span> diff --git a/card/card.js b/card/card.js index e375e8a..347a44c 100644 --- a/card/card.js +++ b/card/card.js @@ -8,8 +8,12 @@ function parseSentence(input) { var reading = ""; // current kanji reading for (var i = 0; i < input.length; i++) { - // escape all characters preceded by \ - if (input[i] == "\\") { out += input[i+1]; i++; continue; } + // escape characters preceded by \ + if (input[i] == "\\") { + var escaped = input[i+1]; + if (escaped == "n") escaped = "<br>"; // newline + out += escaped; i++; continue; + } // parse *test* into <b>test</b> if (input[i] == "*") { bold = !bold; out += `<${bold ? "" : "/"}b>`; continue; } @@ -40,12 +44,13 @@ function parseSentence(input) { } function run() { - var sentences = document.getElementsByClassName("sentence"); + var input = document.getElementsByClassName("parse"); - for (var sentence of sentences) { - if (sentence.classList.contains("parsed")) continue; - sentence.innerHTML = parseSentence(sentence.innerText); - sentence.classList.add("parsed"); + for (var el of input) { + if (el.classList.contains("parsed")) continue; + el.innerHTML = parseSentence(el.innerHTML); + el.classList.remove("parse"); + el.classList.add("parsed"); } } diff --git a/front-template.m4 b/front-template.m4 index 534477d..03acab0 100644 --- a/front-template.m4 +++ b/front-template.m4 @@ -1,11 +1,7 @@ <div class="card front"> -<span class="sentence">{{Complete sentence}}</span> +<span class="parse sentence foreign">{{Complete sentence}}</span> </div> -<style> -undivert(`card/card.css') -</style> -<script defer> -undivert(`card.min.js') -</script> +<style>undivert(`card.min.css')</style> +<script defer>undivert(`card.min.js')</script> @@ -5,11 +5,14 @@ all: back-template.html front-template.html card.min.js: card/card.js sed 's/\/\/.*$$//g' $< | tr '\n' ' ' | sed 's/\t//g' | sed 's/ */ /g' > $@ +card.min.css: card/card.css + cat $< | tr '\n' ' ' | sed 's/\t//g' | sed 's/ */ /g' > $@ + %.html: %.m4 m4 $< > $@ -back-template.html: card.min.js card/card.css -front-template.html: card.min.js card/card.css +back-template.html: card.min.js card.min.css +front-template.html: card.min.js card.min.css clean: $(RM) back-template.html front-template.html card.min.js |