[spip-dev] chemin d'images dans le js d'un plugin

Dev
1

Bonjour,
Je cherche à faire un plugin utilisant le script https://chessboardjs.com/

Je déclare le script dans paquet.xml ainsi :
<script source="js/chessboard.js" />

J'utilise un modèle pour intégrer des échiquiers dans les articles et le script est bien intégré dans le privé ou le public.

Par contre les images ne passent pas. Elles sont appelées ainsi dans chessboard.js
// default piece theme is wikipedia
if (!config.hasOwnProperty('pieceTheme') ||
(!isString(config.pieceTheme) && !isFunction(config.pieceTheme))) {
config.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png'

Mais ça donne par exemple dans le privé http://localhost/chessboard/ecrire/img/chesspieces/wikipedia/wK.png ou dans le public http://localhost/chessboard/img/chesspieces/wikipedia/wK.png
Comment faire pour que le chemin des images soit bien le le dossier img du plugin ? Y aurait-il une instruction find_in_path qui serait applicable en js ? Ou ... ?

Merci de votre aide !
Jacques

2

En js, je sais pas, mais avec #CHEMIN https://www.spip.net/fr_article4332.html tu peux le faire.

Par contre, ça veut dire que ton chessboard.js doit être un squelette, par ex chessboard.js.html, que tu appelles ensuite par le pipeline insert_head (à moins que la déclaration dans paquet.xml gère les squelettes?)

                 jeanmarie
3

Merci pour la réponse, ça m'aide à y voir plus clair. Ca m'embêtait de mette tout le js en squelette juste pour changer le chemin... mais s'il n'y a pas d'autre solution ^^
Je vais donc essayer de faire ce chessboard_pipeline.php avec insert_head
Merci
Jacques

4

Never ever ! Jamais, ô grand jamais !

Chaque fois qu’on fait un squelette pour du JS ou du CSS un troupeau d’écureuil meurt en tombant d’un arbre.
(aka c’est totalement non écologique).

Pour ce genre de cas il faut faire comme dans le plugin links par exemple :

- Dans le pipeline insert_head_css tu insère un tout petit bout de JS inline qui initialise une variable JS
https://zone.spip.net/trac/spip-zone/browser/spip-zone/plugins/links/trunk/links_fonctions.php#L89

(la bonne pratique est d’insérer ce JS inline AVANT les CSS, donc en début de pipeline, pour de sombres histoires de cascade de chargement par les navigateurs, mais si tu le fait à la fin de insert_head_css c’est pas la mort - mais il faut alors insérer avant le script, et comme tous les scripts vont être regroupés/concaténés par le minifieur, il faut être sur que ton js inline sera bien avant le JS concaténé à la fin, donc dans insert_head ça risque de pas toujours marcher)

Dans ton cas tu initialisera cette variable avec le chemin vers le dossier img/chesspieces/wikipedia, que tu peux trouver avec un find_in_path()

- dans ton js, tu utilises cette variable globale à la place du chemin en dur
https://zone.spip.net/trac/spip-zone/browser/spip-zone/plugins/links/trunk/links.js#L9
Cela dit, dans ton cas, il y a déjà quelque chose de prévu, donc il faudrait réussir à initialiser config.pieceTheme (mais a voir d’où vient ce config, si c’est une variable globale ou quelque chose à passer quand tu appele les fonctions de ton js)

Et hop le tour est joué, tu as sauvé des écureuils :slight_smile:

5

Salut,

dans le but de sauver des écureuils, j’avais gardé ce mail sous le coude pour un cas d’utilisation ultérieure et je crois qu’on y est…

Pour un squelette HTML5up, j’ai besoin, dans du css, de récupérer l’url d’une image stockée en base via la config du plugin.

Donc, avant ce mail, j’aurais fait ça :

  • un squelette pour faire du css comme ici
  • que j’aurais appeler avec #PRODUIRE{fond…} comme là

J’avais aussi la solution du pipeline insert_head comme ici :

Mais maintenant, je ne sais pas, je ne sais plus. Alors, comment je sauve les bébêtes ?

jeanmarie

6

Salut,

Je sais pas si il existe une méthode dans Spip pour le faire "proprement",
chaque plugin le fait un peu à sa façon il me semble.
En général Il suffit de déclarer la variable dans le squelette du head dans
des balises scripts. Faut pas chercher midi a 14H :slight_smile:

[<script type="text/javascript">var
mavarjs='(#CONFIG{mavaleurqqpart})'</script>]

7

Hop,

8

Hello,