diff options
Diffstat (limited to 'card')
| -rw-r--r-- | card/card.css | 33 | ||||
| -rw-r--r-- | card/card.html | 22 | ||||
| -rw-r--r-- | card/card.js | 70 |
3 files changed, 0 insertions, 125 deletions
diff --git a/card/card.css b/card/card.css deleted file mode 100644 index 8c2b0d0..0000000 --- a/card/card.css +++ /dev/null @@ -1,33 +0,0 @@ -.mobile .card .foreign { font-size: 1.75rem; } -.mobile .card .native { font-size: 1.25rem; } - -.card .foreign { font-size: 1.5rem; } -.card .native { font-size: 1.0rem; } - -.card { text-align: center; } -.card span { display: block; } - -hr { - height: 10px; - border: none; - opacity: 20%; -} -hr { background-color: black; } -.nightMode hr { background-color: white; } - -.card.front #target-word-reading, -.card.front #target-word-translation, -.card.front #sentence-translation, -.card.front hr, -.card.front ruby rt.hidden { - display: none; -} - -#sentence-translation { margin-top: 1em; } - -.spoiler { - transition: filter 300ms; - cursor: pointer; -} -.spoiler.hidden { filter: blur(0.3rem); } -.spoiler.visible { filter: blur(0rem); } diff --git a/card/card.html b/card/card.html deleted file mode 100644 index 71ca300..0000000 --- a/card/card.html +++ /dev/null @@ -1,22 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset='utf-8'> - <title>card template test</title> - <link rel='stylesheet' type='text/css' media='screen' href='./card.css'> - <script defer src='./card.js'></script> -</head> -<body> - -<div class="card back"> -<span id="sentence" class="parse foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span> -<hr class="split"> -<span id="target-word-reading" class="foreign">立つ【た・つ】</span> -<span id="target-word-translation" class="native">To stand</span> -<span id="sentence-translation" class="native spoiler hidden">Before my eyes stood Alice, butt-naked.</span> -</div> - -<button onclick="document.getElementsByClassName('card')[0].classList.toggle('back'); document.getElementsByClassName('card')[0].classList.toggle('front')">toggle view</button> - -</span> -</html> diff --git a/card/card.js b/card/card.js deleted file mode 100644 index 0509c3e..0000000 --- a/card/card.js +++ /dev/null @@ -1,70 +0,0 @@ -function parseSentence(input) { - var bold = false; // currently bold - var mode = "normal"; // normal, kanji, reading - var out = ""; // output html - - var alwaysvisisble = false; // if furigana is always visible (on front of card) - var kanji = ""; // current kanji - var reading = ""; // current kanji reading - - for (var i = 0; i < input.length; i++) { - // 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; } - - // parse [kanji](reading) into ruby text - // [kanji](reading) is only visible on card back - // {kanji}(reading) is always visible - if (mode == "normal" && input[i] == "[") // hidden reading kanji open - { kanji = ""; mode = "kanji"; alwaysvisisble = false; continue; } - if (mode == "normal" && input[i] == "{") // always visible reading kanji open - { kanji = ""; mode = "kanji"; alwaysvisisble = true; continue; } - if (mode == "kanji" && input[i] == "]") continue; // hidden reading kanji close - if (mode == "kanji" && input[i] == "}") continue; // always visible reading kanji close - if (mode == "kanji" && kanji.length > 0 && input[i] == "(") // reading open - { reading = ""; mode = "reading"; continue; } - if (mode == "reading" && input[i] == ")") { // reading close - mode = "normal"; - out += `<ruby>${kanji}<rt class="${alwaysvisisble ? 'visible' : 'hidden'}">${reading}</rt></ruby>`; - continue; - } - - // add current character to selected mode buffer - if (mode == "normal") out += input[i]; - if (mode == "kanji") kanji += input[i]; - if (mode == "reading") reading += input[i]; - } - - return out; -} - -function run() { - // parse all elements with class parse - for (var el of document.getElementsByClassName("parse")) { - if (el.classList.contains("parsed")) continue; // ignore already parsed elements - el.innerHTML = parseSentence(el.innerHTML); // parse - el.classList.remove("parse"); // mark as parsed - el.classList.add("parsed"); - } - - // toggle spoiler by clicking - for (var el of document.getElementsByClassName("spoiler")) { - el.onclick = function () { - this.classList.toggle("hidden"); - this.classList.toggle("visible"); - }; - } - - // remove spoiler from sentence translation if word reading field is empty - if(document.getElementById("target-word-reading").innerText.length == 0) { - document.getElementById("sentence-translation").classList.remove("hidden"); - } -} - -run(); -window.onload = () => run(); |