Projet

Général

Profil

0001-templates-add-template-for-FC-information-retrieval-.patch

Serghei Mihai, 07 juin 2021 17:59

Télécharger (12,7 ko)

Voir les différences:

Subject: [PATCH] templates: add template for FC information retrieval (#54003)

 static/img/fc-avatar.png                      | Bin 0 -> 5304 bytes
 static/includes/_fc.scss                      |  48 +++++++++
 static/includes/_publik.scss                  |   1 +
 .../widgets/select_jsonp--franceconnect.html  |  94 ++++++++++++++++++
 4 files changed, 143 insertions(+)
 create mode 100644 static/img/fc-avatar.png
 create mode 100644 static/includes/_fc.scss
 create mode 100644 templates/qommon/forms/widgets/select_jsonp--franceconnect.html
static/includes/_fc.scss
1
div.template-franceconnect {
2
	.franceconnect--button {
3
		display: block;
4
		width: 160px;
5
		background-image: url('../img/fc-avatar.png');
6
		background-repeat: no-repeat;
7
		background-size: auto 85%;
8
		padding: 5px 2px 5px 40px;;
9
		background-position: 5px center;
10
		color: white;
11
		font-size: 85%;
12
		cursor: pointer;
13
		&:hover {
14
			background-image: url('../img/fc-avatar.png');
15
			background-repeat: no-repeat;
16
			background-size: auto 85%;
17
			padding: 5px 2px 5px 40px;;
18
			background-position: 5px center;
19
		}
20
	}
21

  
22
	.franceconnect--data {
23
		position: relative;
24
	}
25

  
26
	.franceconnect--text {
27
		width: calc(100% - 1em);
28
		display: none;
29
	}
30

  
31
	.franceconnect--clear {
32
		position: absolute;
33
		right: 0;
34
		bottom: 0.5em;
35
		display: none;
36
	}
37

  
38
	.franceconnect--clear::before {
39
		font-family: FontAwesome;
40
		content: "\f057";
41
		color: $link-color;
42
	}
43

  
44
	.franceconnect--error {
45
		color: $error-color;
46
		font-size: 90%;
47
	}
48
}
static/includes/_publik.scss
14 14
@import 'carrousel';
15 15
@import 'back-top';
16 16
@import 'library';
17
@import 'fc';
templates/qommon/forms/widgets/select_jsonp--franceconnect.html
1
{% extends "qommon/forms/widget.html" %}
2

  
3
{% block widget-css-classes %}{{ block.super }} widget-readonly{% endblock %}
4

  
5
{% block widget-control %}
6
<input id="form_{{widget.name}}" type="hidden" name="{{widget.name}}" data-initial-display-value="{{widget.get_display_value|default_if_none:''}}" data-url="{{widget.get_select2_url}}"{% if widget.value %} value="{{ widget.value }}"{% endif %} />
7
<input id="form_{{widget.name}}_display" type="text" name="{{widget.name}}_display" style="display: none" readonly />
8

  
9
<div class="franceconnect--data">
10
  <a class="franceconnect--clear" title="Supprimer"></a>
11
  <button class="franceconnect--button">Obtenir avec FranceConnect</button>
12
  <span class="franceconnect--error" style="display: none">Une erreur s'est produite lors de la récupération des données.</span>
13
</div>
14

  
15
<script>
16
$(function () {
17
  const fc_popup = function(url) {
18
        const height = 670;
19
        const width = 1000;
20
        const left = (screen.width/2)-(width/2);
21
        const top = (screen.height/2)-(height/2);
22
        const popup = window.open(url, 'FranceConnect',
23
          'scrollbars=true, width='+width+', height='+height+',top='+top+', left='+left+', resizable=no,copyhistory=no'
24
        );
25
        if (window.focus) popup.focus();
26
        return popup;
27
    };
28

  
29
   const $input = $('div.template-franceconnect #form_{{widget.name}}');
30
   const $input_display_value = $('div.template-franceconnect #form_{{widget.name}}_display');
31

  
32
   const $container = $input.siblings('.franceconnect--data');
33

  
34
   const $fc_button = $container.find('.franceconnect--button');
35
   const $fc_clear = $container.find('a.franceconnect--clear');
36
   const $fc_error = $container.find('.franceconnect--error');
37

  
38
   $fc_clear.on('click', function () {
39
       $fc_button.show();
40
       $input.val('');
41
       $(this).hide();
42
       $input_display_value.hide();
43
       $input_display_value.val('');
44
   });
45

  
46
   if ($input.val()) {
47
       $input_display_value.val($input.data('initial-display-value'));
48
       $input_display_value.show();
49
       $fc_clear.show();
50
       $fc_button.hide();
51
   }
52

  
53
   var popup_window = null;
54
   var init_request_url = null;
55

  
56
  $.getJSON($input.data('url') + '?q=', function (response) {
57
       init_request_url = response.data[0].init_request_url;
58
       $fc_button.on('click', function (event) {
59
           event.preventDefault();
60
           if (popup_window) {
61
               popup_window.close();
62
           }
63
           if (init_request_url.indexOf('?') != -1) {
64
               popup_window = fc_popup(init_request_url + '&origin=' + window.location.href);
65
           } else {
66
               popup_window = fc_popup(init_request_url + '?origin=' + window.location.href);
67
           }
68
       });
69
   });
70

  
71
  $(window).on('message', function (event) {
72
      if(init_request_url.indexOf(event.originalEvent.origin) == -1) {
73
        return
74
      }
75
      if (!event.originalEvent.data.error) {
76
          $input.val(event.originalEvent.data.id);
77
          $input_display_value.val(event.originalEvent.data.text);
78
          $input_display_value.show();
79
          $fc_error.hide();
80
          $fc_button.hide();
81
          $fc_clear.show();
82
      } else {
83
          $fc_error.show();
84
          console.log(event.originalEvent.data.error);
85
          console.log(event.originalEvent.data.data);
86
      }
87
      if (popup_window) {
88
          popup_window.close();
89
      }
90
      popup_window = null;
91
   });
92
});
93
</script>
94
{% endblock %}
0
-