Group by repo on github

When you search code using github, this script can help you group by repo
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         Group by repo on github
// @namespace    https://github.com/foamzou/group-by-repo-on-github
// @version      0.2.2
// @description  When you search code using github, this script can help you group by repo
// @author       foamzou
// @match        https://github.com/search?q=*
// @grant        none
// ==/UserScript==
let pageCount = 0;
const ContentTableUlNodeId = 'contentTableUl';
const BtnGroupById = 'btnGroupBy';

let shouldLoading = true;
const sleep = ms => new Promise(r => setTimeout(r, ms));
const debug = false;

(function() {
    'use strict';
    tryInit();
})();

function isSupportThePage() {
    if (document.location.search.match(/type=code/)) {
        return true;
    }
    l(`not support ${document.location}`);
    return false;
}

// for apply the script while url change
(function(history){
    const pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        const ret = pushState.apply(history, arguments);
        tryInit();
        return ret;
    }
})(window.history);

async function tryInit() {
    l('tryInit');
    if (!isSupportThePage()) {
        return;
    }
    if ((await tryWaitEle()) === false) {
        l('wait ele failed, do not setup init UI');
        return;
    }
    pageCount = getPageTotalCount();
    l(`total count: ${pageCount}`)
    initUI();
}

async function tryWaitEle() {
    const MAX_RETRY_COUNT = 20;
    let retry = 0;
    while (true) {
        if (document.body.innerText.match(/code result/)) {
            l('find ele');
            return true;
        }
        l('ele not found, wait a while');
        if (++retry > MAX_RETRY_COUNT) {
            return false;
        }
        await sleep(1000);
    }
}

function initUI() {
    if (document.getElementById(BtnGroupById)) {
        l('have created btn, skip');
        return;
    }
    const createBtn = () => {
        const btnNode = document.createElement('button');
        btnNode.id = BtnGroupById;
        btnNode.className = 'text-center btn btn-primary ml-3';
        btnNode.setAttribute('style', 'padding: 3px 12px;');
        btnNode.innerHTML = 'Start Group By Repo';

        document.querySelectorAll('h3')[1].parentNode.appendChild(btnNode); // todo get the h3 tag by match html content
    }
    createBtn();
    document.getElementById(BtnGroupById).addEventListener("click", startGroupByRepo);

}


function startGroupByRepo() {
    const initNewPage = () => {
        document.querySelector('.container-lg').style='max-width: 100%';

        const resultNode = document.querySelector('.codesearch-results');
        resultNode.className = resultNode.className.replace('col-md-9', 'col-md-7');

        const leftMenuNode = resultNode.previousElementSibling;
        leftMenuNode.className = leftMenuNode.className.replace('col-md-3', 'col-md-2');

        // create content table node
        const contentTableNode = document.createElement('div');
        contentTableNode.id = 'contentTableNode';
        contentTableNode.className = 'col-12 col-md-3 float-left px-2 pt-3 pt-md-0';
        contentTableNode.setAttribute('style', 'position: fixed; right:1em; top: 62px; border-radius: 15px; background: #f9f9f9 none repeat scroll 0 0; border: 1px solid #aaa; display: table; margin-bottom: 1em; padding: 20px;');

        // tool box
        const toolBoxNode = document.createElement('div');
        toolBoxNode.id = 'toolBoxNode';
        toolBoxNode.innerHTML = `
            <div style="height: 30px;">
                <div id="loadTextNode" style="text-align: center;width: 200px;float:left;line-height: 30px;">Load 1/1 Page</div>
                <span id="btnAbortLoading" class="btn btn-sm" style="float:right">Abort Loading</span></div>
            <div>
            <span id="btnExpandAll" class="btn btn-sm">Expand all</span>
            <span id="btnCollapseAll" class="btn btn-sm">Collapse all</span>
            <span id="btnButtom" style="float:right;" class="btn btn-sm">Buttom</span>
            <span id="btnTop" style="float:right;" class="btn btn-sm">Top</span>
        `;


        contentTableNode.appendChild(toolBoxNode);

        const ulNode = document.createElement('ul');
        ulNode.id = ContentTableUlNodeId;
        ulNode.setAttribute('style', 'list-style: outside none none !important;margin-top:5px;overflow: scroll;height: 600px');
        contentTableNode.appendChild(ulNode);

        resultNode.parentNode.insertBefore(contentTableNode, resultNode.nextElementSibling);

        document.getElementById("btnAbortLoading").addEventListener("click", abortLoading);
        document.getElementById("btnTop").addEventListener("click", toTop);
        document.getElementById("btnButtom").addEventListener("click", toButtom);
        document.getElementById("btnExpandAll").addEventListener("click", expandAll);
        document.getElementById("btnCollapseAll").addEventListener("click", collapseAll);

        setProgressText(1, pageCount);
        removeElementsByClass('paginate-container');
        document.getElementById("btnGroupBy").remove();
    }
    initNewPage();
    groupItemList();
    removeElementsByClass('code-list');
    showMore();
}

function abortLoading() {
    shouldLoading = false;
    document.getElementById("btnAbortLoading").innerHTML = 'Aborting...';
}

function setProgressText(current, total, content = false) {
    const els = document.querySelector('#loadTextNode');
    if (content) {
        document.getElementById("btnAbortLoading").remove();
        els.setAttribute("style", "text-align: center;width: 100%;float:left;line-height: 30px;");
        els.innerHTML = `${els.innerHTML}. ${content}`;
    } else {
        els.innerHTML = `Load ${current}/${total} Page`;
    }
}

function toTop() {
    window.scrollTo(0, 0);
}
function toButtom() {
    window.scrollTo(0,document.body.scrollHeight);
}
function expandAll() {
    const els = document.querySelectorAll('.details-node');
    for (let i=0; i < els.length; i++) {
        els[i].setAttribute("open", "");
    }
}
function collapseAll() {
    const els = document.querySelectorAll('.details-node');
    for (let i=0; i < els.length; i++) {
        els[i].removeAttribute("open");
    }
}

function makeValidFlagName(name) {
    return name.replace(/\//g, '-').replace(/\./g, '-');
}

function getRepoAnchorId(repoName) {
    return `anchor-id-${makeValidFlagName(repoName)}`;
}

function updateContentTableItem(repoName, fileCount) {
    const liNodeId = `contentTableNodeLi-${makeValidFlagName(repoName)}`;
    const fileCounterSpanNodeId = `fileCounterSpanNodeId-${makeValidFlagName(repoName)}`;
    const createLiNodeIfNotExist = () => {
        let liNode = document.querySelector(`#${liNodeId}`);
        if (liNode != null) {
            return;
        }
        liNode = document.createElement('li');
        liNode.id = liNodeId;

        const aNode = document.createElement('a');
        aNode.href = `#${getRepoAnchorId(repoName)}`;
        aNode.innerHTML = repoName;

        const infoNode = document.createElement('div');

        const fileCounterSpanNode = document.createElement('span');
        fileCounterSpanNode.id = fileCounterSpanNodeId;
        fileCounterSpanNode.setAttribute('style', 'width:50px;display:inline-block');
        fileCounterSpanNode.innerHTML = '📃 0';

        const starCounterNode = document.createElement("span");
        starCounterNode.setAttribute('style', 'padding-left:5px;width:80px;display:inline-block');
        starCounterNode.textContent = '⭐ ?';

        const langNode = document.createElement("span");
        langNode.setAttribute('style', 'padding-left:5px;width:100px;display:inline-block');

        // async fetch repo info
        getRepoInfo(repoName).then(info => {
            l(info);
            if (!info.language) {
                info.language = '?';
            }
            const langIcon = getLangIcon(info.language);
            langNode.innerHTML = langIcon ? `<img alt="${info.language}" src="${langIcon}" style="width: 15px;"> ${info.language}` : info.language;
            starCounterNode.textContent = `⭐ ${info ? info.stars : '?'} `;
        });

        infoNode.appendChild(fileCounterSpanNode);
        infoNode.appendChild(starCounterNode);
        infoNode.appendChild(langNode);

        const hrNode = document.createElement("hr");
        hrNode.setAttribute('style', 'margin:2px;');

        liNode.appendChild(aNode);
        liNode.appendChild(infoNode);
        liNode.appendChild(hrNode);

        const ulNode = document.querySelector(`#${ContentTableUlNodeId}`);
        ulNode.appendChild(liNode);
    };

    const updateFileCount = () => {
        const fileCounterSpanNode = document.querySelector(`#${fileCounterSpanNodeId}`);
        fileCounterSpanNode.innerHTML = `📃 ${fileCount} `;
    };

    createLiNodeIfNotExist();
    updateFileCount();
}

async function showMore() {
    if (pageCount <= 1) return;
    for (let i = 2; i<= pageCount; ++i) {
        if (!shouldLoading) {
            setProgressText(0, 0, 'Load Aborted Now');
            break;
        }
        l(`load page ${i} ... `)
        await fetchAndParse(i);
        setProgressText(i, pageCount);
        await sleep(1000);
    }
    setProgressText(0, 0, 'Load Finished')
}

async function fetchAndParse(pageNum) {
    const url = `${window.location.href}&p=${pageNum}`;
    let response;
    while (true) {
        response = await fetch(url);
        if (response.status == 429) {
            l(`429 limit, wait 2s ...`);
            await sleep(2000);
            continue;
        }
        break;
    }
    const htmlText = await response.text();

    const tempNode = document.createElement("div");
    tempNode.className = "temp-node-class";
    tempNode.innerHTML = htmlText;
    document.getElementsByClassName('codesearch-results')[0].appendChild(tempNode);

    groupItemList();
    removeElementsByClass(tempNode.className);
}

function getPageTotalCount() {
    if (!document.getElementsByClassName("pagination")[0]) {
        return 1;
    }
    const totalPageList = document.getElementsByClassName("pagination")[0].querySelectorAll("a");
    return parseInt(totalPageList[totalPageList.length -2].innerText)
}

function groupItemList() {
    const list = [... document.getElementsByClassName("code-list")[0].querySelectorAll(".code-list-item")];
    list.map(item => {
        const ele = parseCodeItem(item)
        addCodeEle(ele)
    });
}

function parseCodeItem(ele) {
    const _ele = ele.cloneNode(true);
    const repoName = _ele.querySelector('.Link--secondary').innerHTML.trim();
    const repoNode = _ele.querySelector('div.flex-shrink-0 a').cloneNode(true);
    _ele.querySelector('.width-full').removeChild(_ele.querySelector('div.flex-shrink-0'));

    return {
        repoName,
        repoNode,
        iconNode: _ele.querySelector("img"),
        codeItemNode: _ele.querySelector('.width-full')
    };
}

function addCodeEle(ele) {
    const fileCounterId = `fileCounterNode-${ele.repoName}`;
    const getDetailsNode = (repoName) => {
        const detailsNodeId = getRepoAnchorId(ele.repoName);
        const detailsNode = document.getElementById(detailsNodeId);
        if (detailsNode != null) {
            return detailsNode;
        }
        const node = document.createElement("details");
        node.id = detailsNodeId;
        node.className = "hx_hit-code code-list-item d-flex py-4 code-list-item-private details-node";
        node.setAttribute('open', '');

        const fileCounterNode = document.createElement("span");
        fileCounterNode.setAttribute('style', 'font-size:15px; padding: 1px 5px 1px 5px;border-radius:10px;background-color: #715ce4;color:  white;margin-left: 10px;');
        fileCounterNode.textContent = '0 files';
        fileCounterNode.id = fileCounterId;

        const summaryNode = document.createElement("summary");
        summaryNode.setAttribute('style', 'font-size: large;');
        summaryNode.appendChild(ele.iconNode);
        summaryNode.appendChild(ele.repoNode);
        summaryNode.appendChild(fileCounterNode);

        node.appendChild(summaryNode);
        document.getElementById("code_search_results").appendChild(node);
        return node;
    };

    const updateFileCount = () => {
        const node = document.getElementById(fileCounterId);
        const t = node.textContent;
        const fileCount = parseInt(t.replace('files', '')) + 1;
        node.textContent = `${fileCount} files`;

        updateContentTableItem(ele.repoName, fileCount);
    }

    getDetailsNode(ele.repoName).appendChild(ele.codeItemNode);
    updateFileCount();

}

async function getRepoInfo(repoName) {
    let info = await getRepoInfoByApi(repoName);
    if (info) {
        return info;
    }
    // coz api limit, try from html
    return await getRepoInfoByFetchHtml(repoName);
}

async function getRepoInfoByApi(repoName) {
    try {
        l(`try to getRepoInfoByApi: ${repoName}`)
        const response = await fetch(`https://api.github.com/repos/${repoName}`)
        const data = await response.json();
        if (data.stargazers_count === undefined) {
            return false;
        }
        return {
            stars: data.stargazers_count,
            watch: data.watchers_count,
            fork: data.forks_count,
            language: data.language
        };
    } catch (e) {
        l(e);
    }
    return false;
}

async function getRepoInfoByFetchHtml(repoName) {
    try {
        l(`try to getRepoInfoByFetchHtml: ${repoName}`)
        const response = await fetch(`https://github.com/${repoName}`)
        const data = await response.text();
        const stars = data.match(/"(.+?) user.* starred this repository"/)[1];
        // ignore error when these optional field not parsed succefuly
        let watch, fork, language;
        try {
            watch = data.match(/"(.+?) user.* watching this repository"/)[1];
            fork = data.match(/"(.+?) user.*forked this repository"/)[1];
            language = data.match(/Languages[\s\S]+?color-text-primary text-bold mr-1">(.+?)<\/span>/)[1];
        } catch(e) {
            l(e);
        }
        return {
            stars,
            watch,
            fork,
            language
        };
    } catch (e) {
        l(e);
    }
    return false;
}

function getLangIcon(lang) {
    if (!lang) {
        return false;
    }
    lang = lang.toLowerCase();
    const config = {
        javascript: 'js',
        python: 'python',
        java: 'java',
        go: 'golang',
        ruby: 'ruby',
        typescript: 'ts',
        'c++': 'cpp',
        php: 'php',
        'c#': 'csharp',
        c: 'c',
        shell: 'shell',
        dart: 'dart',
        rust: 'rust',
        kotlin: 'kotlin',
        swift: 'swift',
    };
    return config[lang] ? `https://raw.githubusercontent.com/foamzou/group-by-repo-on-github/main/lang-icon/${config[lang]}.png` : false;
}


function removeElementsByClass(className){
    const elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

function l(msg) {
    debug && console.log(msg)
}
欢迎访问Greasy Fork镜像
