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/widgets/select_jsonp.html" %}

{% block widget-control %}

<style>

  .select2-container {

      display: none;

  }

</style>

{{ block.super }}

<div class="franceconnect--data">

  <input class="franceconnect--text" readonly />

  <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 popup = window.open(url, 'FranceConnect',

          scrollbars=true,

          width=1000,

          height=670,

          top=0,

          left=0

        );

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

        return popup;

    };

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

   const $input_display_value = $("<input name=['{{widget.name}}_display]'>");

   const $container = $input.parents('.wcs-widget-select2-container').siblings('.franceconnect--data');

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

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

   const $fc_text = $container.find('.franceconnect--text');

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

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

       $fc_button.show();

       $input.val('');

       $input_display_value.val('');

       $(this).hide();

       $fc_text.hide();

   });

   if ($input.val()) {

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

       $fc_text.show();

       $fc_clear.show();

       $fc_button.hide();

   }

   var popup_window = null;

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

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

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

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

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

          $fc_text.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;

   });

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

       const init_request_url = response.data[0].init_request_url;

       console.log(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.origin);

           } else {

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

           }

       });

   });

});

</script>

{% endblock %}