Produits Entr'ouvert » Intégrations graphiques Publik

div.template-franceconnect {

	.franceconnect--button {

		display: block;

		width: 160px;

		background-image: url('../img/fc-avatar.png');

		background-repeat: no-repeat;

		background-size: auto 85%;

		padding: 5px 2px 5px 40px;;

		background-position: 5px center;

		color: white;

		font-size: 85%;

		cursor: pointer;

		&:hover {

			background-image: url('../img/fc-avatar.png');

			background-repeat: no-repeat;

			background-size: auto 85%;

			padding: 5px 2px 5px 40px;;

			background-position: 5px center;

		}

	}

	.franceconnect--data {

		position: relative;

	}

	.franceconnect--text {

		width: calc(100% - 1em);

		display: none;

	}

	.franceconnect--clear {

		position: absolute;

		right: 0;

		bottom: 0.5em;

		display: none;

	}

	.franceconnect--clear::before {

		font-family: FontAwesome;

		content: "\f057";

		color: $link-color;

	}

	.franceconnect--error {

		color: $error-color;

		font-size: 90%;

	}

}

@import 'fc';

{% extends "qommon/forms/widget.html" %}

{% block widget-control %}

<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 %} />

<input id="form_{{widget.name}}_display" type="text" name="{{widget.name}}_display" style="display: none" readonly />

<div class="franceconnect--data">

  <a class="franceconnect--clear" title="Supprimer"></a>

  <button class="franceconnect--button">Obtenir avec FranceConnect</button>

  <span class="franceconnect--error" style="display: none">Une erreur s'est produite lors de la récupération des données.</span>

</div>

<script>

$(function () {

  const fc_popup = function(url) {

        const height = 670;

        const width = 1000;

        const left = (screen.width/2)-(width/2);

        const top = (screen.height/2)-(height/2);

        const popup = window.open(url, 'FranceConnect',

          'scrollbars=true, width='+width+', height='+height+',top='+top+', left='+left+', resizable=no,copyhistory=no'

        );

        if (window.focus) popup.focus();

        return popup;

    };

   const $input = $('div.template-franceconnect #form_{{widget.name}}');

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

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

   const $fc_button = $container.find('.franceconnect--button');

   const $fc_clear = $container.find('a.franceconnect--clear');

   const $fc_error = $container.find('.franceconnect--error');

   $fc_clear.on('click', function () {

       $fc_button.show();

       $input.val('');

       $(this).hide();

       $input_display_value.hide();

       $input_display_value.val('');

   });

   if ($input.val()) {

       $input_display_value.val($input.data('initial-display-value'));

       $input_display_value.show();

       $fc_clear.show();

       $fc_button.hide();

   }

   var popup_window = null;

   var init_request_url = null;

  $.getJSON($input.data('url') + '?q=', function (response) {

       init_request_url = response.data[0].init_request_url;

       $fc_button.on('click', function (event) {

           event.preventDefault();

           if (popup_window) {

               popup_window.close();

           }

           if (init_request_url.indexOf('?') != -1) {

               popup_window = fc_popup(init_request_url + '&origin=' + window.location.href);

           } else {

               popup_window = fc_popup(init_request_url + '?origin=' + window.location.href);

           }

       });

   });

  $(window).on('message', function (event) {

      if(init_request_url.indexOf(event.originalEvent.origin) == -1) {

        return

      }

      if (!event.originalEvent.data.error) {

          $input.val(event.originalEvent.data.id);

          $input_display_value.val(event.originalEvent.data.text);

          $input_display_value.show();

          $fc_error.hide();

          $fc_button.hide();

          $fc_clear.show();

      } else {

          $fc_error.show();

          console.log(event.originalEvent.data.error);

          console.log(event.originalEvent.data.data);

      }

      if (popup_window) {

          popup_window.close();

      }

      popup_window = null;

   });

});

</script>

{% endblock %}