gravityforms-star-ratings.html

## gravityforms-star-ratings.html
<!--

GRAVIY FORMS NOTES:
1. Create a “radio” group on any form
2. In the “appearance" tab, give the custom css class `js-gf-rating-stars`
3. The radio values should be in order from low -> high (1,2,3,4,5,etc…).
4. You can have as many stars as you want, it’s based off the number of radio elements in the group.
5. You could technically have as many groups of ratings stars as you want.

JS CONFIG:
This assumes you are using some iconfont, but the setup would work otherwise with some custom css.
Default assumes font awesome. To modify the icon font, just follow the below example:

$('.js-gf-rating-stars').gformsRatings({
  iconClass: "class-name-for-your-icon-fonts-star-icon"
});

-->
<style type="text/css">
.gf-rating-star {
    color: gray;
    cursor: pointer;
    font-size: 2em;
}
.gf-rating-star + .gf-rating-star {
    padding-left: 4px;
}
.gf-rating-star-active {
    color: orange;
}
</style>
<script>
(function($) {

    $(document).ready(function() {
        $('.js-gf-rating-stars').gformsRatings();
    });

    // The meat and potatoes
    $.fn.gformsRatings = function( options ) {

        // Setup options
        var settings = $.extend({
            'labels' : false,
            'activeClass' : 'gf-rating-star-active',
            'iconClass' : 'fa fa-star'
        }, options);

        return this.each(function() {

            // Store the object
            var $this = $(this),
                $container = $('.ginput_container', $this),
                $radioGroup = $('.gfield_radio', $this),
                $radios = $('input[type="radio"]', $radioGroup),
                $stars = null,
                $currentIndex = null;

            // Initialize
            var init = function() {

                $radioGroup.css('display', 'none');

                $wrap = $('<div class="gf-rating-stars"></div>');

                for (var i = 0; i < $radios.length; i++) {
                    var label = $radios.eq(i).siblings('label').text(),
                        value = $radios.eq(i).val(),
                        $star = $('<i class="js-gf-rating-star gf-rating-star"></i>');

                    $star
                        .addClass(settings.iconClass)
                        .data('index', i)
                        .data('value', value)
                        .data('label', label)
                        .attr('title', label)
                        .appendTo($wrap);

                }

                $wrap.appendTo($container);


                $stars = $('.js-gf-rating-star');

                // Star Interactions
                $stars.on('hover', function() {
                    handleHover($(this));
                }).on('click', function() {
                    handleClick($(this));
                });

                // Restore to currently checked next field
                $wrap.on('mouseout', function() {
                    $checked = $radios.filter(':checked');

                    if (!$checked.length) {
                        $stars.removeClass(settings.activeClass);
                    } else {
                        highlight($currentIndex);
                    }
                });
            }

            var highlight = function(index) {
                $stars.filter(':gt(' + index + ')').removeClass(settings.activeClass);
                $stars.filter(':lt(' + index + '), :eq(' + index + ')').addClass(settings.activeClass);
            }

            var handleHover = function(el) {
                var index = el.data('index');
                highlight(index);
            }

            var handleClick = function(el) {
                var index = el.data('index');
                $currentIndex = index;
                $radios.eq(index).trigger('click');
            }

            // Kick it off
            init();

        });

    };

})(jQuery);

</script>