Button zum Hinzufügen von Klassen

[marctrix]

Hej Rolf,

ich bräuchte tatsächlich einen Button, der in eine Tabelle, die z.B. per ID ausgewählt wird oder in alle Tabellen die Klasse compact-table schreibt. Dasselbe analog zu compact-form.

Wenn es alle Tabellen sind, brauchst Du das nicht. Dann hilft Dir eine CSS Regel dieser Art

.compact-table table { ... }

Vielleicht. Aber dazu müsste ich weite Teile des Bereits bestehenden css umschreiben. Problematisch ist es mit den Ausnahmen. Ich habe einiges an :not-selektoren. Man kann das vermutlich positiv schreiben, aber dann würde es weniger flexibel, weil ich dann alle Elemente aufzählen müsste, die betroffen sein sollen. Jedesmal wenn etwas Neues hinzukäme, müsste ich es in die Liste aufnehmen.

ausreichend beim Stylen. Wenn nur bestimmte tables per Design "kompaktierbar" sein sollen, könnten diese bspw. mit einer class can-compact versehen sein, dann nimmst Du .compact-table table.can-compact, oder in einem Container mit dieser Class stehen, dann wäre .compact-table .can-compact table der Selektor der Wahl.

Wenn es nur eine Table sein soll, ist die Frage, woher du weißt, welche Tabelle das ist.

Im schlimmsten Fall müsste der Redakteur der Tabelle eine ˋidˋ mitgeben.

In den wenigsten Angeboten gibt es viele große Tabellen. Der Aufwand für Redakteure wäre überschaubar. Mit Sicherheit kann der TYPO3-Integrator das sogar automatisieren. Der Redakteur müsste dann nur ein Häkchen setzen, dass eine Tabelle solch einen Button bekommen soll.

1. Es gibt nur einen Button und eine Table. Welche Table das ist, ist per Design festgelegt

-> Siehe oben, table.can-compact

Mal abgesehen davon, dass ich keine präsentationsbezogenen Klassennamen verwenden möchte (dass so ein Button, der das Aussehen verändert, eine Klasse mit einem sprechenden Namen hinzufügt ist ok, aber nicht das html ohne JS), können es mehrere sein. Nicht das Design legt das Fest (obwohl es dafür eines gibt), sondern der Redakteur, wenn er Tabellen anlegt, die sehr breit sind. Hier möchte ich dem Besucher anbieten, eine für ihn angenehme Darstellungsform zu wählen: normal (th ohne Word wrap, td ohne Silbentrennung usw) wo dann horizontales scrollen nötig wäre oder eben die kompaktere Darstellung, wo kein oder deutlich weniger horizontales scrollen nötig wäre.

Ähnliches bei den Formularen. Diese sollten einspaltig Wien, linksbündig, Labels über den Eingabefeldern. Das macht aber große Formulare bei online-Erfassungen sehr lang. Die Nutzer wünschen sich immer wieder (entgegen a11y- und ux-Empfehlungen) mehrspaltige Formulare. Das möchte ich eben nicht standardmäßig anbieten, aber jenen, die das unbedingt wollen auch nicht verwehren.

Dafür die Button…

Wenn es mehrere Buttons und mehrere globale Klassen gibt, kann das Ganze in eine ziemliche Selektoren-Wüste ausarten, weil Du dann ggf. jede Menge Kombinationen von Selektoren auflisten musst. Dabei können Dir Tools wie LESS oder SASS helfen, die erstellen die Kombinationen für Dich.

Wie geht so etwas mit SASS?

So. Und nun sehe ich deinen Edit.

Sorry! - Du hättest es aber auch nicht beim Schreiben gesehen, wenn ich es in einen neuen Post geschrieben hätte…

Wenn Du sozusagen lokale Toggles anbieten willst, ergibt das Ganze mehr Sinn. Es gibt dann mehrere Vorgehensweisen; ich würde aber möglichst nahe an Gunnars Technik dranbleiben wollen.

Zum einen musst Du davon weg, außer der Klasse auch noch ein data-Attribut zu setzen. Da gibt es offenbar eine Regel, nach der Minuszeichen in dataset-Attributen verboten sind und deswegen fliegt Dir das um die Ohren. Dieser Teil ist aber keine Kunst und kann darum weg. Das CSS muss dann entsprechend geändert werden, dass ein getoggelter Button nicht über data[...] erkannt wird, sondern über eine Klasse.

Ich hätte diese Idee anzubieten:

<button data-target=".foo" data-toggle="compact" aria-pressed="false">Compact</button>

document.documentElement.addEventListener('click', event => {
	if (event.target.dataset.toggle)
	{
		const isSwitchedOn = event.target.getAttribute('aria-pressed') != 'true';
		event.target.setAttribute('aria-pressed', isSwitchedOn);
    
    let targetName = event.target.dataset.target;
    let target = targetName ?
    							document.querySelector(event.target.dataset.target) :
                  document.documentElement;
    let className = event.target.dataset.toggle || "toggled";
    if (target) {
       target.classList.toggle(className, isSwitchedOn)
    }
	}
})

Danke, werde das erst nächste Woche ausprobieren können und melde mich daher nicht eher zurück…

Der Button hat zwei data-Attribute. data-target enthält den Selektor, für den der Button wirken soll (ist keiner da, nimmt das Script das documentElement). Und data-toggle enthält den Klassennamen, der den Toggle-Zustand des Buttons am Target darstellen soll (ist keiner da, wird die Klasse "toggled" getoggelt.

Fiddle Beispiel

Merci!

Marc