https://www.hindujahospital.com/assets/js/bootstrap4-rating-input.js

1function initRating($) {
2    'use strict';
3
4    var clearClass = 'rating-clear',
5        clearSelector = '.' + clearClass,
6        hiddenClass = 'hidden',
7        DEFAULTS = {
8            'min': 1,
9            'max': 5,
10            'empty-value': 0,
11            'iconLib': 'fa',
12            'activeIcon': 'fa-star',
13            'inactiveIcon': 'fa-star-o',
14            'clearable': false,
15            'clearableIcon': 'fa-remove',
16            'clearableRemain': false,
17            'inline': false,
18            'readonly': false,
19            'copyClasses': true
20        };
21  
22    function starSelector(value) {
23        return '[data-value' + (value ? ('=' + value) : '') + ']';
24    }
25  
26    function toggleActive($el, active, options) {
27        var activeClass = options.activeIcon,
28            inactiveClass = options.inactiveIcon;
29        $el.removeClass(active ? inactiveClass : activeClass).addClass(active ? activeClass : inactiveClass);
30    }
31  
32    function parseOptions($input, options) {
33        var data = $.extend({}, DEFAULTS, $input.data(), options);
34        data.inline = data.inline === '' || data.inline;
35        data.readonly = data.readonly === '' || data.readonly;
36        if (data.clearable === false) {
37            data.clearableLabel = '';
38        } else {
39            data.clearableLabel = data.clearable;
40        }
41        data.clearable = data.clearable === '' || data.clearable;
42        return data;
43    }
44  
45    function createRatingEl($input, options) {
46        // Inline option
47        if (options.inline) {
48            var $ratingEl = $('<span class="rating-input"></span>');
49        } else {
50            var $ratingEl = $('<div class="rating-input"></div>');
51        }
52  
53        // Copy original classes but the rating class
54        if (options.copyClasses) {
55            $ratingEl.addClass($input.attr('class'));
56            $ratingEl.removeClass('rating');
57        }
58  
59        // Render rating icons
60        for (var i = options.min; i <= options.max; i++) {
61            $ratingEl.append('<i class="' + options.iconLib + '" data-value="' + i + '"></i>');
62        }
63  
64        // Render clear link
65        if (options.clearable && !options.readonly) {
66            $ratingEl.append('&nbsp;').append(
67                '<a class="' + clearClass + '">' +
68                '<i class="' + options.iconLib + ' ' + options.clearableIcon + '" >' +
69                '</a>'
70            );
71        }
72        return $ratingEl;
73    }
74  
75    var Rating = function (input, options) {
76        var $input = this.$input = input;
77        this.options = parseOptions($input, options);
78        var $ratingEl = this.$el = createRatingEl($input, this.options);
79        $input.addClass(hiddenClass).before($ratingEl);
80        $input.attr('type', 'hidden');
81        this.highlight($input.val());
82    };
83  
84    Rating.VERSION = '0.4.0';
85  
86    Rating.DEFAULTS = DEFAULTS;
87  
88    Rating.prototype = {
89  
90        clear: function () {
91            this.setValue(this.options['empty-value']);
92        },
93  
94        setValue: function (value) {
95            this.highlight(value);
96            this.updateInput(value);
97        },
98  
99        highlight: function (value, skipClearable) {
100            var options = this.options;
101            var $el = this.$el;
102            if (value >= this.options.min && value <= this.options.max) {
103                var $selected = $el.find(starSelector(value));
104                toggleActive($selected.prevAll('i').addBack(), true, options);
105                toggleActive($selected.nextAll('i'), false, options);
106            } else {
107                toggleActive($el.find(starSelector()), false, options);
108            }
109            if (!skipClearable) {
110                if (this.options.clearableRemain) {
111                    $el.find(clearSelector).removeClass(hiddenClass);
112                } else {
113                    if (!value || value == this.options['empty-value']) {
114                        $el.find(clearSelector).addClass(hiddenClass);
115                    } else {
116                        $el.find(clearSelector).removeClass(hiddenClass);
117                    }
118                }
119            }
120        },
121  
122        updateInput: function (value) {
123            var $input = this.$input;
124            if ($input.val() != value) {
125                $input.val(value).change();
126            }
127        }
128  
129    };
130  
131    var Plugin = $.fn.rating = function (options) {
132        return this.filter('input[type=number], div.rating').each(function () {
133            var $input = $(this);
134            var optionsObject = typeof options === 'object' && options || {};
135            var rating = new Rating($input, optionsObject);
136  
137            if ($(this).is("div")) {
138                rating.setValue($(this).text());
139                $input.text('');
140            } else {
141                if (!rating.options.readonly) {
142                    rating.$el
143                        .on('mouseenter', starSelector(), function () {
144                            rating.highlight($(this).data('value'), true);
145                        })
146                        .on('mouseleave', starSelector(), function () {
147                            rating.highlight($input.val(), true);
148                        })
149                        .on('click', starSelector(), function () {
150                            rating.setValue($(this).data('value'));
151                        })
152                        .on('click', clearSelector, function () {
153                            rating.clear();
154                        });
155                }
156            }
157        });
158    };
159  
160    Plugin.Constructor = Rating;
161  
162    $(function () {
163        $('input.rating[type=number], div.rating').each(function () {
164            $(this).rating();
165        });
166    });
167  
168}
169
170initRating(jQuery)
171
172function initRatingFunction() {
173    initRating(jQuery)
174}
175// (function ($) {
176
177// }(jQuery));