Custom HTML Modul mit Parametern?

Re:Later · 25. Juni 2018

$this ist einfach Definitionssache. $this gibt es nicht immer. $this ist je Umgebung was komplett anderes.

Da ich die ganze Zeit hiervon ausgegangen bin:

Zitat von Re:Later

So weit ich verstanden habe, ist dein SVG-Code immer gleich und du willst lediglich je Beitrag und auf einer Beitragsseite die Bilder auswechseln.

haben wir uns jetzt wohl leider verzettelt.

Meines Erachtens ist es nicht trivial möglich innerhalb eines Moduls in einer Blogansicht zu ermitteln, in welchem Beitrag das Modul gerade angezeigt wird. Da müsste man wohl doch besser auf ein Plugin ausweichen, wo das alles bekannt ist.

Oder halt doch in einen Override. Dafür müsste man allerdings wissen, in welchem Kontext du dieses Modul einbindest. Ist da im Editor noch Text drumrum oder ist Erwartung tatsächlich, dass nur das Modul je Beitrag geladen wird. Einzelbeiträge gar nicht angezeigt werden sollen. Nur die Blogansicht relevant. So Zeugs.

0backbone0 · 25. Juni 2018

Also es soll wirklich nur das Modul im Beitrag stehen, ohne weiteren Text.

Und die Beiträge sollen nie richtig angezeigt werden.

Grundsätzlich bleibt der SVG Code auch gleich wenn ich die Bildernamen durch Variablen ersetzte also aus:

Code

 echo '<image id='.$sphereimage_id.' x="25" y="131" width="415" height="370" xlink:href="/images/Sphere0001.png" style.display="none"></image>';
 echo '<image id='.$compleximage_id.' x="25" y="131" width="415" height="370" xlink:href="/images/Complex0001.png" style.display="none"></image>';
 echo '<image id='.$flatimage_id.' x="25" y="131" width="415" height="370" xlink:href="/images/Flat0001.png" style.display="block"></image>';

wird dann:

Code

 echo '<image id='.$sphereimage_id.' x="25" y="131" width="415" height="370" xlink:href='.$sphereimagefile.' style.display="none"></image>';
 echo '<image id='.$compleximage_id.' x="25" y="131" width="415" height="370" xlink:href='.$compleximagefile.' style.display="none"></image>';
 echo '<image id='.$flatimage_id.' x="25" y="131" width="415" height="370" xlink:href='.$flatimagefile.' style.display="block"></image>';

Denke aber nicht das es an der Situation viel ändert...

Kann man das Pferd nicht anders herum aufsatteln und Loadmodule mit Parametern ausstatten?

Hab mir vorhin mal das Grundgerüst für ein Plugin angeschaut. Sieht auch nicht wesentlich komplizierter aus als ein Modul.

Kann man ein Plugin auch in einem Beitrag integrieren, oder muss es dann eine Modul / Plugin Kombination sein?

Re:Later · 25. Juni 2018

Die einfachste Variante ist, du setzt im Beitrag nur ein {doSvg} und arbeitest mit Eigenen Feldern.

Ganz rudimentärer Plugin-Code für Plugin-Event onContentPrepare:

Code

 public function onContentPrepare($context, &$row, &$params, $page = 0)
 {

  if (strpos($row->text, '{doSvg}') !== false)
  {
   
   // Variable in der der einzusetzende Code (SVG und JavaScript) gesammelt wird.
   $html = '';
   
   // Nur zusammensammeln, wenn Werte in Eigenem Feld mit id 5.
   if (!empty($row->jcfields[5]->value))
   {
    $html = 'blah blubber <b>' . $row->jcfields[5]->value . '</b> sonstwas';
   }
   
   // Code einsetzen oder einfach nur Tag entfernen
   $row->text = str_replace('{doSvg}', $html, $row->text);
   
  }
  
  return true;
 }

Alles anzeigen

0backbone0 · 25. Juni 2018

Ich habe es noch etwas einfacher gehalten. Ohne Felder.

Im Beitrag steht {materialpreview};name=matname;path=matpath

Dan zerlege ich den String entsprechend und habe alle Werte die ich brauche.

Hier der Plugin Code:

PHP

<?php

defined('_JEXEC') or die;

class plgContentMaterialPreview extends JPlugin
{
    
    public function onContentPrepare($context, &$row, &$params, $page = 0)
    {
        //store whole line for removal
        $commandstring = $row->text;
        if (strpos($row->text, '{materialpreview}') !== false)
        {    
            //split commandstring into array
            $parameter = explode(";", $commandstring);
            
            //get name and path
            foreach ($parameter as &$value) {
                if (strpos($value,'name=') !== false){
                    $materialname=str_replace('name=','',$value);
                }
                if (strpos($value,'path=') !== false){
                    $materialpath=str_replace('path=','',$value);
                }
            }
            
            //remove commandstring
            $row->text = str_replace($commandstring, "", $row->text);
               
  
            //setup variables for SVG
            $uniqid=uniqid();

            $title_id="title".$uniqid;
            $flat_inactive_id="flat_inactive".$uniqid;
            $flat_active_id="flat_active".$uniqid;
            $sphere_inactive_id="sphere_inactive".$uniqid;
            $sphere_active_id="sphere_active".$uniqid;
            $complex_inactive_id="complex_inactive".$uniqid;
            $complex_active_id="complex_active".$uniqid;
            $flatimage_id="flatimage".$uniqid;
            $sphereimage_id="sphereimage".$uniqid;
            $compleximage_id="compleximage".$uniqid;
            $nodebutton_id="nodebutton".$uniqid;
   
            //create SVG
            echo '<svg viewbox="0 0 465 572">';
            echo '<image width="465" height="572" xlink:href="/images/Background.png"></image>';
            echo '<text id='.$title_id.' x="232" y="35" style="text-anchor: middle; font-size: 35px; fill: #ffffff; stroke: #aaaaaa;">'.$materialname.'</text>';
            echo '<image id='.$flat_inactive_id.' x="24" y="75" width="45" height="48" xlink:href="/images/flat_inactive.png" style.display="block"></image>';
            echo '<image id='.$flat_active_id.' x="24" y="75" width="45" height="48" xlink:href="/images/flat_active.png" style.display="none"></image>';
            echo '<image id='.$sphere_active_id.' x="70" y="75" width="47" height="48" xlink:href="/images/sphere_active.png" style.display="none"></image>';
            echo '<image id='.$sphere_inactive_id.' x="70" y="75" width="47" height="48" xlink:href="/images/sphere_inactive.png" style.display="block"></image>';
            echo '<image id='.$complex_active_id.' x="118" y="75" width="46" height="48" xlink:href="/images/complex_active.png" style.display="none"></image>';
            echo '<image id='.$complex_inactive_id.' x="118" y="75" width="46" height="48" xlink:href="/images/complex_inactive.png" style.display="block"></image>';
            echo '<image id='.$sphereimage_id.' x="25" y="131" width="415" height="370" xlink:href="/images/materialpreview/'.$materialpath.'/Sphere0001.png" style.display="none"></image>';
            echo '<image id='.$compleximage_id.' x="25" y="131" width="415" height="370" xlink:href="/images/materialpreview/'.$materialpath.'/Complex0001.png" style.display="none"></image>';
            echo '<image id='.$flatimage_id.' x="25" y="131" width="415" height="370" xlink:href="/images/materialpreview/'.$materialpath.'/Flat0001.png" style.display="block"></image>';
            echo '<text x="232" y="542" style="text-anchor: middle; font-size: 25px; fill: #ffffff; stroke: #aaaaaa;">Show Node-Setup</text>';
            echo '<rect id='.$nodebutton_id.' x="30" y="512" width="405" height="50" style="fill:rgba(0,0,0,0);"/>';
            echo '</svg>';
   
            }
            

  
            return true;
    }
        


    
}

Alles anzeigen

Nur an einer Sache hängt es noch. Wo plaziere ich den Script?

Ich habe schon versucht den Script auch per echo Zeile für Zeile auszugeben, aber ohne Erfolg.

Re:Later · 26. Juni 2018

Steht eigentlich in meinem Code.

Zeile 7, 8, 13

Zeile 16,17

Du hast dir die Sache halt weitaus komplizierter gemacht als ich vorgeschlagen habe (deine Lösung hat noch weitere Nachteile bzgl. Codemenge und unerwartetem Verhalten). Hab mir schon was bei meinem Vorschlag gedacht

Mit str_replace kommst da nicht mehr weiter, sondern musst mit preg_* - Methoden und regulären Ausdrücken arbeiten. Weitaus weniger performant und komplizierter zu coden.

0backbone0 · 26. Juni 2018

Irgendwie bekomme ich keinen Script zum laufen.

Auch nicht wenn ich die $html fülle.

Code

// Nur zusammensammeln, wenn Werte in Eigenem Feld mit id 1.
        if (!empty($row->jcfields[1]->value))
        {
            $materialname = $row->jcfields[1]->value;
        
            $html = '<svg viewbox="0 0 465 572">';
            $html .='<image width="465" height="572" xlink:href="/images/Background.png"></image>';
            $html .='<text id='.$title_id.' x="232" y="35" style="text-anchor: middle; font-size: 35px; fill: #ffffff; stroke: #aaaaaa;">'.$materialname.'</text>';
            $html .='<image id='.$flat_inactive_id.' x="24" y="75" width="45" height="48" xlink:href="/images/flat_inactive.png" style.display="block"></image>';
            $html .='<image id='.$flat_active_id.' x="24" y="75" width="45" height="48" xlink:href="/images/flat_active.png" style.display="none"></image>';
            $html .='<image id='.$sphere_active_id.' x="70" y="75" width="47" height="48" xlink:href="/images/sphere_active.png" style.display="none"></image>';
            $html .='<image id='.$sphere_inactive_id.' x="70" y="75" width="47" height="48" xlink:href="/images/sphere_inactive.png" style.display="block"></image>';
            $html .='<image id='.$complex_active_id.' x="118" y="75" width="46" height="48" xlink:href="/images/complex_active.png" style.display="none"></image>';
            $html .='<image id='.$complex_inactive_id.' x="118" y="75" width="46" height="48" xlink:href="/images/complex_inactive.png" style.display="block"></image>';
            $html .='<image id='.$sphereimage_id.' x="25" y="131" width="415" height="370" xlink:href="/images/Sphere0001.png" style.display="none"></image>';
            $html .='<image id='.$compleximage_id.' x="25" y="131" width="415" height="370" xlink:href="/images/Complex0001.png" style.display="none"></image>';
            $html .='<image id='.$flatimage_id.' x="25" y="131" width="415" height="370" xlink:href="/images/Flat0001.png" style.display="block"></image>';
            $html .='<text x="232" y="542" style="text-anchor: middle; font-size: 25px; fill: #ffffff; stroke: #aaaaaa;">Show Node-Setup</text>';
            $html .='<rect id='.$nodebutton_id.' x="30" y="512" width="405" height="50" style="fill:rgba(0,0,0,0);"/>';
            $html .='</svg>';
            
            $html .= '<script type="text/javaScript">';
            $html .= 'document.getElementById('.$title_id.').innerHTML="script works";';
            $html .= '</script>';
            
        }
   
        // Code einsetzen oder einfach nur Tag entfernen
        $row->text = str_replace('{materialpreview}', $html, $row->text);

Alles anzeigen

Das Auslesen der felder klappt ohne Probleme. Aber der Titeltext wird nie geändert obwohl document.getElementById('.$title_id.').innerHTML="script works"; im Script steht.

Was mache ich falsch??

Re:Later · 27. Juni 2018

Da hast die Gänsefüßchen vergessen die das JavaScript braucht um das als Text und nicht als Variable zu interpretieren.

Code

$html .= 'document.getElementById("' . $title_id . '").innerHTML = "script works";';

id=ohneGaensefuesschen

ist zwar in HTML5 erlaubt, aber ich würde trotzdem auch hier die Gänsefüßchen setzen, weil ich mich mit SVG nicht auskenne und, weil man es an anderer Stelle gern übersieht, wenn das z.B. eine class mit Leerzeichen drinnen ist. Dann sind Gänsefüßchen Pflicht.

Code

... id="' . $nodebutton_id . '"...

Den oberen JavaScript-Fehler hättest du wahrscheinlich über die Webkonsole/Fehlerkonsole/Inspektor/Entwicklerwerkzeuge deines Browsers rausbekommen können ("not defined").

0backbone0 · 27. Juni 2018

Zitat von Re:Later

Den oberen JavaScript-Fehler hättest du wahrscheinlich über die Webkonsole/Fehlerkonsole/Inspektor/Entwicklerwerkzeuge deines Browsers rausbekommen können ("not defined").

Du hast natürlich wieder mal vollkommen recht. Im Quellcode inspector ist der Feher ziemlich offensichtlich.

Jetzt funktioniert alles wie es soll. Nochmal ein dickes Danke!

Ich markiere das Thema als erledigt, auch wenn die Hälfte davon technisch gesehen im falschen Unterforum ist.

0backbone0 · 27. Juni 2018

Jetzt habe ich tatsächlich noch vergessen das Häkchen zu setzten.

Manchmal habe ich das Gefühl ich lasse keine Gelegenheit aus um mich als Depp zu outen...

Tags