Rollover for user info and follow button.
目前為
// ==UserScript==
// @name FollowOver
// @namespace https://www.ekkooff.com/
// @version 0.1
// @description Rollover for user info and follow button.
// @author Kevin Roberts (@echo)
// @match https://gab.ai/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
var timeout=null;
var id=null;
var styles = $(`<style type="text/css">
#followpopup {
background-color:white;
position:absolute;
z-index:10000;
display:none;
height:140px;
width:500px;
padding:4px;
border:1px solid #666;
border-radius:5px;
}
#followpopup-head {
text-align: center;
margin-bottom:10px;
}
#followpopup-bio {
height: 75px;
overflow: hidden;
margin-bottom:5px;
}
#followpopup-info {
border: 1px solid #edeeee;
overflow:hidden;
border-radius:4px;
display:block;
width:100%;
position:relative;
}
#followpopup-follow {
right:0;
position:absolute;
width:55px;
color: white;
text-decoration: none;
padding: 5px 10px;
display: inline-block;
}
#followpopup-info span {
border-right: 1px solid #edeeee;
padding: 3px;
display: inline-block;
}
#followpopup #followpopup-followback {
right:75px;
position:absolute;
padding-right: 6px;
height: 100%;
}
#followpopup .follow {
background: #34cf7f;
}
#followpopup .unfollow {
background: red;
}
#followpopup .empty {
background: transparent;
}
</style>`);
var userInfoPopup = $(`<div id="followpopup" style="">
<div id="followpopup-head" style="">
<strong><span id="followpopup-name"></span></strong>
<span id="followpopup-username"></span>
</div>
<div id="followpopup-bio"></div>
<div id="followpopup-info">
?<span id="followpopup-score"></span>
<span id="followpopup-posts"></span>
<span id="followpopup-followers"></span>
<span id="followpopup-following"></span>
<span id="followpopup-followback"></span>
<a href="#" id="followpopup-follow"></a>
</div>
</div>`);
$('body').append(styles).append(userInfoPopup);
if($('body').css('background-color')!=='rgba(0, 0, 0, 0)') {
userInfoPopup.css('background-color',$('body').css('background-color'));
}
$('#followpopup-follow').click(function() {
var d = {};
if($(this).text()==='Unfollow') {
d._method = 'delete';
}
$.ajax({
method: 'POST',
url: '/users/'+id+'/follow',
data: d
}).done(function(data) {
if(data.state==='success') {
if(d._method) {
$('#followpopup-follow').text('Follow').removeClass().addClass('follow');
if($('#followpopup-followback i').hasClass('ion-arrow-swap')) {
$('#followpopup-followback i').removeClass().addClass('ion-arrow-left-c');
}
} else {
$('#followpopup-follow').text('Unfollow').removeClass().addClass('unfollow');
if($('#followpopup-followback i').hasClass('ion-arrow-left-c')) {
$('#followpopup-followback i').removeClass().addClass('ion-arrow-swap');
}
}
}
});
return false;
});
$('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',function(e){
var offset = $(e.currentTarget).offset();
var offset2 = $(e.currentTarget.parentElement).offset();
var height = $(window).height();
clearTimeout(timeout);
var name = e.currentTarget.href.substr(e.currentTarget.href.lastIndexOf('/')+1);
$.ajax({
method: 'GET',
url: '/users/'+name,
headers: {
'Authorization': 'Bearer '+localStorage.id_token
}
}).done(function(data) {
id = data.id;
$('#followpopup-name').text(data.name);
$('#followpopup-username').text('@'+data.username);
$('#followpopup-bio').text(data.bio);
$('#followpopup-score').text(data.score);
$('#followpopup-posts').text(data.post_count+' posts');
$('#followpopup-followers').text(data.follower_count+' followers');
$('#followpopup-following').text(data.following_count+' following');
if(data.followed) {
if(data.following) {
$('#followpopup-followback').html('<i class="ion-arrow-swap"></i>');
} else {
$('#followpopup-followback').html('<i class="ion-arrow-left-c"></i>');
}
} else {
$('#followpopup-followback').html(' ');
}
if(authUser.username!=data.username) {
if(!data.following) {
$('#followpopup-follow').text('Follow').removeClass().addClass('follow');
} else {
$('#followpopup-follow').text('Unfollow').removeClass().addClass('unfollow');
}
} else {
$('#followpopup-follow').text('').removeClass().addClass('empty');
}
userInfoPopup.css({
top:((e.clientY<(height/2))?offset.top+25:offset.top-160)+'px',
left:(offset2.left)+'px'
});
userInfoPopup.show();
});
}).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',function(){
timeout = setTimeout(function(){
userInfoPopup.hide();
}, 650);
});
userInfoPopup.mouseenter(function() {
clearTimeout(timeout);
}).mouseleave(function() {
timeout = setTimeout(function() {
userInfoPopup.hide();
}, 650);
});
})();