XF 2.2 Show another row on rating change

[mjda]

I have an addon that uses the XF star rating system. I'd like to show another input row, but only in cases where a member selects a rating less than 5 stars. The default rating is 5 stars, so I guess I'd need a way to show the other input row if that value is changed. Is that possible somehow?

 

[mjda]

Just coming back to this one in hopes someone can help me figure this out. I still haven't been able to figure out what needs to be done to get something like this working.

 

[mjda]

Just in case anyone else was searching for how to do this, I was finally able to figure out how to do what I wanted to do.

I should mention that I'm not sure if this is the "right" way to do this, but it works just like I want it to and it doesn't break anything else. Also, this assumes your default rating is 5.

Here is the HTML that I used inside my template.

<div class="rating-change" style="display:none">
    <xf:textboxrow name="user_input" value=""
        label="{{ phrase('vendor_input') }}"
        explain="{{ phrase('vendor_input_explain') }}" />
</div>

Then this is the code I put between xf:js tags at the bottom of the same template.

!function($, window, document, _undefined)
{
    "use strict";
  
    XF.VendorRatingChange = XF.extend(XF.Rating, {
        ratingSelected: function(value, text, event)
        {
            if (value < '5') {
                jQuery('.rating-change').slideDown(1000);
            }
            if (this.options.readonly)
            {
                return;
            }

            if (!this.options.ratingHref)
            {
                return;
            }

            if (this.ratingOverlay)
            {
                this.ratingOverlay.destroy();
            }

            this.$target.barrating('clear');

            XF.ajax('get', this.options.ratingHref, {
                rating: value
            }, XF.proxy(this, 'loadOverlay'));
        }
    });
    XF.Element.register('rating', 'XF.VendorRatingChange');
}
(jQuery, window, document);