masukomi / kudos Goto Github PK

An example of Svbtle style kudos

JavaScript 30.37% CoffeeScript 18.60% CSS 51.03%

kudos's Introduction

Kudos

Dustin Kurtis came up with an excellent idea for the Svbtle blogging network (go visit Svbtle.com to see an example). He called them Kudos. They're little widgets next to each post that enable users to give "Kudos" to posts they really like. You hover over the widget, it gives a fun little animation, and changes the icon and count after a moment.

This is an example implementation of that for you to use in your own blog.

Screenshots

Start -> -> Funky Animation Here-> -> Finish.

Demo

here

Basic Usage:

WordPress people

ahoereth has put together a wordpress plugin (source here) based on this.

Everyone else

See the index.html example for information

    <figure class="kudo kudoable" data-id="1">
        <a class="kudobject">
            <div class="opening">
                <div class="circle">&nbsp;</div>
            </div>
        </a>
        <a href="#kudo" class="count">
            <span class="num">0</span>
            <span class="txt">Kudos</span>
        </a>
    </figure>

$(function()
{
  // initialize the kudoer
  $("figure.kudo").kudoable();
});

// bind to events on the kudos
$("figure.kudo").on("kudo:added", function(event)
{
  var element = $(this);
  var id = element.data('id');
  // send the data to your server...
  console.log("Kudod", element);
});

Events

After kudoing an object it will emit the following events:

kudo:active is sent when you hover over the object (the circle is growing)
kudo:inactive is sent when you mouse-off the object
kudo:added is sent when you successfully kudo something
kudo:removed is sent when you un-kudo something

Important Note

(Primarily for people new to HTML / CSS who don't normally write back-end code.)

This is the client side of the equation. It will work quite well, but without a server-side component there will be no way to sum up all the kudos. Each person's browser will know that they gave it a Kudo, but if you don't store the information in some centralized location there's no way they could possibly know that anyone else gave it a Kudo. This means that the maximum number anyone will see is 1 (the one they gave it) unless you send the information to server, store it there, and insert the current count every time the page is loaded.

This is how the internet works. This is not a limitation of this library.

This codebase specifically does not contain any back-end code because it would not only be different in every language it would be different in every framework, and different in every usage of every framework. Storing a running count is very easy to do, but how you should go about it is unique to how you are choosing to track user interactions.

Sub-note

This implementation stores one cookie for every Kudo given. If someone Kudos everything you put out there you'll eventually hit the maximum number of cookies you're allowed to give them. Because dynamic cookie handling is as unique to your back end as the solution to how you'll keep track of the Kudos given to a thing, this demo-code does not address this limitation. Again, it's trivial enough to do, you just have to decide how you want to do it.

Improvements

Make some! ;) The animation of the text isn't bad but could use some love from a css wizard. Pull-requests will be happily applied.

jQuery

Kudos currently depends on jQuery and a good cookie library like the jQuery Cookie plugin to keep track of who's voted already, but as there is so little code it would be very easy to modify to use a different library if you had such a need.

License

This code is distributed under the MIT license, however, it includes a copy of jQuery which is dual licensed under MIT or GPL (your choice) and it also includes a copy of jQuery Cookie which is licensed under the MIT license. Portions of the CSS code are from the wordpress-svbtle Wordpress theme.

kudos's People

Contributors

Stargazers

Watchers

kudos's Issues

mobile browsers trigger kudo on page touch, no matter where

I tested mobile chrome and the default Android browser. No matter where on a webpage you touch - it triggers the kudo mouseenter event. I have not found a fix for this yet.
Any ideas?

__
edit: #13

How to store the data in Jekyll?

Hey,

Thanks for the plugin, I'm interested in using it on my Jekyll-based website.
I'm aware that Jekyll allows me to have a folder _data where I can store the data, is there any way I can refer the jQuery from your plugin to save it there?

Basically, I'm trying to use this system in Jekyll, wondering if there's a help for that.

Thanks

actual count does not show

hey there,

i love this thing, but i just cannot seem to get it to work on my server on static pages (not wordpress). After giving a kudo and then reloading the page it goes back to "0", no matter what device and browser i use. The cookie has been stored i checked that and put in an alert to see where it hangs.
Probably just something i have to put in line 63 to fill "num". But what?
The demo sets num to 1 everytime, but what has to be here in a "real world" :)

I checked the old issues but still have problems.

Probably someone can have a look and give me a hint?
http://assbach.com/tools/kudos2.php

thanks a lot in advance,
sascha

Demo stopped working

No fallback for browsers without Javascript

When using a browser with Javascript disabled, there is no animation at all, nor is there any way to actually click the button. (The same holds true for svbtle.com)

You should at least provide a fallback like a classic <a> link, and eventually a :hover image.

personlisation issue

Hi this is Stephen and I am a beginner on HTML and CSS. I found this kudos really fancy and want to put it on my personal site, just below each post. How should I embrace to my page? I tried to pasted related code into my default.html source code but it turned out that the sign appears at the top center of the page, not below the post. Plus no animation can be activated by cursor on it. Something must had gong wrong but I could not find it out... Could you come up with a slightly more detailed instruction on personlisation setup on blog? Thanks so much!

[the aforementioned content had been solved but below comes some new issues]

The code can only provide client side statistics which indicating that if uses visit the page with this widget from different browsers, the total counts of "kudos" might be inaccurate.

It might be improved to make the statistics universal?

For instance, you could allow full-keyboard control, ie. using tabs to navigate to the button (which already works, actually), and then pressing Enter/Space to "click" it (and this does not work).

Ported to ReactJS

Hey. I ported the code to ReactJS if anyone needs one it's here:

import './kudos.css';
var React = require('react');
var classNames = require('classnames');

var Kudos = React.createClass({
    getInitialState: function() {
        return {
            complete: false,
            active: false,
            timer: null
        };
    },

    isKudod: function() {
        return this.state.complete;
    },

    start: function() {
        if (!this.isKudod()) {
            this.setState({
                active: true
            });
            // return this.timer = setTimeout(this.complete, 700);
            this.setState({
                timer: setTimeout(this.complete, 700)
            });
        }
    },

    end: function() {
        if (!this.isKudod()) {
            this.setState({
                active: false
            });
            if (this.state.timer != null) {
                return clearTimeout(this.state.timer);
            }
        }
    },

    complete: function() {
        this.end();
            this.setState({complete: true});
    },

    unkudo: function(event) {
        if (this.isKudod()){
            this.setState({complete:false});
        }
    },

    render: function() {
        var classes = classNames({
            'kudo': true,
            'kudoable': true,
            'active': this.state.active,
            'complete': this.state.complete
        })
        return (<figure className={classes}
                 onMouseEnter={this.start}
                 onMouseLeave={this.end}
                 onTouchStart={this.start}
                 onTouchEnd={this.end}
                 onClick={this.unkudo}
                >
                    <a className="kudobject">
                        <div className="opening">
                            <div className="circle">
                            &nbsp;
                            </div>
                        </div>
                    </a>
                </figure>
        );
    }
});

module.exports = Kudos;