Utilisateur:Mr Banane/Tutorial

Un article de la désencyclopédie.
Aller à la navigation Aller à la recherche


Alors comme ça on calcule rien au Javascript ? Ca tombe bien, moi non plus !

Nuvola apps important.png
Faites attention !
Pour des raisons de sécurité, il vaut mieux s’identifier pour suivre cette page !!!
Voye

Salut lecteur anonyme, je ne sais pas trop comment tu es arrivé sur cet article et d’ailleurs tu ferais bien de te casser au plus vite !

Ca va causer ici de choses qui te dépassent et même si ce n’est pas le cas, tu ne me la feras pas à moi ! Bien sur, j’admets qu’il y a environs 2 ou 3 personnes plus balaises que moi, mais surement pas cet abruti de lecteur en vadrouille. Et puis même si c’était le cas, imaginons que tu sois meilleur que moi hein ? Ca fait quoi ?


Tu l’auras compris, sur la dÉsencyclopédie, on s’en bat un peu les steaks des compétences des uns et des autres… Il n’y à qu’à regarder la liste des tyrans.

Mais je vais essayer d’expliquer aux produits de sous-demeurés que tu es le peu de chose que Moi !! J’ai compris. C’est parti mon kiki!

Etape 1

Il va falloir tout d'abord créer deux pages, plutôt importante : Cette page et celle-ci !!

Etape 2

Ahah ! J’ai oublié de te dire ce qu’il faut foutre dedans ? Ahaha ! Je m’en fous ! Nananereuuuuuuuh…

Bon sans déconner, tout d’abord mets ça dans votre monobook.css:

QUE DALLE !!!!

Ensuite pour le monobook.js, va donc faire un tour là, tu y trouvera des fonctions simples (ou pas) mais en tout cas facilement utilisable.

Ouai mais il n'y a pas ce que JE veux !!! Connard !!

Et voilà, toujours les mêmes qui font chier hein ?

Et bien, sache qu’on n’a pas toujours ce que l’on veut dans la vie ! Na !

Les Boîtes persos

Ahah ! Si tu n’as pas lu le début de cet article, il y a de fortes chances que tu ne captes que dalle à ce que je vais écrire ici. Mais bon, c’est tellement marrant de faire les choses à l’aveuglette hein ?

Enfin c’est pas comme si j’avais expliqué tout en détails hein ? De toute manière j’en suis pas capable…

Tour de magie

Bon aller, on va passer à la phase : réalisons une jolie boîte à la main ! Vous avez rajouté des fonctions à l’aide des modeles ? C’est bien… On va manipuler uniquement le fichier monobook.js créée un peu plus haut tiens… Voici le code que l’on va ajouter : (vive le copier/coller hein…) 

function nouvelleBoite() {
    var l = document.getElementById('column-one');
    if (!l) return;
    l.innerHTML = l.innerHTML
     + '<div class="portlet" id="p-nbx">'
     + ' <h5>Boîte perso</h5>'
     + ' <div class="pBody">'
     + '   <ul>'
     + '     <li><a href="XXX">YYY</a></li>'
     + '     <li><a href="http://desencyclopedie.wikia.com/wiki/Accueil">Chez les ploucs</a></li>'
     + '     <li><a href="http://desencyclopedie.wikia.com/wiki/MediaWiki:Monobook.css">Monobook.css de base</a></li>'
     + '     <li><a href="http://jaimelorieetlepmucestmapassion.com">Mon blog</a></li>'
     + '   </ul>'
     + ' </div>'
     + '</div> ';
  }
  addOnloadHook(nouvelleBoite);

Attention !! Touches pas au code déjà inscrit si tu as utilisé les modèles pour monobook.

Donc on regarde un peu le code, et là :

Vous pouvez paniquer.

Nan sans déconner, même mon ami imaginaire elfe il comprend comment ça marche ! Mais comme, vous êtes ni mon ami, ni imaginaire, ni elfe (comment ça une redondance ? c’est toi la redondance hé !)


Bon vous suivez ? Parce que bon, je n’aimerai pas avoir écris tout ça pour rien, m’enfin il me reste toujours les insultes gratuites glissées dans cet article, hein enfoiré ?

Alors vous avez vu le joli bout de code un peu plus haut hein ? (Oui certes il faut etre aveugle pour ne pas le voir. Je vais vous expliquer ce qui est intéressant à savoir.

Le titre

     + ' <h5>Boîte perso</h5>'

Hé oui, c’est entre ces deux balises que tu donne un petit nom à ta boîte !

Ainsi 

     + ' <h5>Boîte où je mets sont mes liens de pr0n</h5>'

Permet d’obtenir une boîte s’intitulant : Boîte où je mets sont mes liens de pr0n.

Magique !

Le contenu

C’est bien beau d’avoir une boite, encore faut-il y foutre quelque chose !! Le code suivant : 

     + '     <li><a href="XXX">YYY</a></li>'
     + '     <li><a href="http://desencyclopedie.wikia.com/wiki/Accueil">Chez les ploucs</a></li>'
     + '     <li><a href="http://desencyclopedie.wikia.com/wiki/MediaWiki:Monobook.css">Monobook.css de base</a></li>'
     + '     <li><a href="http://jaimelorieetlepmucestmapassion.com">Mon blog</a></li>'

Permet d’ajouter des liens dans la boîte, prenez la ligne exemple :

     + '     <li><a href="XXX">YYY</a></li>'
XXX : Représente le lien à suivre, donc une adresse qui commence par http:// de préférence…
YYY : Représente le titre du lien à suivre, et donc résume rapidement vers quoi ce lien dirige.
Mise en pratique
     + '     <li><a href="http://desencyclopedie.wikia.com/wiki/Accueil">Chez les ploucs</a></li>'

En lisant ceci, tu l’auras compris, le lien dirige vers l’accueil de la dÉsencyclopédie et affichera dans la boîte un lien intitulé : Chez les ploucs.

On peut ainsi rajouter autant de lien que l’on veut, mais rappelez vous que plus il y en a, plus la page va mettre du temps à s’afficher. Choisissez plutôt une boîte légère afin de ne pas gêner votre navigation.

Voilà !

Pas si dur que cela hein ? Mais n’oublie pas de respecter scrupuleusement la syntaxe ! Et de ne pas faire de trucs du genre : 

function nouvelleBoite() {
    var l = document.getElementById('column-one');
    if (!l) return;
    l.innerHTML = l.innerHTML
     + '<div class="portlet" id="p-nbx">'
     + ' <h5>Boîte pers<o/h5>'
     + ' <div class="pBody">'
     + '   <ul>'
     + '     <li><a href="XXX">YYY</a></li>'
     + '     <li><a href="http://desencyclopedie.wikia.com/wiki/Accueil">Chez les ploucs</li>'
     + '     <li><a href="http://desencyclopedie.wikia.com/wiki/MediaWiki:Monobook.css">Monobook.css de base</a>
     + '     <li><a href="jaimelorieetlepmucestmapassion.com">Mon blog</a></li>'
     + '   </ul>'
     + ' </div>'
     + '</div> ';
  }
  addOnloadHook(nouvelleBoite)

Amuse toi à chercher les différences, mais cette version ne marchera pas correctement, je peux t’en assurer ! Mouahahahahahaahahahah !

Barre d’outils personnalisée ? C’est possible !

Nuvola apps important.png
Faites attention!
|Si toi aussi, tu te demandes pourquoi tu lis cet amas putride de prétendues consignes venant d’un type qui n’y connais strictement que dalle, regarde donc là. Enfoiré(e)

Je sais que tu en rêve ! « Oh !Oui ! Si seulement je pouvais rajouter mes outils pour pouvoir spammer les messages de bienvenue ! »Je vais encore tenter d’expliquer à ton ramassis de merde que tu considère comme ton cerveau comment faire.

Afin de ne pas surcharger ton joli monobook.js, on va passer par la création d’un nouveau fichier Javascript, ce qui rendra ton monobook certainement plus lisible et plus compréhensible. Donc tout d’abord, créer l’article barreoutils.js où l’on stockera le code nécessaire pour rajouter tout les outils que tu veux.

Quoi que je mets dedans ?

Voilà, on en est au point essentiel, le code nécessaire pour rajouter des outils. Arf… Faut vraiment tout t’expliquer hein ?

Bah voilà le code :

/* Barre d’outil */
//////////////////////ZONE PERSONNALISABLE//////////////////////
var deluxebarMessages = new Array();
var deluxebarImages = new Array();
var deluxebarCommentaires = new Array();
 
with (deluxebarMessages) {
        push("{{subst:" + "Bienvenue" + "}}");
        push("{{" + "Poney" + "}}");
        push("[[Utilisateur:Mr Brouillon|Mr Brouillon]]");
}
with (deluxebarImages) {
push("http://images.wikia.com/desencyclopedie/images/4/46/Vienbenue.gif");
        push("http://images1.wikia.nocookie.net/desencyclopedie/images/thumb/e/e6/Poney.jpg/24px-Poney.jpg");
        push("http://images2.wikia.nocookie.net/desencyclopedie/images/thumb/9/95/Monkey_costume.jpg/21px-Monkey_costume.jpg");
}
 
with (deluxebarCommentaires) {
        push("Bienvenue !");
        push("Encore un putain de [[poney-club]]");
        push("[[Utilisateur:Mr Brouillon|Mr Brouillon]]");       
        
}
/////////////////FIN DE LA ZONE PERSONNALISABLE/////////////////
 
function DeluxeBar() {
        if (document.createTextNode) {
                var toolbar = document.getElementById("toolbar");
                if (!toolbar) return;
 
 
                for (var i=0;i<deluxebarMessages.length;i++) {
                        var img = document.createElement("img");
                        img.setAttribute("src", deluxebarImages[i]);
 
                        var ref = document.createElement("a");
                        ref.setAttribute("href", "javascript:insertTags('', \"" + deluxebarMessages[i] + "\", '');" +
                                        "javascript:changeSummary(\"" + deluxebarCommentaires[i] + "\");" );
                        ref.appendChild(img);
 
                        toolbar.appendChild(ref);
                }
        }
}
 
function changeSummary(sampleText) {
        var resum = document.editform.wpSummary.value;
        if(resum != 0 && resum.indexOf("*/") < resum.length - 3) {
                document.editform.wpSummary.value += " ; ";
        }
        document.editform.wpSummary.value += sampleText;
}
addLoadEvent(DeluxeBar);

Voilà vous avez copié ceci ? C’est cool…

Modifions tout ça

Il faut savoir que la zone qui nous intéresse est la suivante :

/////////////////////ZONE PERSONNALISABLE//////////////////////
var deluxebarMessages = new Array();
var deluxebarImages = new Array();
var deluxebarCommentaires = new Array();
 
with (deluxebarMessages) {
        push("{{subst:" + "Bienvenue" + "}}");
        push("{{" + "Poney" + "}}");
        push("[[Utilisateur:Mr Brouillon|Mr Brouillon]]");
}
with (deluxebarImages) {
push("http://images.wikia.com/desencyclopedie/images/4/46/Vienbenue.gif");
        push("http://images1.wikia.nocookie.net/desencyclopedie/images/thumb/e/e6/Poney.jpg/24px-Poney.jpg");
        push("http://images2.wikia.nocookie.net/desencyclopedie/images/thumb/9/95/Monkey_costume.jpg/21px-Monkey_costume.jpg");
}
 
with (deluxebarCommentaires) {
        push("Bienvenue !");
        push("Encore un putain de [[poney-club]]");
        push("[[Utilisateur:Mr Brouillon|Mr Brouillon]]");       
        
}
/////////////////FIN DE LA ZONE PERSONNALISABLE/////////////////

Première Partie

On va d’abord s’intéresser à cette partie là :

with (deluxebarMessages) {
        push("{{subst:" + "Bienvenue" + "}}");
        push("{{" + "Poney" + "}}");
        push("[[Utilisateur:Mr Brouillon|Mr Brouillon]]");
}

Je t’ai mis trois exemples, mais c’est simple comme bonjour, pour rajouter une fonction, il suffit de rajouter entre le with (deluxebarMessages) { et le } 

        push("Mon Texte !");

Tu l’as remarqué, je mets des " + " pour ajouter du texte lorsque je manipule des modèles avec {{ et {{subst :.

S’il s’agit juste de texte, un simple 

        push("Vive les frites ! Mange donc ma [[pénis|banane]]");

est amplement suffisant.

Deuxième première Partie

Maintenant, à notre message automatique, on lui attribue une MAGNIFIQUE image pour… pour le fun quoi… 

with (deluxebarImages) {
        push("http://images.wikia.com/desencyclopedie/images/4/46/Vienbenue.gif");
        push("http://images1.wikia.nocookie.net/desencyclopedie/images/thumb/e/e6/Poney.jpg/24px-Poney.jpg");
        push("http://images2.wikia.nocookie.net/desencyclopedie/images/thumb/9/95/Monkey_costume.jpg/21px-Monkey_costume.jpg");
}

Même principe : Je t’ai mis trois exemples, mais c’est simple comme bonjour, pour rajouter une fonction, il suffit de rajouter entre le with (deluxebarImages) { et le } 

        push("Adresse Absolue de mon image");

Il faut en effet préciser l’adresse absolue, donc l’adresse doit commencer par http ou ftp ou que sais-je encore, et surtout finir par .gif ou .jpg ou une autre extension accepté sur la dÉsencyclopédie.

ATTENTION !!

Ton image doit faire de préférence 24*X ou X*24, X étant inférieur à 24. Le must du must étant une image 24*24. Je précise cela pour une raison tout simple, sinon cela ne s’affiche pas ou ça fait du caca. Donc arrête de te la ramener et fais ce que je dis, sinon j’appelle mon copain Sarkozy.

Bon ! Parce que tu me fais de la peine, je vais te donner trois conseils (voir plus si tu accepte un rendez-vous privé chez toi, contacte donc l'auteur de cet article).

Conseil 1 : Lis le manuel de Windows en entier !

Conseil 2 : Pour trouver facilement l’adresse d’une image, un simple clique droit dessus puis Propriétés ouvre une fenêtre. Dedans un champ Adresse URL et à coté l’adresse absolue. Bien sur cela dépend du navigateur mais généralement on trouve l’adresse de l’image de cette manière. Et puis si cela ne marche pas, laisse tomber, choisi autre chose…

Conseil 3 : Pour obtenir une image déjà hébergé dans la dÉsencyclopédie mais à une taille voulu, rien de plus simple ! Il suffit d’utiliser [[Image:nomdel’image.XXX|24px]], et de prévisualiser ceci. Ensuite appliquez le conseil précédant et hop le tour est joué !


Hey je déconnais pour le conseil 1…

Deuxième deuxième première partie

Ah enfin ! Maintenant passons à la configuration du commentaire automatique associé à chaque outil. 

with (deluxebarCommentaires) {
        push("Bienvenue !");
        push("Encore un putain de [[poney-club]]");
        push("[[Utilisateur:Mr Brouillon|Mr Brouillon]]");       
        
}

Bon, je me demande si cela vaut la peine d’expliquer ? Toujours la même chose hein… Allez ! Un copié collé c’est pas la mort… Je t’ai mis trois exemples, mais c’est simple comme bonjour, pour rajouter une fonction, il suffit de rajouter entre le with (deluxebarCommentaires) { et le } 

        push("Votre commentaire");

Il est bien évident que si tu ne veux pas de commentaire, tu mets

        push("");

Compris ?

Important !

Voilà, tu es, comme moi, un pro du Javascript ! Bravo !

Servietski.jpg

"Eh les copains, on s'fume un pétard ?"

L'auteur a fumé plein de pétards et a écrit n'importe quoi sans se relire.

La dÉsencyclopédie dit non à la drogue! Il y a tellement de choses plus belles à faire dans la vie que se droguer, comme par exemple manger du pain d'épice ou compter sur ses doigts.

Toi aussi, dis non à cette m**** !

Mais n’oublie pas une chose ! Veille à bien avoir le même nombre de Messages/Images/Commentaires, même s’ils sont vides (notamment le commentaire)!


El Grande Final !

Ahah ! C’est presque prêt ! Je dis bien presque car il reste une dernière chose à faire !

Il faut rajouter dans votre monobook.js le code suivant :

/*Barre d’outils en plus*/

document.write('<script type="text/javascript" src="' + 'http://desencyclopedie.wikia.com/index.php?title=Utilisateur:Veuillez vous identifier ou créer un compte!!/monobook.js/barreoutils.js' + '&action=raw&ctype=text/javascript&dontcountme=s"></script>');


Une fois que tu as fait tout ça, il suffira de modifier la page barreoutils.js pour ajouter ou supprimer des outils.

Petite information en passant, il faut Actualiser les pages javascript après chaque modification pour en voir les effets…


Créer ses propres raccourcis pour les commentaires ! Owi owi youpi !

Bon, comme ça marche un peu comme pour créer ses boîtes persos, je ne vais pas vous materner sur ce coup bande de moules atrophiées. Je vous balance juste le code et les explications vite fait, bien fait (poil au nez). Mais avant tout ! Créée ta page commentaires.js , c’est dans celle-là qu’on (enfin je) travaillera pour l’instant.

Le code

//////////////////////ZONE PERSONNALISABLE//////////////////////
var resumedeluxeTitles = new Array();
with (resumedeluxeTitles) {
        push("Orthographe");
}

var resumedeluxeInputs= new Array();
with (resumedeluxeInputs) {
        push("Orthographe");
}
/////////////////FIN DE LA ZONE PERSONNALISABLE/////////////////

function setSummary(str)
{
        document.editform.wpSummary.value = str;
}

function addToSummary(str)
{
        var resum = document.editform.wpSummary.value;
        if(resum != 0 && resum.indexOf("*/") < resum.length - 3) {
                document.editform.wpSummary.value += " - ";
        }
        document.editform.wpSummary.value += str;
}

function DeluxeSummary()
{
        if (document.URL.indexOf("&section=new") > 0) return;
        var sumLbl = document.getElementById("wpSummaryLabel");
        if(sumLbl) {
                var sumInput = document.getElementById("wpSummary");
                sumInput.style.width = "95%";
                var str = "Messages prédéfinis : ";
                for(var cpt = 0; cpt < resumedeluxeTitles.length; cpt ++) {
                        var tmp = resumedeluxeInputs[cpt];
                        str += "<a href=\"javascript:addToSummary('" + tmp.replace( /[']/g , "\\'") + "')\""
                                + " class=\"sumLink\" title=\"Ajouter dans la boîte de résumé\">"
                                + resumedeluxeTitles[cpt]
                                + "</a> ";
                }
                sumLbl.innerHTML = str + "<br />" + sumLbl.innerHTML;
        }
}
addOnloadHook(DeluxeSummary);

Les explications

Ce qui nous fait bander dans ce code, c’est ça :

//////////////////////ZONE PERSONNALISABLE//////////////////////
var resumedeluxeTitles = new Array();
with (resumedeluxeTitles) {
        push("Orthographe");
}

var resumedeluxeInputs= new Array();
with (resumedeluxeInputs) {
        push("Orthographe de [[poney]] à croire qu’il tape avec sa tête sur le clavier !");
}
/////////////////FIN DE LA ZONE PERSONNALISABLE/////////////////

Pourquoi ? Bah c’est simple et je vais copier coller encore et toujours la même phrase ! Je t’ai mis trois (en fait un seul mouahahah) exemples, mais c’est simple comme bonjour, pour rajouter une fonction, il suffit de rajouter entre le with (resumedeluxeTitles) { et le } 

        push("Résumé de mon commentaire : Exemple :Orthographe");

Je t’ai mis trois (en fait un seul mouahahah) exemples, mais c’est simple comme bonjour, pour rajouter une fonction, il suffit de rajouter entre le with (resumedeluxeInputs) { et le } 

        push("Le commentaire en lui-même : Exemple : Orthographe de [[poney]] à croire qu’il tape avec sa tête sur le clavier !");

Enfin je crois que tu as compris le principe, si ce n’est pas le cas, c’est que soit tu es trop con pour comprendre, soit tu es un Kévin ou autre espèce de poney qui pulullent sur Terre. Tant pis pour ta gueule tiens !

La faim

Nuvola apps important.png
Faites attention !
Une impression de déjà vu ? Non, ça doit être toi…

Il faut rajouter dans votre monobook.js le code suivant:

/*Commentaires persos*/

document.write('<script type="text/javascript" src="' + 'http://desencyclopedie.wikia.com/index.php?title=Utilisateur:Veuillez vous identifier ou créer un compte!!/monobook.js/commentaires.js' + '&action=raw&ctype=text/javascript&dontcountme=s"></script>');

Une fois que tu as fait tout ça, il suffira de modifier la page commentaires.js pour ajouter ou supprimer des commentaires tout fait.

Petite information en passant, il faut Actualiser les pages Javascript après chaque modification pour en voir les effets…

Un aperçu en images

Voyez plutôt ce que la magie du Javascript permet d'accomplir !
  • Je sais que tu en rêvais toi qui lis ceci ! Un éditeur de texte spécialement conçu pour les wikis ! C’est pas beau ça ?

    Je sais que tu en rêvais toi qui lis ceci ! Un éditeur de texte spécialement conçu pour les wikis ! C’est pas beau ça ?

  • Cliquez sur l'image pour voir en détails

    Cliquez sur l'image pour voir en détails

  • Ouh! Pinaise ! ! Ca a l'air joli avec toutes ces couleurs !

    Ouh! Pinaise ! ! Ca a l'air joli avec toutes ces couleurs !

Tout savoir sur cet article !!
Récupérée de « https://desencyclopedie.org/w/index.php?title=Utilisateur:Mr_Banane/Tutorial&oldid=161385 »