WaniKani: Clickable Jisho.org Link (Tampermonkey Script)

tryf-wk-clickable-jisho-link.js

// ==UserScript==
// @name         WaniKani: Clickable Jisho.org Link & Popover
// @namespace    http://tryforceful.com/
// @version      0.2.5
// @description  Clickable Jisho.org Link & Popover
// @author       tryforceful
// @match        htt*://www.wanikani.com/review/session
// @match        htt*://www.wanikani.com/lesson/session
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @run-at       document-end
// @connect      cors-anywhere.herokuapp.com
// @connect      jisho.org
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @require      https://gist.githubusercontent.com/tryforceful/77ffe9e6951b862744b9a51bb6df9a83/raw/a976201b5f7c61909bbb68a9b8a1cdb4db4a767a/tryf-just-popover-tooltip-bootstrap.js
// ==/UserScript==

// For showing logs:
const verbose = false;

GM_addStyle(" .popover { color: black; }  div#character a {color:unset; text-decoration:none; cursor: pointer } .kunyomi {color: red;} .onyomi {color: blue;}");

// streamlined Bootstrap, just Popover & Tooltip
GM_addStyle(`
/*!
 * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
 *//*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;opacity:0}.tooltip.in{opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#2e2e2e}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#2e2e2e}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#2e2e2e}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#2e2e2e}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#2e2e2e}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#2e2e2e}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#2e2e2e}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#2e2e2e}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#2e2e2e;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover>.arrow{border-width:11px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow:after{content:"";border-width:10px}.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}
`);

//from https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom
const observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    return function( obj, callback ){
        if( !obj || !obj.nodeType === 1 ) return; // validation

        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                callback(mutations);
            })
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true });
        }

        else if( window.addEventListener ){
            obj.addEventListener('DOMNodeInserted', callback, false);
            obj.addEventListener('DOMNodeRemoved', callback, false);
        }
    }
})();

function setPopover (title, content, anchorDiv, divForPlacement) {

    $(anchorDiv).attr({
        'data-toggle': 'popover',
        'title': title,
        'data-content': content
    });
    $(anchorDiv).popover({
        trigger: 'hover',
        html: true,
        container: divForPlacement,
        placement: 'right'
    });

}

const addLink = (function () {

    const PAGE_TYPES = Object.freeze({
        UNKNOWN: 0,
        REVIEW: 1,
        LESSON: 2,
    });

    let currentPage = PAGE_TYPES.UNKNOWN;
    if (/\/review\/./.test(document.URL)) {
        currentPage = PAGE_TYPES.REVIEW;
    } else if (/\/lesson/.test(document.URL)) {
        currentPage = PAGE_TYPES.LESSON;
    }

    if(currentPage == PAGE_TYPES.UNKNOWN)
    {
        // We don't know what kind of page we're on.
        // To be safe, just exit, returning an empty fn.
        return () => {};
    }

    let previousJapaneseText = ''; // this acts as a state tracker to prevent infinite recursion
    let f = 0;

    return function() {
        'use strict';
        console.log("Add Link was called");

        let elemAroundJapaneseText = currentPage == PAGE_TYPES.REVIEW ? 
                document.querySelector("div#question div#character span") :
                document.querySelector("header div#main-info div#character") //LESSON

        let elemWithTypeOfVocabClassName = currentPage == PAGE_TYPES.REVIEW ? 
                document.querySelector("div#question div#character") :
                document.querySelector("header div#main-info") //LESSON

        let addedADiv = elemAroundJapaneseText.querySelector("a");

        let japaneseText = addedADiv ? addedADiv.innerText : elemAroundJapaneseText.innerText;

// console.log('----------------')
//         console.log('previousJapaneseText',previousJapaneseText)
//         console.log('elemAroundJapaneseText',elemAroundJapaneseText)
//         console.log('elemAroundJapaneseText.innerText',elemAroundJapaneseText.innerText)
//         console.log('elemAroundJapaneseText.innerHTML',elemAroundJapaneseText.innerHTML)

//         console.log('elemWithTypeOfVocabClassName',elemWithTypeOfVocabClassName)
//         console.log('japaneseText',japaneseText)
//         console.log('addedADiv',addedADiv)

//         console.log("test 1: prev v char_content",previousJapaneseText, (z ? z : elemAroundJapaneseText.innerText), previousJapaneseText != (z ? z : elemAroundJapaneseText.innerText));
//         console.log("test 1: prev v japanesetext",previousJapaneseText, japaneseText, previousJapaneseText != japaneseText);
        if(f >= 100) return;
        if(previousJapaneseText != japaneseText || addedADiv == null)
        {
            if(verbose) console.log("We made it past the gatekeeper");
            f++;

            if(elemAroundJapaneseText.querySelector("img") != null)
            {
                //this is not a 'real' character; it's an <img>, so don't process
                //just remove the <a> from the previous character
                if(addedADiv) {
                    $(addedADiv).unwrap();
                }
                return;
            }
            
            //set historical state so we know when to proceed
            previousJapaneseText = japaneseText;

            //make it a kanji-style search
            const isKanji = ["kanji", "radical"].includes( elemWithTypeOfVocabClassName.className );

            if(verbose) console.log('we made it here', "[", addedADiv, "]")
            if(addedADiv == null)
            {
                //make the inner link
                let theLink = document.createElement("a");
                theLink.setAttribute("href", "http://www.jisho.org/search/" + japaneseText + (isKanji ? "%20%23kanji" : ""));
                theLink.setAttribute("target", "_blank");
                theLink.setAttribute("data-innerText", japaneseText);

                $(elemAroundJapaneseText).wrapInner(theLink);

                //now this should come back
                addedADiv = elemAroundJapaneseText.querySelector("a");

                if(verbose) console.log('we made it here 2', addedADiv, theLink )
            }
            else {
                //just manipulate the inner link
                $(addedADiv).attr({
                    "href": "http://www.jisho.org/search/" + japaneseText + (isKanji ? "%20%23kanji" : ""),
                    "data-innerText": japaneseText
                })

                if(verbose) console.log('we made it here 3', "[", addedADiv, "]")
            }

            
            if(isKanji) {

                const callb_kanjiapi = (resp) => {
                    if(verbose) console.log(resp.response);
                    let engResults = '<p>' + resp.response.meanings.join(', ') + '</p>';
                    let jpnReading = '',
                        onReading = '',
                        kunReading = '';
                    if(resp.response.on_readings.length) {
                        onReading = `<span class='onyomi'>` + resp.response.on_readings.join(', ') + '</span>';
                        jpnReading += onReading;
                    }
                    if(resp.response.kun_readings.length) {
                        if(!!onReading) {
                            jpnReading += '<br/>'
                        }
                        kunReading = `<span class='kunyomi'>` + resp.response.kun_readings.join(', ') + '</span>';
                        jpnReading += kunReading;
                    }

                    setPopover (jpnReading, engResults, addedADiv, elemAroundJapaneseText);
                }

                let params = {
                    method: 'GET',
                    url: 'https://cors-anywhere.herokuapp.com/https://kanjiapi.dev/v1/kanji/' + japaneseText,
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    responseType: 'json',
                    onload: callb_kanjiapi,
                    onerror: (x) => {console.error(x);},
                };

                GM_xmlhttpRequest(params);

            } else {

                const callb_jisho = (resp) => {
                    if(verbose) console.log(resp.response.data[0]);
                    let engResults, jpnReading;
                    if(resp.response.data[0]) {
                        engResults = resp.response.data[0].senses.map(x => '<p>'+x.english_definitions.join(', ')+'</p>').join('');
                        jpnReading = [...new Set(resp.response.data[0].japanese.map(x => x.reading))].join(', ');
                    }
                    //console.log(engResults);

                    setPopover (jpnReading, engResults, addedADiv, elemAroundJapaneseText);
                }

                let params = {
                    method: 'GET',
                    url: 'https://cors-anywhere.herokuapp.com/https://jisho.org/api/v1/search/words?keyword=' + japaneseText,
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    responseType: 'json',
                    onload: callb_jisho,
                    onerror: (x) => {console.error(x);},
                };

                GM_xmlhttpRequest(params);
            }
        }
    };
})();

observeDOM(document.querySelector("div#character"), addLink);