Kudos - Yii2 widget (Svbtle-like)

Mar 15, 2014, 6:07:22 PM

kudos

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

comments powered by Disqus
Ievgen
Kuzminov "iJackUA"
Web Team Lead
at MobiDev (Kharkiv, Ukraine)
Code in Ruby and Elixir, but still love PHP. Explore ES6 and Vue.js. Explore databases, use Ubuntu and MacOS, think about IT people and management

Notes