From 99eed502899dbc1b57a3cd44368052879f64b771 Mon Sep 17 00:00:00 2001 From: John Cadigan Date: Thu, 7 Aug 2014 17:33:46 -0700 Subject: [PATCH 1/5] Added customizable icons --- build/bootstrap-rating-input.min.js | 2 +- build/bootstrap-rating-input.min.js~ | 1 + src/bootstrap-rating-input.js | 47 +++++---- src/bootstrap-rating-input.js~ | 136 +++++++++++++++++++++++++++ 4 files changed, 168 insertions(+), 18 deletions(-) create mode 100644 build/bootstrap-rating-input.min.js~ create mode 100644 src/bootstrap-rating-input.js~ diff --git a/build/bootstrap-rating-input.min.js b/build/bootstrap-rating-input.min.js index d1bb472..d459123 100644 --- a/build/bootstrap-rating-input.min.js +++ b/build/bootstrap-rating-input.min.js @@ -1 +1 @@ -!function(a){a.fn.rating=function(){function b(b,c){var d=a(b).find("[data-value="+c+"]");d.removeClass("glyphicon-star-empty").addClass("glyphicon-star"),d.prevAll("[data-value]").removeClass("glyphicon-star-empty").addClass("glyphicon-star"),d.nextAll("[data-value]").removeClass("glyphicon-star").addClass("glyphicon-star-empty")}function c(b){var c=a(b);c.find("[data-value]").removeClass("glyphicon-star").addClass("glyphicon-star-empty")}function d(a,b){a.val(b).trigger("change"),b===a.data("empty-value")?a.siblings(".rating-clear").hide():a.siblings(".rating-clear").show()}var e;for(e=this.length-1;e>=0;e--){var f,g,h=a(this[e]),i=h.data("max")||5,j=h.data("min")||0,k=h.data("clearable")||null,l="";for(g=j;i>=g;g++)l+=[''].join("");k&&(l+=[' "].join(""));var m=h.clone(!0).addClass("hidden").data("max",i).data("min",j);f=['
',l,"
"].join(""),h.replaceWith(a(f).append(m))}a(".rating-input").on("mouseenter","[data-value]",function(){var c=a(this);b(c.closest(".rating-input"),c.data("value"))}).on("mouseleave","[data-value]",function(){var d=a(this),e=d.siblings("input"),f=e.val(),g=e.data("min"),h=e.data("max");f>=g&&h>=f?b(d.closest(".rating-input"),f):c(d.closest(".rating-input"))}).on("click","[data-value]",function(b){var c=a(this),e=c.data("value"),f=c.siblings("input");return d(f,e),b.preventDefault(),!1}).on("click",".rating-clear",function(b){var e=a(this),f=e.siblings("input");return d(f,f.data("empty-value")),c(e.closest(".rating-input")),b.preventDefault(),!1}).each(function(){var d=a(this).find("input"),e=d.val(),f=d.data("min"),g=d.data("max");""!==e&&+e>=f&&g>=+e?(b(this,e),a(this).find(".rating-clear").show()):(d.val(d.data("empty-value")),c(this))})},a(function(){a("input.rating[type=number]").length>0&&a("input.rating[type=number]").rating()})}(jQuery); \ No newline at end of file +(function(e){e.fn.rating=function(){function n(t,n,r,i){var s=e(t).find("[data-value="+n+"]");s.removeClass(i).addClass(r);s.prevAll("[data-value]").removeClass(i).addClass(r);s.nextAll("[data-value]").removeClass(r).addClass(i)}function r(t,n,r){var i=e(t);i.find("[data-value]").removeClass(n).addClass(r)}function i(e,t){e.val(t).trigger("change");if(t===e.data("empty-value")){e.siblings(".rating-clear").hide()}else{e.siblings(".rating-clear").show()}}var t;for(t=this.length-1;t>=0;t--){var s,o,u=e(this[t]),a=u.data("max")||5,f=u.data("min")||0,l=u.data("icon-lib")||"glyphicon";active=u.data("active-icon")||"glyphicon-star",inactive=u.data("inactive-icon")||"glyphicon-star-empty",clearable=u.data("clearable")||null,clearable_i=u.data("clearable-icon")||"glyphicon-remove",stars="";for(o=f;o<=a;o++){stars+=[''].join("")}if(clearable){stars+=[' "].join("")}var c=u.clone(true).addClass("hidden").data("max",a).data("min",f).data("icon-lib",l).data("active-icon",active).data("inactive-icon",inactive);s=['
',stars,"
"].join("");u.replaceWith(e(s).append(c))}e(".rating-input").on("mouseenter","[data-value]",function(){var t=e(this);input=t.siblings("input");n(t.closest(".rating-input"),t.data("value"),input.data("active-icon"),input.data("inactive-icon"))}).on("mouseleave","[data-value]",function(){var t=e(this),i=t.siblings("input"),s=i.val(),o=i.data("min"),u=i.data("max"),a=i.data("active-icon"),f=i.data("inactive-icon");if(s>=o&&s<=u){n(t.closest(".rating-input"),s,a,f)}else{r(t.closest(".rating-input"),a,f)}}).on("click","[data-value]",function(t){var n=e(this),r=n.data("value"),s=n.siblings("input");i(s,r);t.preventDefault();return false}).on("click",".rating-clear",function(t){var n=e(this),s=n.siblings("input"),o=s.data("active-icon"),u=s.data("inactive-icon");i(s,s.data("empty-value"));r(n.closest(".rating-input"),o,u);t.preventDefault();return false}).each(function(){var t=e(this).find("input"),i=t.val(),s=t.data("min"),o=t.data("max");if(i!==""&&+i>=s&&+i<=o){n(this,i);e(this).find(".rating-clear").show()}else{t.val(t.data("empty-value"));r(this)}})};e(function(){if(e("input.rating[type=number]").length>0){e("input.rating[type=number]").rating()}})})(jQuery) diff --git a/build/bootstrap-rating-input.min.js~ b/build/bootstrap-rating-input.min.js~ new file mode 100644 index 0000000..d1bb472 --- /dev/null +++ b/build/bootstrap-rating-input.min.js~ @@ -0,0 +1 @@ +!function(a){a.fn.rating=function(){function b(b,c){var d=a(b).find("[data-value="+c+"]");d.removeClass("glyphicon-star-empty").addClass("glyphicon-star"),d.prevAll("[data-value]").removeClass("glyphicon-star-empty").addClass("glyphicon-star"),d.nextAll("[data-value]").removeClass("glyphicon-star").addClass("glyphicon-star-empty")}function c(b){var c=a(b);c.find("[data-value]").removeClass("glyphicon-star").addClass("glyphicon-star-empty")}function d(a,b){a.val(b).trigger("change"),b===a.data("empty-value")?a.siblings(".rating-clear").hide():a.siblings(".rating-clear").show()}var e;for(e=this.length-1;e>=0;e--){var f,g,h=a(this[e]),i=h.data("max")||5,j=h.data("min")||0,k=h.data("clearable")||null,l="";for(g=j;i>=g;g++)l+=[''].join("");k&&(l+=[' "].join(""));var m=h.clone(!0).addClass("hidden").data("max",i).data("min",j);f=['
',l,"
"].join(""),h.replaceWith(a(f).append(m))}a(".rating-input").on("mouseenter","[data-value]",function(){var c=a(this);b(c.closest(".rating-input"),c.data("value"))}).on("mouseleave","[data-value]",function(){var d=a(this),e=d.siblings("input"),f=e.val(),g=e.data("min"),h=e.data("max");f>=g&&h>=f?b(d.closest(".rating-input"),f):c(d.closest(".rating-input"))}).on("click","[data-value]",function(b){var c=a(this),e=c.data("value"),f=c.siblings("input");return d(f,e),b.preventDefault(),!1}).on("click",".rating-clear",function(b){var e=a(this),f=e.siblings("input");return d(f,f.data("empty-value")),c(e.closest(".rating-input")),b.preventDefault(),!1}).each(function(){var d=a(this).find("input"),e=d.val(),f=d.data("min"),g=d.data("max");""!==e&&+e>=f&&g>=+e?(b(this,e),a(this).find(".rating-clear").show()):(d.val(d.data("empty-value")),c(this))})},a(function(){a("input.rating[type=number]").length>0&&a("input.rating[type=number]").rating()})}(jQuery); \ No newline at end of file diff --git a/src/bootstrap-rating-input.js b/src/bootstrap-rating-input.js index f9b93ae..1aefdc4 100644 --- a/src/bootstrap-rating-input.js +++ b/src/bootstrap-rating-input.js @@ -5,17 +5,17 @@ var element; // A private function to highlight a star corresponding to a given value - function _paintValue(ratingInput, value) { + function _paintValue(ratingInput, value, active_icon, inactive_icon) { var selectedStar = $(ratingInput).find('[data-value=' + value + ']'); - selectedStar.removeClass('glyphicon-star-empty').addClass('glyphicon-star'); - selectedStar.prevAll('[data-value]').removeClass('glyphicon-star-empty').addClass('glyphicon-star'); - selectedStar.nextAll('[data-value]').removeClass('glyphicon-star').addClass('glyphicon-star-empty'); + selectedStar.removeClass(inactive_icon).addClass(active_icon); + selectedStar.prevAll('[data-value]').removeClass(inactive_icon).addClass(active_icon); + selectedStar.nextAll('[data-value]').removeClass(active_icon).addClass(inactive_icon); } // A private function to remove the highlight for a selected rating - function _clearValue(ratingInput) { + function _clearValue(ratingInput, active_icon, inactive_icon) { var self = $(ratingInput); - self.find('[data-value]').removeClass('glyphicon-star').addClass('glyphicon-star-empty'); + self.find('[data-value]').removeClass(active_icon).addClass(inactive_icon); } // A private function to change the actual value to the hidden field @@ -29,6 +29,7 @@ } } + // Iterate and transform all selected inputs for (element = this.length - 1; element >= 0; element--) { @@ -36,19 +37,23 @@ originalInput = $(this[element]), max = originalInput.data('max') || 5, min = originalInput.data('min') || 0, + lib = originalInput.data('icon-lib') || 'glyphicon' + active = originalInput.data('active-icon') || 'glyphicon-star', + inactive = originalInput.data('inactive-icon') || 'glyphicon-star-empty', clearable = originalInput.data('clearable') || null, + clearable_i = originalInput.data('clearable-icon') || 'glyphicon-remove', stars = ''; // HTML element construction for (i = min; i <= max; i++) { // Create empty stars - stars += [''].join(''); + stars += [''].join(''); } // Add a clear link if clearable option is set if (clearable) { - stars += [ + stars += [ ' '].join(''); } @@ -57,8 +62,11 @@ var newInput = originalInput.clone(true) .addClass('hidden') .data('max', max) - .data('min', min); - + .data('min', min) + .data('icon-lib', lib) + .data('active-icon', active) + .data('inactive-icon', inactive); + //alert(newInput.data('active-icon')); // Rating widget is wrapped inside a div el = [ '
', @@ -75,7 +83,8 @@ // Highlight stars on hovering .on('mouseenter', '[data-value]', function () { var self = $(this); - _paintValue(self.closest('.rating-input'), self.data('value')); + input = self.siblings('input'); + _paintValue(self.closest('.rating-input'), self.data('value'), input.data('active-icon'), input.data('inactive-icon')); }) // View current value while mouse is out .on('mouseleave', '[data-value]', function () { @@ -83,11 +92,13 @@ input = self.siblings('input'), val = input.val(), min = input.data('min'), - max = input.data('max'); + max = input.data('max'), + active = input.data('active-icon'), + inactive = input.data('inactive-icon'); if (val >= min && val <= max) { - _paintValue(self.closest('.rating-input'), val); + _paintValue(self.closest('.rating-input'), val, active, inactive); } else { - _clearValue(self.closest('.rating-input')); + _clearValue(self.closest('.rating-input'), active, inactive); } }) // Set the selected value to the hidden field @@ -102,9 +113,11 @@ // Remove value on clear .on('click', '.rating-clear', function (e) { var self = $(this), - input = self.siblings('input'); + input = self.siblings('input'), + active = input.data('active-icon'), + inactive = input.data('inactive-icon'); _updateValue(input, input.data('empty-value')); - _clearValue(self.closest('.rating-input')); + _clearValue(self.closest('.rating-input'), active, inactive); e.preventDefault(); return false; }) diff --git a/src/bootstrap-rating-input.js~ b/src/bootstrap-rating-input.js~ new file mode 100644 index 0000000..f9b93ae --- /dev/null +++ b/src/bootstrap-rating-input.js~ @@ -0,0 +1,136 @@ +(function ($) { + + $.fn.rating = function () { + + var element; + + // A private function to highlight a star corresponding to a given value + function _paintValue(ratingInput, value) { + var selectedStar = $(ratingInput).find('[data-value=' + value + ']'); + selectedStar.removeClass('glyphicon-star-empty').addClass('glyphicon-star'); + selectedStar.prevAll('[data-value]').removeClass('glyphicon-star-empty').addClass('glyphicon-star'); + selectedStar.nextAll('[data-value]').removeClass('glyphicon-star').addClass('glyphicon-star-empty'); + } + + // A private function to remove the highlight for a selected rating + function _clearValue(ratingInput) { + var self = $(ratingInput); + self.find('[data-value]').removeClass('glyphicon-star').addClass('glyphicon-star-empty'); + } + + // A private function to change the actual value to the hidden field + function _updateValue(input, val) { + input.val(val).trigger('change'); + if (val === input.data('empty-value')) { + input.siblings('.rating-clear').hide(); + } + else { + input.siblings('.rating-clear').show(); + } + } + + // Iterate and transform all selected inputs + for (element = this.length - 1; element >= 0; element--) { + + var el, i, + originalInput = $(this[element]), + max = originalInput.data('max') || 5, + min = originalInput.data('min') || 0, + clearable = originalInput.data('clearable') || null, + stars = ''; + + // HTML element construction + for (i = min; i <= max; i++) { + // Create empty stars + stars += [''].join(''); + } + // Add a clear link if clearable option is set + if (clearable) { + stars += [ + ' '].join(''); + } + + // Clone with data and events the original input to preserve any additional data and event bindings. + var newInput = originalInput.clone(true) + .addClass('hidden') + .data('max', max) + .data('min', min); + + // Rating widget is wrapped inside a div + el = [ + '
', + stars, + '
'].join(''); + + // Replace original inputs HTML with the new one + originalInput.replaceWith($(el).append(newInput)); + + } + + // Give live to the newly generated widgets + $('.rating-input') + // Highlight stars on hovering + .on('mouseenter', '[data-value]', function () { + var self = $(this); + _paintValue(self.closest('.rating-input'), self.data('value')); + }) + // View current value while mouse is out + .on('mouseleave', '[data-value]', function () { + var self = $(this), + input = self.siblings('input'), + val = input.val(), + min = input.data('min'), + max = input.data('max'); + if (val >= min && val <= max) { + _paintValue(self.closest('.rating-input'), val); + } else { + _clearValue(self.closest('.rating-input')); + } + }) + // Set the selected value to the hidden field + .on('click', '[data-value]', function (e) { + var self = $(this), + val = self.data('value'), + input = self.siblings('input'); + _updateValue(input,val); + e.preventDefault(); + return false; + }) + // Remove value on clear + .on('click', '.rating-clear', function (e) { + var self = $(this), + input = self.siblings('input'); + _updateValue(input, input.data('empty-value')); + _clearValue(self.closest('.rating-input')); + e.preventDefault(); + return false; + }) + // Initialize view with default value + .each(function () { + var input = $(this).find('input'), + val = input.val(), + min = input.data('min'), + max = input.data('max'); + if (val !== "" && +val >= min && +val <= max) { + _paintValue(this, val); + $(this).find('.rating-clear').show(); + } + else { + input.val(input.data('empty-value')); + _clearValue(this); + } + }); + + }; + + // Auto apply conversion of number fields with class 'rating' into rating-fields + $(function () { + if ($('input.rating[type=number]').length > 0) { + $('input.rating[type=number]').rating(); + } + }); + +}(jQuery)); From 077c28649bed5912c3d655dcbcbbc9ffb623c2d4 Mon Sep 17 00:00:00 2001 From: John Cadigan Date: Thu, 7 Aug 2014 17:34:34 -0700 Subject: [PATCH 2/5] Removed temp files --- src/bootstrap-rating-input.js~ | 136 --------------------------------- 1 file changed, 136 deletions(-) delete mode 100644 src/bootstrap-rating-input.js~ diff --git a/src/bootstrap-rating-input.js~ b/src/bootstrap-rating-input.js~ deleted file mode 100644 index f9b93ae..0000000 --- a/src/bootstrap-rating-input.js~ +++ /dev/null @@ -1,136 +0,0 @@ -(function ($) { - - $.fn.rating = function () { - - var element; - - // A private function to highlight a star corresponding to a given value - function _paintValue(ratingInput, value) { - var selectedStar = $(ratingInput).find('[data-value=' + value + ']'); - selectedStar.removeClass('glyphicon-star-empty').addClass('glyphicon-star'); - selectedStar.prevAll('[data-value]').removeClass('glyphicon-star-empty').addClass('glyphicon-star'); - selectedStar.nextAll('[data-value]').removeClass('glyphicon-star').addClass('glyphicon-star-empty'); - } - - // A private function to remove the highlight for a selected rating - function _clearValue(ratingInput) { - var self = $(ratingInput); - self.find('[data-value]').removeClass('glyphicon-star').addClass('glyphicon-star-empty'); - } - - // A private function to change the actual value to the hidden field - function _updateValue(input, val) { - input.val(val).trigger('change'); - if (val === input.data('empty-value')) { - input.siblings('.rating-clear').hide(); - } - else { - input.siblings('.rating-clear').show(); - } - } - - // Iterate and transform all selected inputs - for (element = this.length - 1; element >= 0; element--) { - - var el, i, - originalInput = $(this[element]), - max = originalInput.data('max') || 5, - min = originalInput.data('min') || 0, - clearable = originalInput.data('clearable') || null, - stars = ''; - - // HTML element construction - for (i = min; i <= max; i++) { - // Create empty stars - stars += [''].join(''); - } - // Add a clear link if clearable option is set - if (clearable) { - stars += [ - ' '].join(''); - } - - // Clone with data and events the original input to preserve any additional data and event bindings. - var newInput = originalInput.clone(true) - .addClass('hidden') - .data('max', max) - .data('min', min); - - // Rating widget is wrapped inside a div - el = [ - '
', - stars, - '
'].join(''); - - // Replace original inputs HTML with the new one - originalInput.replaceWith($(el).append(newInput)); - - } - - // Give live to the newly generated widgets - $('.rating-input') - // Highlight stars on hovering - .on('mouseenter', '[data-value]', function () { - var self = $(this); - _paintValue(self.closest('.rating-input'), self.data('value')); - }) - // View current value while mouse is out - .on('mouseleave', '[data-value]', function () { - var self = $(this), - input = self.siblings('input'), - val = input.val(), - min = input.data('min'), - max = input.data('max'); - if (val >= min && val <= max) { - _paintValue(self.closest('.rating-input'), val); - } else { - _clearValue(self.closest('.rating-input')); - } - }) - // Set the selected value to the hidden field - .on('click', '[data-value]', function (e) { - var self = $(this), - val = self.data('value'), - input = self.siblings('input'); - _updateValue(input,val); - e.preventDefault(); - return false; - }) - // Remove value on clear - .on('click', '.rating-clear', function (e) { - var self = $(this), - input = self.siblings('input'); - _updateValue(input, input.data('empty-value')); - _clearValue(self.closest('.rating-input')); - e.preventDefault(); - return false; - }) - // Initialize view with default value - .each(function () { - var input = $(this).find('input'), - val = input.val(), - min = input.data('min'), - max = input.data('max'); - if (val !== "" && +val >= min && +val <= max) { - _paintValue(this, val); - $(this).find('.rating-clear').show(); - } - else { - input.val(input.data('empty-value')); - _clearValue(this); - } - }); - - }; - - // Auto apply conversion of number fields with class 'rating' into rating-fields - $(function () { - if ($('input.rating[type=number]').length > 0) { - $('input.rating[type=number]').rating(); - } - }); - -}(jQuery)); From 1a4060592f7d0f30689697e994b41ecfd6236085 Mon Sep 17 00:00:00 2001 From: John Cadigan Date: Fri, 8 Aug 2014 20:40:53 -0700 Subject: [PATCH 3/5] Added support to depict a default value --- build/bootstrap-rating-input.min.js | 2 +- build/bootstrap-rating-input.min.js~ | 2 +- demo.html | 4 +- demo.html~ | 28 +++++ src/bootstrap-rating-input.js | 12 ++- src/bootstrap-rating-input.js~ | 153 +++++++++++++++++++++++++++ 6 files changed, 194 insertions(+), 7 deletions(-) create mode 100644 demo.html~ create mode 100644 src/bootstrap-rating-input.js~ diff --git a/build/bootstrap-rating-input.min.js b/build/bootstrap-rating-input.min.js index d459123..c74ac3c 100644 --- a/build/bootstrap-rating-input.min.js +++ b/build/bootstrap-rating-input.min.js @@ -1 +1 @@ -(function(e){e.fn.rating=function(){function n(t,n,r,i){var s=e(t).find("[data-value="+n+"]");s.removeClass(i).addClass(r);s.prevAll("[data-value]").removeClass(i).addClass(r);s.nextAll("[data-value]").removeClass(r).addClass(i)}function r(t,n,r){var i=e(t);i.find("[data-value]").removeClass(n).addClass(r)}function i(e,t){e.val(t).trigger("change");if(t===e.data("empty-value")){e.siblings(".rating-clear").hide()}else{e.siblings(".rating-clear").show()}}var t;for(t=this.length-1;t>=0;t--){var s,o,u=e(this[t]),a=u.data("max")||5,f=u.data("min")||0,l=u.data("icon-lib")||"glyphicon";active=u.data("active-icon")||"glyphicon-star",inactive=u.data("inactive-icon")||"glyphicon-star-empty",clearable=u.data("clearable")||null,clearable_i=u.data("clearable-icon")||"glyphicon-remove",stars="";for(o=f;o<=a;o++){stars+=[''].join("")}if(clearable){stars+=[' "].join("")}var c=u.clone(true).addClass("hidden").data("max",a).data("min",f).data("icon-lib",l).data("active-icon",active).data("inactive-icon",inactive);s=['
',stars,"
"].join("");u.replaceWith(e(s).append(c))}e(".rating-input").on("mouseenter","[data-value]",function(){var t=e(this);input=t.siblings("input");n(t.closest(".rating-input"),t.data("value"),input.data("active-icon"),input.data("inactive-icon"))}).on("mouseleave","[data-value]",function(){var t=e(this),i=t.siblings("input"),s=i.val(),o=i.data("min"),u=i.data("max"),a=i.data("active-icon"),f=i.data("inactive-icon");if(s>=o&&s<=u){n(t.closest(".rating-input"),s,a,f)}else{r(t.closest(".rating-input"),a,f)}}).on("click","[data-value]",function(t){var n=e(this),r=n.data("value"),s=n.siblings("input");i(s,r);t.preventDefault();return false}).on("click",".rating-clear",function(t){var n=e(this),s=n.siblings("input"),o=s.data("active-icon"),u=s.data("inactive-icon");i(s,s.data("empty-value"));r(n.closest(".rating-input"),o,u);t.preventDefault();return false}).each(function(){var t=e(this).find("input"),i=t.val(),s=t.data("min"),o=t.data("max");if(i!==""&&+i>=s&&+i<=o){n(this,i);e(this).find(".rating-clear").show()}else{t.val(t.data("empty-value"));r(this)}})};e(function(){if(e("input.rating[type=number]").length>0){e("input.rating[type=number]").rating()}})})(jQuery) +(function(e){e.fn.rating=function(){function n(t,n,r,i){var s=e(t).find("[data-value="+n+"]");s.removeClass(i).addClass(r);s.prevAll("[data-value]").removeClass(i).addClass(r);s.nextAll("[data-value]").removeClass(r).addClass(i)}function r(t,n,r){var i=e(t);i.find("[data-value]").removeClass(n).addClass(r)}function i(e,t){e.val(t).trigger("change");if(t===e.data("empty-value")){e.siblings(".rating-clear").hide()}else{e.siblings(".rating-clear").show()}}var t;for(t=this.length-1;t>=0;t--){var s,o,u=e(this[t]),a=u.data("max")||5,f=u.data("min")||0,l=u.val()||0,c=u.data("icon-lib")||"glyphicon";active=u.data("active-icon")||"glyphicon-star",inactive=u.data("inactive-icon")||"glyphicon-star-empty",clearable=u.data("clearable")||null,clearable_i=u.data("clearable-icon")||"glyphicon-remove",stars="";for(o=f;o<=a;o++){if(o<=l){stars+=[''].join("")}else{stars+=[''].join("")}}if(clearable){stars+=[' "].join("")}var h=u.clone(true).addClass("hidden").data("max",a).data("min",f).data("icon-lib",c).data("active-icon",active).data("inactive-icon",inactive);s=['
',stars,"
"].join("");u.replaceWith(e(s).append(h))}e(".rating-input").on("mouseenter","[data-value]",function(){var t=e(this);input=t.siblings("input");n(t.closest(".rating-input"),t.data("value"),input.data("active-icon"),input.data("inactive-icon"))}).on("mouseleave","[data-value]",function(){var t=e(this),i=t.siblings("input"),s=i.val(),o=i.data("min"),u=i.data("max"),a=i.data("active-icon"),f=i.data("inactive-icon");if(s>=o&&s<=u){n(t.closest(".rating-input"),s,a,f)}else{r(t.closest(".rating-input"),a,f)}}).on("click","[data-value]",function(t){var n=e(this),r=n.data("value"),s=n.siblings("input");i(s,r);t.preventDefault();return false}).on("click",".rating-clear",function(t){var n=e(this),s=n.siblings("input"),o=s.data("active-icon"),u=s.data("inactive-icon");i(s,s.data("empty-value"));r(n.closest(".rating-input"),o,u);t.preventDefault();return false}).each(function(){var t=e(this).find("input"),i=t.val(),s=t.data("min"),o=t.data("max");if(i!==""&&+i>=s&&+i<=o){n(this,i);e(this).find(".rating-clear").show()}else{t.val(t.data("empty-value"));r(this)}})};e(function(){if(e("input.rating[type=number]").length>0){e("input.rating[type=number]").rating()}})})(jQuery) diff --git a/build/bootstrap-rating-input.min.js~ b/build/bootstrap-rating-input.min.js~ index d1bb472..d459123 100644 --- a/build/bootstrap-rating-input.min.js~ +++ b/build/bootstrap-rating-input.min.js~ @@ -1 +1 @@ -!function(a){a.fn.rating=function(){function b(b,c){var d=a(b).find("[data-value="+c+"]");d.removeClass("glyphicon-star-empty").addClass("glyphicon-star"),d.prevAll("[data-value]").removeClass("glyphicon-star-empty").addClass("glyphicon-star"),d.nextAll("[data-value]").removeClass("glyphicon-star").addClass("glyphicon-star-empty")}function c(b){var c=a(b);c.find("[data-value]").removeClass("glyphicon-star").addClass("glyphicon-star-empty")}function d(a,b){a.val(b).trigger("change"),b===a.data("empty-value")?a.siblings(".rating-clear").hide():a.siblings(".rating-clear").show()}var e;for(e=this.length-1;e>=0;e--){var f,g,h=a(this[e]),i=h.data("max")||5,j=h.data("min")||0,k=h.data("clearable")||null,l="";for(g=j;i>=g;g++)l+=[''].join("");k&&(l+=[' "].join(""));var m=h.clone(!0).addClass("hidden").data("max",i).data("min",j);f=['
',l,"
"].join(""),h.replaceWith(a(f).append(m))}a(".rating-input").on("mouseenter","[data-value]",function(){var c=a(this);b(c.closest(".rating-input"),c.data("value"))}).on("mouseleave","[data-value]",function(){var d=a(this),e=d.siblings("input"),f=e.val(),g=e.data("min"),h=e.data("max");f>=g&&h>=f?b(d.closest(".rating-input"),f):c(d.closest(".rating-input"))}).on("click","[data-value]",function(b){var c=a(this),e=c.data("value"),f=c.siblings("input");return d(f,e),b.preventDefault(),!1}).on("click",".rating-clear",function(b){var e=a(this),f=e.siblings("input");return d(f,f.data("empty-value")),c(e.closest(".rating-input")),b.preventDefault(),!1}).each(function(){var d=a(this).find("input"),e=d.val(),f=d.data("min"),g=d.data("max");""!==e&&+e>=f&&g>=+e?(b(this,e),a(this).find(".rating-clear").show()):(d.val(d.data("empty-value")),c(this))})},a(function(){a("input.rating[type=number]").length>0&&a("input.rating[type=number]").rating()})}(jQuery); \ No newline at end of file +(function(e){e.fn.rating=function(){function n(t,n,r,i){var s=e(t).find("[data-value="+n+"]");s.removeClass(i).addClass(r);s.prevAll("[data-value]").removeClass(i).addClass(r);s.nextAll("[data-value]").removeClass(r).addClass(i)}function r(t,n,r){var i=e(t);i.find("[data-value]").removeClass(n).addClass(r)}function i(e,t){e.val(t).trigger("change");if(t===e.data("empty-value")){e.siblings(".rating-clear").hide()}else{e.siblings(".rating-clear").show()}}var t;for(t=this.length-1;t>=0;t--){var s,o,u=e(this[t]),a=u.data("max")||5,f=u.data("min")||0,l=u.data("icon-lib")||"glyphicon";active=u.data("active-icon")||"glyphicon-star",inactive=u.data("inactive-icon")||"glyphicon-star-empty",clearable=u.data("clearable")||null,clearable_i=u.data("clearable-icon")||"glyphicon-remove",stars="";for(o=f;o<=a;o++){stars+=[''].join("")}if(clearable){stars+=[' "].join("")}var c=u.clone(true).addClass("hidden").data("max",a).data("min",f).data("icon-lib",l).data("active-icon",active).data("inactive-icon",inactive);s=['
',stars,"
"].join("");u.replaceWith(e(s).append(c))}e(".rating-input").on("mouseenter","[data-value]",function(){var t=e(this);input=t.siblings("input");n(t.closest(".rating-input"),t.data("value"),input.data("active-icon"),input.data("inactive-icon"))}).on("mouseleave","[data-value]",function(){var t=e(this),i=t.siblings("input"),s=i.val(),o=i.data("min"),u=i.data("max"),a=i.data("active-icon"),f=i.data("inactive-icon");if(s>=o&&s<=u){n(t.closest(".rating-input"),s,a,f)}else{r(t.closest(".rating-input"),a,f)}}).on("click","[data-value]",function(t){var n=e(this),r=n.data("value"),s=n.siblings("input");i(s,r);t.preventDefault();return false}).on("click",".rating-clear",function(t){var n=e(this),s=n.siblings("input"),o=s.data("active-icon"),u=s.data("inactive-icon");i(s,s.data("empty-value"));r(n.closest(".rating-input"),o,u);t.preventDefault();return false}).each(function(){var t=e(this).find("input"),i=t.val(),s=t.data("min"),o=t.data("max");if(i!==""&&+i>=s&&+i<=o){n(this,i);e(this).find(".rating-clear").show()}else{t.val(t.data("empty-value"));r(this)}})};e(function(){if(e("input.rating[type=number]").length>0){e("input.rating[type=number]").rating()}})})(jQuery) diff --git a/demo.html b/demo.html index 31b78f1..6cb0821 100644 --- a/demo.html +++ b/demo.html @@ -14,7 +14,7 @@ + + + + + + + + +

The Bootstrap Rating Input in action...

+ +

My rating:

+ + diff --git a/src/bootstrap-rating-input.js b/src/bootstrap-rating-input.js index 1aefdc4..5a5e20e 100644 --- a/src/bootstrap-rating-input.js +++ b/src/bootstrap-rating-input.js @@ -37,17 +37,23 @@ originalInput = $(this[element]), max = originalInput.data('max') || 5, min = originalInput.data('min') || 0, + def_val = originalInput.val() || 0, lib = originalInput.data('icon-lib') || 'glyphicon' active = originalInput.data('active-icon') || 'glyphicon-star', inactive = originalInput.data('inactive-icon') || 'glyphicon-star-empty', clearable = originalInput.data('clearable') || null, clearable_i = originalInput.data('clearable-icon') || 'glyphicon-remove', stars = ''; - + // HTML element construction for (i = min; i <= max; i++) { // Create empty stars - stars += [''].join(''); + if(i <= def_val){ + stars += [''].join(''); + } + else{ + stars += [''].join('') + } } // Add a clear link if clearable option is set if (clearable) { @@ -66,7 +72,7 @@ .data('icon-lib', lib) .data('active-icon', active) .data('inactive-icon', inactive); - //alert(newInput.data('active-icon')); + // Rating widget is wrapped inside a div el = [ '
', diff --git a/src/bootstrap-rating-input.js~ b/src/bootstrap-rating-input.js~ new file mode 100644 index 0000000..bec02d6 --- /dev/null +++ b/src/bootstrap-rating-input.js~ @@ -0,0 +1,153 @@ +(function ($) { + + $.fn.rating = function () { + + var element; + + // A private function to highlight a star corresponding to a given value + function _paintValue(ratingInput, value, active_icon, inactive_icon) { + var selectedStar = $(ratingInput).find('[data-value=' + value + ']'); + selectedStar.removeClass(inactive_icon).addClass(active_icon); + selectedStar.prevAll('[data-value]').removeClass(inactive_icon).addClass(active_icon); + selectedStar.nextAll('[data-value]').removeClass(active_icon).addClass(inactive_icon); + } + + // A private function to remove the highlight for a selected rating + function _clearValue(ratingInput, active_icon, inactive_icon) { + var self = $(ratingInput); + self.find('[data-value]').removeClass(active_icon).addClass(inactive_icon); + } + + // A private function to change the actual value to the hidden field + function _updateValue(input, val) { + input.val(val).trigger('change'); + if (val === input.data('empty-value')) { + input.siblings('.rating-clear').hide(); + } + else { + input.siblings('.rating-clear').show(); + } + } + + + // Iterate and transform all selected inputs + for (element = this.length - 1; element >= 0; element--) { + + var el, i, + originalInput = $(this[element]), + max = originalInput.data('max') || 5, + min = originalInput.data('min') || 0, + def_val = originalInput.val || 0, + lib = originalInput.data('icon-lib') || 'glyphicon' + active = originalInput.data('active-icon') || 'glyphicon-star', + inactive = originalInput.data('inactive-icon') || 'glyphicon-star-empty', + clearable = originalInput.data('clearable') || null, + clearable_i = originalInput.data('clearable-icon') || 'glyphicon-remove', + stars = ''; + + // HTML element construction + for (i = min; i <= max; i++) { + // Create empty stars + if(i < def_val){ + stars += [''].join(''); + } + else{stars += [''].join('')} + } + // Add a clear link if clearable option is set + if (clearable) { + stars += [ + ' '].join(''); + } + + // Clone with data and events the original input to preserve any additional data and event bindings. + var newInput = originalInput.clone(true) + .addClass('hidden') + .data('max', max) + .data('min', min) + .data('icon-lib', lib) + .data('active-icon', active) + .data('inactive-icon', inactive); + //alert(newInput.data('active-icon')); + // Rating widget is wrapped inside a div + el = [ + '
', + stars, + '
'].join(''); + + // Replace original inputs HTML with the new one + originalInput.replaceWith($(el).append(newInput)); + + } + + // Give live to the newly generated widgets + $('.rating-input') + // Highlight stars on hovering + .on('mouseenter', '[data-value]', function () { + var self = $(this); + input = self.siblings('input'); + _paintValue(self.closest('.rating-input'), self.data('value'), input.data('active-icon'), input.data('inactive-icon')); + }) + // View current value while mouse is out + .on('mouseleave', '[data-value]', function () { + var self = $(this), + input = self.siblings('input'), + val = input.val(), + min = input.data('min'), + max = input.data('max'), + active = input.data('active-icon'), + inactive = input.data('inactive-icon'); + if (val >= min && val <= max) { + _paintValue(self.closest('.rating-input'), val, active, inactive); + } else { + _clearValue(self.closest('.rating-input'), active, inactive); + } + }) + // Set the selected value to the hidden field + .on('click', '[data-value]', function (e) { + var self = $(this), + val = self.data('value'), + input = self.siblings('input'); + _updateValue(input,val); + e.preventDefault(); + return false; + }) + // Remove value on clear + .on('click', '.rating-clear', function (e) { + var self = $(this), + input = self.siblings('input'), + active = input.data('active-icon'), + inactive = input.data('inactive-icon'); + _updateValue(input, input.data('empty-value')); + _clearValue(self.closest('.rating-input'), active, inactive); + e.preventDefault(); + return false; + }) + // Initialize view with default value + .each(function () { + var input = $(this).find('input'), + val = input.val(), + min = input.data('min'), + max = input.data('max'); + if (val !== "" && +val >= min && +val <= max) { + _paintValue(this, val); + $(this).find('.rating-clear').show(); + } + else { + input.val(input.data('empty-value')); + _clearValue(this); + } + }); + + }; + + // Auto apply conversion of number fields with class 'rating' into rating-fields + $(function () { + if ($('input.rating[type=number]').length > 0) { + $('input.rating[type=number]').rating(); + } + }); + +}(jQuery)); From 40231b2b094cb1381d3e95f193143d9e785deb34 Mon Sep 17 00:00:00 2001 From: John Cadigan Date: Fri, 8 Aug 2014 20:44:55 -0700 Subject: [PATCH 4/5] Added depiction of score with a given starting value in the input item --- demo.html | 4 +- demo.html~ | 28 ------ src/bootstrap-rating-input.js~ | 153 --------------------------------- 3 files changed, 2 insertions(+), 183 deletions(-) delete mode 100644 demo.html~ delete mode 100644 src/bootstrap-rating-input.js~ diff --git a/demo.html b/demo.html index 6cb0821..31b78f1 100644 --- a/demo.html +++ b/demo.html @@ -14,7 +14,7 @@ - - - - - - - - -

The Bootstrap Rating Input in action...

- -

My rating:

- - diff --git a/src/bootstrap-rating-input.js~ b/src/bootstrap-rating-input.js~ deleted file mode 100644 index bec02d6..0000000 --- a/src/bootstrap-rating-input.js~ +++ /dev/null @@ -1,153 +0,0 @@ -(function ($) { - - $.fn.rating = function () { - - var element; - - // A private function to highlight a star corresponding to a given value - function _paintValue(ratingInput, value, active_icon, inactive_icon) { - var selectedStar = $(ratingInput).find('[data-value=' + value + ']'); - selectedStar.removeClass(inactive_icon).addClass(active_icon); - selectedStar.prevAll('[data-value]').removeClass(inactive_icon).addClass(active_icon); - selectedStar.nextAll('[data-value]').removeClass(active_icon).addClass(inactive_icon); - } - - // A private function to remove the highlight for a selected rating - function _clearValue(ratingInput, active_icon, inactive_icon) { - var self = $(ratingInput); - self.find('[data-value]').removeClass(active_icon).addClass(inactive_icon); - } - - // A private function to change the actual value to the hidden field - function _updateValue(input, val) { - input.val(val).trigger('change'); - if (val === input.data('empty-value')) { - input.siblings('.rating-clear').hide(); - } - else { - input.siblings('.rating-clear').show(); - } - } - - - // Iterate and transform all selected inputs - for (element = this.length - 1; element >= 0; element--) { - - var el, i, - originalInput = $(this[element]), - max = originalInput.data('max') || 5, - min = originalInput.data('min') || 0, - def_val = originalInput.val || 0, - lib = originalInput.data('icon-lib') || 'glyphicon' - active = originalInput.data('active-icon') || 'glyphicon-star', - inactive = originalInput.data('inactive-icon') || 'glyphicon-star-empty', - clearable = originalInput.data('clearable') || null, - clearable_i = originalInput.data('clearable-icon') || 'glyphicon-remove', - stars = ''; - - // HTML element construction - for (i = min; i <= max; i++) { - // Create empty stars - if(i < def_val){ - stars += [''].join(''); - } - else{stars += [''].join('')} - } - // Add a clear link if clearable option is set - if (clearable) { - stars += [ - ' '].join(''); - } - - // Clone with data and events the original input to preserve any additional data and event bindings. - var newInput = originalInput.clone(true) - .addClass('hidden') - .data('max', max) - .data('min', min) - .data('icon-lib', lib) - .data('active-icon', active) - .data('inactive-icon', inactive); - //alert(newInput.data('active-icon')); - // Rating widget is wrapped inside a div - el = [ - '
', - stars, - '
'].join(''); - - // Replace original inputs HTML with the new one - originalInput.replaceWith($(el).append(newInput)); - - } - - // Give live to the newly generated widgets - $('.rating-input') - // Highlight stars on hovering - .on('mouseenter', '[data-value]', function () { - var self = $(this); - input = self.siblings('input'); - _paintValue(self.closest('.rating-input'), self.data('value'), input.data('active-icon'), input.data('inactive-icon')); - }) - // View current value while mouse is out - .on('mouseleave', '[data-value]', function () { - var self = $(this), - input = self.siblings('input'), - val = input.val(), - min = input.data('min'), - max = input.data('max'), - active = input.data('active-icon'), - inactive = input.data('inactive-icon'); - if (val >= min && val <= max) { - _paintValue(self.closest('.rating-input'), val, active, inactive); - } else { - _clearValue(self.closest('.rating-input'), active, inactive); - } - }) - // Set the selected value to the hidden field - .on('click', '[data-value]', function (e) { - var self = $(this), - val = self.data('value'), - input = self.siblings('input'); - _updateValue(input,val); - e.preventDefault(); - return false; - }) - // Remove value on clear - .on('click', '.rating-clear', function (e) { - var self = $(this), - input = self.siblings('input'), - active = input.data('active-icon'), - inactive = input.data('inactive-icon'); - _updateValue(input, input.data('empty-value')); - _clearValue(self.closest('.rating-input'), active, inactive); - e.preventDefault(); - return false; - }) - // Initialize view with default value - .each(function () { - var input = $(this).find('input'), - val = input.val(), - min = input.data('min'), - max = input.data('max'); - if (val !== "" && +val >= min && +val <= max) { - _paintValue(this, val); - $(this).find('.rating-clear').show(); - } - else { - input.val(input.data('empty-value')); - _clearValue(this); - } - }); - - }; - - // Auto apply conversion of number fields with class 'rating' into rating-fields - $(function () { - if ($('input.rating[type=number]').length > 0) { - $('input.rating[type=number]').rating(); - } - }); - -}(jQuery)); From ee21124775604e87721d384abfc915f3b57ebd22 Mon Sep 17 00:00:00 2001 From: Javier Toledo Date: Tue, 12 Aug 2014 21:07:02 +0100 Subject: [PATCH 5/5] Added examples of custom icon usage to README and demo.html --- README.md | 14 ++++++++++++++ build/bootstrap-rating-input.min.js | 2 +- build/bootstrap-rating-input.min.js~ | 1 - demo.html | 9 +++++++-- 4 files changed, 22 insertions(+), 4 deletions(-) delete mode 100644 build/bootstrap-rating-input.min.js~ diff --git a/README.md b/README.md index daf12e2..693b399 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,20 @@ By default once you set a value it remains set and you can only change it by ano The content of `data-clearable` will appear as label for the link. You can set a space or a &nbsp; to make it appear as a naked close icon. +### Can I use custom icon classes? + +Now you can use custom icons thanks to the awesome contribution by [johncadigan](https://github.com/johncadigan). You can set different icon classes from gliphicons or even load icons from other libraries you're using. For instance here is how you generate a heart rating input with font awesome (You can see it working in the `demo.html` file): + + + +If you want to use [FontAwesome](http://fontawesome.io/), remember to include the library in your header: + +
+ ... + + ... +
+ ### I don't want to be forced to add the `rating` class to the inputs The `rating` class is used in combination with `input[type=number]` to let you autoload the rating plugin without coding anything, but you can apply this plugin to a input of any type by executing the method `rating` on a jQuery selection: diff --git a/build/bootstrap-rating-input.min.js b/build/bootstrap-rating-input.min.js index c74ac3c..d0a2f4b 100644 --- a/build/bootstrap-rating-input.min.js +++ b/build/bootstrap-rating-input.min.js @@ -1 +1 @@ -(function(e){e.fn.rating=function(){function n(t,n,r,i){var s=e(t).find("[data-value="+n+"]");s.removeClass(i).addClass(r);s.prevAll("[data-value]").removeClass(i).addClass(r);s.nextAll("[data-value]").removeClass(r).addClass(i)}function r(t,n,r){var i=e(t);i.find("[data-value]").removeClass(n).addClass(r)}function i(e,t){e.val(t).trigger("change");if(t===e.data("empty-value")){e.siblings(".rating-clear").hide()}else{e.siblings(".rating-clear").show()}}var t;for(t=this.length-1;t>=0;t--){var s,o,u=e(this[t]),a=u.data("max")||5,f=u.data("min")||0,l=u.val()||0,c=u.data("icon-lib")||"glyphicon";active=u.data("active-icon")||"glyphicon-star",inactive=u.data("inactive-icon")||"glyphicon-star-empty",clearable=u.data("clearable")||null,clearable_i=u.data("clearable-icon")||"glyphicon-remove",stars="";for(o=f;o<=a;o++){if(o<=l){stars+=[''].join("")}else{stars+=[''].join("")}}if(clearable){stars+=[' "].join("")}var h=u.clone(true).addClass("hidden").data("max",a).data("min",f).data("icon-lib",c).data("active-icon",active).data("inactive-icon",inactive);s=['
',stars,"
"].join("");u.replaceWith(e(s).append(h))}e(".rating-input").on("mouseenter","[data-value]",function(){var t=e(this);input=t.siblings("input");n(t.closest(".rating-input"),t.data("value"),input.data("active-icon"),input.data("inactive-icon"))}).on("mouseleave","[data-value]",function(){var t=e(this),i=t.siblings("input"),s=i.val(),o=i.data("min"),u=i.data("max"),a=i.data("active-icon"),f=i.data("inactive-icon");if(s>=o&&s<=u){n(t.closest(".rating-input"),s,a,f)}else{r(t.closest(".rating-input"),a,f)}}).on("click","[data-value]",function(t){var n=e(this),r=n.data("value"),s=n.siblings("input");i(s,r);t.preventDefault();return false}).on("click",".rating-clear",function(t){var n=e(this),s=n.siblings("input"),o=s.data("active-icon"),u=s.data("inactive-icon");i(s,s.data("empty-value"));r(n.closest(".rating-input"),o,u);t.preventDefault();return false}).each(function(){var t=e(this).find("input"),i=t.val(),s=t.data("min"),o=t.data("max");if(i!==""&&+i>=s&&+i<=o){n(this,i);e(this).find(".rating-clear").show()}else{t.val(t.data("empty-value"));r(this)}})};e(function(){if(e("input.rating[type=number]").length>0){e("input.rating[type=number]").rating()}})})(jQuery) +!function(a){a.fn.rating=function(){function b(b,c,d,e){var f=a(b).find("[data-value="+c+"]");f.removeClass(e).addClass(d),f.prevAll("[data-value]").removeClass(e).addClass(d),f.nextAll("[data-value]").removeClass(d).addClass(e)}function c(b,c,d){var e=a(b);e.find("[data-value]").removeClass(c).addClass(d)}function d(a,b){a.val(b).trigger("change"),b===a.data("empty-value")?a.siblings(".rating-clear").hide():a.siblings(".rating-clear").show()}var e;for(e=this.length-1;e>=0;e--){var f,g,h=a(this[e]),i=h.data("max")||5,j=h.data("min")||0,k=h.val()||0,l=h.data("icon-lib")||"glyphicon";for(active=h.data("active-icon")||"glyphicon-star",inactive=h.data("inactive-icon")||"glyphicon-star-empty",clearable=h.data("clearable")||null,clearable_i=h.data("clearable-icon")||"glyphicon-remove",stars="",g=j;i>=g;g++)stars+=k>=g?[''].join(""):[''].join("");clearable&&(stars+=[' "].join(""));var m=h.clone(!0).addClass("hidden").data("max",i).data("min",j).data("icon-lib",l).data("active-icon",active).data("inactive-icon",inactive);f=['
',stars,"
"].join(""),h.replaceWith(a(f).append(m))}a(".rating-input").on("mouseenter","[data-value]",function(){var c=a(this);input=c.siblings("input"),b(c.closest(".rating-input"),c.data("value"),input.data("active-icon"),input.data("inactive-icon"))}).on("mouseleave","[data-value]",function(){var d=a(this),e=d.siblings("input"),f=e.val(),g=e.data("min"),h=e.data("max"),i=e.data("active-icon"),j=e.data("inactive-icon");f>=g&&h>=f?b(d.closest(".rating-input"),f,i,j):c(d.closest(".rating-input"),i,j)}).on("click","[data-value]",function(b){var c=a(this),e=c.data("value"),f=c.siblings("input");return d(f,e),b.preventDefault(),!1}).on("click",".rating-clear",function(b){var e=a(this),f=e.siblings("input"),g=f.data("active-icon"),h=f.data("inactive-icon");return d(f,f.data("empty-value")),c(e.closest(".rating-input"),g,h),b.preventDefault(),!1}).each(function(){var d=a(this).find("input"),e=d.val(),f=d.data("min"),g=d.data("max");""!==e&&+e>=f&&g>=+e?(b(this,e),a(this).find(".rating-clear").show()):(d.val(d.data("empty-value")),c(this))})},a(function(){a("input.rating[type=number]").length>0&&a("input.rating[type=number]").rating()})}(jQuery); \ No newline at end of file diff --git a/build/bootstrap-rating-input.min.js~ b/build/bootstrap-rating-input.min.js~ deleted file mode 100644 index d459123..0000000 --- a/build/bootstrap-rating-input.min.js~ +++ /dev/null @@ -1 +0,0 @@ -(function(e){e.fn.rating=function(){function n(t,n,r,i){var s=e(t).find("[data-value="+n+"]");s.removeClass(i).addClass(r);s.prevAll("[data-value]").removeClass(i).addClass(r);s.nextAll("[data-value]").removeClass(r).addClass(i)}function r(t,n,r){var i=e(t);i.find("[data-value]").removeClass(n).addClass(r)}function i(e,t){e.val(t).trigger("change");if(t===e.data("empty-value")){e.siblings(".rating-clear").hide()}else{e.siblings(".rating-clear").show()}}var t;for(t=this.length-1;t>=0;t--){var s,o,u=e(this[t]),a=u.data("max")||5,f=u.data("min")||0,l=u.data("icon-lib")||"glyphicon";active=u.data("active-icon")||"glyphicon-star",inactive=u.data("inactive-icon")||"glyphicon-star-empty",clearable=u.data("clearable")||null,clearable_i=u.data("clearable-icon")||"glyphicon-remove",stars="";for(o=f;o<=a;o++){stars+=[''].join("")}if(clearable){stars+=[' "].join("")}var c=u.clone(true).addClass("hidden").data("max",a).data("min",f).data("icon-lib",l).data("active-icon",active).data("inactive-icon",inactive);s=['
',stars,"
"].join("");u.replaceWith(e(s).append(c))}e(".rating-input").on("mouseenter","[data-value]",function(){var t=e(this);input=t.siblings("input");n(t.closest(".rating-input"),t.data("value"),input.data("active-icon"),input.data("inactive-icon"))}).on("mouseleave","[data-value]",function(){var t=e(this),i=t.siblings("input"),s=i.val(),o=i.data("min"),u=i.data("max"),a=i.data("active-icon"),f=i.data("inactive-icon");if(s>=o&&s<=u){n(t.closest(".rating-input"),s,a,f)}else{r(t.closest(".rating-input"),a,f)}}).on("click","[data-value]",function(t){var n=e(this),r=n.data("value"),s=n.siblings("input");i(s,r);t.preventDefault();return false}).on("click",".rating-clear",function(t){var n=e(this),s=n.siblings("input"),o=s.data("active-icon"),u=s.data("inactive-icon");i(s,s.data("empty-value"));r(n.closest(".rating-input"),o,u);t.preventDefault();return false}).each(function(){var t=e(this).find("input"),i=t.val(),s=t.data("min"),o=t.data("max");if(i!==""&&+i>=s&&+i<=o){n(this,i);e(this).find(".rating-clear").show()}else{t.val(t.data("empty-value"));r(this)}})};e(function(){if(e("input.rating[type=number]").length>0){e("input.rating[type=number]").rating()}})})(jQuery) diff --git a/demo.html b/demo.html index 31b78f1..880fbb1 100644 --- a/demo.html +++ b/demo.html @@ -2,7 +2,8 @@ Bootstrap Rating Input Demo - + + @@ -21,8 +22,12 @@ -

The Bootstrap Rating Input in action...

+

The Original Bootstrap Rating Input in action...

My rating:

+ +

The Bootstrap Rating input with custom icon classes by johncadigan

+ +

My rating:

\ No newline at end of file