☰

Advanced Mention Name Reminder

Hover an advanced mention in Summernote to show its target entity’s name in a tooltip.

Tính đến 16-05-2022. Xem phiên bản mới nhất.

// ==UserScript==
// @name         Advanced Mention Name Reminder
// @namespace    http://tampermonkey.net/
// @license      MIT
// @version      1.0
// @description  Hover an advanced mention in Summernote to show its target entity’s name in a tooltip.
// @author       Salvatos
// @match        https://kanka.io/*
// @icon         https://www.google.com/s2/favicons?domain=kanka.io
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @connect      kanka.io
// ==/UserScript==

// Get campaign ID from URL
var campaignID = window.location.href.match(/campaign\/(\d+)/);
campaignID = campaignID[1].split("/")[0];

function addMentionName (thisEditor, entityId) {
    var apiURL = `https://kanka.io/en/campaign/${campaignID}/entities/${entityId}/json-export`;

    var xhr = new XMLHttpRequest();
    xhr.open("GET", apiURL, true);
    xhr.responseType = 'json';
    xhr.onload = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //console.log(xhr.response);
                // Set dfn title to entity name for all mentions to this ID
                thisEditor.find( "dfn[entity-id='" + entityId + "']" ).attr("title", xhr.response.data.name);
            } else {
                console.error(xhr.statusText);
            }
        }
    };
    xhr.onerror = function (e) {
        console.error(xhr.statusText);
    };
    xhr.send(null);
}

// Wait for Summernote to initialize
$('.html-editor').on('summernote.init', function() {
    // optimization (use $this in subsequent selectors so it doesn’t search the whole DOM multiple times, but don’t create a new $(object) every time)
    let $thisEditor = $( this ).siblings(".note-editor").find(".note-editable");
    // Track IDs so we only process each once
    let entityIDs = [];

    // Wrap mentions in <dfn>s and replace editor content
    $thisEditor.html( $thisEditor.html().replaceAll(/(\[\w+:(\d+).*?\])/g, "<dfn entity-id='$2'>$1</dfn>") );

    // Fetch the name of each dfn’s entity id
    $thisEditor.find( "dfn" ).each(function() {
        let entityId = $( this ).attr("entity-id");

        // If we haven’t seen this ID yet, add its title to all relevant mentions, and mark it done
        if ($.inArray(entityId, entityIDs) == -1) {
            addMentionName($thisEditor, entityId);
            entityIDs.push(entityId);
        }
    }, $thisEditor, entityIDs); // (pass $thisEditor along so the function doesn’t look for the editor in the DOM every time it’s called)
});

GM_addStyle ( `
	.note-editable dfn {
		font-style: normal;
		text-decoration: underline dotted;
	}
` );