JS nur auf der entsprechenden Seite einbinden oder im Modul verbauen?

Shor-ty · 26. Juli 2020

Hallo zusammen, ich habe wieder mal eine Frage an euch und zwar geht es diesmal um eigene Javascripte. Auf meiner Seite habe ich einige Grafiken, die ich mit canvasjs realisiere. Meine Frage an euch ist nun ob es Sinn macht diese Skripte nur auf den entsprechenden Artikel-Seiten einzubinden oder spricht nichts dagegen diese Javascripts immer zu laden (quasi im <head> Bereich?).

Ich realisiere die Datenaufbereitung gerade mit eigenen Modulen; sprich der PHP Code der mir die x- und y-Arrays erstellt und mit der Datenbank kommuniziert, ist in einem Modul. Hier wäre es doch dann sogar sinnvoll, dass Javascript mit in das Modul mit rein zu packen oder? Damit würde ich sicher gehen, dass das Javascript nur dann geladen wird, wenn auch das Modul angezeigt wird.

Wäre das sinnvoll? Falls ja, in welche Datei wäre das Skript den am Besten aufgehoben? Derzeit hat mein Modul die Standard Files:

Code

├── mod_canvasVisitorInteraction
│   ├── helper.php
│   ├── index.html
│   ├── mod_canvasVisitorInteraction.php
│   ├── mod_canvasVisitorInteraction.xml
│   └── tmpl
│       ├── default.php
│       └── index.html

Im »default.php« ist folgendes enthalten:

PHP

<?php                                                                           
                                                                                
defined('_JEXEC') or die;                                                       
                                                                                
echo '<div id="visitorInteractionGraph"></div>';                                
                                                                                
?>

In diesem <div> Container setzt das Javascript dann seine Infos rein:

Code

<script>                                                                        
window.onload = function () {                                                   
                                                                                
var chart = new CanvasJS.Chart                                                  
(                                                                               
    "visitorInteractionGraph",                                                             
    {
       // Definition der Grafik
    }                                                                          
);                                                                              

// Platziere den Inhalt in den <div> Container                                                                                
chart.render();                                                                 
                                                                                
}                                                                               
</script>

Alles anzeigen

Auf meiner aktuellen Seite ist der PHP Code und der Javascript Code in einer PHP Datei. Da ich das jetzt aber über ein Modul realisieren möchte, weiß ich nicht wo das Javascript hin soll. Wahrscheilnich ist die Einbindung in allen Seiten sinnfrei, weil das Javascript auch $php Variablen benötigt, die ich in meinem eigenen Modul aufbereite. Aus der Luft gegriffen, würde ich fast sagen, dass Javascript müsste in die default.php rein.

Ich hoffe das meine Erläuterungen einigermaßen verständlich sind.

Tobi

Shor-ty · 26. Juli 2020

Was mir gerade noch durch den Kopf geht wäre folgendes:

Einbindung des Javascripts in <head>
Prüfung ob id-Tag exisitert
Falls existiert, generiere Grafik und füge diese ein

Code

window.onload = function ()                                                     
{                                                                               
    var idTag = document.getElementById("visitorInteractionGraph");             
                                                                                
    if(idTag)                                                                   
    {          
        var chart = new CanvasJS.Chart("") ...
    }
}

Re:Later · 26. Juli 2020

Heutzutage empfohlen NICHT mit <script>-Tags einbinden, sondern den gebastelten Code in den HEAD schicken, z.B. mit.

Factory::getDocument()->addScriptDeclaration(...)

Das selbe gilt für <style>-Tags

Factory::getDocument()->addStyleDeclaration(...)

Bei Joomla 4 kann man auch an's Ende vom BODY schicken. Siehe Beispiel Atum-Backend-Template am Ende der Datei index.php.

Shor-ty · 26. Juli 2020

Okay, gut zu wissen. Meintest Du dann addStyleSheet() und nicht addStyleDeclaration()? Zumindest habe ich beim zweiteren Ein Problem.

Re:Later · 26. Juli 2020

addStyleSheet übergibt man einen Pfad zu einer CSS-Datei.

addStyleDeclaration() übergibt man CSS-Code

Beachten muss man, dass natürlich ohne <style>-Tags

Code

Factory::getDocument()->addStyleDeclaration(
    '.subform-table-sublayout-section .controls { margin-left: 0px }'
);

Shor-ty · 27. Juli 2020

Danke Dir, das kann ich gleich verbauen.

Hier noch eine kurze Frage. Was hat dieses »nonce« mit diesem ewigen Hash zu bedeuten?

Desweiteren habe ich noch eine Frage. Wenn ich im <HEAD> mein Javascript einbinde, dass aber dann Daten von dem eingebauten Modul benötigt, ist es dann überhaupt möglich das durchzuführen. Bislang war es so, dass ich zuerst den PHP code hatte und in der gleichen Datei dann das Javascript nachgestellt hatte. Somit konnte ich auf die PHP Variablen zugreifen. In etwa so:

PHP

<?php

// Ein Code der mir ein Array erstellt
$dataPoints = array();

// Erstelle das Array
...

?>


<script type="text/javascript>
window.onload() = function() {
    var chartTutorial = new CanvasJS.Chart                                      
    ("tutorialGraph",                                                           
    {                                                                           
        animationEnabled: true,                                                 
        theme: "light2",                                                        
        data:                                                                   
        [                                                                       
        {                                                                       
            type: "pie",                                                        
            startAngle: 25,                                                     
            toolTipContent: "<b>{label}</b>: {y}%",                             
            showInLegend: "true",                                               
            legendText: "{label}",                                              
            indexLabelFontSize: 14,                                             
            indexLabel: "{label} - {y}%",                                       
            dataPoints: <?php echo json_encode($dataPointsCases); ?>            
        }                                                                       
        ]                                                                       
    }                                                                           
    );

    chartTutorial.render();  }   
</script>

Alles anzeigen

Wie man deutlich erkennt, kann ich hier im Javascript auf die $dataPoints zurückgreifen. Ich habe aber das Gefühl, dass wenn ich das Javascript im <HEAD> einfüge, dass ich keine Möglichkeit habe auf das Array von meinem PHP Code zurückzugreifen. Wäre noch die Option die Du erwähnt hast, mit »am Ende vom <BODY> zu schicken. Allerdings scheint es mir auch so zu sein, dass ich die Implementierung über »<php echo json_encode($dataPoints); ?>« so nicht mehr verwenden kann.

Tobi

Gut - monolog - ...

Mir fehlen wohl einfach ein paar Grundlagen. Das ich php in meinem javascript verwenden konnte lag daran, dass es eine PHP Datei war, in der ich ein Javascript dabei hatte. Somit funktionierte das also. Jetzt ist es nur noch eine reine Javascript Sache und da geht es dann nicht mehr. Entweder ich finde hier noch eine Lösung (irgendein Workaround) oder ich binde das Script einfach in die PHP (tmpl/default.php) vom Modul ein.

Ich beantworte jetzt meine Frage selber Verzeiht mir diesen Monolog hier aber ggf. bringt es ja irgendwann mal jemandem was.

Ich habe jetzt in meinem Modul noch folgendes angefügt:

Code

echo "<script type=\"text/javascript\">\n";                                                              
echo "var dataVisits = " . json_encode($dataVisits) . ";\n";                                             
echo "var dataInteractions = " . json_encode($dataInteractions) . ";\n";                                 
echo "</script>\n";

Damit habe ich die zwei Javascript Variablen, die ich dann in meinem Javascript einbinde. Das Javascript habe ich am <BODY> Ende eingebaut.