it-swarm.com.de

Der CSS-Stil variiert je nach Modulinstanz

Bearbeiten : Den aktuellen Status des Problems finden Sie im Update unten.

Ich habe ein Modul, das eine variable Anzahl von Zeilen anzeigen muss, basierend darauf, wie der Benutzer es im Back-End konfiguriert, und mehrere Instanzen des Moduls müssen auf derselben Seite angezeigt werden (mit möglicherweise unterschiedlicher Anzahl von Zeilen). Mein Ansatz ist die Verwendung eines Rasterlayouts. Die größte Herausforderung besteht darin, es so zu gestalten, dass die Zeilen am unteren Rand des div und nicht am oberen Rand angezeigt werden. Dies kann auf alle Instanzen gleichzeitig angewendet werden. Mein erster Versuch war, die Anzahl der Zeilen in Form einer CSS-Variablen sowie das Auffüllen an mein CSS zu übergeben. So sah mein Code ungefähr aus:

$document = JFactory::getDocument();
$modulePath = JURI::base() . 'modules/mod_my_module/';
$document->addScript($modulePath.'media/script.js');
$document->addStyleSheet($modulePath.'media/stylesheet.css');
...
$rows_array = $params->get("rows");
$number_of_divs = count($rows_array);
$padding = 100 - (10 * $number_of_divs);
$style = ":root { --rowNum: " . $number_of_divs . "; --padding: " . $padding . "%;}";
$document->addStyleDeclaration($style);

Dann verwende ich in meinem CSS diese Variablen in einem Rasterlayout, wie z

...
display: grid;
grid-template-rows: var(--padding) repeat(var(--rowNum), 10%); 
...

Wenn ich eine einzelne Instanz meines Moduls habe, funktioniert dies einwandfrei. Wenn jedoch mehrere Instanzen auf derselben Seite gerendert werden, kollidieren diese Variablendeklarationen und es funktioniert nicht mehr. Ich denke, das Problem ist, dass $document->addStyleDeclaration($style); die Stilregel auf ein globales Stylesheet anwendet, aber ich muss etwas tun, das nur den Stil der jeweiligen Instanz beeinflusst.

Wie kann ich die verschiedenen Instanzen des Moduls mit unterschiedlicher Anzahl von Zeilen formatieren? Sollte ich die Zeilen stattdessen dynamisch mit Javascript hinzufügen?


pdate : Ich habe auch einen Ansatz ausprobiert, bei dem keine CSS-Variablen verwendet werden, indem ich den Divs, die ich zu formatieren versuche, eindeutige IDs hinzufüge, indem ich ihre Modul-IDs wie id="my-module-<?php echo $module->id ?>" Abrufe. . Anstatt die Regeln für den Rasterstil in meiner Datei style.css zu haben, füge ich das PHP hinzu

$style = 
    "#my-module-" . $module->id . "{ " .
        "display: grid; " . 
        "grid-template-rows: " . $padding . "% repeat(" . $number_of_divs . ", 10%); " .
        "grid-template-columns: 60% 40%; " .  
        "justify-content: end;" .
        "}";
$document->addStyleDeclaration($style);

Das Problem ist nun, dass dies für das erste gerenderte Modul funktioniert, nicht jedoch für das zweite. Ich habe keine Ahnung warum. Ich habe die Container überprüft und sie haben die richtigen IDs. Ich habe auch versucht, diesen Code von my_module.php in default.php zu verschieben, um festzustellen, ob er einen Unterschied macht und nicht.

Warum wird die Stildeklaration hinzugefügt und das richtige Format für die erste gerenderte Instanz verwendet, nicht jedoch für die zweite?

4
William

Ich fand meine Probleme heraus und dachte, ich würde meine eigene Frage beantworten.

1) nterschiedliches Styling für verschiedene Instanzen desselben Moduls

Vergessen Sie nicht, dass Joomla eindeutige Modul-IDs hat! Und es gibt eine extrem einfache Möglichkeit, darauf zuzugreifen! Sie können den Elementen in Ihren Modulinstanzen eindeutige IDs geben, indem Sie Folgendes tun

<div class="my-module-container"
     id="my-module-container-<?php echo $module->id ?>"> 
    <p>content</p>
</div>

jetzt können Sie dieses Element mithilfe der ID Ihrer Modulinstanz eindeutig mit Stilregeln ausrichten. (Es gibt wahrscheinlich viele andere großartige Möglichkeiten, dies zu tun, und ich kenne keine bestimmten Konventionen.)

2) Gitterlayout ist komisch

Das zweite Problem war, dass ich denke, grid ist irgendwie komisch! Ich konnte mein Problem lösen, indem ich die Deklaration grid in meinem CSS behielt und dann die anderen Stilregeln mit Joomla hinzufügte. Grundsätzlich in meiner style.css Datei habe ich

.my-module-container {
   display: grid;
}

dadurch wird allen Instanzen des Containers die Anzeigeeigenschaft grid hinzugefügt, und in meiner Vorverarbeitung füge ich meiner Instanz die folgenden Stilregeln hinzu:

$number_of_rows = MyModuleHelper::NumberOfRows($params);
$padding = 100 - (10 * $number_of_rows);
$style = 
    "#my-module-container-" . $module->id . "{ " .
        "grid-template-rows: " . $padding . "% repeat(" . $number_of_rows . ", 10%); " .
        "grid-template-columns: 60% 40%; " .  
        "justify-content: end;" .
    "}";
$document->addStyleDeclaration($style);

Wie gesagt, jetzt funktioniert es (zumindest in Chrome und Firefox), aber ich verstehe nicht ganz warum. Vorher, als ich display: grid; Nicht im hatte CSS für die Klasse und Joomla würde es der jeweiligen Instanz anhand seiner ID hinzufügen. Es würde den Stil korrekt auf die erste gerenderte Instanz anwenden, aber dann keine der anderen. Ich weiß, dass grid sehr speziell ist über die Reihenfolge, in der Sie die Regeln hinzufügen, aber ich kenne nicht alle Feinheiten. Vielleicht kann jemand, der mehr über die Funktionsweise von grid weiß, erklären?


Wenn jemand Kommentare oder Kritik zu meiner aktuellen Lösung hat, würde ich mich sehr darüber freuen.

4
William