Dynamic Fivestar Star Descriptions on Mouseover

I fixed the previous bug in the "Two sets of stars" setting with a ":first" jQuery CSS selector to isolate the first label from the Current rating label. Now it currently works in Firefox.

However, the label completely disappears in Safari as shown in this video.

Not sure if it is because I'm emptying out the label first and then doing a prepend with this line: $('#fivestar-form-node-'+$(this.innerHTML).attr("node")+' label:first').empty().prepend(info_msg[this.textContent/20]);

It turns out that "this.textContent" provides the rating value of the star (i.e. 100, 80, 60, 40 or 20) in Firefox.
But for whatever reason it is undefined in Safari, and therefore returning a NaN value when trying to divide by 20.
FYI: The info_message array contains the rollover message values as well as the default "Your vote:", which is the info_message[0] value. The other values are from 1-5 so that dividing by 20 could calculate the position in the array.

I'm going to try and figure out how to get the vote value to register in Safari now.

I fixed the Safari error by replacing "this.textContent" with a less elegant, but working "this.firstChild.firstChild.nodeValue"
I used Firebug's debugger to search through the elements for the actual vote value (i.e. 20, 40, 60, 80 or 100).
This value was located in a number of other places, and I'm not sure if there is a more intuitive path.
I also have no idea why this.textContent worked in Firefox and not Safari, but it works now with this jQuery line:
$('#fivestar-form-node-'+$(this.innerHTML).attr("node")+' label:first').empty().prepend(info_msg[this.firstChild.firstChild.nodeValue/20]);

This hasn't been tested this in IE yet.

This patch is compatible with fivestar.module version 1.2.2.6, but not when using than five stars in version 1.2.2.7.

Currently working this functionality into a larger patch with the ability to set the status messages on an admin page.

Okay, I'm going to take another look at this to see if I can get something together for a 1.9 release.
Last I remember, there was an official 1.5 release made with major changes in the midst of development which deprecated the patch.
Part of the problem as I remember it was creating a dynamic admin form that would have as many fields with default values as there were number of stars.
I'm taking a look at this issue as well.

UPDATE: Either the DRUPAL-5 branch of fivestar is broken or I've incorrectly checked it out.
I'm using: cvs -z6 -d:pserver:anonymous:anonymous@cvs.drupal.org:/cvs/drupal checkout -r DRUPAL-5 -d fivestar contributions/modules/fivestar

Version 1.2.2.35 of fivestar.module won't let me "Enable Fivestar rating" on any content type.

So I'm going back to the 1.8 release.

Sorry, I should have posted that I did decide to defer until I heard back from you.
Yes, I did notice a lot of changes, but I was working on some UI feedback and suggestions for the Direct rating widge here: http://drupal.org/node/192927

So I'm using the CVS command as described above, and then when I try to click the "Enable Fivestar rating" checkbox and save it, then it doesn't save it at all. I had tried this on a site that originally had fivestar 1.7 installed, and so I tried update.php -- and that didn't work.

And then I created a fresh install of Drupal 5.3 and installed the latest dev versions of VotingAPI and Fivestar, but haven't been able to enable it at all.

Will try the latest official VotingAPI release to see if that helps.

Status update...

I got the latest dev of fivestar working after discovering this weird js bug on Firefox.

I've also got the mouseover text working again and am in the process of making changes to the fivestar_form_alter to allow the user to customize the rollover text for each content type. The rollover text options will be passed into the javascript for each node type that has fivestar enabled.

Changing the status to back to active until I have an updated patch...

This patch is about 80% the way there, and I just wanted to post my progress on it.
I have mouseover texts working for each content type.
You can now specify the mouseover texts while editing the content form -- Ideally there would be a "Save and Continue" button ala views because the form needs to get rebuild and I added some bolded warnings trying to indicate this.
This will probably be solved with some AHAH magic in the 6.x version.

I also have to loop through all of the content types in fivestar_init() to pass the mouseover texts to javascript -- as well as to determine whether or not the content has mouseover text enabled or not.
One consideration is whether or not to add a global mouseover text flag in this section so that this section of code could be bypassed if need be -- especially on a site with a lot of node types.

I had to add some code to pass the node number and content type so that it would be more available to jQuery.

I'm now going to dive into overridding the "Your Vote:" "Average" or no text since at the moment it incorrectly statically defaults back to "Your Vote:" on mouseout. Going to add some dynamic logic based up on the 'fivestar_style_'. $node->type

I threw together a demo video here on the progress so far:
http://blip.tv/file/get/Kentbye_tech-Fivestar_Mouseover_text_Demo_v1_276...

Just talked w/ Quicksketch in IRC and he had a couple of suggstions:

* i think placing the mouseover text in the description text is more common
* i'd suggest hiding the content rather than replacing it anyway, it'll make things easier for you

One issue with placing the mouseover text in the description is that the star heights maybe too small and the mouse cursor may get it in the way. I will explore it, and may have a way to have both as an option.

Finally got a chance to clean this up a bit after the holidays.
Now hides content instead of emptying it.

A couple of unanswered TODOs
One in the fivestar_init():
"Possibly add in a global admin variable determining if MouseOver is enabled or not due to performance considerations when there are a lot of content types"
I'm not sure if there needs to be a global admin option to turn off and on the mouseover texts.
Take a look at the init code and see what you think.

Also, in the fivestar_admin_settings(), the mouseover texts depend on the number of stars.
And so at the moment, I have a lengthy explanation detailing the steps for properly initializing the mouseover text fields.
What would be ideal would be if there was a "Save and Continue" button ala views to be able to regenerate the form, but the explanation will have to do absent that extra button.
But the pending TODO is to a question of "Should there be additional jQuery checks or form validation if the number of stars changes for UI streamlining?"
Not sure the best way to handle that.

Other than that, I think the major functionality of mouseover texts is in the patch.
Although, there is a slight space that is added to the div when mouseover texts are rolled over, which may need to be addressed either with CSS or re-positioning the div.

Thanks for all of the detailed feedback.
(Too bad that it's throwing that error to not even see it in action.)

I'm on the road at the moment, which is bad timing, but I want to take a look at these suggestions next week and get out another iteration -- hopefully before the official 1.9 release goes out.

And it looks like you've had a spring cleaning of other pending fivestar issues after the Drupal 6 usability sprint.
Thanks.

Thanks for all of the detailed feedback.
(Too bad that it's throwing that error to not even see it in action.)

I'm on the road at the moment, which is bad timing, but I want to take a look at these suggestions next week and get out another iteration -- hopefully before the official 1.9 release goes out.

And it looks like you've had a spring cleaning of other pending fivestar issues after the Drupal 6 usability sprint.
Thanks.

A brief update and one question down below....

I've been traveling around a lot, and just had a bit of time to take a preliminary look at the code and suggested changes.

One thing that I need to figure out is to see if the absolute star number is already available through the DOM.
At the moment, I'm using the vote value (i.e. "25" for 1/4)

And since the vote value was more readily available than the star number, then I had originally indexed the mouseover texts by the star value:
$star_value = ceil((100/$fivestar_star_number) * $star_count);
variable_get('fivestar_mouseover_text_'. $star_value .'_'. $type->type, $default_mouseover_text[$star_value]),

But if it's better to display all of the form values and then hide them, then I'm going to have to use the star number as an index instead.

I had originally got the star value on hover by setting a break point in FireBug and digging around until I found the vote value here:
this.firstChild.firstChild.nodeValue

But I can't figure out how to get the existing node->nid from the hover.
When I do a console.log(this) in Firebug, I get:
<div class="star star-1 star-odd">
-- which has the absolute star number in the second class.

QUESTION: Do you know offhand if there is a jQuery way of grabbing that star number?
As an aside, on a quick inspection of the js and css, I didn't see anything that is actually using this star-1 class.

The node->nid is also passed in through a hidden form value, but it will only grab the first widget value when I do:
$('input#edit-content-id').attr("value")

$('input#edit-content-id') wiil display all of them on the page, but I would need the preceding one relative to whatever is being hovered.

The star number is also available as the text in the radio when the js is disabled, but it'd be nice not to use this and replace it with the mouseover texts as well:
<input type="radio" name="vote" value="25" class="form-radio" /> 1</label>

What I may end up doing is placing an additional attribute for the star number here if there isn't another way to get it now:

<div class="star star-1 star-odd">
   <a title="Give it 1/4" href="#25" style="width: 100%;">25</a>
</div>

Err. nevermind that previous question.
The alternative could be to change the -/a title\- to the array you specified, and it may be accessible from there...
I'll try that first before grabbing the star number...

This is a barebones work-in-progress patch for the star description admin form with degradable javascript.
I now that you're in active development, and so I wanted to get this to you for some feedback before the latest changes hit CVS -- specifically some UI feedback on this because there are some things in here that could become the default link titles & radio descriptions.
At the moment the link titles are hard-coded in js, and the radio descriptions are just numbers, but could potentially become these star descriptions as well.

I'm having trouble fully testing this because I can't submit forms with javascript enabled.
But when you change the star number, then it reveals the correct number of textfields, and changes the text value to properly read "Give it 1/3, 2/3, 3/3, etc..."

And because 4/3 doesn't ever make sense, it defaults to "Rate it 4 stars" if javascript is disabled.
If javascript is enabled, then switching to 4 changes it to 1/4, 2/4, 3/4, 4/4, etc.

This patch has these caveats:
It's just the admin so far.
No translation t() changes yet.
The admin.js file is using the constructor from nodePreview -- it probably needs it's own namespaced functions, but I had a bit of trouble and wanted to get a working copy out to you since I'm on the road still.

Give it a look when you have a chance.
Thanks.

Hey quicksketch.
Thanks for taking a look at this, and sorry I couldn't do more while traveling (and getting a bit sick to boot)

Anyway, I'll take a look at these changes and work with the latest dev from there.
I agree that a more general "labels" would be better than mouseover, and I'll try to clean up other instances

And yes and select list works much better since long descriptions makes it a bit unreadable and unusable with radios.

Taking a look at it now...

Great!
Testing it out now.

-Kent.