Utilisateur:Seudo/resize.js

Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

Firefox / Safari : Maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac) ;
Google Chrome : Appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac) ;
Internet Explorer : Maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ;
Opera : Allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d'exploration → Images et fichiers en cache.

/* Permet de redimensionner les colonnes de gauche (transcription)
et de droite (image) en mode Page.

Pour utiliser ce gadget, rajouter dans son common.js la ligne suivante :
   importScript('Utilisateur:Seudo/resize.js')
Puis, en mode lecture ou édition sur une page, placer la souris juste à droite du champ d'édition (le cursor change de forme),
appuyer sur un bouton de la souris et glisser vers la gauche ou la droite. */


// Gérer le redimensionnement lorsque la souris est enfoncée
var isResizing = false;
var hasResized = false;
var startX;

function descendantDe(element, cible) {
    let parent = element;
    while(parent !== null) {
        if(parent === cible)
            return true;
        parent = parent.parentElement;
    }
    return false;
}

$(document).ready(function() {
    const ns = mw.config.get('wgNamespaceNumber');    
    if(ns != 104) // Page namespace
        return;

	wpTextbox1 = document.getElementById("wpTextbox1");

	const divcontent = document.getElementsByClassName('prp-page-content')[0];
 	const diveditbodys = document.getElementsByClassName('prp-page-edit-body');
    const diveditbody = (diveditbodys.length > 0 ? diveditbodys[0] : null);
	const divimage = document.getElementsByClassName('prp-page-image')[0];
    
    const prpPageEditBodys = document.getElementsByClassName('prp-page-edit-body');
    const prpPageEditBody = (prpPageEditBodys ? prpPageEditBodys[0] : null);

    const pagetexts = document.getElementsByClassName("pagetext");
    const pagetext = (pagetexts.length > 0 ? pagetexts [0] : null);

    divcontent.style.cursor = "col-resize";
    if(pagetext)
        pagetext.style.cursor = "auto";

    toggleParaSelect = function(b) {
        ["P", "PRE"].forEach(tagName => {
            const paras = divcontent.getElementsByTagName(tagName);
            for(let p of paras) {
                ["-webkit-user-select", "-webkit-touch-callout", 
                 "-moz-user-select", "-ms-user-select: none", 
                 "user-select"].forEach(a => { 
                    p.style[a] = (b ? "auto" : "none");
                });
            }
        });
    }

	divcontent.addEventListener('mousedown', function(e) {
        // Sur le clic gauche dans le champ d'édition, c'est gênant
        // if((wpTextbox1 && e.target === wpTextbox1) || (pagetext && e.target.parentNode.parentNode === pagetext )) {
        if((prpPageEditBody && descendantDe(e.target.parentNode, prpPageEditBody))
           || (pagetext && descendantDe(e.target.parentNode, pagetext))) {
            // console.log("mousedown / descendant", e.target);
            e.stopPropagation();
        }
        else {
    		isResizing = true;
	    	startX = e.clientX;
            // console.log("mousedown / non descendant", e.target);
            toggleParaSelect(false);
        }
	});

	document.addEventListener('mousemove', function(e) {
		if (!isResizing) 
			return;
 
        // console.log("mousemove / resizing", e.target);

		var offset = startX - e.clientX;
		var newWidth1 = divcontent.clientWidth - offset;
		var newWidth2 = divimage.clientWidth + offset;

		divcontent.style.width = newWidth1 + 'px';
		divcontent.style.maxWidth = newWidth1 + 'px';
		if(diveditbody)
            diveditbody.style.width = '100%';
		divimage.style.width = newWidth2 + 'px';
		divimage.style.maxWidth = newWidth2 + 'px';

        // Apparemment le flex=1 par défaut pose problème
        divcontent.style.flex = 'auto';
        divimage.style.flex = 'auto';

        qualityheaders = document.getElementsByClassName("prp-page-qualityheader");

        if(qualityheaders.length > 0 && pagetext) { 
            qualityheaders[0].style.maxWidth = newWidth1 + 'px';
            pagetext.style.maxWidth = newWidth1 + 'px';
        }
     
        hasResized = true;
  
		startX = e.clientX;
	});


	document.addEventListener('mouseup', function(e) {
   		isResizing = false;
        hasResized = false;
        toggleParaSelect(true);
	});  
});