Mega GCode docco page + gcode file navigator

[theKM]

For fans of the old mega-gcode-page...

I was starting to miss the mega page, but understand why they had to do it.

So I messed with my greaseMonkey script. Below is a script that re-creates the original mega-page by plucking content from the little gcode pages and squirting them into the main page. With three processing "threads" it rips the individual pages down and assembles the mega page in around 10-12 seconds on my connection (six threads is amusing, but it trips the server's rate limit, because it starts to look like a DDOS attack, so, 3 is ideal, IMO ).

To run it, browse to the gcode page ( https://duet3d.dozuki.com/Wiki/Gcode ) open JS console (ctrl + shift + J in chrome, ctrl + shift + i in firefox), copy and paste this in... hit enter to run it.

When it runs, it should put a "Create Mega-Page" link at the top of the left hand menu... click that...

You should see the scroll bar on the right go tiny as it downloads and injects the content from all the separate gcode pages into this page. What results is a page exactly like what used to be there, menu on the left still works, you can `ctrl+F' to find content, etc.

_
Script to copy and paste:

// ==UserScript==
// @name     GCode Wiki script
// @version  1
// @include     https://duet3d.dozuki.com/Wiki/Gcode*
// ==/UserScript==

/** for processing injected menu clicks, gets changed
 * to proper implementation when needed
 */
let processMegaPage = () => {};
let crossLinkDoc = () => {};
let setupGcodeBrowser = () => {};

let codeMap = {};
let crossLinked = false;

// for identifying gcode references
let codeRx = /[GM]+[0-9]+(.[0-9])?/g;

/** Helper function with finding things, so I don't need a framework
 */
let docE = (f, inp) => {
    if (Array.isArray(inp)) {
        return (inp.map(i => docE(f, i))).flat();
    }
    let seek = document[f](inp);
    if (!seek || seek instanceof HTMLElement) return seek;
    let tmp = [];
    for (let t of seek) tmp.push(t);
    return tmp;
};

let content = document.getElementById('content');
let isInContent = function (e) {
    if (!e) return false;
    if (!e.parentElement || e.parentElement === document.body) return false;
    if (e.parentElement === content) return true;
    return isInContent(e.parentElement);
}

/** Handler to take input and process links in gcode browser
 */
let ref = null;
let paster = () => {
    if (ref) clearTimeout(ref);
    ref = setTimeout(() => {
        let linkStyle = 'all:unset;cursor:pointer;text-decoration:underline;color:blue;';
        let v = docE('getElementById', 'gcode-paste-input').value;
        v = v.replace(codeRx, (s) => {
            if (codeMap[s]) return '<a href="#' + codeMap[s] + '" style="' + linkStyle + '">' + s + '</a>';
            return s;
        });

        docE('getElementById', 'gcode-paste').innerHTML = '<pre style="text-align:left">' + v + '</pre>';
    }, 500);
};


// check to see if this page is the one we want, otherwise do nothing
let loc = null;
let pos = null;
let hash = null;
let qstring = null;

const evalLocation = () => {
    loc = document.location + '';
    pos = loc.indexOf('#');
    hash = null;
    if (pos > -1) {
        hash = loc.substring(pos);
        loc = loc.substring(0, pos);
    }

    qstring = '';
    pos = loc.indexOf('?');
    if (pos > -1) {
        qstring = loc.substring(pos + 1);
        loc = loc.substring(0, pos);
    }
};

const moveToHash = () => {
    if (hash) {
        document.location = hash;
    }
};

// current location details...
evalLocation();

if (loc.endsWith('/Wiki/Gcode')) {
    // current page is the gcode wiki...

    // find the menu
    let topTitle = docE('getElementsByClassName', 'toc-title')[0];

    // add the link to run the mega-page import...
    let squirt = document.createElement('div');
    squirt.innerHTML = '<a id="create-mega-page-link" href="javascript:;">Create Mega-Page</a>';

    topTitle.parentElement.insertBefore(squirt, topTitle.nextSibling);

    setTimeout(() => {
        // take a beat, wire the event clicker (greasemonkey complication)...
        let tmp = null;
        (tmp = document.getElementById('create-mega-page-link')) ? tmp.addEventListener('click', () => processMegaPage()) : null;
    }, 50);

    // function handler for the click...
    processMegaPage = () => {
        squirt.innerHTML = '';

        // find all the specific links
        let glinks = docE('getElementsByTagName', 'a').filter(a => {
            let t = a.innerText;
            let h = '' + a.href;
            h = h.substring(h.indexOf('/', 10));
            return (t.match(codeRx) && !h.startsWith('/Wiki/Gcode') && (h.startsWith('/Wiki/M') || h.startsWith('/Wiki/G')));
        });

        // a function that represents the work for a page download
        let processor = a => {

            return new Promise((resolve, reject) => {

                // download...
                fetch(a.href).then(async response => {

                    // the document dext...
                    let t = await response.text();

                    // pull out the good stuff...
                    let from = t.indexOf('<div id="Wiki_Details">');
                    let to = t.lastIndexOf('<div class="clearer">', t.lastIndexOf('<div itemprop="author"'));
                    t = t.substring(from, to);

                    // dont need this link in there now...
                    t = t.replace('<p>Back to the <a href="/Wiki/Gcode">Gcode Dictionary</a></p>', '');

                    // make a div for it
                    const d = document.createElement('div');
                    d.innerHTML = t;

                    // replace the link tag's parent <p>
                    let p = a.parentElement;
                    p.parentNode.replaceChild(d, p);

                    // end of task
                    resolve();

                }).catch(reject);
            });
        };

        let count = 0;

        // a function that represents a processing thread so we can start N of them
        let runner = async () => {
            while (glinks.length > 0) {
                count++;
                if (count % 25 === 0) console.log(count);
                let x = glinks.shift();
                try {
                    await processor(x);
                } catch (e) {
                    console.log(e);
                }
            }
        };

        // start the runners...
        let runnerCount = 1;
        (async () => {
            let time = new Date().getTime();

            console.log('links to process: ' + glinks.length);

            let runners = [];
            for (let i = 0; i < runnerCount; i++) runners.push(runner());

            await Promise.all(runners);

            console.log('DONE!!! (' + ((new Date().getTime() - time) / 1000) + ' seconds)');

            moveToHash();

            squirt.innerHTML = '<a id="cross-linker-link" href="javascript:;">Cross-link gcodes</a><br>'
                + '<a id="setup-gcode-browser-link" href="javascript:;">Setup GCode Browser</a><br><br>';

            setTimeout(() => {
                // take a beat, wire the event clicker (greasemonkey complication)...
                let tmp = null;
                (tmp = document.getElementById('cross-linker-link')) ? tmp.addEventListener('click', () => crossLinkDoc()) : null;
                (tmp = document.getElementById('setup-gcode-browser-link')) ? tmp.addEventListener('click', () => setupGcodeBrowser()) : null;
            }, 50);
        })();

        crossLinkDoc = () => {
            if (crossLinked) return;
            crossLinked = true;

            let link = document.getElementById('cross-linker-link');
            link.parentElement.removeChild(link);

            /** Parse the references out of the document
             */
            docE('getElementsByClassName', 'header').forEach(sect => {
                let s = sect.id + '';
                s.replace(codeRx, sx => {
                    sx = sx.replace('_', '.');
                    if (!codeMap[sx]) {
                        codeMap[sx] = s;
                    }
                });
            });

            /** Cross-link gcode references through the document
             */
            docE('getElementsByTagName', ['p', 'li', 'pre', 'strong']).forEach(tag => {
                if (!tag) return;
                if (!isInContent(tag)) return;
                let linkStyle = 'all:unset;cursor:pointer;text-decoration:underline;color:blue;';
                let h = ('' + tag.innerHTML).trim();
              	if (h.startsWith('<div/')) return;
                tag.innerHTML = h.replace(/(?<!_)([GM]+[0-9]+(.[0-9])?)/g, (s) => {
                    if (codeMap[s]) return '<a href="#' + codeMap[s] + '" style="' + linkStyle + '" class="crosslink">' + s + '</a>';
                    return s;
                });
            });

            evalLocation();
            moveToHash();
        };

        setupGcodeBrowser = () => {
            crossLinkDoc();

            if (squirt) {
                squirt.parentElement.removeChild(squirt);
                squirt = null;
            }

            /** Strip the main wrapper element of styling
             */
            let wrap = docE('getElementById', 'page');
            wrap.className = '';
            wrap.id = 'gnavPage';

            /** Remove styling of sidebar nested element
             */
            docE('getElementById', 'sidebar-wiki-toc').className = '';
            docE('getElementById', 'sidebar-wiki-toc').id = 'gnavSidebar';

            /** Strip the sidebar
             */
            let sb = null;
            sb = docE('getElementById', 'page-sidebar');
            sb.innerHTML = '';
            sb.id = 'gnavSidebar';

            /** Strip the main area
             */
            let main = docE('getElementById', 'main');
            main.id = 'gnavMain';
            docE('getElementsByClassName', 'articleContainer')[0].className = '';

            /** Clear our other elements not needed
             */
            let mb = docE('getElementById', 'mainBody');
            for (let kid of mb.children) {
                if (kid.id !== 'contentFloat') mb.removeChild(kid);
            }

            let bg = docE('getElementById', 'background');
            for (let kid of bg.children) {
                if (kid.id === 'gnavPage') break;
                else bg.removeChild(kid);
            }

            for (let kid of document.body.children) {
                if (kid.id !== 'background') document.body.removeChild(kid);
            }

            docE('getElementById', 'content').id = 'offContent';

            /** Apply new styles to the wrapper, sidebar and main areas
             */
            wrap.setAttribute('style', 'display:flex;gap:1em;');
            sb.setAttribute('style', 'flex: 1 1 45%; height: 100vh;');
            main.setAttribute('style', 'flex: 1 1 50%; height: 100vh');

            /** Input field to paste the gcode
             */
            sb.innerHTML = `
<div style="width: 45vw; height: 100vh; position: fixed;overflow: scroll;">
    <textarea id="gcode-paste-input"></textArea>
  <hr />
  <pre id="gcode-paste" style="text-align: left"><center>( paste gcode above )</center></pre>
</div>`;

            setTimeout(() => {
                // take a beat, wire the event clicker (greasemonkey complication)...
                let tmp = null;
                (tmp = document.getElementById('gcode-paste-input')) ? tmp.addEventListener('keyup', () => paster()) : null;
            }, 50);
        };
    };
}

// auto-trigger...
if (qstring === 'inflateContent') {
    processMegaPage();
}

_
CROSS LINKING
After all the gcode content is downloaded and set up on the page, there will be two links at the top of the menu... click on "Cross-link gcodes", and the script will then link all the GCode mentions on the page with other parts of the document, so you can bounce around from wherever you see a gcode mentioned.

_
GCODE BROWSER

Click on "Setup Gcode Browser"... it will cross-link the gcodes as mentioned, and the page gets wrangled to set up the left hand size as a gcode panel with the documentation on the right.

Paste the contents of a gcode file (like config.g ) into the text area, and it will update to show the gcode, with all the codes linked to the documentation on the right.

This makes it handy to browse what's happening in a gcode file, the browser know where you're at (for example, rather than assume you know what a code is doing, click on it, confirm in the docco that it does what you assume, then just click back in the browser to be right back where you're at).

This has greatly helped my understanding of what's going on in these setup files so I can set up my CNC machine.

_
Greasemonkey

If you like this script, and wish it was just part of the site, then you can use a plugin called GreaseMonkey in FireFox (chrome has one called TamperMonkey that runs the same thing)... which just tells the browser to run scripts against sites you configure. The above script takes greasemonkey into account and should work as is.

The script is also looking for "inflateContent" in the URL, so if you install it in greaseMoneky, and then just browse to https://duet3d.dozuki.com/Wiki/Gcode?inflateContent , the page will automatically inflate to the mega-page without needing to click anything.
_

...if the wiki maintainers wish, this script could be included in the top html document. It only works when it sees that it's on the correct page, and then injects the link. So the site stays as-is, until the user clicks the link to create the voltron mega-page.

I'm still fiddling with it to do all the cross-linking that my other script did previously, but thought people might like this to recreate what was, while still allowing wiki maintainers to do the separate page thing.

[theKM]

updated the script for greasemonkey/tampermonkey... apparently they sandbox a few things so link handling attachments had to be more complicated than a usual first-class-citizen script. The *monkey plugins seem to work pretty nice now, certainly a more handy way to run it than to paste it in all the time