Produits Entr'ouvert » Intégrations graphiques Publik

{% extends "qommon/forms/widgets/select_jsonp.html" %}

{% load i18n %}

{% block widget-control %}

<style>

  div.gru-content .franceconnect--button {

      background: #034ea2;

      width: 300px;

      display: block;

  }

  .franceconnect--image {

      float: left;

      width: 100px;

      height: 100px;

      display: block;

  }

  .franceconnect--data {

      display: none;

  }

  .franceconnect--caption {

      float: right;

      display: block;

      width: 150px;

      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

      font-weight: 100;

      text-align: center;

  }

  .franceconnect--text {

      width: calc(100% - 3em);

  }

  .franceconnect--clear {

      float: right;

  }

</style>

<div class="wcs-widget-select2-container">

  <button class="franceconnect--button" >

    <img class="franceconnect--image" src="https://fcp.integ01.dev-franceconnect.fr/images/fc-avatar.png"/>

    <span class="franceconnect--caption">Valider mon identité avec FranceConnect</span>

  </button>

  <div class="franceconnect--result" data-initial-display-value="{{widget.get_display_value|default_if_none:''}}">

    <span class="franceconnect--value"><span>

  </div>

  <div class="franceconnect--data">

    <input class="franceconnect--input" type="hidden" id="form_{{widget.name}}" name="{{widget.name}}" {% if widget.value %}value="{{ widget.value }}" {% endif %}data-select2-url="{{widget.get_select2_url}}" data-initial-display-value="{{widget.get_display_value|default_if_none:''}}"/>

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

    <span class="franceconnect--clear"><a>&#128465;</a></span>

  </div>

</div>

<script>

$(function () {

    const popup = function(url, title, w, h) {

        // Method to open a centered popup on desktop browsers using window.open(),

        // it's useless on mobile which will always open a tab.

        // I don't know if I can force opening a tab on desktop too.

        const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;

        const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;

        const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;

        const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

        const systemZoom = width / window.screen.availWidth;

        const left = (width - w) / 2 / systemZoom + dualScreenLeft

        const top = (height - h) / 2 / systemZoom + dualScreenTop

        const popup = window.open(url, title, 

          `

          scrollbars=yes,

          width=${w / systemZoom}, 

          height=${h / systemZoom}, 

          top=${top}, 

          left=${left}

          `

        )

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

        return popup;

    };

   const $input = $('#form_{{widget.name}}');

   const $input_display_value = $('<input>', {

          type: 'hidden',

          name: $input.attr('name') + '_display',

          value: $input.data('initial-display-value')

   });

   $input_display_value.insertAfter($input);

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

   const ds_url = $input.data('select2-url');

   const $button = $container.find('button');

   if ($input.val() != '') {

       $container.find('.franceconnect--text').val($input.data('initial-display-value'));

       $container.find('.franceconnect--data').show();

       $container.find('.franceconnect--button').hide();

   }

   var popup_window = null;

   /* Button to reset the data and show the FC button again. */

   $container.find('.franceconnect--clear').on('click', function () {

       $container.find('.franceconnect--button').show();

       $input.val('');

       $input_display_value.val('');

       $container.find('.franceconnect--data').hide();

   });

   /* Use a query call to the fake data source to obtain the URL for the popup.

    * The `q` parameter is mandatory to respect the contract of the

    * Autocomplete w.c.s. API.

    */

   var service_origin = null;

   $.getJSON(ds_url + '?q=', function (response) {

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

       service_origin = response.data[0].service_origin;

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

           event.preventDefault();

           if (popup_window) {

               try {

                   popup_window.close();

               } finally {

               }

           }

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

               url = init_request_url + '?origin=' + encodeURIComponent(window.location.origin);

           } else {

               url = init_request_url + '&origin=' + encodeURIComponent(window.location.origin);

           }

           popup_window = popup(url, 'FranceConnect', 1000, 670);

       });

   });

   /* React to response from the popup sent using window.opener.postMessage() :

    */

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

       const origin = event.originalEvent.origin;

       if (origin != service_origin) {

           console.log('wrong origin', origin, service_origin);

           /* ignore message from wrong origin */

           return;

       }

       $container.find('.franceconnect--text').val(event.originalEvent.data.text);

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

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

       $container.find('.franceconnect--data').show();

       $container.find('.franceconnect--button').hide();

       if (popup_window) {

           try {

               popup_window.close();

           } finally {

           }

       }

       popup_window = null;

   });

});

</script>

{% endblock %}