|
|
| (2 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 1 : |
Ligne 1 : |
| <!--{$title|escape:html}--> | | <!-- Prout -> |
| | |
| <script>
| |
| // Création du gestionnaire de fenêtres OOUI (une seule fois)
| |
| if (!window.externalWindowManager) {
| |
| window.externalWindowManager = new OO.ui.WindowManager();
| |
| $(document.body).append(window.externalWindowManager.$element);
| |
| }
| |
| | |
| // Classe du Dialog personnalisé
| |
| function ExternalIframeDialog(config) {
| |
| ExternalIframeDialog.super.call(this, config);
| |
| }
| |
| OO.inheritClass(ExternalIframeDialog, OO.ui.Dialog);
| |
| | |
| ExternalIframeDialog.static.name = 'externalIframeDialog';
| |
| ExternalIframeDialog.static.title = 'Chargement...'; // sera mis à jour dynamiquement
| |
| ExternalIframeDialog.static.size = 'large'; // taille par défaut (small/medium/large)
| |
| | |
| ExternalIframeDialog.prototype.initialize = function () {
| |
| ExternalIframeDialog.super.prototype.initialize.call(this);
| |
| | |
| this.$element.addClass('external-iframe-dialog');
| |
| | |
| this.iframe = $('<iframe>')
| |
| .attr('frameborder', 0)
| |
| .attr('allowfullscreen', true)
| |
| .css({
| |
| width: '100%',
| |
| height: '100%',
| |
| border: 'none'
| |
| });
| |
| | |
| this.panel = new OO.ui.PanelLayout({
| |
| padded: false,
| |
| expanded: true,
| |
| scrollable: false
| |
| });
| |
| | |
| this.panel.$element.append(this.iframe);
| |
| this.$body.append(this.panel.$element);
| |
| };
| |
| | |
| // Permet de définir la taille du contenu
| |
| ExternalIframeDialog.prototype.getBodyHeight = function () {
| |
| return this.height || 600; // hauteur par défaut
| |
| };
| |
| | |
| // Fonction globale pour ouvrir le dialog
| |
| window.openExternalDialog = function (url, title = 'Page externe', width = 1000, height = 700) {
| |
| const dialog = new ExternalIframeDialog({
| |
| size: 'large' // on gère la taille manuellement via CSS
| |
| });
| |
| | |
| dialog.title = title;
| |
| dialog.height = height;
| |
| | |
| externalWindowManager.addWindows([dialog]);
| |
| | |
| // Mise à jour du titre
| |
| dialog.setTitle(title);
| |
| | |
| // Chargement de l'iframe
| |
| dialog.iframe.attr('src', url);
| |
| | |
| // Ouverture avec taille personnalisée
| |
| externalWindowManager.openWindow(dialog, {
| |
| width: width,
| |
| height: height
| |
| });
| |
| | |
| // Rendre le dialog déplaçable (draggable)
| |
| setTimeout(() => {
| |
| dialog.$element.draggable({
| |
| handle: '.oo-ui-window-head', // barre de titre
| |
| containment: 'window'
| |
| });
| |
| }, 100);
| |
| };
| |
| </script>
| |
| | |
| <style>
| |
| /* Fond partiellement transparent */
| |
| .external-iframe-dialog .oo-ui-window-frame {
| |
| background-color: rgba(255, 255, 255, 0.95) !important;
| |
| border-radius: 8px;
| |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
| |
| }
| |
| | |
| /* Légère transparence sur le overlay */
| |
| .oo-ui-windowManager-modal > .oo-ui-windowManager-overlay {
| |
| background-color: rgba(0, 0, 0, 0.65) !important;
| |
| }
| |
| </style>
| |
