Kudos - Yii2 widget (Svbtle-like)

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

Installation via Composer

add to require section of your composer.json "ijackua/yii2-kudos-widget": "dev-master" and run composer update

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);}',
  ]);

Links

• GitHub
• Packagist