web-dev-qa-db-fra.com

Personnalisé Thickbox brisé sur la page de tableau de bord?

Je travaille sur une extension qui, dans le cadre de ses fonctionnalités, ajoute des Thickboxes à de nombreuses pages de l'administrateur Wordpress. Sur la plupart des pages, cela fonctionne bien - j'utilise un hook d'action in_admin_footer pour appeler add_thickbox et inclut le code HTML/Javascript (via une instruction include) qui inclut la Thickbox.

    add_action( 'in_admin_footer', function(){   
        add_thickbox();    
        include(__DIR__ . '/includes/thickbox-div.php');
    });

Et ma chaîne Thickbox href ressemble à

#TB_inline?height=480&width=480&inlineId=my_div_id

Cela fonctionne très bien - la plupart du temps. Cependant, sur quelques pages d’administration (tableau de bord, plugins), la Thickbox sera trop volumineuse, et avec un bouton "fermer" incomplet à droite.

Thixkbox Screenshot showing too large/weird close button behavior

Est-ce que quelqu'un sait pourquoi cela se produit, et s'il y a un correctif? Ma première hypothèse est que c'est quelque chose que le code Wordpress principal fait sur ces pages pour personnaliser la Thickbox - mais je n'ai pas encore commencé le débogage, donc je ne le sais pas avec certitude.

Je peux commencer à penser à des dizaines de façons de résoudre ce problème moi-même dans le code - mais j'espère qu'il existe des données scientifiques connues pour résoudre ce problème.

adminhooksthickbox
1
Alan Storm

Après avoir approfondi cette question, il semble y avoir un certain nombre de pages où Wordpress finit par modifier le comportement de la mise en œuvre par défaut de thickbox - cela inclut à la fois les modifications javascript et les règles de style personnalisées. Vous pouvez voir un exemple de ceci ici

#File: wp-admin/js/media-upload.js
// thickbox settings
var tb_position;
(function($) {
    tb_position = function() {
        var tbWindow = $('#TB_window'),
            width = $(window).width(),
            H = $(window).height(),
            W = ( 833 < width ) ? 833 : width,
            adminbar_height = 0;
            //...

Le code ci-dessus finit par redéfinir la fonction tb_position avec certaines valeurs de hauteur/largeur codées en dur. Des règles de style personnalisées s'appliquent également à une page particulière avec une classe de corps.

#File: wp-admin/css/common.css
body.about-php #TB_window.thickbox-loading:before,
body.plugin-install-php #TB_window.thickbox-loading:before,
body.import-php #TB_window.thickbox-loading:before,
body.plugins-php #TB_window.thickbox-loading:before,
body.update-core-php #TB_window.thickbox-loading:before,
body.index-php #TB_window.thickbox-loading:before {
    content: "";
    display: block;
    width: 20px;

Il n'y a pas de travail génial ou élégant ici. Pour mes propres besoins, j'appelle la fonction javascript suivante (écrite sur mesure) avant d'afficher mes propres boîtes épaisses (cela nécessite également que je me charge de les ouvrir moi-même avec des appels à tb_show)

var resetWordpressHacks = function(){        
    //remove these styles from body if they exist
    var classes = ['about-php','plugin-install-php','import-php',
        'plugins-php','update-core-php','index-php'];
    var removed = [];
    $.each(classes, function(k,v){
        if(!$('body').hasClass(v)) { return; }
        removed.Push(v);
        $('body').removeClass(v);
    });                

    var tb_position_original = window.tb_position;

    //some wordpress pages redefine this function which breaks
    //the thickbox, so we need to reset it here.  
    window.tb_position = function() {
        var isIE6 = typeof document.body.style.maxHeight === "undefined";
        jQuery("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
        if ( ! isIE6 ) { // take away IE6
            jQuery("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
        }
    }

    var tb_remove_original = window.tb_remove;
    window.tb_remove = function()
    {
        $.each(removed, function(k,v){
            $('body').addClass(v);
            window.tb_position = tb_position_original;
        });
        tb_remove_original();
    } 
}

Cette fonction va

  1. Supprimez les classes de corps avec des règles de style personnalisées qui modifient l'affichage du bouton de fermeture Thickbox (une liste codée en dur, malheureusement)

  2. Re-définissez à nouveau la fonction tb_position sur la version stock de thickbox (à nouveau, avec une fonction codée en dur copiée/collée à partir de la bibliothèque thickbox)

  3. Patches de singe, redéfinit la fonction tb_remove pour restaurer la classe de corps et la fonction tb_position personnalisée ci-dessus avant d'appeler la fonction tb_remove d'origine

Le résultat final de ceci est la taille et le style de Wordpress. Les personnalisations sont non effectuées, mais restaurées à la fermeture de la thickbox. Je ne peux pas dire à quel point c'est stable, mais cela semble fonctionner pour moi pour le moment. En outre, cette fonction n'annule pas chaque modification (certaines sont étendues et non accessibles), gardez cela à l'esprit lorsque vous utilisez cette solution.

1
Alan Storm