|
|
| Riadok 1: |
Riadok 1: |
| (function () {
| |
| var tippyInstancia = tippy(document.createElement("div"));
| |
|
| |
|
| /**
| |
| * Vytvorí JSON pojmovej mapy z obsahu stránky.
| |
| *
| |
| * @param {HTMLElement} poznamkyElement Element, ktorý obsahuje poznámky.
| |
| * @returns {object} JSON reprezentácia pojmovej mapy.
| |
| **/
| |
| function vytvoritDataMapy(poznamkyElement) {
| |
| var nadpisy = poznamkyElement.querySelectorAll("h1, h2, h3, h4, h5, h6");
| |
| var mapa = {
| |
| vrcholy: [],
| |
| hrany: []
| |
| };
| |
|
| |
| // Zoznam, ktorý uchováva posledný nadpis na každej úrovni
| |
| var posledneNadpisy = [];
| |
| for (var i = 0; i < nadpisy.length; i++) {
| |
| var nadpis = nadpisy[i];
| |
| var aktualnyLevel = ziskatLevelNadpisu(nadpis);
| |
| var idVrchola = i + 1;
| |
| var nazov = nadpis.querySelector(".mw-headline").innerText.slice(2);
| |
| var idRodica = posledneNadpisy[aktualnyLevel - 1] || 1;
| |
| mapa.vrcholy.push({
| |
| id: idVrchola,
| |
| label: nazov,
| |
| color: generovatFarbu(idRodica * aktualnyLevel),
| |
| tooltip: obsahNadpisu(nadpis)
| |
| });
| |
| if (aktualnyLevel > 1) {
| |
| mapa.hrany.push({
| |
| from: idRodica,
| |
| to: idVrchola
| |
| });
| |
| }
| |
|
| |
| // Aktualizujte posledný nadpis na úrovni
| |
| posledneNadpisy[aktualnyLevel] = idVrchola;
| |
|
| |
| // Vymažte všetky nadpisy na vyšších úrovniach
| |
| for (var j = aktualnyLevel + 1; j < posledneNadpisy.length; j++) {
| |
| delete posledneNadpisy[j];
| |
| }
| |
| }
| |
| return mapa;
| |
| }
| |
|
| |
| /**
| |
| * Získa obsah nadpisu a všetkých nasledujúcich elementov, ktoré nie sú nadpisy.
| |
| * Obsah je v HTML formáte.
| |
| *
| |
| * @param {HTMLElement} nadpisElement HTML element nadpisu.
| |
| * @returns {string} Obsah nadpisu a všetkých nasledujúcich elementov, ktoré nie sú nadpisy.
| |
| **/
| |
| function obsahNadpisu(nadpisElement) {
| |
| var obsah = "";
| |
| var element = nadpisElement.nextElementSibling;
| |
| while (element && !["H1", "H2", "H3", "H4", "H5", "H6"].includes(element.tagName)) {
| |
| obsah += element.outerHTML;
| |
| element = element.nextElementSibling;
| |
| }
| |
| return obsah;
| |
| }
| |
|
| |
| /**
| |
| * Vygeneruje zobrazenie pojmovej mapy.
| |
| *
| |
| * @param {HTMLElement} elementMapy Element, do ktorého sa vloží zobrazenie pojmovej mapy.
| |
| * @param {object} jsonMapy JSON reprezentácia pojmovej mapy.
| |
| * @returns {object} Objekt pojmovej mapy (vis-network).
| |
| **/
| |
| function vykreslitMapu(elementMapy, jsonMapy) {
| |
| var sirkaZobrazenia = window.innerWidth;
| |
| var jeSirokeZobrazenie = sirkaZobrazenia > 768;
| |
| var dataSiete = {
| |
| nodes: new vis.DataSet(jsonMapy.vrcholy),
| |
| edges: new vis.DataSet(jsonMapy.hrany)
| |
| };
| |
| var nastavenia = {
| |
| interaction: {
| |
| hover: true,
| |
| keyboard: {
| |
| enabled: true,
| |
| bindToWindow: false,
| |
| autoFocus: false
| |
| }
| |
| },
| |
| nodes: {
| |
| shape: "box",
| |
| widthConstraint: {
| |
| maximum: 200
| |
| },
| |
| margin: 10,
| |
| labelHighlightBold: false
| |
| },
| |
| edges: {
| |
| smooth: {
| |
| type: "dynamic",
| |
| roundness: 0.5
| |
| },
| |
| width: 0.75,
| |
| arrows: {
| |
| to: {
| |
| enabled: true
| |
| }
| |
| }
| |
| },
| |
| layout: {
| |
| hierarchical: {
| |
| enabled: true,
| |
| direction: jeSirokeZobrazenie ? "UD" : "LR",
| |
| sortMethod: "directed",
| |
| nodeSpacing: jeSirokeZobrazenie ? 220 : 100,
| |
| levelSeparation: jeSirokeZobrazenie ? 100 : 250,
| |
| shakeTowards: "roots"
| |
| }
| |
| },
| |
| physics: false
| |
| };
| |
| pojmova_mapa = new vis.Network(elementMapy, dataSiete, nastavenia);
| |
| pojmova_mapa.on("hoverNode", function (parametre) {
| |
| var obsah = jsonMapy.vrcholy.find(function (vrchol) {
| |
| return vrchol.id === parametre.node;
| |
| }).tooltip;
| |
| if (!parametre.node || !obsah) return;
| |
| tippyInstancia.setProps({
| |
| triggerTarget: elementMapy,
| |
| maxWidth: "90vw",
| |
| allowHTML: true,
| |
| getReferenceClientRect: function getReferenceClientRect() {
| |
| return {
| |
| width: 0,
| |
| height: 0,
| |
| left: window.innerWidth / 2,
| |
| right: window.innerWidth / 2,
| |
| top: window.innerHeight - 10
| |
| };
| |
| },
| |
| interact: true
| |
| });
| |
| tippyInstancia.setContent("<div style=\"padding: 1rem 0.5rem; font-size: 12px;\">".concat(obsah, "</div>"));
| |
| tippyInstancia.show();
| |
| MathJax.typesetPromise([tippyInstancia.popper]);
| |
| });
| |
| pojmova_mapa.on("blurNode", function () {
| |
| tippyInstancia.hide();
| |
| });
| |
| return pojmova_mapa;
| |
| }
| |
|
| |
| /**
| |
| * Získa úroveň nadpisu (h1, h2, atď.).
| |
| *
| |
| * @param {HTMLElement} nadpis HTML element nadpisu.
| |
| * @returns {number} Číselná reprezentácia úrovne nadpisu.
| |
| **/
| |
| function ziskatLevelNadpisu(nadpis) {
| |
| return parseInt(nadpis.tagName.substring(1), 10);
| |
| }
| |
|
| |
| /**
| |
| * Generuje náhodné číslo z čísla (seed). Rovnaký seed vždy vygeneruje rovnaké "náhodné" číslo v určenom rozsahu.
| |
| *
| |
| * https://stackoverflow.com/a/63599906
| |
| *
| |
| * @param {number} seed Číslo, z ktorého sa generuje náhodné číslo.
| |
| * @param {number[]} rozsah Rozsah, v ktorom sa náhodné číslo generuje.
| |
| * @returns {number} Náhodné číslo.
| |
| **/
| |
| function nahodneCislo(seed) {
| |
| var rozsah = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 255];
| |
| seed = String(seed).split("").reduce(function (c, n) {
| |
| return n != 0 ? c * n : c * c;
| |
| });
| |
| var od = rozsah[0];
| |
| var po = rozsah[1];
| |
| while (seed < rozsah[0] || seed > rozsah[1]) {
| |
| if (seed > rozsah[1]) seed = Math.floor(seed / po--);
| |
| if (seed < rozsah[0]) seed = Math.floor(seed * od++);
| |
| }
| |
| return seed;
| |
| }
| |
|
| |
| /**
| |
| * Generuje náhodnú farbu z čísla. Rovnaké číslo vždy vygeneruje rovnakú farbu.
| |
| *
| |
| * @param {number} cislo Číslo, z ktorého sa generuje farba.
| |
| * @returns {string} Farba v RBG formáte.
| |
| **/
| |
| function generovatFarbu() {
| |
| var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
| |
| var svetla = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
| |
| var od = svetla ? 125 : 0;
| |
| var po = svetla ? 255 : 125;
| |
| r = nahodneCislo(seed + 11, [od, po]);
| |
| g = nahodneCislo(seed + 12, [od, po]);
| |
| b = nahodneCislo(seed + 13, [od, po]);
| |
| return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
| |
| }
| |
|
| |
| // ----------------------------------------------------------------
| |
|
| |
| var poznamkyElement = document.getElementById("#mw-content-text .mw-parser-output");
| |
| var elementMapy = document.getElementById("mapa");
| |
| if (elementMapy !== null && poznamkyElement !== null) {
| |
| var jsonMapy = vytvoritDataMapy(poznamkyElement);
| |
| vykreslitMapu(elementMapy, jsonMapy);
| |
| }
| |
| })();
| |
