Skip to content

Instantly share code, notes, and snippets.

@vgheri
Created June 1, 2012 12:30
Show Gist options
  • Save vgheri/2851803 to your computer and use it in GitHub Desktop.
Save vgheri/2851803 to your computer and use it in GitHub Desktop.
iLikeIt! jQuery plugin
//iLikeIt v0.1.0 | (c) 2012 Valerio Gheri | http://www.opensource.org/licenses/mit-license
/*var iLikeIt = */(function ($) {
/*
* Get a text representation of the vote cast by the user
*/
function getStarShortTextDescription(starId) {
var description;
switch (starId) {
case "1":
description = "Awful";
break;
case "2":
description = "Nothing special";
break;
case "3":
description = "Not bad";
break;
case "4":
description = "Nice";
break;
case "5":
description = "I like it!";
break;
default:
description = "Unknown rate";
break;
}
return description;
}
/*
* Show the user its rating by coloring the stars
*/
function displayRating(selectedId, mouseIn) {
var activeImage = $(".active img");
if (activeImage.data("vote") === null || activeImage.data("vote") === undefined) {
var divs = $(".star-container div").slice(0, parseInt(selectedId)).each(function (item) {
$(this).find("img").attr("src", '/Content/images/full_star.png');
});
$(".star-text").text(getStarShortTextDescription(selectedId));
}
}
/*
* Reset the vote panel
*/
function resetStarContainer() {
var divs = $(".star-container div").slice(0, 5).each(function (item) {
$(this).find("img").attr("src", '/Content/images/empty_star.png');
});
$(".carousel-vote-title").text("Vote");
$(".star-text").text("");
}
/*
* Preload the vote panel with the vote already cast by the user, if any.
*/
function preloadRating() {
var activeImage = $(".active img");
var vote = activeImage.data("vote");
resetStarContainer();
if (vote != null && vote != undefined) {
var divs = $(".star-container div").slice(0, parseInt(vote)).each(function (item) {
$(this).find("img").attr("src", '/Content/images/full_star.png');
});
$(".carousel-vote-title").text("Average rating");
$(".star-text").text(getStarShortTextDescription(vote));
}
return true;
}
/*
* Register the vote cast by the user submitting it to the server.
* On success, we display the average rating.
* On error, we display an alert to the user and reset the vote panel
*/
function registerVote(star, postUrl) {
var votedImage = $(".active img");
// If the user didn't vote yet, then we can register the vote
if (votedImage.data("vote") === null || votedImage.data("vote") === undefined) {
$(".carousel-vote-title").text("Submitting your vote...");
$.ajax({
type: 'POST',
url: postUrl,
data: '{"imageId":"' + votedImage.attr("id") + '", "rating":"' + star.attr("id") + '"}',
contentType: "application/json; charset=utf-8",
success: function (msg) {
votedImage.data("vote", msg);
preloadRating();
},
error: function () {
alert("Ooops, an error has occurred. Please try again and if the problem persists... well it's just a proof of concept app, what did you expect?");
resetStarContainer();
return false;
}
});
}
}
function createVotingDiv() {
var votingDiv = '<div class="center carousel-vote">';
votingDiv += '<span class="carousel-vote-title">Vote</span>';
votingDiv += '<span class="star-text"></span>';
votingDiv += '<div class="star-container">';
votingDiv += '<div class="vote-item"><img id="1" class="star" src="/Content/images/empty_star.png")" alt="1" /></div>';
votingDiv += '<div class="vote-item"><img id="2" class="star" src="/Content/images/empty_star.png")" alt="2" /></div>';
votingDiv += '<div class="vote-item"><img id="3" class="star" src="/Content/images/empty_star.png")" alt="3" /></div>';
votingDiv += '<div class="vote-item"><img id="4" class="star" src="/Content/images/empty_star.png")" alt="4" /></div>';
votingDiv += '<div class="vote-item"><img id="5" class="star" src="/Content/images/empty_star.png")" alt="5" /></div>';
votingDiv += '</div></div>';
return votingDiv;
}
$.fn.iLikeIt = function (options) {
var div = createVotingDiv();
// element is the carousel
var element = $(this);
element.append(div);
element.carousel({
interval: false,
pause: "hover"
});
element.carousel('pause');
$(".carousel-vote").on("mouseenter", function () {
preloadRating();
});
$(".vote-item").on("mouseover", "img", function () {
var elem = $(this);
displayRating(elem.attr("id"), true);
});
$(".vote-item").on("mouseout", "img", function () {
var elem = $(this);
//displayRating(elem.attr("id"), false);
resetStarContainer();
});
$(".vote-item").on("click", "img", function () {
var elem = $(this);
registerVote(elem, options.postUrl);
});
return this; //allow chaining
}
} (jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment