Meinungen zu meinem Widget

[Rolf B]

Hallo Felix Riesterer,

Habt ihr Kritik für mich?

Ja. Als erster Schritt nicht schlecht, aber praxistauglich ist es noch nicht.

Die Stelle, wo der Button hin soll, MUSS im HTML durch Markup markiert werden. Idealerweise durch einen delete-Button, der durch eine Klasse für das Widget markiert wird und den das Widget dann zum Autoconfirm-Button umbaut. Alternativ überlässt man die Identifikation der Buttons dem Anwender und verlangt, dass er einfach einmal pro gewünschten Button das Widget darauflegt.

Sowas tut man entweder per Konstruktor (new Widget(elem)) oder per Klassenfunktion (Widget.on(elem)). Das Widget kann auch einfach eine Funktion sein, die den Rest erledigt (und intern gerne OO benutzt)

Texte sollten im Markup pro Button individuell vergeben werden können. Es spricht natürlich auch nichts dagegen, wenn das Widget eine zentrale Stelle für anpassbare Defaulttexte hat. Das Widget selbst sollte aber als ECMAScript-Modul importiert werden und nur die Konstruktorfunktion bereitstellen. Hat den Vorteil, dass auch der Verwender ein ECMAScript-Modul schreiben muss und damit die DOMContentLoaded-Kapriole erspart bleibt.

<p>Sie haben drölf Dokumente ausgewählt
<button id="deleteStuff" class="autoconfirm" data-confirm="Ja, Löschen" type="button">Löschen</button>
<!-- optional data-query und data-cancel zum Überschreiben der Defaults -->
</p>

import AutoConfirmButton from "./autoconfirm_widget.js";

AutoConfirmButtom.setDefaults({
   className: "autoconfirm",
   queryText: "Sind Sie sicher?",
   cancelText: "Abbrechen"
});

document.querySelectorAll("button.autoconfirm")
        .forEach(AutoConfirmButton);
// oder vielleicht
document.querySelectorAll("button.autoconfirm")
        .forEach(AutoConfirmButton.attach);
// oder
AutoConfirmButton.attach(".autoconfirm");

Beim attach wird das DOM umgebaut, so dass der Button in ein span eingehüllt wird und der Cancel-Button darin versteckt wird.

Es könnte auch eine Variante B geben, wo man das HTML komplett vorgibt (damit man es stylen kann) und die JS Lib nur die Steuerung übernimmt.

Matthias' Idee einer Web-Component klingt auch verlockend - aber kann man die so einfach selbst mit Styles erweitern? Da bin ich noch nicht so im Thema drin.

Rolf