Permettre de supprimer la première étoile sur les listes affichées sous forme d'étoiles (vote, enquête de satisfaction) (#88084) #533

Open
nroche wants to merge 2 commits from wip/88084-unselect-evaluation-stars into main
2 changed files with 18 additions and 4 deletions

View File

@ -14,14 +14,14 @@ div.star-choice {
display: inline-block;
transition: transform ease 0.2s;
}
&.selected::before, &:hover::before {
&.selected::before, &.selected:hover::before {
content: "\f005"; // star
color: #ffaa00;
}
}
input[type=radio]:hover + span.star::before,
input[type=radio]:focus + span.star::before,
span.star:hover::before {
span.star.selected:hover::before {
transform: scale(1.4);
opacity: 0.8;
}

View File

@ -11,13 +11,20 @@
</select>
<div class="star-choice">
{% for option in widget.get_options %}
<span class="star" data-index="{{ forloop.counter }}"></span>
<span role="button" class="star" data-index="{{ forloop.counter }}"></span>
{% endfor %}
</div>
{% if not widget.is_required %}
<a role="button" title="remove evaluation" class="remove-evaluation" id="remove-evaluation-{{widget.name}}" hidden>
Remove Evaluation
</a>
{% endif %}
<script>
$(function() {
var $widget = $('[name="{{widget.name}}"]');
$widget.parent().find('.star-choice span').on('click', function() {
var $remove_evaluation = $('#remove-evaluation-{{widget.name}}');
var $stars = $widget.parent().find('.star-choice .star');
$stars.on('click', function() {
if ($(this).hasClass('selected')) {
$(this).nextAll().removeClass('selected');
} else {
@ -26,8 +33,15 @@
$(this).nextAll().removeClass('selected');
}
$widget.find('option[data-index=' + $(this).data('index') + ']').prop('selected', true);
$remove_evaluation.prop('hidden', false);
});
$widget.parent().find('.star-choice [data-index=' + $widget.find('option:selected').data('index') + ']').trigger('click');
$remove_evaluation.on('click', function(){
var $no_value_option = $widget.find('option').eq(0);
$no_value_option.prop('selected', true);
$stars.removeClass('selected');
$remove_evaluation.prop('hidden', true);
})
});
</script>
{% endblock %}