Projet

Général

Profil

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

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

Télécharger (4,01 ko)

Voir les différences: 

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
  
  
    
-