|
1 |
{% extends "qommon/forms/widgets/select_jsonp.html" %}
|
|
2 |
{% load i18n %}
|
|
3 |
{% block widget-control %}
|
|
4 |
<style>
|
|
5 |
div.gru-content .franceconnect--button {
|
|
6 |
background: #034ea2;
|
|
7 |
width: 300px;
|
|
8 |
display: block;
|
|
9 |
}
|
|
10 |
.franceconnect--image {
|
|
11 |
float: left;
|
|
12 |
width: 100px;
|
|
13 |
height: 100px;
|
|
14 |
display: block;
|
|
15 |
}
|
|
16 |
.franceconnect--data {
|
|
17 |
display: none;
|
|
18 |
}
|
|
19 |
.franceconnect--caption {
|
|
20 |
float: right;
|
|
21 |
display: block;
|
|
22 |
width: 150px;
|
|
23 |
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
|
24 |
font-weight: 100;
|
|
25 |
text-align: center;
|
|
26 |
}
|
|
27 |
.franceconnect--text {
|
|
28 |
width: calc(100% - 3em);
|
|
29 |
}
|
|
30 |
.franceconnect--clear {
|
|
31 |
float: right;
|
|
32 |
}
|
|
33 |
</style>
|
|
34 |
<div class="wcs-widget-select2-container">
|
|
35 |
<button class="franceconnect--button" >
|
|
36 |
<img class="franceconnect--image" src="https://fcp.integ01.dev-franceconnect.fr/images/fc-avatar.png"/>
|
|
37 |
<span class="franceconnect--caption">Valider mon identité avec FranceConnect</span>
|
|
38 |
</button>
|
|
39 |
<div class="franceconnect--result" data-initial-display-value="{{widget.get_display_value|default_if_none:''}}">
|
|
40 |
<span class="franceconnect--value"><span>
|
|
41 |
</div>
|
|
42 |
<div class="franceconnect--data">
|
|
43 |
<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:''}}"/>
|
|
44 |
<input class="franceconnect--text" readonly/>
|
|
45 |
<span class="franceconnect--clear"><a>🗑</a></span>
|
|
46 |
</div>
|
|
47 |
</div>
|
|
48 |
<script>
|
|
49 |
$(function () {
|
|
50 |
const popup = function(url, title, w, h) {
|
|
51 |
// Fixes dual-screen position Most browsers Firefox
|
|
52 |
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
|
|
53 |
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
|
|
54 |
|
|
55 |
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
|
|
56 |
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
|
|
57 |
|
|
58 |
const systemZoom = width / window.screen.availWidth;
|
|
59 |
const left = (width - w) / 2 / systemZoom + dualScreenLeft
|
|
60 |
const top = (height - h) / 2 / systemZoom + dualScreenTop
|
|
61 |
const popup = window.open(url, title,
|
|
62 |
`
|
|
63 |
scrollbars=yes,
|
|
64 |
width=${w / systemZoom},
|
|
65 |
height=${h / systemZoom},
|
|
66 |
top=${top},
|
|
67 |
left=${left}
|
|
68 |
`
|
|
69 |
)
|
|
70 |
|
|
71 |
if (window.focus) popup.focus();
|
|
72 |
return popup;
|
|
73 |
};
|
|
74 |
|
|
75 |
const $input = $('#form_{{widget.name}}');
|
|
76 |
const $input_display_value = $('<input>', {
|
|
77 |
type: 'hidden',
|
|
78 |
name: $input.attr('name') + '_display',
|
|
79 |
value: $input.data('initial-display-value')
|
|
80 |
});
|
|
81 |
$input_display_value.insertAfter($input);
|
|
82 |
const $container = $input.parents('.wcs-widget-select2-container');
|
|
83 |
const ds_url = $input.data('select2-url');
|
|
84 |
const $button = $container.find('button');
|
|
85 |
|
|
86 |
if ($input.val() != '') {
|
|
87 |
$container.find('.franceconnect--text').val($input.data('initial-display-value'));
|
|
88 |
$container.find('.franceconnect--data').show();
|
|
89 |
$container.find('.franceconnect--button').hide();
|
|
90 |
}
|
|
91 |
|
|
92 |
var popup_window = null;
|
|
93 |
$container.find('.franceconnect--clear').on('click', function () {
|
|
94 |
$container.find('.franceconnect--button').show();
|
|
95 |
$input.val('');
|
|
96 |
$input_display_value.val('');
|
|
97 |
$container.find('.franceconnect--data').hide();
|
|
98 |
});
|
|
99 |
|
|
100 |
$(window).on('message', function (event) {
|
|
101 |
console.log(event.originalEvent.data.text);
|
|
102 |
$container.find('.franceconnect--text').val(event.originalEvent.data.text);
|
|
103 |
$input.val(event.originalEvent.data.id);
|
|
104 |
$input_display_value.val(event.originalEvent.data.text);
|
|
105 |
$container.find('.franceconnect--data').show();
|
|
106 |
$container.find('.franceconnect--button').hide();
|
|
107 |
|
|
108 |
if (popup_window) {
|
|
109 |
try {
|
|
110 |
popup_window.close();
|
|
111 |
} finally {
|
|
112 |
}
|
|
113 |
}
|
|
114 |
popup_window = null;
|
|
115 |
});
|
|
116 |
|
|
117 |
$.getJSON(ds_url + '?q=', function (response) {
|
|
118 |
const init_request_url = response.data[0].init_request_url;
|
|
119 |
console.log(init_request_url);
|
|
120 |
$button.on('click', function (event) {
|
|
121 |
event.preventDefault();
|
|
122 |
if (popup_window) {
|
|
123 |
try {
|
|
124 |
popup_window.close();
|
|
125 |
} finally {
|
|
126 |
}
|
|
127 |
}
|
|
128 |
popup_window = popup(init_request_url + '?test=1&origin=' + window.location.origin, 'FranceConnect', 1000, 670);
|
|
129 |
});
|
|
130 |
});
|
|
131 |
});
|
|
132 |
</script>
|
|
133 |
{% endblock %}
|
0 |
|
-
|