MyBB Community Forums

Full Version: [1.4.x/1.6.x] Thank You/Like System v1.5 (Updated: 10/26/2011)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
(2012-01-15, 01:15 PM)Nidrax Wrote: [ -> ]Would it be possible to add a feature of showing the count of likes of the first post of the thread on the forum page (for example instead of star rating)?

The plugin does keep track of the number of thanks/likes in forums and threads, I had initially planned on using this data to display it on the thread list but then scraped that idea but the stats are still there.

You can pull the data using $thread['tyl_tnumtyls'] and put it in the forumdisplay_thread template, this will give you all the thanks/likes in a thread. Keep in mind this is not the thanks/likes of just the first post but all the posts in the thread that have thanks/likes, unless you have always set only the first post to have thanks/likes.
For some strange reason the thanks button don't appear on my forum:

http://lsgames.com.ar/showthread.php?tid=3&pid=4#pid4

Y translate the inc to spanish to use it, but i didn't touch anything else...
(2012-02-08, 04:08 AM)Azhiel Wrote: [ -> ]For some strange reason the thanks button don't appear on my forum:

http://lsgames.com.ar/showthread.php?tid=3&pid=4#pid4

Y translate the inc to spanish to use it, but i didn't touch anything else...

It won't show if it is your own post
Thanks, working good so far for me. nice

but one suggestion, it'd be nice if this could add to a users reputation in some way Toungue

thanks for making an awesome mod.
Hi there, I just installed this plugin and I'm loving it!

But I have a question for you - G33K -: I want it to have a smooth animation in two circumstances, one when you "like" the post and one other when you click on the collapse image, using jQuery (better with Easing effects). I tried to edit the js file, changing the $ istance with jQuery_1_7_1 (which I declared in a "var" because of the conflict of jQuery with Prototype), but it doesn't work.

How can I do this? Please help me! Thank you in advance.
(2012-02-14, 02:01 PM)Shade Wrote: [ -> ]Hi there, I just installed this plugin and I'm loving it!

But I have a question for you - G33K -: I want it to have a smooth animation in two circumstances, one when you "like" the post and one other when you click on the collapse image, using jQuery (better with Easing effects). I tried to edit the js file, changing the $ istance with jQuery_1_7_1 (which I declared in a "var" because of the conflict of jQuery with Prototype), but it doesn't work.

How can I do this? Please help me! Thank you in advance.

Well, in the first case, what kind of animation are you looking for when you like the post?

As for the collapse effect you can't simply change instances inside a function written for prototype and expect it to work for jquery. You will have to rewrite the entire tgl function to work with jquery.

Alternatively you can choose one of prototype's effects and use those, that way you don't have to load up jquery or rewrite for it.

Make sure the effects.js is loaded in headerinclude template for the effects to work. The effects.js file is packaged in the MyBB zip but not loaded by default.

For example, you would only have to change

$('tyl_title_collapsed_'+pid).show();

to something like

$('tyl_title_collapsed_'+pid).appear();

and so on for other occurrences of *.show() and *.hide() in the tgl function.

You can choose the effects and check more options for the effects here:
http://madrobby.github.com/scriptaculous...ects-demo/

Well, in the first case, what kind of animation are you looking for when you like the post?

Just the same effect of "slideDown" with the collapse/expand button, but done when you click the like button.

However, thank you for your kindly reply, I will try using Prototype and Scriptaculous instead of jQuery.

I tried to edit it with "Effect.SlideDown" and "Effect.SlideUp" effects, but it doesn't work.

Here is my thankyoulike.js file:

var thankyoulike = {
	init: function()
	{
	},
	
	tgl: function(pid)
	{
		if(tylCollapsible == 1)
		{
			if($('tyl_data_'+pid).visible())
			{
				Effect.SlideUp('tyl_data_'+pid);
				Effect.SlideUp('tyl_title_'+pid);
				Effect.SlideDown('tyl_title_collapsed_'+pid);
				$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse.gif", "collapse_collapsed.gif");
				$('tyl_i_expcol_'+pid).alt = "[+]";
				$('tyl_a_expcol_'+pid).title = "[+]";
			}
			else
			{
				Effect.SlideDown('tyl_data_'+pid);
				Effect.SlideUp('tyl_title_collapsed_'+pid);
				Effect.SlideDown('tyl_title_'+pid);
				$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse_collapsed.gif", "collapse.gif");
				$('tyl_i_expcol_'+pid).alt = "[-]";
				$('tyl_a_expcol_'+pid).title = "[-]";
			}
		}
	},
	
	add: function(pid)
	{
		if(use_xmlhttprequest == 1 && tylEnabled == 1)
		{
			if(tylUser == 0)
			{
				return true;
			}
			this.spinner = new ActivityIndicator("body", {image: imagepath + "/spinner_big.gif"});
			new Ajax.Request('thankyoulike.php?ajax=1&action=add&pid='+pid+'&my_post_key='+my_post_key, {method: 'post', onComplete: function(request) { thankyoulike.addDone(request, pid); }});
			document.body.style.cursor = 'wait';
			return false;
		}
		else
		{
			return true;
		}
	},
	
	addDone: function(request, pid)
	{
		if(request.responseText.match(/<error>([^<]*)<\/error>/))
		{
			message = request.responseText.match(/<error>([^<]*)<\/error>/);

			if(!message[1])
			{
				message[1] = "An unknown error occurred.";
			}

			if(this.spinner)
			{
				this.spinner.destroy();
				this.spinner = '';
			}
			document.body.style.cursor = 'default';
			alert(message[1]);
		}
		else
		{
			tylVisible = 2;
			if(tylCollapsible == 1 && $("tyl_"+pid).style.display != "none")
			{	
				if($('tyl_data_'+pid).visible())
				{
					tylVisible = 1;
				}
				else
				{
					tylVisible = 0;
				}
			}
			$("tyl_"+pid).update(request.responseJSON.tylData);
			$("tyl_"+pid).style.display = "";
			$("tyl_btn_"+pid).update(request.responseJSON.tylButton);
			if(tylCollapsible == 1)
			{
				if(tylVisible != 2)
				{
					if(tylVisible == 1)
					{
						Effect.SlideDown('tyl_data_'+pid);
						Effect.SlideUp('tyl_title_collapsed_'+pid);
						Effect.SlideDown('tyl_title_'+pid);
						$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse_collapsed.gif", "collapse.gif");
						$('tyl_i_expcol_'+pid).alt = "[-]";
						$('tyl_a_expcol_'+pid).title = "[-]";
					}
					else
					{
						Effect.SlideUp('tyl_data_'+pid);
						Effect.SlideUp('tyl_title_'+pid);
						Effect.SlideDown('tyl_title_collapsed_'+pid);
						$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse.gif", "collapse_collapsed.gif");
						$('tyl_i_expcol_'+pid).alt = "[+]";
						$('tyl_a_expcol_'+pid).title = "[+]";
					}
				}
			}
		}
		
		if(this.spinner)
		{
			this.spinner.destroy();
			this.spinner = '';
		}
		document.body.style.cursor = 'default';
	},
	
	del: function(pid)
	{
		if(use_xmlhttprequest == 1 && tylEnabled == 1)
		{
			if(tylUser == 0)
			{
				return true;
			}
			this.spinner = new ActivityIndicator("body", {image: imagepath + "/spinner_big.gif"});
			new Ajax.Request('thankyoulike.php?ajax=1&action=del&pid='+pid+'&my_post_key='+my_post_key, {method: 'post', onComplete: function(request) { thankyoulike.delDone(request, pid); }});
			document.body.style.cursor = 'wait';
			return false;
		}
		else
		{
			return true;
		}
	},
	
	delDone: function(request, pid)
	{
		if(request.responseText.match(/<error>([^<]*)<\/error>/))
		{
			message = request.responseText.match(/<error>([^<]*)<\/error>/);

			if(!message[1])
			{
				message[1] = "An unknown error occurred.";
			}

			if(this.spinner)
			{
				this.spinner.destroy();
				this.spinner = '';
			}
			document.body.style.cursor = 'default';
			alert(message[1]);
		}
		else
		{
			tylVisible = 2;
			if(tylCollapsible == 1 && $("tyl_"+pid).style.display != "none")
			{
				if($('tyl_data_'+pid).visible())
				{
					tylVisible = 1;
				}
				else
				{
					tylVisible = 0;
				}
			}
			if(request.responseJSON.tylData == '')
			{
				$("tyl_"+pid).style.display = "none";
			}
			$("tyl_"+pid).update(request.responseJSON.tylData);
			$("tyl_btn_"+pid).update(request.responseJSON.tylButton);
			if(tylCollapsible == 1 && $("tyl_"+pid).style.display != "none")
			{
				if(tylVisible != 2)
				{
					if(tylVisible == 1)
					{
						Effect.SlideDown('tyl_data_'+pid);
						Effect.SlideUp('tyl_title_collapsed_'+pid);
						Effect.SlideDown('tyl_title_'+pid);
						$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse_collapsed.gif", "collapse.gif");
						$('tyl_i_expcol_'+pid).alt = "[-]";
						$('tyl_a_expcol_'+pid).title = "[-]";
					}
					else
					{
						Effect.SlideUp('tyl_data_'+pid);
						Effect.SlideUp('tyl_title_'+pid);
						Effect.SlideDown('tyl_title_collapsed_'+pid);
						$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse.gif", "collapse_collapsed.gif");
						$('tyl_i_expcol_'+pid).alt = "[+]";
						$('tyl_a_expcol_'+pid).title = "[+]";
					}
				}
			}
		}
		
		if(this.spinner)
		{
			this.spinner.destroy();
			this.spinner = '';
		}
		document.body.style.cursor = 'default';
	}
};	
Event.observe(document, 'dom:loaded', thankyoulike.init);

What's wrong with it? I replaced all hide() and show() effects with mine...
Ok then, I just read the documentation and it says I have to wrap the element which I want to slideUp or slideDown in a div with fixed height. But that element is wrapped in a tr and a td, how can I make this work? Here's my code, hoping you will solve my troubles as quickly as you can Smile

<tr>
	<td class="{$altbg}" style="vertical-align: middle;" colspan="2">
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr valign="bottom">
				<td align="left" ><span class="smalltext">{$post['button_pm']}{$post['button_find']}{$post['button_rep']}</span></td>
				<td align="right">{$post['button_tyl']}{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}</td>
			
                        </tr>

<tr style="{$post['tyl_display']}" id="tyl_{$post['pid']}">
    {$post['thankyoulike_data']}
</tr>
		</table>
Hi can you consider answering this question?
(2011-10-29, 12:42 AM)Richard Wrote: [ -> ]Would you ever consider creating a converter? (Reputation -> Likes/Thanks, and vice versa)

(2012-02-16, 10:03 PM)Shade Wrote: [ -> ]Well, in the first case, what kind of animation are you looking for when you like the post?

Just the same effect of "slideDown" with the collapse/expand button, but done when you click the like button.

However, thank you for your kindly reply, I will try using Prototype and Scriptaculous instead of jQuery.

I tried to edit it with "Effect.SlideDown" and "Effect.SlideUp" effects, but it doesn't work.

Here is my thankyoulike.js file:

var thankyoulike = {
	init: function()
	{
	},
	
	tgl: function(pid)
	{
		if(tylCollapsible == 1)
		{
			if($('tyl_data_'+pid).visible())
			{
				Effect.SlideUp('tyl_data_'+pid);
				Effect.SlideUp('tyl_title_'+pid);
				Effect.SlideDown('tyl_title_collapsed_'+pid);
				$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse.gif", "collapse_collapsed.gif");
				$('tyl_i_expcol_'+pid).alt = "[+]";
				$('tyl_a_expcol_'+pid).title = "[+]";
			}
			else
			{
				Effect.SlideDown('tyl_data_'+pid);
				Effect.SlideUp('tyl_title_collapsed_'+pid);
				Effect.SlideDown('tyl_title_'+pid);
				$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse_collapsed.gif", "collapse.gif");
				$('tyl_i_expcol_'+pid).alt = "[-]";
				$('tyl_a_expcol_'+pid).title = "[-]";
			}
		}
	},
	
	add: function(pid)
	{
		if(use_xmlhttprequest == 1 && tylEnabled == 1)
		{
			if(tylUser == 0)
			{
				return true;
			}
			this.spinner = new ActivityIndicator("body", {image: imagepath + "/spinner_big.gif"});
			new Ajax.Request('thankyoulike.php?ajax=1&action=add&pid='+pid+'&my_post_key='+my_post_key, {method: 'post', onComplete: function(request) { thankyoulike.addDone(request, pid); }});
			document.body.style.cursor = 'wait';
			return false;
		}
		else
		{
			return true;
		}
	},
	
	addDone: function(request, pid)
	{
		if(request.responseText.match(/<error>([^<]*)<\/error>/))
		{
			message = request.responseText.match(/<error>([^<]*)<\/error>/);

			if(!message[1])
			{
				message[1] = "An unknown error occurred.";
			}

			if(this.spinner)
			{
				this.spinner.destroy();
				this.spinner = '';
			}
			document.body.style.cursor = 'default';
			alert(message[1]);
		}
		else
		{
			tylVisible = 2;
			if(tylCollapsible == 1 && $("tyl_"+pid).style.display != "none")
			{	
				if($('tyl_data_'+pid).visible())
				{
					tylVisible = 1;
				}
				else
				{
					tylVisible = 0;
				}
			}
			$("tyl_"+pid).update(request.responseJSON.tylData);
			$("tyl_"+pid).style.display = "";
			$("tyl_btn_"+pid).update(request.responseJSON.tylButton);
			if(tylCollapsible == 1)
			{
				if(tylVisible != 2)
				{
					if(tylVisible == 1)
					{
						Effect.SlideDown('tyl_data_'+pid);
						Effect.SlideUp('tyl_title_collapsed_'+pid);
						Effect.SlideDown('tyl_title_'+pid);
						$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse_collapsed.gif", "collapse.gif");
						$('tyl_i_expcol_'+pid).alt = "[-]";
						$('tyl_a_expcol_'+pid).title = "[-]";
					}
					else
					{
						Effect.SlideUp('tyl_data_'+pid);
						Effect.SlideUp('tyl_title_'+pid);
						Effect.SlideDown('tyl_title_collapsed_'+pid);
						$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse.gif", "collapse_collapsed.gif");
						$('tyl_i_expcol_'+pid).alt = "[+]";
						$('tyl_a_expcol_'+pid).title = "[+]";
					}
				}
			}
		}
		
		if(this.spinner)
		{
			this.spinner.destroy();
			this.spinner = '';
		}
		document.body.style.cursor = 'default';
	},
	
	del: function(pid)
	{
		if(use_xmlhttprequest == 1 && tylEnabled == 1)
		{
			if(tylUser == 0)
			{
				return true;
			}
			this.spinner = new ActivityIndicator("body", {image: imagepath + "/spinner_big.gif"});
			new Ajax.Request('thankyoulike.php?ajax=1&action=del&pid='+pid+'&my_post_key='+my_post_key, {method: 'post', onComplete: function(request) { thankyoulike.delDone(request, pid); }});
			document.body.style.cursor = 'wait';
			return false;
		}
		else
		{
			return true;
		}
	},
	
	delDone: function(request, pid)
	{
		if(request.responseText.match(/<error>([^<]*)<\/error>/))
		{
			message = request.responseText.match(/<error>([^<]*)<\/error>/);

			if(!message[1])
			{
				message[1] = "An unknown error occurred.";
			}

			if(this.spinner)
			{
				this.spinner.destroy();
				this.spinner = '';
			}
			document.body.style.cursor = 'default';
			alert(message[1]);
		}
		else
		{
			tylVisible = 2;
			if(tylCollapsible == 1 && $("tyl_"+pid).style.display != "none")
			{
				if($('tyl_data_'+pid).visible())
				{
					tylVisible = 1;
				}
				else
				{
					tylVisible = 0;
				}
			}
			if(request.responseJSON.tylData == '')
			{
				$("tyl_"+pid).style.display = "none";
			}
			$("tyl_"+pid).update(request.responseJSON.tylData);
			$("tyl_btn_"+pid).update(request.responseJSON.tylButton);
			if(tylCollapsible == 1 && $("tyl_"+pid).style.display != "none")
			{
				if(tylVisible != 2)
				{
					if(tylVisible == 1)
					{
						Effect.SlideDown('tyl_data_'+pid);
						Effect.SlideUp('tyl_title_collapsed_'+pid);
						Effect.SlideDown('tyl_title_'+pid);
						$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse_collapsed.gif", "collapse.gif");
						$('tyl_i_expcol_'+pid).alt = "[-]";
						$('tyl_a_expcol_'+pid).title = "[-]";
					}
					else
					{
						Effect.SlideUp('tyl_data_'+pid);
						Effect.SlideUp('tyl_title_'+pid);
						Effect.SlideDown('tyl_title_collapsed_'+pid);
						$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse.gif", "collapse_collapsed.gif");
						$('tyl_i_expcol_'+pid).alt = "[+]";
						$('tyl_a_expcol_'+pid).title = "[+]";
					}
				}
			}
		}
		
		if(this.spinner)
		{
			this.spinner.destroy();
			this.spinner = '';
		}
		document.body.style.cursor = 'default';
	}
};	
Event.observe(document, 'dom:loaded', thankyoulike.init);

What's wrong with it? I replaced all hide() and show() effects with mine...
Ok then, I just read the documentation and it says I have to wrap the element which I want to slideUp or slideDown in a div with fixed height. But that element is wrapped in a tr and a td, how can I make this work? Here's my code, hoping you will solve my troubles as quickly as you can Smile

<tr>
	<td class="{$altbg}" style="vertical-align: middle;" colspan="2">
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr valign="bottom">
				<td align="left" ><span class="smalltext">{$post['button_pm']}{$post['button_find']}{$post['button_rep']}</span></td>
				<td align="right">{$post['button_tyl']}{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}</td>
			
                        </tr>

<tr style="{$post['tyl_display']}" id="tyl_{$post['pid']}">
    {$post['thankyoulike_data']}
</tr>
		</table>

Sorry, I missed your last post since it got merged with your previous post. Try changing the spans to divs in global templates >> thankyoulike you might have some issues with the layout but you can work it out from there after the effects start functioning. If you still have problems let me know and I'll work out the exact code when I get time.

(2012-02-24, 11:25 PM)Richard Wrote: [ -> ]Hi can you consider answering this question?
(2011-10-29, 12:42 AM)Richard Wrote: [ -> ]Would you ever consider creating a converter? (Reputation -> Likes/Thanks, and vice versa)

I remember answering this somewhere but I can't find the post to link to, anyways, I do not plan on working on any converter or linking between likes/thanks and reps as I believe they are fundamentally different concepts.
I have just changed the LIKE button to a CSS postbit button and my code looks something like this :
<span id="tyl_btn_{$post['pid']}"><a href="thankyoulike.php?action=add&amp;pid={$post['pid']}&amp;my_post_key={$mybb->post_code}" onclick="return thankyoulike.add({$post['pid']}, {$post['tid']});" title="{$lang->add_tyl}" id="tyl_a{$post['pid']}" class="postbit">LIKE</a></span>

Now, it does show the LIKE button on the postbit in CSS style, and on clicking the button, it also registers the LIKE. But the problem is that, the LIKES given by users are now NOT shown below the post.

Any wayaround??
Okay, gotcha! The problem was not in the thankyou button template

Actually, the plugin does NOT edit the postbit_classic template to show the Likes below the post. So, I added the following piece of code manually in the template since I have enabled ONLY postbit_classic template in my theme.
<tr style="{$post['tyl_display']}" id="tyl_{$post['pid']}">
			{$post['thankyoulike_data']}
		</tr>
</table>

NOTE : </table> already exists in the bottom most line of the postbit_classic template