Ho continuato a capire tutto questo lentamente. Per porre la mia domanda è necessaria molta configurazione:
SVG
Ho un server web che genera SVG. Per questa domanda, genera un SVG di test molto semplice…
<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>
È solo un segno di “unione” dall’aspetto elaborato. Nota che ha quattro elementi PATH.
Inline
Per inserire l’SVG in un post, sto usando un po’ di JavaScript aggiunto tramite il mio tema.
L’obiettivo finale sarebbe creare un plugin vero e proprio. Ma sto solo cercando di realizzare una prova di concetto. Quindi è semplicemente incollato nella sezione <head> della personalizzazione del mio tema:
<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('caricato!');
$(target).children('path').each(function(){alert('ecco un elemento 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>
Dove…
var UMB = { è semplicemente una variabile globale che mi evita di avere funzioni anonime gigantesche ovunque.
$.fn.umdv = è [quel che penso sia chiamato] un “plugin” che estende JQuery.
api.decorateCooked( mi permette di manipolare il post prima che venga inviato al browser.
Incantesimo
In un argomento, poi scrivo…
<div data-custom="umbdv">/vtest</div>
UMB.svgload('__URL_REDACTED__', this) viene chiamato per quel DIV.
UMB.svgload() interpreta correttamente la stringa /vtest, compone un URL ed effettua la richiesta AJAX. Esegue con successo append(data) e boop il mio SVG è inline…
Il mio alert() all’interno di UMB.svgload() viene quindi attivato, esattamente come previsto. (È ovviamente un trucco di debug, vero? :))
La domanda (finalmente)
Ho un argomento RISERVATO ALLO STAFF nel mio forum ospitato su Discourse dove puoi vedere questo in azione. (Sto parlando con il personale di supporto di Discourse che può entrare nella mia installazione come utenti Admin.)
https://forum.moversmindset.com/t/svg-experimentation-in-progress/1109
Perché non…
$(target).children('path').each(function(){alert('ecco un elemento path');});
…seleziona nessuno degli elementi PATH?
Non fa nulla—nessun errore. Nulla.
Prossimo passo
Dove andrò se riesco a far funzionare questa banale prova di concetto con alert()…
Sono consapevole che il frammento di DOM con cui sto “lavorando” non è ancora connesso al DOM del documento effettivo (nel momento in cui viene chiamato UMB.svgload()). È per questo che mi aspetto che $(target)… sia ciò di cui ho bisogno.
In definitiva, sto inlineando SVG molto più complessi e dovrò usare selettori JQuery più sofisticati. Voglio trovare molti elementi all’interno di $(target) e attaccare gestori di eventi (onclick, per esempio) che chiameranno altre funzioni globali UMB.….
