https://proappliance.ca/wp-content/themes/proappliance/js/jstars.js

1/**!
2 * jStars 1.0 | Nick Potafiy
3 * https://github.com/nickpotafiy/jstars
4 * Self-contained jQuery plugin for displaying star ratings.
5 * @license
6 */
7(function ($) {
8    $.fn.jstars = function (options) {
9        options = options || {};
10
11        var defaults = {
12            size: '1.5rem',
13            value: 4.5,
14            stars: 5,
15            color: '#4285F4',
16            emptyColor: '#dddddd'
17        };
18        var settings = $.extend(defaults, options);
19
20        var unselectable = function ($element) {
21            $element.css('user-select', 'none')
22                .css('-moz-user-select', 'none')
23                .css('-khtml-user-select', 'none')
24                .css('-webkit-user-select', 'none')
25                .css('-o-user-select', 'none');
26        }
27
28        var repeat = function (str, total) {
29            var final = '';
30            for (var i = 0; i < total; i++) final += str;
31            return final;
32        }
33
34        this.each(function () {
35            var $container = $(this);
36            var value = $container.data('value') || settings.value;
37            var totalStars = $container.data('total-stars') || settings.stars;
38            var color = $container.data('color') || settings.color;
39            var emptyColor = $container.data('empty-color') || settings.emptyColor;
40            var size = $container.data('size') || settings.size;
41
42            var $emptyStars = $(document.createElement('div'))
43                .addClass('jstars-empty')
44                .css('position', 'relative')
45                .css('display', 'inline-block')
46                .css('font-size', size)
47                .css('line-height', size)
48                .css('color', emptyColor)
49                .append(repeat("&starf;", totalStars));
50
51            unselectable($emptyStars);
52
53            var $filledStars = $(document.createElement('div'))
54                .addClass('jstars-filled')
55                .css('top', 0)
56                .css('left', 0)
57                .css('position', 'absolute')
58                .css('display', 'inline-block')
59                .css('font-size', size)
60                .css('line-height', size)
61                .css('width', ((value / totalStars) * 100) + '%')
62                .css('overflow', 'hidden')
63                .css('white-space', 'nowrap')
64                .css('color', color)
65                .append(repeat("&starf;", totalStars));
66
67            unselectable($filledStars);
68
69            $emptyStars.append($filledStars);
70            $container.append($emptyStars);
71        });
72        return this;
73    }
74    $(document.body).ready(function () {
75        $('.jstars').jstars();
76    });
77})(jQuery);