Yii2 widget for Svbtle style Kudos. Based on JS from https://github.com/masukomi/kudos
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
.gitignore
Kudos.php
KudosAssets.php
LICENSE
README.md
composer.json

README.md

yii2-kudos-widget

Yii2 widget for Svbtle style Kudos. Based on JS from https://github.com/masukomi/kudos

Demo

On posts details page of my blog or original JS widget demo

Usage example

	Kudos::widget(
		[
			'widgetId' => 'post',  // unique id of widget on page, to allow more than one widget on the page
			'uid' => $post->id,  // uid of Kudoable element, for stat count
			'count' => $post->kudos, // initial Kudos value, to display
			'onAdded' => 'function (event) {
		// JS callback on Kudo +1 , you can do what ever you want here
		// for example send AJAX request to track stats
		var uid = $(this).data("uid");
		$.post("/kudo/plus/post/" + uid);}',
			'onRemoved' => 'function (event) {
		// JS callback on Kudo -1, send another AJAX request to track stats
		var uid = $(this).data("uid");
		$.post("/kudo/minus/post/" + uid);}',
		]);

Tracking and stat storage server side you should implement yourself what ever you want.

localStorage

is used to keep widget state for each user personally. It uses widgetId|uid key to be unique for multiple widgets on the site. And does not pollute request Headers with extra Cookies (if someone Kuoded a lot of your pages).

Events

  • onActive is sent when you hover over the object (the circle is growing)
  • onInactive is sent when you mouse-off the object
  • onAdded is sent when you successfully kudo something
  • onRemoved is sent when you un-kudo something

Advanced usage with custom icons inside widget

I am using font-smiley from http://fontello.com/ Custom icon-font should be prepared and connected to the page, then you can adjust smiley look and feel via CSS and add them inside Kudos widget like this

	Kudos::widget(
		[
			'widgetId' => 'post',
			'uid' => $post->id,
			'count' => $post->kudos,
			'defaultClass' => 'icon icon-emo-thumbsup',
			'onAdded' => 'function (event) {
		var uid = $(this).data("uid");
		$(this).find(".icon").removeClass("icon-emo-thumbsup").addClass("icon-emo-beer");
		$.post("/kudo/plus/post/" + uid);}',
			'onRemoved' => 'function (event) {
		var uid = $(this).data("uid");
		$(this).find(".icon").removeClass("icon-emo-beer").addClass("icon-emo-thumbsup");
		$.post("/kudo/minus/post/" + uid);}',
		]);