Greasy Fork

// ==UserScript==
// @icon            http://res.hpoi.net.cn/gk/res/img/favicon.ico
// @name            Exhobby For Hpoi
// @namespace       [url=exhobby.net]exhobby[/url]
// @author          exhobby
// @description     Add exhobby for hpoi.net
// @match           *://*.hpoi.net/hobby/*
// @match           *://*.hpoi.net/album/*
// @match           *://*.hpoi.net.cn/hobby/*
// @match           *://*.hpoi.net.cn/album/*
// @version         0.0.2
// @grant           GM_addStyle
// @grant           GM_xmlhttpRequest
// @grant           GM_download
// ==/UserScript==
(function () {
    'use strict';
    var base_url_n = "http://res.exhobby.net/pic/n/"
    , base_url_s = "http://res.exhobby.net/pic/s/"
    , tmp = $("#addfav").attr("onclick")
    , type = tmp.indexOf('addFav2') == -1 ? "hobby" : "album";
  var fav = ""
    , target = "";
  if (type == "hobby") {
      fav = tmp.substring(tmp.indexOf("('") + 2, tmp.indexOf("')")),
      target = ".light-gallery"
  } else {
      fav = tmp.substring(tmp.indexOf("('") + 2, tmp.indexOf("',")),
      target = ".avia_desktop"
  }
  var template = '<div class="col-sm-4 col-xs-6" style="padding:1px">' + '<div class="flow-outer">' + '<a class="outside-pic" target="_blank" href="{url}">' + '<img class="flow-img b-lazy b-loaded flow-img-land" src="{root_s}{path}">' + '</a>' + '</div></div>'
    , loading = '';
  function addPics(url) {
      var content = '<div class="ibox"><div class="ibox-title"><h5>ExHobby</h5><div class="ibox-tools"><a class="pull-right" target="_blank" href="' + url + '"><span class="label label-info">More</span></a></div></div><div class="ibox-content"><div class="row outside-pics"></div></div></div>';
      $(content).insertAfter($(target).closest(".ibox"))
  }
  $('<div id="exhobby-loading" style="margin-bottom:20px;"><div style="float:left;line-height: 22px;padding-left: 30px;">Exhobby Loading...</div><div style="margin-left: 0px;" class="sk-spinner sk-spinner-circle"><div class="sk-circle1 sk-circle"></div> <div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div><div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div></div></div>').insertAfter($(target).closest(".ibox"));

  GM_xmlhttpRequest({
        method: 'POST',
        url: 'http://www.exhobby.net/get/pic?id='+fav,
        onload: response => {
            $("#exhobby-loading").remove()

            var rs=JSON.parse(response.responseText);  
            console.log(rs);
            
            if (rs.map.list && rs.map.list.length > 0) {
                addPics(rs.map.url);
                for (var k in rs.map.list) {
                    var _a = template;
                    _a = _a.replace(/{url}/g, rs.map.url).replace(/{root_s}/g, base_url_s).replace(/{path}/g, rs.map.list[k].path).replace(/{itemId}/, rs.map.list[k].picId);
                    $(".outside-pics").append(_a)
                }
                $('.flow-img').each(function() {
                    if ($(this)[0].width / $(this)[0].height > $(this).parent().parent('div').width() / $(this).parent().parent('div').height()) {
                        $(this).addClass('flow-img-land')
                    }
                });
                $('.flow-img').load(function() {
                    if ($(this)[0].width / $(this)[0].height > $(this).parent().parent('div').width() / $(this).parent().parent('div').height()) {
                        $(this).addClass('flow-img-land')
                    } else {
                        $(this).removeClass('flow-img-land')
                    }
                })
            }
        }
    });
})();