Add Follow Button to Mini-Profile [Updated 7 Sept 2022]
Sept 1, 2022 1:59:26 GMT -8
tek and peekabooicu like this
Post by Chris on Sept 1, 2022 1:59:26 GMT -8
Inspiration:
How to add Follow Button in Mini-profile by tekPreview:
Location:
Global Footer(or Board footer if want only operating in specific board(s) )
Code:
<script>
$(function(){
const profileFollowIcon = `data:image/png;base64,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ERERERERERERERERERERERERERERERERERERERERERERERERkcr6P92BuuzvC7ttAAAAAElFTkSuQmCC`;
const user = pb.data('user');
if(user.id < 1) return;
const page = pb.data('page');
const friends = Object.keys(user.friends);
const storageID = `following-${user.id}`;
let following = loadStorage()||[];
if(!following.length || following.length < friends.length){
//use friends (those also following you) as starting point to build list
following = [...new Set(following.concat(friends.map(o=>+o)))];
}
user.id && pb.data('proboards.post') && (function addProfileImages($button,follow_html,unfollow_html){
const content = proboards.listManagers[pb.data('lm_id')].content;
const posts = pb.data('proboards.post')
//debugger;
pb.events.on('afterSearch', (function addFollow(){
user.id && $.each(posts,function(i,e){
if(e.created_by && e.created_by !== +user.id){
const post = $('#post-'+e.id,content).filter(':not([data-author])').attr('data-author',e.created_by);
const miniProfile = $('.mini-profile',post).css('position','relative').addClass('follow-user');
let placement = $('.follow-button',post);
placement[0] || (placement = miniProfile);
let button = $button.clone().appendTo(placement).addClass('follow follow-'+e.created_by)
.each((j,k)=>{
let $k = $(k), tx = $k.html(follow_html).html();
if(following.indexOf(+e.created_by) !== -1){
$k.html(tx.replace(follow_html,unfollow_html));
miniProfile.addClass('following');
}else{
$k.html(follow_html);
}
})
.on('click', /*':not(.ui-state-disabled)',*/ function(ev) {
const t = this;
const buttons = $('.follow-'+e.created_by,content);
return ev.preventDefault(),
proboards.ajax({
url: proboards.route("follow_user"),
data: {
user_id: e.created_by
},
success: function(d) {
if(d.new_button_text === 'Unfollow'){
$(buttons).html(unfollow_html)
following = [...new Set(following.concat([e.created_by]))];
miniProfile.addClass('following');
}else{
$(buttons).html(follow_html);
const i = following.indexOf(e.created_by); i>-1 && following.splice(i,1);
miniProfile.removeClass('following');
}
},
complete: function() {
saveStorage(following)
}
}),
!1
})
}
})
return addFollow
})())
})(
$('<div style="position:absolute;top:4px;right:4px;width:2em;max-width:26px;cursor:pointer;">Follow</div>'),
`<div title="Follow this user" style="width:100%;height:100%;border-radius:100%;background:transparent;position:absolute;"> </div><img style="z-index:-1;width:100%;" src="${profileFollowIcon}">`,
`<div title="Unfollow this user" style="width:100%;height:100%;border-radius:9999px;position:absolute;background:transparent;"><img style="position:absolute;top:.1em;left:0;width:1em;" src="//storage.proboards.com/1/images/oxXTrXQCO_VQNXbmUIiS.png"></div><img style="z-index:-1;width:100%;" src="${profileFollowIcon}">`
)
/* Harvest follows from user profiles and member page listings */
if(pb.data('proboards.user') && pb.data('following') && pb.data('current_user_id') == user.id){
//members listing page
following = [...new Set(following.concat(Object.keys(pb.data('following')).map(o=>+o)))]
saveStorage(following);
} else {
//profile pages
page && page.member && $(function(){
//monitor follow button on profile page for changes
$('.follow_button').each((i,follow_button)=>{
let $follow_button = $(follow_button);
$follow_button.text() == 'Unfollow' && following.indexOf(+page.member.id) == -1
&& following.push(+page.member.id), saveStorage(following);
const followObserver = new MutationObserver(function(mutationList, observer){ //debugger;
mutationList.forEach((mutation)=>{
switch (mutation.type){
/*case "characterData":
if(muatation.characterDataOldValue == "Unfollow"){
const i = following.indexOf(+page.member.id); i>-1 && following.splice(i,1);
}else{
following = [...new Set(following.concat([+page.member.id]))];
}
saveStorage(following);
break;*/
case "childList":
if(mutation.addedNodes[0] && mutation.addedNodes[0].nodeType === 3 && /follow/i.test(mutation.addedNodes[0].data)){
if(mutation.addedNodes[0].nodeValue == "Unfollow"){
const i = following.indexOf(+page.member.id); i>-1 && following.splice(i,1);
}else{
following = [...new Set(following.concat([+page.member.id]))];
}
saveStorage(following);
}
break;
}
})
})
followObserver.observe($follow_button[0].parentNode, {characterDataOldValue:true, subtree:true, childList:true})
})
//scrub shortened following list on current user profile page for user ids not already saved
//note: jQuery map allowed to mutate array via callback return value
user.id == page.member.id && $('#following .mini-avatar .avatar-wrapper').map((i,e)=>{
const uid = +$(e).idFromClass('avatar');
if(following.indexOf(uid) === -1 ){ return following.push(uid);}
return null;
}).length && saveStorage(following);
//scrub shortened followers list on other user profile pages for current user id and add if not already in list
//note: jQuery map allowed to mutate array via callback return value
user.id != page.member.id && $('#followers .mini-avatar .avatar-wrapper').map((i,e)=>{
const uid = +$(e).idFromClass('avatar');
if(uid === user.id ){ return following.push(+page.member.id);}
return null;
}).length && saveStorage(following)
})
}
function loadStorage(id=storageID){
const v = localStorage[id];
return v ? JSON.parse(v) : v;
}
function saveStorage(v=following,id=storageID){
v = v.map(p=>+p).filter(p=>p>0)
localStorage[id] = JSON.stringify([...new Set(v)]); //ensure no duplicate values in array when saving
}
});
</script>Notes:
- Code only knows who you are already following if they are in your friends list (you follow them, and they follow you) but builds its own list over time with that as the starting point
- Code does not modify your mini-profile only the mini-profile of others since following yourself is a dog chasing its tail
- Added eager harvesting techniques (7 Sept 2022) so code can know a lot more quickly the full list of who you are following; head to the members page of your forum to have the entire list of members you are following recorded by the code to be used going forward. If localStorage is cleared, this can also be used to restore the list.
