[spip-dev] Rajouter qqchose dans le head

[26c2d4aa24d1ce775fd2]

Bonjour,

  J'ai besoin de rajouter quelque-chose de dynamique dans le head. J'ai lu que

1. comment on invoque un pipeline depuis "mes_fonctions.php" ? pas
trouvé de doc là-dessus...

C'est TRES TRES TRES difficile d'utiliser les pipelines sans passer par
les plugins.

(Je ne veux pas que ce soit dans le head_prive, seulement le site public.)

La problématique: mes utilisateurs me demandent de rajouter des choses dans des div de menu/actualités etc, depuis l'article lui-même. J'ai donc fait un modèle utlra-simple:

squelettes/modeles/ajoute.html:

[<script type="application/javascript">
$("(#OU)").append(['(#TEXTE*)'])
</script>]

comme ça, en mettant dans un article
<ajoute

ou = #headlines h3:first
texte = <a href="lien">bidule</a>

>
ça me rajoute le lien dans le premier h3 de l'élément dont l'id est "headlines". Bon, il faut faire confiance aux gens parce que les utilisateurs de forums pourraient mettre des choses se faisant passer pour originaux, mais bon, avant de penser sécurité:

Mais ça ne fonctionne pas pour atteindre les éléments qui sont chargés *après* le corps de l'article, et de toutes façons on m'a toujours dit qu'il fallait bien tout mettre le javascript dans le head et ne pas le laisser traîner au milieu du html.

Donc bon, je voudrais mettre un peu de php qui m'agrège à la compilation tous les petits bouts de javascript qui sont créés dans le corps de l'article (ou ailleurs) et qui les mette, à la fin comme argument d'un $(document).ready(function(){...}) dans l'en-tête.

Je voudrais donc faire un filtre php, une fonction du genre "rajoute_ready", et mon modèle serait donc

[<?php rajoute_ready('
$("(#OU)").append([\'(#TEXTE*)\'])')
?>]

(en passant: je ne vois pas le moyen de faire ça en spip avec un filtre)

Je me dis que cette fonction faciliterait la vie à d'autres personnes également, rajouter du javascript dans le head, c'est un truc dont on a souvent besoin...

Est-ce que je dois absolument passer par un plugin?

Merci, cordialement, Ch. M.

[Toussaint_Guglielmi]

Christian Mercat a écrit :

Mais ça ne fonctionne pas pour atteindre les éléments qui sont chargés *après* le corps de l'article,

En fait il suffirait de mettre ça dans un document.ready non ?
Avec jquery un simple:
$(function(){
  /* ton code */
});

Ça devrait marcher.

> et de toutes façons on m'a toujours dit
> qu'il fallait bien tout mettre le javascript dans le head et ne pas le
> laisser traîner au milieu du html.

Bah ça fonctionne dans tout navigateur et en l'occurence c'est encore le plus simple alors... C'est pas comme si c'était un problème majeur d'accessibilité ou de compatibilité.

TG

[26c2d4aa24d1ce775fd2]

J'suis d'acc (d'ailleurs j'ai abondé dans ce sens dans le reste du courriel), mais la question ici est de

1) agréger tous ces petits bouts de javascript (il peut y en avoir plusieurs) dans un seul $(document).ready(function(){...})
parce que le document ne peut avoir qu'une seule fonction ready si je ne m'abuse... Je ne vois pas comment faire autrement qu'en php avec une variable globale qui s'incrémente et dont on se fait l'écho quelque-part...

2) mettre ça proprement dans le head, même si ça fonctionne aussi à la malpropre, si possible avec une petite fonction toute simple plutôt qu'avec un plugin.

Cordialement, Ch. M.

[fil]

1) agréger tous ces petits bouts de javascript (il peut y en avoir
plusieurs) dans un seul $(document).ready(function(){...})
parce que le document ne peut avoir qu'une seule fonction ready si je
ne m'abuse...

Tu t'abuses : en jQuery on en met autant qu'on veut, et jQuery
s'occupe de faire que ça marche.

Je ne vois pas comment faire autrement qu'en php avec une
variable globale qui s'incrémente et dont on se fait l'écho
quelque-part...

Ouh là là. C'est le concept de base qui n'est pas bon. A mon sens ton
modèle devrait afficher un <div class="adeplacer" rel="oussa"> ton
contenu </div> ; pas de javascript. En revanche dans ton head tu
ferais un $().ready(function(){$('.adeplacer').each(...)

-- Fil

[26c2d4aa24d1ce775fd2]

Tu t'abuses : en jQuery on en met autant qu'on veut, et jQuery
s'occupe de faire que ça marche.

Trop fort ce jquery. M'enfin je ne sais pas pourquoi mais $("(#OU|trim)").append(['(#TEXTE*)']) fonctionne là où $("(#OU)").append(['(#TEXTE*|trim)']) échoue, va comprendre...

Je ne vois pas comment faire autrement qu'en php avec une
variable globale qui s'incrémente et dont on se fait l'écho
quelque-part...

Ouh là là. C'est le concept de base qui n'est pas bon. A mon sens ton
modèle devrait afficher un <div class="adeplacer" rel="oussa"> ton
contenu </div> ; pas de javascript. En revanche dans ton head tu
ferais un $().ready(function(){$('.adeplacer').each(...)

Aaahhh... TROP FORT CE JQUERY!!
Et aussi Fil qui sait l'utiliser, je vois poindre la lumière, même si, je n'arrive pas à l'utiliser tel quel, m'enfin Toussaint Guglielmi a raison:

[$(function(){$("(#OU|trim)").append(['(#TEXTE*|trim)'])});]

me fait effectivement patienter jusqu'à la fin du chargement de la page et c'est ce qui compte, donc je m'en fous un peu. Et en plus c'est du javascript et pas du spip. Mais comme j'aimerai comprendre, j'ai essayé

<style type="text/css"> .adeplacer {visibility: hidden;} </style>
<script type="text/javascript"><!--
$().ready(function(){
$('.adeplacer').each(
function(i){
    $(this.ou).append(this.quoi) <<<< là je ne sais pas comment dire qu'il faut récupérer les propriétés "ou" et "quoi", je ne sais pas si j'ai le droit de faire ce genre de choses...
  }
)
}
//-->
</script>
</head>

<p class="adeplacer" ou="#monId" quoi="<a href='lien'>Cliquez moi</a>" />

M'enfin c'est plus pour savoir que pour l'utiliser...

Christian

[fil]

[$(function(){$("(#OU|trim)").append(['(#TEXTE*|trim)'])});]

me fait effectivement patienter jusqu'à la fin du chargement de la page
et c'est ce qui compte, donc je m'en fous un peu. Et en plus c'est du
javascript et pas du spip. Mais comme j'aimerai comprendre, j'ai essayé

Tu as intérêt à bien border tes rédacteurs pour ne pas avoir des trucs
funky dans #TEXTE, qui planteront ton javascript.

<style type="text/css"> .adeplacer {visibility: hidden;} </style>
<script type="text/javascript"><!--
$().ready(function(){
$('.adeplacer').each(
function(i){
    $(this.ou).append(this.quoi) <<<< là je ne sais pas comment dire
qu'il faut récupérer les propriétés "ou" et "quoi", je ne sais pas si
j'ai le droit de faire ce genre de choses...

oui, nickel : mets rel="#monID" pour exploiter des choses plus saines,
et tu auras tout bon.
$(this).attr('rel') te donne l'attribut rel du this.

Pour le quoi, il faut le mettre à l'intérieur de la div, et comme tu
vas faire append(this) il sera déplacé avec la div (du coup, pas
besoin de la masquer).

  }
)
}
//-->
</script>
</head>

<p class="adeplacer" ou="#monId" quoi="<a href='lien'>Cliquez moi</a>"
/>

Autre avantage de cette méthode : le contenu est en html, les moteurs
de recherche vont donc l'indexer, les utilisateurs de lynx le voir,
etc.

-- Fil

[26c2d4aa24d1ce775fd2]

oui, nickel : mets rel="#monID" pour exploiter des choses plus saines,
et tu auras tout bon.
$(this).attr('rel') te donne l'attribut rel du this.

Ouah, dément, ça fontionne:

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.adeplacer').each(
     function(i){
      $($(this).attr("rel")).append(this);
     }
    )
});
</script>
</head>
<body>
<li class="adeplacer" rel="#orderedlist">Tralala</li>

<li class="adeplacer" rel="#orderedlist">Pouetpouet</li>

<ol id="orderedlist">

    <li>Zimbamboum</li>
    <li>Tagada</li>
    <li>Tsointsoin</li>
  </ol>
</body>
</html>

Pour le quoi, il faut le mettre à l'intérieur de la div, et comme tu
vas faire append(this) il sera déplacé avec la div (du coup, pas
besoin de la masquer).

Autre avantage de cette méthode : le contenu est en html, les moteurs
de recherche vont donc l'indexer, les utilisateurs de lynx le voir,
etc.

Moi je dis, jquery+spip+Fil = respect trop fort. J'en fais une contrib de ce pas...

Voilà: SPIP-Contrib

Christian
- Ce n'est que du javascript, Seigneur!
- Oui don Camillo, mais du jquery!

[26c2d4aa24d1ce775fd2]

Avec l'aide de Fil j'ai fait pareil pour les css, un peu plus dur quand-même:

<script type="text/javascript">
  $(document).ready(function(){
      $('.css').each(
     function(i){
       $rel = $(this).attr("rel"); // #ma_div
       $css = $(this).attr("css"); // 'color: red, font-weight: bold'
       $t = $css.split(/, */);
       $($t).each(function(j){
          $key_val = this.split(/: */); // ['color', 'red']
          $($rel).css($key_val[0], $key_val[1]);
       });
            }
    );
});
</script></head>
<body>
<span class="css" rel="#orderedlist" css='color: blue, font-weight: bold'/>

ça permet aux rédacteurs de changer des éléments du style de manière dynamique depuis leur article/rubrique.

Je rajoute ça à
  http://www.spip-contrib.net/ecrire/?exec=articles&id_article=2396

Cordialement, Christian