Projet

Général

Profil

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

Frédéric Péters, 03 août 2020 09:34

Télécharger (4,02 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
725 725 
}
726 726 

  		




  727
  727
  
    
// evaluation field

  		




  728
  
  
    
.star-choice {

  		




  729
  
  
    
	span {

  		




  
  728
  
    
.template-evaluation label.star-choice,

  		




  
  729
  
    
div.star-choice {

  		




  
  730
  
    
	span.star {

  		




  730
  731
  
    
		&::before {

  		




  
  732
  
    
			position: static;

  		




  
  733
  
    
			height: auto;

  		




  
  734
  
    
			width: auto;

  		




  
  735
  
    
			border: none;

  		




  731
  736
  
    
			font-family: FontAwesome;

  		




  732
  737
  
    
			content: "\f006";  // star-o

  		




  733
  738
  
    
			color: #888;

  		




  ......




  739
  744
  
    
			content: "\f005"; // star

  		




  740
  745
  
    
			color: #ffaa00;

  		




  741
  746
  
    
		}

  		




  742
  
  
    
		&:hover::before {

  		




  743
  
  
    
			transform: scale(1.4);

  		




  744
  
  
    
			opacity: 0.8;

  		




  
  747
  
    
	}

  		




  
  748
  
    
	input[type=radio]:hover + span.star::before,

  		




  
  749
  
    
	input[type=radio]:focus + span.star::before,

  		




  
  750
  
    
	span.star:hover::before {

  		




  
  751
  
    
		transform: scale(1.4);

  		




  
  752
  
    
		opacity: 0.8;

  		




  
  753
  
    
	}

  		




  
  754
  
    
}

  		




  
  755
  
    

  		




  
  756
  
    
.RadiobuttonsWidget.template-evaluation {

  		




  
  757
  
    
	br {

  		




  
  758
  
    
		display: none;

  		




  
  759
  
    
	}

  		




  
  760
  
    
	input {

  		




  
  761
  
    
		position: absolute;

  		




  
  762
  
    
		opacity: 0;

  		




  
  763
  
    
		margin: 0;

  		




  
  764
  
    
	}

  		




  
  765
  
    
	input:focus + span.star {

  		




  
  766
  
    
		@if $widget-focus-outline == none {

  		




  
  767
  
    
			outline: $widget-border;

  		




  
  768
  
    
			@if extract-color($widget-border) == transparent {

  		




  
  769
  
    
				outline-color: #444;

  		




  
  770
  
    
			}

  		




  
  771
  
    
			outline-style: dotted;

  		




  
  772
  
    
		} @else {

  		




  
  773
  
    
			outline: $widget-focus-outline;

  		




  
  774
  
    
			outline-offset: $widget-focus-outline-offset;

  		




  745
  775
  
    
		}

  		




  
  776
  
    

  		




  
  777
  
    
	}

  		




  
  778
  
    
	input + span::after {

  		




  
  779
  
    
		// cancel custom radio rendering

  		




  
  780
  
    
		display: none;

  		




  
  781
  
    
	}

  		




  
  782
  
    
	label {

  		




  
  783
  
    
		margin-right: 0;

  		




  
  784
  
    
	}

  		




  
  785
  
    
	input + span {

  		




  
  786
  
    
		padding-left: 0;

  		




  
  787
  
    
	}

  		




  
  788
  
    
	.star-label {

  		




  
  789
  
    
		@include sr-only();

  		




  746
  790
  
    
	}

  		




  747
  791
  
    
}

  		




  748
  792
  
    

  		












  

    
      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"></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
  
  
    
-