// ==UserScript==
// @name         Github、Gitee仓库 图片文件显示工具
// @namespace    http://tampermonkey.net/
// @version      0.2
// @license      HHB
// @antifeature  此脚本只做学习交流，使用此脚本的造成任何后果概不负责
// @description  Github、Gitee代码托管网址，仓库图片文件预览功能，点击小图可直接在新窗口查看并保存文件
// @author       764777472@qq.com
// @match        http*://github.com/*
// @match        http*://gitee.com/*
// @icon         https://gitee.com/static/images/logo-en.svg
// @grant        none
// @run-at       document-body
// @downloadURL none
// ==/UserScript==
function matchSrc(src) {
    var macths = ['jpg','png','gif','jpeg','svg'];
    let arr = src.split('.');
    let result = macths.find(item => item === arr[arr.length - 1]);
    return result;
};
function loadImgs (){
    if (location.host.indexOf("github.com") !== -1 || location.host.indexOf("gitee.com") !== -1) {
            'use strict';
            var mgsty = location.host.indexOf("gitee.com") !== -1 ? "margin:0 4px;" : "margin:0 12px 0 0;";
            var imgStyle = mgsty + "     width:  45px; height:  45px;object-fit: contain;cursor: pointer;background:rgba(0,0,0,.1);border-radius: 4px;padding:4px;box-sizing:border-box;transition: all 0.2s;";
            var imgStyleHover = mgsty + "width: 200px; height: 100px;object-fit: contain;cursor: pointer;background:rgba(0,0,0,.1);border-radius: 4px;padding:4px;box-sizing:border-box;transition: all 0.2s;";

            // Github
            if (location.host.indexOf("github.com") !== -1) {
                var arrs = document.querySelector('table').querySelector('tbody').getElementsByTagName('tr');
                console.log(arrs)
                if(document.getElementsByClassName('vbsNames').length > 0) {
                    return false;
                }
                //console.log(location.pathname,'目录，图片渲染完成，点击小图可在新窗口查看并保存图片')
                /*
                for (let i = 0; i < arrs.length; i++) {
                    if(arrs[i].getElementsByTagName('td').length >= 3) {
                        arrs[i].getElementsByTagName('td')[2]
                    let src = arrs[i].href+'?raw=true';
                    if(matchSrc(arrs[i].href)) {
                        let spans = arrs[i].parentElement;
                        spans.style = "display: flex !important;flex-direction: row;align-items: center;";

                        let imgs = document.createElement("img");
                        imgs.style = imgStyle;
                        imgs.src = src;
                        imgs.className = 'vbsNames';
                        spans.insertBefore(imgs,arrs[i]);
                        //spans.appendChild(imgs);
                        imgs.onload = (ig)=>{
                            imgs.title = "Intrinsic size: "+ig.path[0].naturalWidth + "×"+ig.path[0].naturalHeight + " px";
                        }
                        imgs.onclick = function() {
                            window.open(src);
                        }
                        imgs.onmouseover = function(event) {
                            let e = event.target;
                            e.style = imgStyleHover;
                        }
                        imgs.onmouseout = function(event) {
                            let e = event.target;
                            e.style = imgStyle;
                        }
                    }
                }
                */
            }
            // 码云 Gitee
            if (location.host.indexOf("gitee.com") !== -1){
                var arrs1 = document.querySelector('#git-project-content').getElementsByClassName('tree-holder')[0].getElementsByClassName('tree-table')[0].getElementsByClassName('five wide column tree-item-file-name tree-list-item');
                if(document.getElementsByClassName('vbsNames').length > 0) {
                    return false;
                }
                console.log(location.pathname,'目录，图片渲染完成，点击小图可在新窗口查看并保存图片')
                for (var j = 0; j < arrs1.length; j++) {
                    let src1 = arrs1[j].getElementsByTagName('a')[0].href.replace('/blob/','/raw/');
                    if(matchSrc(src1)) {
                        let imgs1 = document.createElement("img");
                        imgs1.style = imgStyle;
                        imgs1.src = src1;
                        imgs1.className = 'vbsNames';
                        arrs1[j].insertBefore(imgs1,arrs1[j].getElementsByTagName('a')[0]);
                        //arrs1[j].appendChild(imgs1);
                        imgs1.onload = (ig)=>{
                            imgs1.title = "Intrinsic size: "+ig.path[0].naturalWidth + "×"+ig.path[0].naturalHeight + " px";
                        }
                        imgs1.onclick = function() { window.open(src1);}
                        imgs1.parentNode.parentNode.onmouseover = function(event) {
                            //let e = event.target;
                            //e.style = imgStyleHover;
                            imgs1.style = imgStyleHover;
                        }
                        imgs1.parentNode.parentNode.onmouseout = function(event) {
                            //let e = event.target;
                            //e.style = imgStyle;
                            imgs1.style = imgStyle;
                        }
                    }
                }
            }
    };
}

window.onLoad = setInterval(()=>{loadImgs();},1000);