Release Notes

 

The Fivestar voting plugin adds a clean, attractive voting widget to views in Elgg. Fivestar is built using the jQuery Star Rating widget.

 

Features:

  • jQuery rollover effects and AJAX no-reload voting.
  • Graceful degradation to an HTML rating form when JavaScript is turned off.
  • Configurable options to allow users to cancel or change their votes.
  • Insert the fivestar widget into any view via configuration options (requires an understanding of Elgg views and html)

Planned features:

  • Configurable star sets.
  • Easier view configuration.
  • Userpoints integration.

 

Screenshots -

Blog:

Blog Post

 

Tidypic photo:

Fivestar tidypic

 

Polls:

Fivestar polls

 

Adding to views:

Adding or removing the widget from your views is done via the Fivestar settings. The text box under 'Add fivestar to a view:' is used to add 1 view per line. The configuration can be complicated and requires an understanding of Elgg views and html. Firebug can be a big help.

 

The widget is inserted by intercepting the html that is about to be displayed to the user. The html is then parsed using a dom library and the widget is inserted into the specified div, span etc. A handful of view configurations are included by default. To remove the widget from a view just delete the appropriate line in the config.

 

A sample line in the config looks like:

 

view=object/blog, tag=div, attribute=class, attribute_value=contentWrapper singleview, before_html=<br />

 

This a comma delimited list of key/values and breaks down as follows.

  • view: The Elgg view that we want to insert the widget in.
  • tag: The tag we want to insert into. This can be a div, span, etc.
  • attribute: This will usually be id or class and helps to further identify the correct tag.
  • attribute_value: The value of the id or class specified by the attribute.
  • before_html: Additional html that is added before the widget for styling.
  • after_html: Additional html that is added after the widget for styling.

 

 

Update 1.0.2:

  • Updated Fivestar to prevent anonymous voting. Anonymous users can see the current rating but they will not be able to vote.
  • Updated Fivestar settings page to make managing views a little easier.
  • When changing votes is not permitted, users who have voted will not be able to interact with the fivestar widget. Previously they could submit a vote and then get a message back saying they cannot vote again. Now they will not be able to submit a vote.

 

Update 1.0.1b:

  • Fixes a bug with the default view settings that prevented users from seeing the fivestar widget on any view.

 

  • Hi Billy thanks for the new release. I have loaded it and it all works fine.

    Just a few questions.

    I can see the views configuation interface has changed-very nice. What other changes have you implemented?

    With the 'add view' facility, can one add fivestar to users profile picture for example?

    thanks again :)

    Dave

  • @sleepmonsta

    Besides making the views a little more manageable, the voting wiget is viewable but disabled for anonymous users and for users who have already voted (if site admins dont allow users to change their votes).

     

    You can add fivestar to most anything but it takes a little trial and error to figure out what the view is called that you want to add too. Where you want the widget displayed will be up to you however a view config that will add fivestar under the user profile picture on the users profile page could look something like this:

     

    view=profile/userdetails, tag=div, attribute=id, attribute_value=profile_icon_wrapper,  before_html=<br />

     

    So go to Fivestar settings, click Add View, copy/paste the view I posted here and click save. If you want some help positioning the widget in a different spot try to be clear on where you want it and I will come up with a config.

     

    ~Billy

  • Hi Billy, Ive added the view config as above and the positioning is perfect; just underneath the profile pic.

    Many thanks for this, it's exactly what I've been looking for!

    Thanks again :)

    Dave

  • I must be doing something wrong. I still don't see the stars. But I see the text for the vote result.

  • @Spacetraveler

    Are you on elgg 1.5 or are you running the fbconnect plugin? I suspect you are on an older version of jquery that is not supported by fivestar.

  • Excellent Dave. I am glad that is what you were looking for.

     

    Cheers,

    Billy

  • @Divagater I am on Elgg 1.6 and is not using FBconnect. It could be my Jquery version.

    Thanks.

  • Do a view source on your site and look for the script tags near the top that reference jquery. Post them here.

  • This is what I found  <script type="text/javascript" src="http://soksabai.com/vendors/jquery/jquery-1.2.6.pack.js"></script>   <script type="text/javascript" src="http://soksabai.com/vendors/jquery/jquery-ui-personalized-1.5.3.packed.js"></script>   <script type="text/javascript" src="http://soksabai.com/_css/js.php?lastcache=1254016871&js=initialise_elgg&viewtype=default"></script>   <!-- include the default css file -->   <link rel="stylesheet" href="http://soksabai.com/_css/css.css?lastcache=1254016871&viewtype=default" type="text/css" />     <link rel="alternate" type="application/rss+xml" title="RSS" href="http://soksabai.com/mod/poll/everyone.php?view=rss" />   <link rel="alternate" type="application/odd+xml" title="OpenDD" href="http://soksabai.com/mod/poll/everyone.php?view=opendd" />     <link rel="meta" type="application/rdf+xml" title="FOAF" href="http://soksabai.com/mod/poll/everyone.php?view=foaf" />     <script type="text/javascript" src="http://soksabai.com/mod/chat/chat.js"></script>   <link rel='stylesheet' href='http://soksabai.com/mod/elggchat/views/default/elggchat/css.php' type='text/css' /><script type='text/javascript' src='http://soksabai.com/mod/elggchat/views/default/elggchat/js.php'></script><script type='text/javascript' src='http://soksabai.com/mod/elggchat/js/sound/jquery.sound.js'></script>     <script type="text/javascript" src="http://soksabai.com/mod/fivestar/js/ui.stars.js" ></script>     <script type="text/javascript">   function fivestar(id, token, ts) {   $("#fivestar-form-"+id).children().not("select").hide();     // Create stars for: Rate this   $("#fivestar-form-"+id).stars({   cancelShow: 1,   cancelValue: 0,   captionEl: $("#caption"),   callback: function(ui, type, value)   {   // Disable Stars while AJAX connection is active   ui.disable();     // Display message to the user at the begining of request   $("#fivestar-messages-"+id).text("Saving ...").stop().css("opacity", 1).fadeIn(30);     $.post("http://soksabai.com/action/fivestar/rate", {id: id, vote: value, __elgg_token: token, __elgg_ts: ts}, function(db)   {   // Select stars from "Average rating" control to match the returned average rating value   $("#fivestar-form-"+id).stars("select", Math.round(db.rating));     // Update other text controls...   $("#fivestar-votes-"+id).text(db.votes);   $("#fivestar-rating-"+id).text(db.rating);     // Display confirmation message to the user   if (db.msg) {   $("#fivestar-messages-"+id).text(db.msg).stop().css("opacity", 1).fadeIn(30);   } else {   $("#fivestar-messages-"+id).text("Rating Saved").stop().css("opacity", 1).fadeIn(30);   }     // Hide confirmation message and enable stars for "Rate this" control, after 2 sec...   setTimeout(function(){   $("#fivestar-messages-"+id).fadeOut(1000, function(){ui.enable()})   }, 2000);   }, "json");   }   });     // Create element to use for confirmation messages   $('<div class="fivestar-messages" id="fivestar-messages-'+id+'"/>').appendTo("#fivestar-form-"+id);   };   </script>   </head>

  • @Spacetraveler

    Elgg 1.6 defaults to jquery-1.3.2 (jquery-1.3.2.min.js) and  jquery-ui-1.7.2 (jquery-ui-1.7.2.custom.min.js). You are using jquery-1.2.6 and jquery-ui-personalized-1.5.3 which means you must have a plugin or something that is overriding page_elements/header.php and setting the older versions of jquery and jquery-ui. On a linux system one way to find what is setting the older jquery is to run this command from the root of your elgg install:

     

    find . | xargs grep jquery-1.2.6

     

    Fivestar requires jquery-1.3.2 and jquery-ui-1.7.2.

  • Nice to see the activitay around this plugin, it is a great feature. I saw someone used it under the profile picture. The following idea popped up.

     

    If the ranking underneath the profile picture means the ranking of that particular person. Than that ranking should be caculated by the avarage ranking that the particular person got for his files, blogs, etc.

  • Thats a pretty good idea. Honestly I am not much in favor of voting on people as that feels very survivorish to me. I am in big favor of voting on user contributed content though, so giving users a ranking based on their content sits well with me.

     

    I like my plugins to stick to what they do and not try to code in to much extra. However, an option to display some average rating would be alright. Another idea that comes to mind is a tie in to badges that awards a badge based on an average ranking.

     

    Thanks for the comment and suggestion.

  • Hi Divagater, this looks excellent.  Well done.  Quick question:  will this work for 1.5 installs?

  • @Cornelius

    Not by default because it does not work with the version of jquery that ships with 1.5. If the 1.5 jquery and jquery-ui could be upgraded to the same as with elgg 1.6 (jquery-1.3.2 & jquery-ui-1.7.2) then it should work.

     

    Cheers,

  • @Divagater, I just want to say thank you, great plugin, and I've updated the Jquery to this plugin's specification and it works like a charm!

  • @divagater

    is there going to be any kind of option for anonymous voting in the future?  on the site that I'm working on, we would like to allow anonymous voting but haven't figured out how to hack that in to your framework (which we really like).

    we were considering somthing like randomizing the user that the vote is associated with, but that didn't seem to fly.  do you have any suggestions?

    thanks.

  • @zenkalia

    The main issue with anonymous voting is vote spam. If users can vote anonymously then they can vote over and over again. Enabling anonymous voting isn't too difficult but would require a little code change to deal with the vote when a user->guid is not available.

     

    Some ways to prevent multiple votes are to allow 1 vote per IP. That is a poor solution as a lot of people are behind proxies. Another is to set a cookie. Effective but easily defeated. Or yet maybe some site admins wouldn't care about multiple votes being cast. Thoughts?

  • In my group discussion thread, how come I'm getting no stars and then radio buttons on the responses?

    Any suggestions? 

    Thanks.

  • @Spacetraveler

    I will message you an email address. Please do a view source on group discussion thread where you see no stars and then do one where you see radio buttons. Zip both those files and email to me. Name them so that it is clear which is which.

  • @Spacetraveler

    Ok I see the problem. Replies on group topics are also a topic and they cary they same entity guid as the original topic post so then we have a bunch of fivestar forms with the same form ID... not good. I will put up a patch as soon as I can. For now you may want to remove the forum/topicposts view config from fvestar settings.

  • All the replies on a group topic are annotations. I didn't realize that. At the moment fivestar does not support voting on annotations because the votes are annotations and I don't think ya can annotate an annotation ;)

     

    Just delete the forum/topicposts view from fivestar settings like a mentioned in the last post. The code to prevent adding fivestar to an annotation will be in the next release. Anyone wanting the patch now can edit mod/fivestar/start.php and remove these 3 lines starting on line 89:

     

    if (!$guid) {

        $guid = $params['vars']['entity']->entity_guid;

    }

     

    Just delete those lines and thats it. No more fivestar widget on annotations.

     

    Cheers,

     

     

  • When i said bookmark, i mean the system Elgg's comes with! it would be great if we can rate and list the most rated links in the bookmark.

  • @io

    Here is a view config that should work with bookmarks.

     

    view=object/bookmarks, tag=div, attribute=class, attribute_value=search_listing, before_html=<br />

     

    ~Billy

Billy Gunn

Developer @ Arck Interactive

Stats

  • Category: Misc
  • License: GNU General Public License (GPL) version 2
  • Updated: 2014-11-17
  • Downloads: 8164
  • Recommendations: 16

Other Projects

View Billy Gunn's plugins