+
+
+
+
+
+
+
+ ${[55, 70, 90, 60, 75].map(w => `
+
+
+ `).join('')}
+ `;
+
+ function initDrawer() {
+ if ($('#app-drawer').length) return;
+ $('body').append(`
+
+
+
+
+
+
+
+ `);
+ }
+
+ function openDrawer(options) {
+ const $drawer = $('#app-drawer');
+ const $body = $drawer.find('.drawer-body');
+
+ $drawer.find('.drawer-title').text(options.title || 'Détail');
+ if (options.width) {
+ $drawer.css('width', parseInt(options.width, 10) + 'px');
+ } else {
+ $drawer.css('width', '');
+ }
+
+ $body.html(SKELETON_HTML);
+ $drawer.addClass('is-open');
+
+ const ajaxOptions = {
+ url: options.url,
+ method: 'GET',
+ success: function (html) {
+ $body.html(html);
+ },
+ error: function () {
+ $body.html('
+
+
+
+
+ Erreur lors du chargement.
'); + } + }; + + if (options.params && Object.keys(options.params).length) { + ajaxOptions.method = 'POST'; + ajaxOptions.data = options.params; + } + + $.ajax(ajaxOptions); + } + + function closeDrawer() { + $('#app-drawer').removeClass('is-open'); + } + + function parseParams(raw) { + if (!raw) return {}; + try { + return JSON.parse(raw); + } catch (e) { + return {}; + } + } + + $(function () { + initDrawer(); + + $(document).on('click', '[data-open-in="drawer"]', function (e) { + e.preventDefault(); + const $el = $(this); + + openDrawer({ + url: $el.data('dialog-url') || $el.attr('href'), + title: $el.data('dialog-title') || $el.attr('title') || 'Détail', + width: $el.data('dialog-width'), + params: parseParams($el.attr('data-dialog-params')) + }); + }); + + $(document).on('click', '.drawer-close', closeDrawer); + $(document).on('keydown', function (e) { + if (e.key === 'Escape') closeDrawer(); + }); + }); +}(jQuery)); \ No newline at end of file diff --git a/themes/common-theme/widget/Theme.xml b/themes/common-theme/widget/Theme.xml index df4b0aa8808..f8a7a4025e2 100644 --- a/themes/common-theme/widget/Theme.xml +++ b/themes/common-theme/widget/Theme.xml @@ -76,12 +76,14 @@ under the License.