Quick hack / jQuery plugin to enable visual star ratings from Gravity Forms radio fields.
<!-- | |
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> |
This comment has been minimized.
This comment has been minimized.
yvejr
commented
Oct 31, 2018
THANK YOU SO MUCH! I spent hours trying create this myself. Thanks a lot for sharing. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Jordan-Volcano commentedOct 20, 2017
Hi,
Great plugin for that star rating,
But i'm facing an issue.
I have various group of star on the same page, so the plugin only change for the first radio buttons group.
You can see a demo here : http://fiches-coop.adpiformation.fr/test-2#gf_1
I don't know why is it doing that, because i have a classe name personalized by group.
If you can help me, this would be great,
Thanks,
Jordan