SVG interactif avec

Soutien Installation
9

J’ai continué à comprendre cela progressivement. Cela nécessite beaucoup de configuration pour poser ma question :

SVG

J’ai un serveur web qui génère des SVG. Pour cette question, il génère un SVG de test très simple…

<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" viewBox="0 0 100 100">
<path d="M50,4L4,50L50,96L96,50Z" stroke="#40638C" stroke-width="3"></path>
<path d="M50,5L5,50L50,95L95,50Z" stroke="#333" fill="#40638C" stroke-width="3"></path>
<path d="M37,42c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#40495E" fill="#40495E"></path>
<path d="M35,40c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#333" fill="#555"></path>
</svg>

C’est simplement un signe de « fusion » assez élaboré. Notez qu’il contient quatre éléments PATH.

Intégration

Pour intégrer le SVG dans un message, j’utilise un script JavaScript ajouté via mon thème.

L’objectif final serait de créer un véritable plugin. Mais je cherche simplement à construire une preuve de concept. Donc, j’ai simplement collé le code dans la section <head> de la personnalisation de mon thème :

<script type="text/discourse-plugin" version="0.8">
var UMB = {
    svgload: function(base, target) {
        var url = base + $(target).text();
        $(target).html('');
        $.ajax({
            method: "GET",
            url: url,
            async: false,
            dataType: "text",
            success: function(data) { $(target).append(data); }
        });
        alert('chargé !');
        $(target).children('path').each(function(){alert('voici un élément path');});
    },
}
$.fn.umbdv = function() {
    this.each(
        function() {
            UMB.svgload('__URL_REDACTED__', this);
        }
    );
    return this;
};
api.decorateCooked(
  $elem => $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
  { id: 'umbdv' }
);
</script>

Où…

var UMB = { est simplement une variable globale qui m’évite d’avoir des fonctions anonymes géantes partout.

$.fn.umbdv = est [ce que je pense être appelé] un « plugin » étendant JQuery.

api.decorateCooked( me permet de manipuler le message avant qu’il ne soit envoyé au navigateur.

Incantation

Dans un sujet, j’écris ensuite…

<div data-custom="umbdv">/vtest</div>

UMB.svgload('__URL_REDACTED__', this) est appelé pour ce DIV.

UMB.svgload() comprend correctement la chaîne /vtest, compose une URL et effectue la requête AJAX. Il exécute avec succès append(data) et boop, mon SVG est intégré…

Screen Shot 2021-01-24 at 10.50.45
Screen Shot 2021-01-24 at 10.50.452872×1584 728 KB

Mon alert() à l’intérieur de UMB.svgload() se déclenche ensuite, exactement comme prévu. (C’est évidemment une astuce de débogage, non ? :))

La question (enfin)

J’ai un sujet réservé AU PERSONNEL dans mon forum hébergé sur Discourse où vous pouvez voir cela en action. (Je m’adresse au personnel/support de Discourse qui peut pénétrer dans mon installation en tant qu’utilisateurs Admin.)

https://forum.moversmindset.com/t/svg-experimentation-in-progress/1109

Pourquoi…

$(target).children('path').each(function(){alert('voici un élément path');});

…ne sélectionne aucun des éléments PATH ?

Cela ne fait rien — aucune erreur. Rien du tout.

Suivant

Voici où j’irai si je parviens à faire fonctionner cette preuve de concept triviale avec alert()…

Je suis conscient que le fragment du DOM avec lequel je « travaille » n’est pas encore connecté au DOM réel du document (au moment où UMB.svgload() est appelé). C’est pourquoi j’attends que $(target)… soit ce dont j’ai besoin.

À terme, j’intégrerai des SVG beaucoup plus complexes et j’aurai besoin d’utiliser des sélecteurs JQuery plus avancés. Je veux trouver de nombreux éléments à l’intérieur de $(target) et attacher des gestionnaires d’événements (comme onclick, par exemple) qui appelleront d’autres fonctions globales UMB.….

1 « J'aime »