☰

FollowOver

Rollover for user info and follow button.

目前为 2016-11-20 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         FollowOver
  3. // @namespace    https://www.ekkooff.com/
  4. // @version      0.5
  5. // @description  Rollover for user info and follow button.
  6. // @author       Kevin Roberts (@echo)
  7. // @match        https://gab.ai/*
  8. // @include      https://gab.ai/home
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     console.log('wooooooot!');
  15.     var timeout=null;
  16.     var timeout2=null;
  17.     var id=null;
  18.  
  19.     var styles = $('<style type="text/css">\n\
  20. #followpopup {\n\
  21.   background-color:white;\n\
  22.   position:absolute;\n\
  23.   z-index:10000;\n\
  24.   display:none;\n\
  25.   height:140px;\n\
  26.   width:500px;\n\
  27.   padding:4px;\n\
  28.   border:1px solid #666;\n\
  29.   border-radius:5px;\n\
  30. }\n\
  31. \n\
  32. #followpopup-head {\n\
  33.   text-align: center;\n\
  34.   margin-bottom:10px;\n\
  35. }\n\
  36. \n\
  37. #followpopup-bio {\n\
  38.   height: 75px;\n\
  39.   overflow: hidden;\n\
  40.   margin-bottom:5px;\n\
  41. }\n\
  42. \n\
  43. #followpopup-info {\n\
  44.   border: 1px solid #edeeee;\n\
  45.   overflow:hidden;\n\
  46.   border-radius:4px;\n\
  47.   display:block;\n\
  48.   width:100%;\n\
  49.   position:relative;\n\
  50. }\n\
  51. \n\
  52. #followpopup-follow {\n\
  53.   right:0;\n\
  54.   position:absolute;\n\
  55.   width:55px;\n\
  56.   color: white;\n\
  57.   text-decoration: none;\n\
  58.   padding: 5px 10px;\n\
  59.   display: inline-block;\n\
  60. }\n\
  61. \n\
  62. #followpopup-info span {\n\
  63.   border-right: 1px solid #edeeee;\n\
  64.   padding: 3px;\n\
  65.   display: inline-block;\n\
  66. }\n\
  67. \n\
  68. #followpopup #followpopup-followback {\n\
  69.   right:75px;\n\
  70.   position:absolute;\n\
  71.   padding-right: 6px;\n\
  72.   height: 100%;\n\
  73. }\n\
  74. \n\
  75. #followpopup .follow {\n\
  76.   background: #34cf7f;\n\
  77. }\n\
  78. \n\
  79. #followpopup .unfollow {\n\
  80.   background: red;\n\
  81. }\n\
  82. \n\
  83. #followpopup .pending {\n\
  84.   background: #edeeee;\n\
  85.   color: #000;\n\
  86. }\n\
  87. \n\
  88. #followpopup .empty {\n\
  89.   background: transparent;\n\
  90. }\n\
  91. \n\
  92. </style>');
  93.  
  94.  
  95.     var userInfoPopup = $('<div id="followpopup">\
  96.                               <div id="followpopup-head">\
  97.                                  <strong><span id="followpopup-name"></span></strong>\
  98.                                  <span id="followpopup-username"></span>\
  99.                               </div>\
  100.                               <div id="followpopup-bio"></div>\
  101.                               <div id="followpopup-info">\
  102.                                 ?<span id="followpopup-score"></span>\
  103.                                 <span id="followpopup-posts"></span>\
  104.                                 <span id="followpopup-followers"></span>\
  105.                                 <span id="followpopup-following"></span>\
  106.                                 <span id="followpopup-followback"></span>\
  107.                                 <a href="#" id="followpopup-follow"></a>\
  108.                               </div>\
  109.                             </div>');
  110.     $('body').append(styles).append(userInfoPopup);
  111.     if($('body').css('background-color')!=='rgba(0, 0, 0, 0)'&&$('body').css('background-color')!=='transparent') {
  112.         userInfoPopup.css('background-color',$('body').css('background-color'));
  113.     }
  114.  
  115.     $('#followpopup-follow').click(function() {
  116.         var d = {};
  117.         if($(this).text()==='Unfollow'||$(this).text()==='Pending') {
  118.             d._method = 'delete';
  119.         }
  120.         var priv = $(this).hasClass('private');
  121.         $.ajax({
  122.             method: 'POST',
  123.             url: '/users/'+id+'/follow',
  124.             data: d
  125.         }).done(function(data) {
  126.             if(data.state==='success') {
  127.                 if(d._method) {
  128.                     $('#followpopup-follow').text('Follow').removeClass().addClass('follow');
  129.                     if($('#followpopup-followback i').hasClass('ion-arrow-swap')) {
  130.                         $('#followpopup-followback i').removeClass().addClass('ion-arrow-left-c');
  131.                     }
  132.                 } else if(!priv) {
  133.                     $('#followpopup-follow').text('Unfollow').removeClass().addClass('unfollow');
  134.                     if($('#followpopup-followback i').hasClass('ion-arrow-left-c')) {
  135.                         $('#followpopup-followback i').removeClass().addClass('ion-arrow-swap');
  136.                     }
  137.                 } else {
  138.                     $('#followpopup-follow').text('Pending').removeClass().addClass('pending');
  139.                 }
  140.  
  141.                 if(priv) {
  142.                     $('#followpopup-follow').addClass('private');
  143.                 }
  144.             }
  145.         });
  146.         return false;
  147.     });
  148.  
  149.     $('body').on('mouseenter','a.post__meta__name__full, a.post__meta__name__username, .notification-list .notification-list__item__message div:first-child span a:first-child, .notification-list__item__users a, a.notification-list__item__mention__name, a.notification-list__item__mention__username, a.inner-post-mention, a.mini-user-list__item__name, a.mini-user-list__item__username',function(e){
  150.         clearTimeout(timeout);
  151.         clearTimeout(timeout2);
  152.         timeout2 = setTimeout(function() {
  153.             clearTimeout(timeout);
  154.             var offset = $(e.currentTarget).offset();
  155.             var offset2 = $(e.currentTarget.parentElement).offset();
  156.             var height = $(window).height();
  157.             var width = $(window).width();
  158.             var name = e.currentTarget.href.substr(e.currentTarget.href.lastIndexOf('/')+1);
  159.             $.ajax({
  160.                 method: 'GET',
  161.                 url: '/users/'+name,
  162.                 headers: {
  163.                     'Authorization': 'Bearer '+localStorage.id_token
  164.                 }
  165.             }).done(function(data) {
  166.                 id = data.id;
  167.                 $('#followpopup-name').text(data.name);
  168.                 $('#followpopup-username').text('@'+data.username);
  169.                 $('#followpopup-bio').text(data.bio);
  170.                 $('#followpopup-score').text(data.score);
  171.                 $('#followpopup-posts').text(data.post_count+' posts');
  172.                 $('#followpopup-followers').text(data.follower_count+' followers');
  173.                 $('#followpopup-following').text(data.following_count+' following');
  174.                 if(data.followed) {
  175.                     if(data.following) {
  176.                         $('#followpopup-followback').html('<i class="ion-arrow-swap"></i>');
  177.                     } else {
  178.                         $('#followpopup-followback').html('<i class="ion-arrow-left-c"></i>');
  179.                     }
  180.                 } else {
  181.                     $('#followpopup-followback').html(' ');
  182.                 }
  183.                 if(authUser.username!=data.username) {
  184.                     if(data.follow_pending) {
  185.                         $('#followpopup-follow').text('Pending').removeClass().addClass('pending');
  186.                     } else if(!data.following) {
  187.                         $('#followpopup-follow').text('Follow').removeClass().addClass('follow');
  188.                     } else {
  189.                         $('#followpopup-follow').text('Unfollow').removeClass().addClass('unfollow');
  190.                     }
  191.                 } else {
  192.                     $('#followpopup-follow').text('').removeClass().addClass('empty');
  193.                 }
  194.                 if(data.is_private) {
  195.                     $('#followpopup-follow').addClass('private');
  196.                 }
  197.                 userInfoPopup.css({
  198.                     top:((e.clientY<(height/2))?offset.top+25:offset.top-160)+'px',
  199.                     left:(((width-515)>offset2.left)?offset2.left:width-515)+'px'
  200.                 });
  201.                 userInfoPopup.show();
  202.             });
  203.         },500);
  204.     }).on('mouseleave','a.post__meta__name__full, a.post__meta__name__username, .notification-list .notification-list__item__message div:first-child span a:first-child, .notification-list__item__users a, a.notification-list__item__mention__name, a.notification-list__item__mention__username, a.inner-post-mention, a.mini-user-list__item__name, a.mini-user-list__item__username',function(){
  205.         clearTimeout(timeout2);
  206.         timeout = setTimeout(function(){
  207.             userInfoPopup.hide();
  208.         }, 650);
  209.     });
  210.  
  211.     userInfoPopup.mouseenter(function() {
  212.         clearTimeout(timeout);
  213.         clearTimeout(timeout2);
  214.     }).mouseleave(function() {
  215.         clearTimeout(timeout2);
  216.         timeout = setTimeout(function() {
  217.             userInfoPopup.hide();
  218.         }, 650);
  219.     });
  220. })();