Button zum Hinzufügen von Klassen

[Rolf B]

Hallo marctrix,

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 { ... }

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.

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

-> Siehe oben, table.can-compact

2. Es gibt mehrere Buttons. Jeder Button kann 1-n Tables kompaktieren. Welche das sind, ist per Design festgelegt

-> Du brauchst mehrere globale Klassen. Jeder Button setzt eine davon, z.B. compact-foo-tables und compact-bar-tables. Auch dann kannst Du CSS Selektoren formulieren, die die Styles zur kompakten Darstellung setzen.

.compact-foo-tables table.foo-compact { } .compact-bar-tables table.bar-compact { }

Letztlich hat Gunnar bereits gezeigt, wie man pro Button unterschiedliche Klassen setzt.

Das Gesagte gilt analog für Forms.

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.

So. Und nun sehe ich deinen Edit. 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)
    }
	}
})

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

Rolf