☰

Gab.ai User Info

Pop-up of user info on hover of mention or username link

当前为 2017-01-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Gab.ai User Info
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Pop-up of user info on hover of mention or username link
  6. // @author       You
  7. // @match        https://gab.ai/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. itvout = -1;
  12.  
  13. $(document).ready(function()
  14. {
  15.     setInterval(setupLinks, 500);
  16. });
  17.     
  18.  
  19. function setupLinks()
  20. {
  21.     if($("a.inner-post-mention, a.post__meta__name__username").not(".hover-info").length > 0)
  22.     {
  23.         $("a.inner-post-mention, a.post__meta__name__username").not(".hover-info").each(function(){
  24.             $(this).on("mouseleave", function(){
  25.                $("#badge").remove();
  26.                $("a.hover-info").removeClass("hover-info");
  27.             });
  28.             $(this).on("mouseenter", function(){
  29.                 if($("#badge").length > 0)
  30.                     return;
  31.  
  32.                 $("#badge").remove();
  33.                 var div = document.createElement("div");
  34.                 div.id = "badge";
  35.                 $(div).css("position", "absolute");
  36.                 $(div).css("left", $(this).offset().left + "px");
  37.                 $(div).css("top", $(this).offset().top - (150 + 10) + "px");
  38.                 $(div).css("width", "450px");
  39.                 $(div).css("height", "152px");
  40.                 $(div).css("padding", "0");
  41.                 $(div).css("background-color", "white");
  42.                 $(div).css("box-shadow", "2px 2px 3px rgba(0,0,0,.5)");
  43.                 $(div).html("Loading...");
  44.                 $(document.body).append(div);
  45.                 $.getJSON("https://gab.ai/users/" + $(this).text().substr(1), function(data){
  46.                     var html = "";
  47.                     html += "<div style='background-image:url(" + data.cover_url + "); background-size:cover;background-position:center;height:60px;padding:5px'>";
  48.                     html += "<img align='left' style='border-radius:40px;height:40px;width:40px;margin-right:7px;margin-left:5px;margin-top:5px;border:3px solid white' src='" + data.picture_url + "'/>";
  49.                     html += "<h2 style='text-shadow:1px 1px 0px black; color:#ff5d9f;'>" + data.name + "</h2>";
  50.                     html += "</div>";
  51.                     html += "<div style='font-size:12px; font-family:Arial;'>";
  52.                     html += "    <div style='padding:6px;overflow:hidden;height:52px;'>" + data.bio + "</div>";
  53.                     html += "    <div style='border-top:1px dotted #ccc; background-color:#F8F8F8;font-size:11px;height:16px;padding-top:2px'>";
  54.                     //html += "<span style='margin-right:5px'>? " + data.score + "</span>";
  55.                     html += "        <span style='margin-left:5px; margin-right:5px'>" + data.post_count + " posts</span>";
  56.                     html += "        <span style='margin-right:5px'>" + data.follower_count + " followers</span>";
  57.                     html += "        <span style='margin-right:5px'>" + data.following_count + " following</span>";
  58.                     if(data.following && data.followed)
  59.                         html+= "<span>&rlarr; you follow each other</span>";
  60.                     else if(data.following)
  61.                         html+= "<span>&rarr; you follow " + data.username + "</span>";
  62.                     else if(data.followed)
  63.                         html+= "<span>&larr; " + data.username + " follows you</span>";
  64.                     html += "    </div>";
  65.                     html += "</div>";
  66.                     $("#badge").html(html);
  67.                 });
  68.                 $(this).addClass("hover-info");
  69.              });
  70.         });
  71.     }
  72. }