Project

General

Profile

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

Frédéric Péters, 05 November 2020 08:58 AM

Download (4.01 KB)

View differences:

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

 static/includes/_misc.scss                    | 52 +++++++++++++++++--
 .../widgets/radiobuttons--evaluation.html     | 31 +++++++++++
 .../forms/widgets/select--evaluation.html     |  2 +-
 3 files changed, 79 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
		@extend .sr-only;
769
	}
770
	input:focus + span.star {
771
		@if $widget-focus-outline == none {
772
			outline: $widget-border;
773
			@if extract-color($widget-border) == transparent {
774
				outline-color: #444;
775
			}
776
			outline-style: dotted;
777
		} @else {
778
			outline: $widget-focus-outline;
779
			outline-offset: $widget-focus-outline-offset;
752 780
		}
781

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

  
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
-