diff --git a/app/assets/images/star-rating.gif b/app/assets/images/star-rating.gif deleted file mode 100644 index 22edb43a4..000000000 Binary files a/app/assets/images/star-rating.gif and /dev/null differ diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index b12ee650b..5cc0d43c8 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -16,7 +16,7 @@ //= require rails-ujs //= require activestorage //= require chosen.jquery -//= require 'jsimple-star-rating.min.js' +//= require feedback-rating //= require pickadate/picker //= require pickadate/picker.date //= require pickadate/picker.time diff --git a/app/assets/javascripts/feedback-rating.js b/app/assets/javascripts/feedback-rating.js new file mode 100644 index 000000000..232381c46 --- /dev/null +++ b/app/assets/javascripts/feedback-rating.js @@ -0,0 +1,62 @@ +// Progressively enhance a .rating container of radio buttons into clickable stars. + +(function () { + function initRating(container) { + const radios = container.querySelectorAll('input[type="radio"]'); + const labels = container.querySelectorAll('label'); + + if (radios.length === 0 || labels.length === 0) return; + + function updateVisuals(checkedValue) { + labels.forEach(function (label, index) { + label.classList.toggle('selected', index < checkedValue); + }); + } + + function previewVisuals(previewValue) { + labels.forEach(function (label, index) { + label.classList.toggle('preview', index < previewValue); + }); + } + + function restoreVisuals() { + const checked = Array.from(radios).find(function (radio) { return radio.checked; }); + updateVisuals(checked ? parseInt(checked.value, 10) : 0); + previewVisuals(0); + } + + labels.forEach(function (label, index) { + const radio = radios[index]; + + label.addEventListener('click', function (event) { + if (radio.checked) { + event.preventDefault(); + radio.checked = false; + updateVisuals(0); + } + }); + + label.addEventListener('mouseenter', function () { + previewVisuals(index + 1); + }); + + radio.addEventListener('change', function () { + updateVisuals(index + 1); + }); + }); + + container.addEventListener('mouseleave', restoreVisuals); + + restoreVisuals(); + } + + function init() { + document.querySelectorAll('.rating').forEach(initRating); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); diff --git a/app/assets/javascripts/jsimple-star-rating.min.js b/app/assets/javascripts/jsimple-star-rating.min.js deleted file mode 100644 index 9328209ec..000000000 --- a/app/assets/javascripts/jsimple-star-rating.min.js +++ /dev/null @@ -1,10 +0,0 @@ -/* - * ---------------------------------------- * - * jSimple Star Rating.min * - * JavaScript * - * v2.0.0 * - * Matt O'Neill | www.matt-oneill.co.uk * - * ---------------------------------------- * - */ - -(function (e) { e.fn.starRating = function (t) { return this.each(function () { var n = e(this); n.append("