[Userscript] Blur/Unblur Context Translation On Click

[gnarlywhale]

I’m working on my reading comprehension but kept having the translation spoiled by having the English translation readily at hand below the context sentence.

So here’s a little script you can run using the GreaseMonkety extension in Firefox. Turning this:

into this:

Then when you click on an individual sentence, it’s revealed:

Instructions

1. Install the GreaseMonkety extension.
2. Open the extension (puzzle piece icon in the top-right), click on GreaseMonkey, and select “New user script…”
3. Paste in the following code and save.

// ==UserScript==
// @name         Toggle Blur Second Paragraph
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  Toggle blur effect on the second paragraph in each .context-sentences or .subject-section__text div when clicked, including dynamically loaded content
// @author       gnarlywhale
// @match        https://www.wanikani.com/subject-lessons/*
// @match        https://www.wanikani.com/subjects/review
// @match        https://www.wanikani.com/vocabulary/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function applyBlurEffect(context) {
        const secondParagraph = context.querySelectorAll("p")[1];
        if (secondParagraph) {
            secondParagraph.style.filter = "blur(5px)";
            secondParagraph.style.cursor = "pointer";

            secondParagraph.addEventListener("click", function() {
                if (secondParagraph.style.filter === "none") {
                    secondParagraph.style.filter = "blur(5px)";
                } else {
                    secondParagraph.style.filter = "none";
                }
            });
        }
    }

    function observeDOMChanges() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length) {
                    mutation.addedNodes.forEach((node) => {
                        if (node.nodeType === 1 && (node.matches(".context-sentences") || node.matches(".subject-section__text"))) {
                            applyBlurEffect(node);
                        } else if (node.nodeType === 1) {
                            node.querySelectorAll(".context-sentences, .subject-section__text").forEach(applyBlurEffect);
                        }
                    });
                }
            });
        });

        observer.observe(document.body, { childList: true, subtree: true });
          document.querySelectorAll(".context-sentences, .subject-section__text").forEach(applyBlurEffect);
    }

    document.querySelectorAll(".context-sentences, .subject-section__text").forEach(applyBlurEffect);
    observeDOMChanges();
})();

The script can be readily adapted to work with any tools that allow custom JS on specific pages but will require some tweaking of the meta info at the top.

[Angelodmage]

Is there a reason why you don’t make an installable script out of this?
https://greasyfork.org/en

• much easier installation
• you can update the script and people can update their script without editing it
• version tracking

[mgrice]

Is this different in terms of functionality from the already existing Advanced Context Sentences (the part of that script which hides/blurs the English translation) user script?

Edit: I see now, show/hide is based on clicking vs. hover.

[gnarlywhale]

ACS is great but I was motivated to avoid another extension that’s bespoke for a specific site. I already had Greasemonkey and figured the snippet itself would be useful for others looking for a lower-overhead solution.

[gnarlywhale]

I wasn’t even aware of that functionality, and will look at implementing it. Thanks for the suggestion!