Projet

Général

Profil

0001-a11y-add-evaluation-stars-rendering-using-radio-butt.patch

Frédéric Péters, 03 novembre 2020 10:50

Télécharger (4,04 ko)

Voir les différences:

Subject: [PATCH] a11y: add "evaluation stars" rendering using radio buttons
 (#40886)

 static/includes/_misc.scss                    | 54 +++++++++++++++++--
 .../widgets/radiobuttons--evaluation.html     | 31 +++++++++++
 .../forms/widgets/select--evaluation.html     |  2 +-
 3 files changed, 81 insertions(+), 6 deletions(-)
 create mode 100644 templates/qommon/forms/widgets/radiobuttons--evaluation.html
static/includes/_misc.scss
732 732
}
733 733

  
734 734
// evaluation field
735
.star-choice {
736
	span {
735
.template-evaluation label.star-choice,
736
div.star-choice {
737
	span.star {
737 738
		&::before {
739
			position: static;
740
			height: auto;
741
			width: auto;
742
			border: none;
738 743
			font-family: FontAwesome;
739 744
			content: "\f006";  // star-o
740 745
			color: #776;
......
746 751
			content: "\f005"; // star
747 752
			color: #ffaa00;
748 753
		}
749
		&:hover::before {
750
			transform: scale(1.4);
751
			opacity: 0.8;
754
	}
755
	input[type=radio]:hover + span.star::before,
756
	input[type=radio]:focus + span.star::before,
757
	span.star:hover::before {
758
		transform: scale(1.4);
759
		opacity: 0.8;
760
	}
761
}
762

  
763
.RadiobuttonsWidget.template-evaluation {
764
	br {
765
		display: none;
766
	}
767
	input {
768
		position: absolute;
769
		opacity: 0;
770
		margin: 0;
771
	}
772
	input:focus + span.star {
773
		@if $widget-focus-outline == none {
774
			outline: $widget-border;
775
			@if extract-color($widget-border) == transparent {
776
				outline-color: #444;
777
			}
778
			outline-style: dotted;
779
		} @else {
780
			outline: $widget-focus-outline;
781
			outline-offset: $widget-focus-outline-offset;
752 782
		}
783

  
784
	}
785
	input + span::after {
786
		// cancel custom radio rendering
787
		display: none;
788
	}
789
	label {
790
		margin-right: 0;
791
	}
792
	input + span {
793
		padding-left: 0;
794
	}
795
	.star-label {
796
		@include sr-only();
753 797
	}
754 798
}
755 799

  
templates/qommon/forms/widgets/radiobuttons--evaluation.html
1
{% extends "qommon/forms/widget.html" %}
2
{% load qommon %}
3
{% block widget-control %}
4

  
5
{% for option in widget.get_options %}
6
<label class="star-choice"
7
   title="{{ option.label }}"
8
   {% if option.disabled %}class="disabled"{% endif %}><input
9
   {% if option.selected %}checked="checked"
10
   {% elif widget.readonly or option.disabled %}disabled="disabled"{% endif %}
11
   {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}
12
   type="radio" name="{{ widget.name }}"
13
   value="{{ option.value }}"><span class="star" aria-hidden="true"></span><span class="star-label">{{ option.label }}</span></label>
14
   {% if not forloop.last %}{{ widget.delim|safe }}{% endif %}
15
{% endfor %}
16

  
17
<script>
18
$(function() {
19
  var $widget = $('#form_label_{{widget.name}}').parents('div.widget');
20
  $widget.find('.star-choice input').on('change', function() {
21
    if ($(this).is(':checked')) {
22
      $(this).parent().nextAll().find('.star').removeClass('selected');
23
      $(this).parent().prevAll().find('.star').addClass('selected');
24
      $(this).next().addClass('selected');
25
    }
26
  });
27
  $widget.find('input:checked').trigger('change');
28
});
29
</script>
30

  
31
{% endblock %}
templates/qommon/forms/widgets/select--evaluation.html
11 11
</select>
12 12
<div class="star-choice">
13 13
{% for option in widget.get_options %}
14
  <span data-index="{{ forloop.counter }}"></span>
14
  <span class="star" data-index="{{ forloop.counter }}"></span>
15 15
{% endfor %}
16 16
</div>
17 17
<script>
18
-