« Widget:ExternalDialog » : différence entre les versions

De Encyclopédie-de-L'AFN_1830-1962
Versions suivantes →
Page créée avec « <!--{$title|escape:html}--> <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); ExternalIframe... »
 
mAucun résumé des modifications
Ligne 2 : Ligne 2 :


<script>
<script>
// Création du gestionnaire de fenêtres OOUI (une seule fois)
// Création du WindowManager une seule fois
if (!window.externalWindowManager) {
if (typeof window.externalWM === 'undefined') {
     window.externalWindowManager = new OO.ui.WindowManager();
     window.externalWM = new OO.ui.WindowManager();
     $(document.body).append(window.externalWindowManager.$element);
     $(document.body).append(window.externalWM.$element);
}
}


// Classe du Dialog personnalisé
function ExternalIframeDialog(config) {
function ExternalIframeDialog(config) {
     ExternalIframeDialog.super.call(this, config);
     ExternalIframeDialog.super.call(this, config);
Ligne 14 : Ligne 13 :
OO.inheritClass(ExternalIframeDialog, OO.ui.Dialog);
OO.inheritClass(ExternalIframeDialog, OO.ui.Dialog);


ExternalIframeDialog.static.name = 'externalIframeDialog';
ExternalIframeDialog.static.name = 'externalIframe';
ExternalIframeDialog.static.title = 'Chargement...';  // sera mis à jour dynamiquement
ExternalIframeDialog.static.size = 'large';            // taille par défaut (small/medium/large)
 
ExternalIframeDialog.prototype.initialize = function () {
ExternalIframeDialog.prototype.initialize = function () {
     ExternalIframeDialog.super.prototype.initialize.call(this);
     ExternalIframeDialog.super.prototype.initialize.call(this);
    this.$element.addClass('external-iframe-dialog');


     this.iframe = $('<iframe>')
     this.iframe = $('<iframe>')
         .attr('frameborder', 0)
         .attr({
        .attr('allowfullscreen', true)
            frameborder: 0,
         .css({
            allowfullscreen: true
            width: '100%',
        })
            height: '100%',
         .css({ width: '100%', height: '100%', border: 'none' });
            border: 'none'
        });
 
    this.panel = new OO.ui.PanelLayout({
        padded: false,
        expanded: true,
        scrollable: false
    });


     this.panel.$element.append(this.iframe);
     this.$body.append(this.iframe);
    this.$body.append(this.panel.$element);
};
};


// Permet de définir la taille du contenu
ExternalIframeDialog.prototype.getBodyHeight = function () {
ExternalIframeDialog.prototype.getBodyHeight = function () {
     return this.height || 600;   // hauteur par défaut
     return this.config.height || 700;
};
};


// Fonction globale pour ouvrir le dialog
// Fonction globale d'ouverture (plus fiable)
window.openExternalDialog = function (url, title = 'Page externe', width = 1000, height = 700) {
window.openExternalOOUIDialog = function (url, title = 'Page externe', width = 1100, height = 750) {
     const dialog = new ExternalIframeDialog({
     const dialog = new ExternalIframeDialog({
         size: 'large'   // on gère la taille manuellement via CSS
         size: 'large'
     });
     });


     dialog.title = title;
     dialog.iframe.attr('src', url);
    dialog.height = height;
 
    externalWindowManager.addWindows([dialog]);
 
    // Mise à jour du titre
     dialog.setTitle(title);
     dialog.setTitle(title);


     // Chargement de l'iframe
     window.externalWM.addWindows([dialog]);
    dialog.iframe.attr('src', url);
     window.externalWM.openWindow(dialog, {
 
     // Ouverture avec taille personnalisée
    externalWindowManager.openWindow(dialog, {
         width: width,
         width: width,
         height: height
         height: height
     });
     });


     // Rendre le dialog déplaçable (draggable)
     // Rendre la fenêtre déplaçable
     setTimeout(() => {
     setTimeout(() => {
         dialog.$element.draggable({
         dialog.$element.draggable({
             handle: '.oo-ui-window-head',   // barre de titre
             handle: '.oo-ui-window-head',
             containment: 'window'
             containment: 'window'
         });
         });
     }, 100);
     }, 300);
};
};
</script>
</script>


<style>
<style>
/* Fond partiellement transparent */
.oo-ui-windowManager-modal .oo-ui-window-frame {
.external-iframe-dialog .oo-ui-window-frame {
     background-color: rgba(255, 255, 255, 0.96) !important;
     background-color: rgba(255, 255, 255, 0.95) !important;
     border-radius: 8px;
     border-radius: 8px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
     box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}
}
 
.oo-ui-windowManager-overlay {
/* Légère transparence sur le overlay */
.oo-ui-windowManager-modal > .oo-ui-windowManager-overlay {
     background-color: rgba(0, 0, 0, 0.65) !important;
     background-color: rgba(0, 0, 0, 0.65) !important;
}
}
</style>
</style>

Version du 1 mai 2026 à 11:36


<script> // Création du WindowManager une seule fois if (typeof window.externalWM === 'undefined') { 

   window.externalWM = new OO.ui.WindowManager();
   $(document.body).append(window.externalWM.$element);

}

function ExternalIframeDialog(config) { 

   ExternalIframeDialog.super.call(this, config);

} OO.inheritClass(ExternalIframeDialog, OO.ui.Dialog);

ExternalIframeDialog.static.name = 'externalIframe'; ExternalIframeDialog.prototype.initialize = function () { 

   ExternalIframeDialog.super.prototype.initialize.call(this);

   this.iframe = $('<iframe>')
       .attr({
           frameborder: 0,
           allowfullscreen: true
       })
       .css({ width: '100%', height: '100%', border: 'none' });

   this.$body.append(this.iframe);

};

ExternalIframeDialog.prototype.getBodyHeight = function () { 

   return this.config.height || 700;

};

// Fonction globale d'ouverture (plus fiable) window.openExternalOOUIDialog = function (url, title = 'Page externe', width = 1100, height = 750) { 

   const dialog = new ExternalIframeDialog({
       size: 'large'
   });

   dialog.iframe.attr('src', url);
   dialog.setTitle(title);

   window.externalWM.addWindows([dialog]);
   window.externalWM.openWindow(dialog, {
       width: width,
       height: height
   });

   // Rendre la fenêtre déplaçable
   setTimeout(() => {
       dialog.$element.draggable({
           handle: '.oo-ui-window-head',
           containment: 'window'
       });
   }, 300);

}; </script>

<style> .oo-ui-windowManager-modal .oo-ui-window-frame { 

   background-color: rgba(255, 255, 255, 0.96) !important;
   border-radius: 8px;
   box-shadow: 0 8px 25px rgba(0,0,0,0.5);

} .oo-ui-windowManager-overlay { 

   background-color: rgba(0, 0, 0, 0.65) !important;

} </style>

Récupérée de « https://encyclopedie-afn.org/2025/index.php?title=Widget:ExternalDialog&oldid=52859 »