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

De Encyclopédie-de-L'AFN_1830-1962
← Versions précédentesVersions suivantes →
mAucun résumé des modifications
mAucun résumé des modifications
Ligne 2 : Ligne 2 :


<script>
<script>
// Création du WindowManager une seule fois
/* === External OOUI Dialog Widget === */
if (typeof window.externalWM === 'undefined') {
 
     window.externalWM = new OO.ui.WindowManager();
if (typeof window.myExternalWM === 'undefined') {
     $(document.body).append(window.externalWM.$element);
     window.myExternalWM = new OO.ui.WindowManager();
     $( 'body' ).append( window.myExternalWM.$element );
}
}


function ExternalIframeDialog(config) {
function ExternalIframeDialog( config ) {
     ExternalIframeDialog.super.call(this, config);
     ExternalIframeDialog.super.call( this, config );
}
}
OO.inheritClass(ExternalIframeDialog, OO.ui.Dialog);
OO.inheritClass( ExternalIframeDialog, OO.ui.Dialog );
 
ExternalIframeDialog.static.name = 'externalIframeDialog';


ExternalIframeDialog.static.name = 'externalIframe';
ExternalIframeDialog.prototype.initialize = function () {
ExternalIframeDialog.prototype.initialize = function () {
     ExternalIframeDialog.super.prototype.initialize.call(this);
     ExternalIframeDialog.super.prototype.initialize.call( this );
 
   
     this.iframe = $('<iframe>')
     this.iframe = $( '<iframe>' )
         .attr({
         .attr( 'frameborder', '0' )
            frameborder: 0,
        .attr( 'allowfullscreen', '' )
            allowfullscreen: true
         .css( { width: '100%', height: '100%', border: 'none' } );
        })
         .css({ width: '100%', height: '100%', border: 'none' });


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


Ligne 31 : Ligne 31 :
};
};


// Fonction globale d'ouverture (plus fiable)
// Fonction globale à appeler depuis la page
window.openExternalOOUIDialog = function (url, title = 'Page externe', width = 1100, height = 750) {
window.openExtDialog = function ( url, title = 'Page externe', w = 1100, h = 750 ) {
     const dialog = new ExternalIframeDialog({
     var dialog = new ExternalIframeDialog( { size: 'large' } );
        size: 'large'
      
     });
    dialog.setTitle( title );
 
     dialog.iframe.attr( 'src', url );
     dialog.iframe.attr('src', url);
    dialog.setTitle(title);


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


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


<style>
<style>
.oo-ui-windowManager-modal .oo-ui-window-frame {
.oo-ui-window-frame {
     background-color: rgba(255, 255, 255, 0.96) !important;
     background: rgba(255, 255, 255, 0.97) !important;
     border-radius: 8px;
     border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}
}
.oo-ui-windowManager-overlay {
.oo-ui-windowManager-overlay {
     background-color: rgba(0, 0, 0, 0.65) !important;
     background: rgba(0, 0, 0, 0.7) !important;
}
}
</style>
</style>

Version du 1 mai 2026 à 15:06


<script> /* === External OOUI Dialog Widget === */

if (typeof window.myExternalWM === 'undefined') { 

   window.myExternalWM = new OO.ui.WindowManager();
   $( 'body' ).append( window.myExternalWM.$element );

}

function ExternalIframeDialog( config ) { 

   ExternalIframeDialog.super.call( this, config );

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

ExternalIframeDialog.static.name = 'externalIframeDialog';

ExternalIframeDialog.prototype.initialize = function () { 

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

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

};

ExternalIframeDialog.prototype.getBodyHeight = function () { 

   return this.config.height || 700;

};

// Fonction globale à appeler depuis la page window.openExtDialog = function ( url, title = 'Page externe', w = 1100, h = 750 ) { 

   var dialog = new ExternalIframeDialog( { size: 'large' } );
   
   dialog.setTitle( title );
   dialog.iframe.attr( 'src', url );

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

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

}; </script>

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

   background: rgba(255, 255, 255, 0.97) !important;
   border-radius: 8px;

} .oo-ui-windowManager-overlay { 

   background: rgba(0, 0, 0, 0.7) !important;

} </style>

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