MediaWiki:Common.js

/* Préface aux éditeurs :
La documentation de cette page en [[JavaScript]] peut être lue
facilement en l’incluant comme un modèle depuis une page wiki.

Merci de faire de votre mieux pour respecter cette contrainte,
par l’utilisation de balises adaptées et de texte commenté, en
JavaScript et en Wikitexte.

== Boîtes déroulantes ==

<!-- */
// --><syntaxhighlight lang="javascript">

// set up the words in your language
var NavigationBarHide = '[masquer]';
var NavigationBarShow = '[afficher]';

var NavigationBarShowDefault = 0;

// shows and hides content and picture (if available) of navigation bars
// Parameters:
//     indexNavigationBar: the index of navigation bar to be toggled
function toggleNavigationBar(indexNavigationBar)
{
    var NavToggle = document.getElementById("NavToggle" + indexNavigationBar);
    var NavFrame = document.getElementById("NavFrame" + indexNavigationBar);

    if (!NavFrame || !NavToggle) {
        return false;
    }

    // ajout par Dake
    // permet de créer un titre en lieu et place du "Dérouler" grâce
    // à l'attribut "title" du tag.
    var ShowText;

    if (NavFrame.title == undefined || NavFrame.title.length == 0 ) {
        ShowText = NavigationBarShow;
    } else {
        ShowText = NavFrame.title;
    }

    // if shown now
    if (NavToggle.firstChild.data == NavigationBarHide) {
        for(
            var NavChild = NavFrame.firstChild;
            NavChild != null;
            NavChild = NavChild.nextSibling
        ) {
            if (NavChild.className == 'NavPic') {
                NavChild.style.display = 'none';
            }
            if (NavChild.className == 'NavContent') {
                NavChild.style.display = 'none';
            }
            if (NavChild.className == 'NavToggle') {
                NavChild.firstChild.data = ShowText;
            }
        }

    // if hidden now
    } else if (NavToggle.firstChild.data == ShowText) {
        for(
            var NavChild = NavFrame.firstChild;
            NavChild != null;
            NavChild = NavChild.nextSibling
        ) {
            if (NavChild.className == 'NavPic') {
                NavChild.style.display = 'block';
            }
            if (NavChild.className == 'NavContent') {
                NavChild.style.display = 'block';
            }
            if (NavChild.className == 'NavToggle') {
                NavChild.firstChild.data = NavigationBarHide;
            }
        }
    }
}

// adds show/hide-button to navigation bars
function createNavigationBarToggleButton()
{
    var indexNavigationBar = 0;
    // iterate over all < div >-elements
    for(
        var i=0;
        NavFrame = document.getElementsByTagName("div")[i];
        i++
    ) {
        // if found a navigation bar
        if (NavFrame.className == "NavFrame") {

            indexNavigationBar++;
            var NavToggle = document.createElement("a");
            NavToggle.className = 'NavToggle';
            NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar);
            NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');');

            var NavToggleText = document.createTextNode(NavigationBarHide);
            NavToggle.appendChild(NavToggleText);

            // add NavToggle-Button as first div-element
            // in < div class="NavFrame" >
            NavFrame.insertBefore(
                NavToggle,
                NavFrame.firstChild
            );
            NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar);
        }
    }
    // if more Navigation Bars found than Default: hide all
    if (NavigationBarShowDefault < indexNavigationBar) {
        for (
            var i=1; 
            i<=indexNavigationBar; 
            i++
        ) {
            toggleNavigationBar(i);
        }
    }
}

$(createNavigationBarToggleButton);

// fin de la section "Dynamic Navigation Bars"</syntaxhighlight><!--
/* -->

== Réécriture du titre ==

Cette fonction fait fonctionner le [[modèle : Titre]] qui sert
à réécrire (pas juste mettre en forme) le titre d’une page, et
qui ne devrait que très rarement être utilisé. Idéalement, les
très rares cas de l’encyclopédie ayant ce besoin utiliseraient
un modèle différent, qui expliquerait la chose par sous-titre.

La fonction attend le code html :<syntaxhighlight lang="html">
<div id="RealTitleBanner">
    <span id="RealTitle">title</span>
</div></syntaxhighlight>
avec l’élément <code>#RealTitleBanner</code> qui finira caché.

Un élément <code>#DisableRealTitle</code> désactive tout cela.

<!-- */
// --><syntaxhighlight lang="javascript">

rewritePageH1 = function() {
    try {
        var realTitleBanner = document.getElementById("RealTitleBanner");
        if (realTitleBanner) {
            if (!document.getElementById("DisableRealTitle")) {
                var realTitle = document.getElementById("RealTitle");
                var h1 = document.getElementsByTagName("h1")[0];
                if (realTitle && h1) {
                    h1.innerHTML = realTitle.innerHTML;
                    realTitleBanner.style.display = "none";
                }
            }
        }
    } catch (e) {
        /* Something went wrong. */
    }
}
$(rewritePageH1);

// fin de la section "Réécriture du titre"</syntaxhighlight><!--
/* -->

== Préchargement de Special:upload ==

<!-- */
// --><syntaxhighlight lang="javascript">

function loadAutoInfomationTemplate()
{
    uploadDescription = document.getElementById('wpUploadDescription');
    var tripleTilda = '~~' + '~';
    var doubleBracket = '{' + '{';
    if(uploadDescription != null && mw.config.get('wgUserLanguage') != 'fromflickr' && mw.config.get('wgUserLanguage') != 'fromwikimedia' && mw.config.get('wgUserLanguage') != 'fromgov') {
        uploadDescription.focus();
        switch(mw.config.get('wgUserLanguage')) {
            default:
                uploadDescription.value = doubleBracket + 'Information image\n | Description = \n | Source      = \n | Auteur      = \n | Date        = \n}}\n\n[[Catégorie:Image thème inconnu]]';
    
                break;
        }
    }
}
$(loadAutoInfomationTemplate);

// fin de la section "Préchargement de Special:upload"</syntaxhighlight><!--
/* -->

== OpenStreetMap ==
Le code OpenStreetMap est dérivé de celui publié pour Wikipedia
par [[:wp:Utilisateur:Magnus Manske|Magnus Manske]], en 2008,
sous [[Licence publique générale GNU|licence GPL]].

Il comprend deux fonctions usuelles pour gérer un cadre : 
* une pour le déplacer,
* une pour le redimensionner ;
aidées par trois autres :
* une pour tester le navigateur,
* deux pour obtenir largeur et hauteur de l’écran.
Voir page de discussion.

=== Test du navigateur ===

* Renvoie true si le navigateur est Internet Explorer

<!-- */
// --><syntaxhighlight lang="javascript">

function MoveResizeAbsolute_NavIsIE(){
    var agt=navigator.userAgent.toLowerCase();
    var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
    return is_ie;
}

// fin de la sous-section "Test du navigateur"</syntaxhighlight><!--
/* -->

=== Largeur de l’écran ===
* Renvoie la largeur de l’écran (en pixels)

<!-- */
// --><syntaxhighlight lang="javascript">

function MoveResizeAbsolute_GetScreenWidth(){
    if(MoveResizeAbsolute_NavIsIE()){
        var ScreenWidth = parseInt(screen.width);
    }else{
        var ScreenWidth = parseInt(window.innerWidth);
    }
    return ScreenWidth;
}

// fin de la sous-section "Largeur de l’écran"</syntaxhighlight><!--
/* -->

=== Hauteur de l’écran ===
* Renvoie la hauteur de l’écran (en pixels)

<!-- */
// --><syntaxhighlight lang="javascript">

function MoveResizeAbsolute_GetScreenHeight(){
    if(MoveResizeAbsolute_NavIsIE()){
        var ScreenHeight = parseInt(screen.height);
    }else{
        var ScreenHeight = parseInt(window.innerHeight);
    }
    return ScreenHeight;
}

// fin de la sous-section "Hauteur de l’écran"</syntaxhighlight><!--
/* -->

=== Déplacement du cadre ===

Transforme un élément en ancre pour bouger un autre élément (en position fixed)
* elementArea = élément ancre (obligatoire)
* elementsToMove = éléments à bouger (obligatoire)
* LeftLimit = limite gauche, en pixel (facultatif)
* TopLimit = limite haut, en pixel (facultatif)

<!-- */
// --><syntaxhighlight lang="javascript">

function MoveResizeAbsolute_AddMoveArea(elementArea, elementsToMove, LeftLimit, TopLimit){
    if((!elementArea)||(!elementsToMove)) return;
    elementArea.onmousedown=function(event) {
        var monbody = document.body;
        if(!event) { event = window.event; }
        if(MoveResizeAbsolute_NavIsIE()){
            positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
            positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
        }else{
            positionSouris_X = parseInt( event.pageX );
            positionSouris_Y = parseInt( event.pageY );
        } 
        for (var a=0;a<elementsToMove.length;a++){
            elementsToMove[a].initialX = parseInt( positionSouris_X - elementsToMove[a].offsetLeft);
            elementsToMove[a].initialY = parseInt( positionSouris_Y - elementsToMove[a].offsetTop);
            elementsToMove[a].style.opacity = '.8';
        }
        monbody.onmousemove = function(event) {
            if(!event) { event = window.event; }
            if(MoveResizeAbsolute_NavIsIE()){
                positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
                positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
            }else{
                positionSouris_X = parseInt( event.pageX );
                positionSouris_Y = parseInt( event.pageY );
            }
            var LeftLimitDone = false;
            var TopLimitDone = false;
            for(var a=0;a<elementsToMove.length;a++){
                PositionGauche = parseInt( positionSouris_X ) - elementsToMove[a].initialX;
                PositionHaut = parseInt(positionSouris_Y ) - elementsToMove[a].initialY;
                if(LeftLimit){
                    if(LeftLimit[a]|| LeftLimit[a]==0){
                        if( PositionGauche < parseInt(LeftLimit[a])){
                            PositionGauche = LeftLimit[a];
                            LeftLimitDone = true;
                        }
                    }
                }
                if(TopLimit){
                    if(TopLimit[a]||TopLimit[a]==0){
                        if( PositionHaut < parseInt(TopLimit[a])){
                            PositionHaut = parseInt(TopLimit[a]);
                            TopLimitDone = true;
                        }
                    }
                }
                elementsToMove[a].style.left = PositionGauche + 'px';
                elementsToMove[a].style.top = PositionHaut + 'px';
            }
            if(LeftLimitDone){
                for(var a=0;a<elementsToMove.length;a++){
                    if(LeftLimit[a]) elementsToMove[a].style.left = LeftLimit[a] + 'px';
                }
                LeftLimitDone = false;
            }
            if(TopLimitDone){
                for(var a=0;a<elementsToMove.length;a++){
                    if(TopLimit[a]) elementsToMove[a].style.top = TopLimit[a] + 'px';
                }
                TopLimitDone = false;
            }
        } 
        monbody.onmouseup=function(event) {
            for(var a=0;a<elementsToMove.length;a++){
                elementsToMove[a].style.opacity = '';
            }
            monbody.onmousemove = null;
            monbody.onmouseup = null;
        }
    }
    elementArea.style.cursor = "move";
}

// fin de la sous-section "Déplacement du cadre"</syntaxhighlight><!--
/* -->

=== Redimensionnement du cadre ===

Transforme un élément en ancre pour redimensionner un autre élément (en position fixed)
* elementArea = élément ancre (obligatoire)
* elementsToResize = éléments à redimensionner (obligatoire, dans une Array)
* MinWidth = largeur minimum, en pixel (facultatif)
* MinHeight = hauteur minimum, en pixel (facultatif)

<!-- */
// --><syntaxhighlight lang="javascript">

function MoveResizeAbsolute_AddResizeArea(elementArea, elementsToResize, MinWidth, MinHeight){
    if((!elementArea)||(!elementsToResize)) return;
    elementArea.onmousedown = function(event){
        var monbody = document.body;
        if(!event) { event = window.event; }
        if(MoveResizeAbsolute_NavIsIE()){
            positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
            positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
        }else{
            positionSouris_X = parseInt( event.pageX );
            positionSouris_Y = parseInt( event.pageY );
        }
        for(var a=0;a<elementsToResize.length;a++){
            elementsToResize[a].initialWidth = parseInt( positionSouris_X - elementsToResize[a].offsetWidth );
            elementsToResize[a].initialHeight = parseInt( positionSouris_Y - elementsToResize[a].offsetHeight );
            elementsToResize[a].style.opacity = '.8';
        }
        monbody.onmousemove=function(event) {
            if(!event) { event = window.event; }
            if(MoveResizeAbsolute_NavIsIE()){
                positionSouris_X = parseInt( event.clientX + monbody.scrollLeft );
                positionSouris_Y = parseInt( event.clientY + monbody.scrollTop );
            }else{
                positionSouris_X = parseInt( event.pageX );
                positionSouris_Y = parseInt( event.pageY );
            }
            var MinWidthDone = false;
            var MinHeightDone = false;
            for(var a=0;a<elementsToResize.length;a++){
                var NewWidth = parseInt( positionSouris_X - elementsToResize[a].initialWidth  );
                var NewHeight = parseInt( positionSouris_Y - elementsToResize[a].initialHeight );
                if(MinWidth){
                    if(MinWidth[a] || MinWidth[a]==0){
                        if(NewWidth<parseInt(MinWidth[a])){
                            NewWidth = MinWidth[a];
                            MinWidthDone = true;
                        }
                    }
                }
                if(MinHeight){
                    if(MinHeight[a] || MinHeight[a]==0){
                        if(NewHeight<parseInt(MinHeight[a])){
                            NewHeight = MinHeight[a];
                            MinHeightDone = true;
                        }
                    }
                }
                elementsToResize[a].style.width  = NewWidth + 'px';
                elementsToResize[a].style.height = NewHeight + 'px';
            }
            if(MinWidthDone){
                for(var a=0;a<elementsToResize.length;a++){
                    if(MinWidth[a]) elementsToResize[a].style.width  = MinWidth[a] + 'px';
                }
            }
            if(MinHeightDone){
                for(var a=0;a<elementsToResize.length;a++){
                    if(MinHeight[a]) elementsToResize[a].style.height  = MinHeight[a] + 'px';
                }
            }

        }
        monbody.onmouseup=function(event) {
            for(var a=0;a<elementsToResize.length;a++){
                elementsToResize[a].style.opacity = '';
            }
            monbody.onmousemove = null;
            monbody.onmouseup = null;
        }
    }
    elementArea.style.cursor = "se-resize";
}

// fin de la sous-section "Redimensionnement du cadre"</syntaxhighlight><!--
/* -->

=== Affichage ou masquage ===

<!-- */
// --><syntaxhighlight lang="javascript">

function openStreetMap_Toggle () {
    var c = document.getElementById ( 'mw-indicator-coords' ) ;
    if ( !c ) return ;
    var osm = document.getElementById ( 'OpenStreetMap' ) ;

    if (osm) {
        if ( osm.style.display == 'none' ) {
            osm.style.display = 'block' ;
        } else {
            osm.style.display = 'none' ;
        }
        return;
    }

    var a = c.getElementsByTagName ( 'a' ) ;
    if ( a.length != 1 ) return;
    
    var h = a[0].hack.split('params=')[1] ;

    var LargeurEcran = MoveResizeAbsolute_GetScreenWidth();
    var HauteurEcran = MoveResizeAbsolute_GetScreenHeight();

    var OSMDiv = document.createElement('div');
    OSMDiv.id = 'OpenStreetMap' ;
    OSMDiv.style.position = "absolute";
    OSMDiv.style.zIndex = 5000;
    OSMDiv.style.top = (HauteurEcran*10/100) + "px";
    OSMDiv.style.left = (LargeurEcran*15/100) + "px";
    OSMDiv.style.width = "70%";
    OSMDiv.style.height = (HauteurEcran*80/100) + "px";
    OSMDiv.style.border = "1px solid #AAAAAA";
    OSMDiv.style.backgroundColor = "#EEEEFF";
    OSMDiv.style.overflow = "hidden";

    var MoveArea = document.createElement('div');
    MoveArea.style.position = "relative";
    MoveArea.style.top = "0";
    MoveArea.style.width = "100%";
    MoveArea.style.height = "50px";
    MoveArea.title = "Cliquer et glisser pour déplacer la carte";

    var CloseLink = document.createElement('a');
    CloseLink.setAttribute("style", "float:right;margin:10px;");
    CloseLink.innerHTML = "Cacher la carte";
    CloseLink.title = "Cliquer pour masquer la carte";
    CloseLink.href = "javascript:openStreetMap_Toggle();";
    MoveArea.appendChild(CloseLink);

    var iFrame = document.createElement ( 'iframe' ) ;
    var url = 'https://tools.wmflabs.org/wiwosm/osm-on-ol/kml-on-ol.php?lang=' + mw.config.get('wgUserLanguage') + '&params=' + h ;
    iFrame.style.width = '100%' ;
    iFrame.style.height = ((HauteurEcran*80/100)-100) + 'px' ;
    iFrame.style.clear = 'both' ;
    iFrame.src = url ;

    var ResizeArea = document.createElement('div');
    ResizeArea.style.position = "relative";
    ResizeArea.style.top = "0";
    ResizeArea.style.width = "100%";
    ResizeArea.style.height = "50px";
    ResizeArea.title = "Cliquer et glisser pour redimensionner la carte";

    OSMDiv.appendChild(MoveArea);
    OSMDiv.appendChild(iFrame);
    OSMDiv.appendChild(ResizeArea);

    document.body.appendChild ( OSMDiv ) ;

    var ElementsToMove = new Array(OSMDiv);
    var ElementsToResize = new Array(OSMDiv, iFrame);
    var ElementsMinWidth = new Array(150, 150);
    var ElementsMinHeights = new Array(200, 100);

    MoveResizeAbsolute_AddMoveArea(MoveArea, ElementsToMove);
    MoveResizeAbsolute_AddResizeArea(ResizeArea, ElementsToResize, ElementsMinWidth, ElementsMinHeights);
}

// fin de la sous-section "Affichage ou masquage"</syntaxhighlight><!--
/* -->

=== Initialisation ===

<!-- */
// --><syntaxhighlight lang="javascript">

function openStreetMap_Init () {
    var c = document.getElementById ( 'mw-indicator-coords' ) ;
    if ( !c ) return ;

    var a = c.getElementsByTagName ( 'a' ) ;
    if ( a.length != 1 ) return;

    a[0].title = 'carte';
    a[0].hack = a[0].href;
    a[0].href = 'javascript:openStreetMap_Toggle();';
}
$(openStreetMap_Init);

// fin de la sous-section "Initialisation" et de la section "OpenStreetMap"</syntaxhighlight><!--
/* -->

== IconesDeTitre ==
Fait en sorte que le modèle {{m|Icône de titre}} puisse être utilisé plusieurs fois.

Cherche les icônes de titre (class="icone_de_titre") et les déplace à droite du titre de la page.

Doit être exécuté après une éventuelle correction de titre.

<!-- */
// --><syntaxhighlight lang="javascript">

function IconesDeTitre() {
    var h1 = document.getElementById('firstHeading');
    if(!h1) h1 = document.getElementsByTagName('h1')[0]; // Nostalgia, Standard
    if(!h1) return;
    var icones = document.getElementsByClassName( 'icone_de_titre' );
    for( var j = 0; j < icones.length; j++ ){
        icones[j].style.display = "block"; /* annule display:none par défaut */
        if(( skin == "modern" )||( skin == "vector" )){
            icones[j].style.marginTop = "0em";
        }
        h1.parentNode.insertBefore(icones[j], h1); /* déplacement de l'élément */
    }
}
$(IconesDeTitre);

// fin de la section "IconesDeTitre"</syntaxhighlight><!--
/* -->

== Remplacement de balises obsolètes dans la toolbar ==
Remplace les balises <big></big> et <br> dans la toolbar par {{Taille|...|120}} et <br /> respectivement.

<!-- */
// --><syntaxhighlight lang="javascript">

$('#wpTextbox1').on('wikiEditor-toolbar-buildSection-advanced', function(event, section) {
	section.groups.format.tools.newline.action.options.pre = '<br />';
	section.groups.size.tools.big.action.options.pre = '{{Taille|';
	section.groups.size.tools.big.action.options.post = '|120}}';
});

// fin de la section "Remplacement de balises obsolètes dans la toolbar"</syntaxhighlight><!--
/* -->

== Avertissement dans la console JS ==
Ajoute un avertissement dans la console JS sur les scripts copiés.

Proposition de l'[[utilisateur : Rififi]].

<!-- */
// --><syntaxhighlight lang="javascript">

console.log('%cATTENDS !', 'font: 3em consolas; color: red;');
console.log('%cSi quelqu\'un t\'a demandé de coller quelque chose ici, NE LE FAIS PAS ! Il y a de fortes chances que ce soit une arnaque.\n' +
            'Cet outil, appelé console JavaScript, permet d\'exécuter du code JavaScript, un langage de programmation.\n' +
            'Cette console peut être utile pour les développeurs, mais peut aussi permettre de récupérer des informations personnelles.\n' +
            'Ne colle jamais du code que tu ne comprends pas s\'il ne vient pas d\'une personne de confiance.', 'font: 1.5em consolas; color: black; background-color: white;');

// fin de la section "Avertissement dans la console JS"</syntaxhighlight><!--
/* -->

== Non valable en espace principal ==

<!-- */
// --><syntaxhighlight lang="javascript">

if ( mw.config.get( 'wgNamespaceNumber' ) >= 2 ) {

// fin de l’intro de la section "Non valable en espace principal"</syntaxhighlight><!--
/* -->

=== Transformer des pages en page de discussion ===
Transformer les pages spécifiées par {{m|page de discussion}},
et les pages du BA, des RA, et autres, en pages de discussion.

<!-- */
// --><syntaxhighlight lang="javascript">

$( function ( $ ) {
    if (
        /^Vikidia:(Demandes aux administrateurs|Bulletin des administrateurs|Demandes aux bureaucrates|Bavardages|Parrainage\/Demandes|Bulletin des patrouilleurs|Alerte)\/[0-9]?[0-9]?[0-9]?[0-9]?\s[01]?[0-9]?/.test( mw.config.get( 'wgPageName' ) ) ||
        $( '#transformeEnPageDeDiscussion' ).length
    ) {
        $( 'body' ).removeClass( 'ns-subject' ).addClass( 'ns-talk' );
    }
} );

// fin de la section "Transformer des pages en page de discussion"</syntaxhighlight><!--
/* -->

=== Script pour le [[modèle : Contributions]] ===

<!-- */
// --><syntaxhighlight lang="javascript">

var editcountClass = document.getElementsByClassName('usereditcount');
if (editcountClass.length > 0) {
    var mwApI, editcount;
    mwApI = new mw.Api();
    mwApI.post({
        action: "query",
        format: "json",
        list: "users",
        usprop: "editcount",
        ususers: editcountClass[0].innerText
    }).then(function(data){
        if(data.query.users[0].editcount) {
            editcount = data.query.users[0].editcount;
            editcountClass[0].innerText = editcount;
        } else {
            editcountClass[0].innerHTML = '<span class="error">Compte inexistant !</span>';
        }
    });
}

// fin de la sous-section "Script pour le modèle : Contributions"</syntaxhighlight><!--
/* -->

<!-- */
// --><syntaxhighlight lang="javascript">

}

// fin de la section "Non valable en espace principal"</syntaxhighlight>