FollowOver

Rollover for user info and follow button.

当前为 2016-11-26 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name FollowOver
  3. // @namespace https://www.ekkooff.com/
  4. // @version 0.9
  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.  
  15. window.addEventListener('load',function() {
  16. var timeout=null;
  17. var timeout2=null;
  18. var id=null;
  19.  
  20. var styles = $('<style type="text/css">\n\
  21. #followpopup {\n\
  22. font-family: freight-sans-pro!important;\n\
  23. background-color:white;\n\
  24. position:absolute;\n\
  25. z-index:10000;\n\
  26. display:none;\n\
  27. height:140px;\n\
  28. width:500px;\n\
  29. padding:4px;\n\
  30. border:1px solid #666;\n\
  31. border-radius:5px;\n\
  32. }\n\
  33. \n\
  34. #followpopup-head {\n\
  35. text-align: center;\n\
  36. margin-bottom:3px;\n\
  37. }\n\
  38. \n\
  39. #followpopup-bio {\n\
  40. height: 82px;\n\
  41. overflow: hidden;\n\
  42. word-wrap: break-word;\n\
  43. -ms-word-break: break-all;\n\
  44. overflow-wrap: break-word;\n\
  45. word-break: break-word;\n\
  46. text-overflow: ellipsis;\n\
  47. margin-bottom:5px;\n\
  48. }\n\
  49. \n\
  50. #followpopup-info {\n\
  51. border: 1px solid #edeeee;\n\
  52. overflow:hidden;\n\
  53. white-space: nowrap;\n\
  54. text-overflow: ellipsis;\n\
  55. border-radius:4px;\n\
  56. display:block;\n\
  57. width:100%;\n\
  58. height: 28px;\n\
  59. position:relative;\n\
  60. }\n\
  61. \n\
  62. #followpopup-follow {\n\
  63. right:0;\n\
  64. position:absolute;\n\
  65. width:55px;\n\
  66. color: white;\n\
  67. text-decoration: none;\n\
  68. padding: 5px 10px;\n\
  69. display: inline-block;\n\
  70. }\n\
  71. \n\
  72. #followpopup-info span {\n\
  73. border-right: 1px solid #edeeee;\n\
  74. padding: 3px;\n\
  75. display: inline-block;\n\
  76. }\n\
  77. \n\
  78. #followpopup #followpopup-followback {\n\
  79. background-color: white;\n\
  80. right:75px;\n\
  81. position:absolute;\n\
  82. padding-right: 6px;\n\
  83. height: 100%;\n\
  84. }\n\
  85. \n\
  86. #followpopup .follow {\n\
  87. background: #34cf7f;\n\
  88. }\n\
  89. \n\
  90. #followpopup .unfollow {\n\
  91. background: red;\n\
  92. }\n\
  93. \n\
  94. #followpopup .pending {\n\
  95. background: #edeeee;\n\
  96. color: #000;\n\
  97. }\n\
  98. \n\
  99. #followpopup .empty {\n\
  100. background: transparent;\n\
  101. }\n\
  102. \n\
  103. </style>');
  104.  
  105.  
  106. var userInfoPopup = $('<div id="followpopup">\
  107. <div id="followpopup-head">\
  108. <strong><span id="followpopup-name"></span></strong>\
  109. <span id="followpopup-username"></span>\
  110. </div>\
  111. <div id="followpopup-bio"></div>\
  112. <div id="followpopup-info">\
  113. ?<span id="followpopup-score"></span>\
  114. <span id="followpopup-posts"></span>\
  115. <span id="followpopup-followers"></span>\
  116. <span id="followpopup-following"></span>\
  117. <span id="followpopup-followback"></span>\
  118. <a href="#" id="followpopup-follow"></a>\
  119. </div>\
  120. </div>');
  121. $('body').append(styles).append(userInfoPopup);
  122. if($('body').css('background-color')!=='rgba(0, 0, 0, 0)'&&$('body').css('background-color')!=='transparent') {
  123. userInfoPopup.css('background-color',$('body').css('background-color'));
  124. $('#followpopup-followback').css('background-color',$('body').css('background-color'));
  125. }
  126.  
  127. $('#followpopup-follow').click(function() {
  128. var d = {};
  129. if($(this).text()==='Unfollow'||$(this).text()==='Pending') {
  130. d._method = 'delete';
  131. }
  132. var priv = $(this).hasClass('private');
  133. $.ajax({
  134. method: 'POST',
  135. url: '/users/'+id+'/follow',
  136. data: d
  137. }).done(function(data) {
  138. if(data.state==='success') {
  139. if(d._method) {
  140. $('#followpopup-follow').text('Follow').removeClass().addClass('follow');
  141. if($('#followpopup-followback i').hasClass('ion-arrow-swap')) {
  142. $('#followpopup-followback i').removeClass().addClass('ion-arrow-left-c');
  143. }
  144. } else if(!priv) {
  145. $('#followpopup-follow').text('Unfollow').removeClass().addClass('unfollow');
  146. if($('#followpopup-followback i').hasClass('ion-arrow-left-c')) {
  147. $('#followpopup-followback i').removeClass().addClass('ion-arrow-swap');
  148. }
  149. } else {
  150. $('#followpopup-follow').text('Pending').removeClass().addClass('pending');
  151. }
  152.  
  153. if(priv) {
  154. $('#followpopup-follow').addClass('private');
  155. }
  156. }
  157. });
  158. return false;
  159. });
  160.  
  161. var targets = '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, a.profile-badge__name, a.profile-badge__username';
  162.  
  163. $('body').on('mouseenter',targets ,function(e){
  164. clearTimeout(timeout);
  165. clearTimeout(timeout2);
  166. timeout2 = setTimeout(function() {
  167. clearTimeout(timeout);
  168. var offset = $(e.currentTarget).offset();
  169. var offset2 = $(e.currentTarget.parentElement).offset();
  170. var height = $(window).height();
  171. var width = $(window).width();
  172. var name = e.currentTarget.href.substr(e.currentTarget.href.lastIndexOf('/')+1);
  173. $.ajax({
  174. method: 'GET',
  175. url: '/users/'+name,
  176. headers: {
  177. 'Authorization': 'Bearer '+localStorage.id_token
  178. }
  179. }).done(function(data) {
  180. id = data.id;
  181. $('#followpopup-name').text(data.name);
  182. $('#followpopup-username').text('@'+data.username);
  183. $('#followpopup-bio').text(data.bio);
  184. $('#followpopup-score').text(data.score);
  185. $('#followpopup-posts').text(data.post_count+' posts');
  186. $('#followpopup-followers').text(data.follower_count+' followers');
  187. $('#followpopup-following').text(data.following_count+' following');
  188. if(data.followed) {
  189. if(data.following) {
  190. $('#followpopup-followback').html('<i class="ion-arrow-swap"></i>');
  191. } else {
  192. $('#followpopup-followback').html('<i class="ion-arrow-left-c"></i>');
  193. }
  194. } else {
  195. $('#followpopup-followback').html('');
  196. }
  197. if(authUser.username!=data.username) {
  198. if(data.follow_pending) {
  199. $('#followpopup-follow').text('Pending').removeClass().addClass('pending');
  200. } else if(!data.following) {
  201. $('#followpopup-follow').text('Follow').removeClass().addClass('follow');
  202. } else {
  203. $('#followpopup-follow').text('Unfollow').removeClass().addClass('unfollow');
  204. }
  205. } else {
  206. $('#followpopup-follow').text('').removeClass().addClass('empty');
  207. }
  208. if(data.is_private) {
  209. $('#followpopup-follow').addClass('private');
  210. }
  211. userInfoPopup.css({
  212. top:((e.clientY<(height/2))?offset.top+25:offset.top-160)+'px',
  213. left:(((width-515)>offset2.left)?offset2.left:width-515)+'px'
  214. });
  215. userInfoPopup.show();
  216. });
  217. },500);
  218. }).on('click',targets,function(e){
  219. clearTimeout(timeout);
  220. clearTimeout(timeout2);
  221. userInfoPopup.hide();
  222. }).on('mouseleave',targets,function(){
  223. clearTimeout(timeout2);
  224. timeout = setTimeout(function(){
  225. userInfoPopup.hide();
  226. }, 650);
  227. });
  228.  
  229. (function(history){
  230. var pushState = history.pushState;
  231. history.pushState = function(state) {
  232. if (typeof history.onpushstate == "function") {
  233. history.onpushstate({state: state});
  234. }
  235. clearTimeout(timeout);
  236. clearTimeout(timeout2);
  237. userInfoPopup.hide();
  238. return pushState.apply(history, arguments);
  239. };
  240. })(window.history);
  241.  
  242. userInfoPopup.mouseenter(function() {
  243. clearTimeout(timeout);
  244. clearTimeout(timeout2);
  245. }).mouseleave(function() {
  246. clearTimeout(timeout2);
  247. timeout = setTimeout(function() {
  248. userInfoPopup.hide();
  249. }, 650);
  250. });
  251. },false);
  252. })();