ToDo-Liste - Vorüberlegungen

[Matthias Scharwies]

Guten Abend!

Ich würde gerne im JavaScript und das DOM-Tutorial das Kapitel zur DOM-Manipulation neu schreiben. ^[1]

Als kontextualisiertes Beispiel hat mir @Rolf B eine ToDo-Liste als klassisches Beispiel empfohlen (schon länger her):^[2]

• Listeneinträge erzeugen und löschen
• textContent verändern
• Klassen und Attribute hinzufügen und entfernen.

Die Grundstruktur scheint klar:

<ul id="taskList">
  <li>Im Wiki aktiv werden <button>Close</button></li>
  <li aria-selected="true">Spende an SELFHTML e.V. <button>Close</button></li> 
  ...
</ul>

Schwierig wird's, wenn man Listenelemente anklicken will, um sie als erledigt zu markieren. Wie würdet ihr das machen? Am Liebsten wäre es mir, wenn das "0" da stünde, man aber den gesamten Text anklicken dürfte und das "✓" dann als Pseudoelement erschiene.

Ist dieser Versuch Overkill?

<ul id="taskList">
  <li contenteditable="true">
    <span>im Wiki aktiv werden</span>
    <button aria-label="Erledigt">O</button>
    <button aria-label="Schließen">X</button>
  </li>
  <li contenteditable="true" aria-selected="true">
    <span>Spende an SELFHTML e.V. </span>
    <button aria-label="Erledigt">O</button>
    <button aria-label="Schließen">X</button>
  </li>
</ul>

Ist es überhaupt sinnvoll, Einträge nachträglich ändern zu dürfen?

Sollte man in einem zweiten Schritt aus der ul eine ol machen und Einträge nach oben oder unten schieben können?

Es soll einerseits für Anfänger gedacht sein (createElement, setAttribute, classList), andererseits auch ein vollwertiges Beispiel sein.

Herzliche Grüße
Matthias Scharwies

---

1. Der Bild-Wechsler war da passend, wurde in der Komfort-Variante aber zu komplex für ein Anfänger-Kapitel zu DOM-Manipulation. ↩︎

2. Dieses Beispiel aus 2015 enthält klickbare li-Elemente und sollte dann depubliziert werden. ↩︎

[Rolf B]

Hallo Matthias,

war das meine Idee? Oh je, mein Gedächtnis...

zu markieren. Wie würdet ihr das machen

Mit einer Checkbox, die ein Label "Erledigt" hat. Gerne in Leserichtung davor, mit dem Label visuell versteckt.

Dass der Klick auf das Todo-Item es als erledigt markiert, finde ich schlecht verständlich für jemanden, der Assistenztechnik nutzt.

Bearbeitung bitte nicht im Dauermodus, sondern mit einem Bearbeiten-Button. Der kann den Eintrag dann durch ein input-Element ersetzen, mit "OK" und "Abbrechen" als Buttons. Das könnte auch ein Popup (ein Dialog) sein - aber das ist vermutlich zu komplex für den Einstieg. "Bearbeiten" könnte man für das Beispiel als progressive enhancement verkaufen. Wenn man Löschen und Hinzufügen kann, reicht das. Find ich.

Die Todo-Liste ist eine Gratwanderung zwischen UX und Anfängerfreundlichkeit.

Phase 1:

• Hinzufügen durch Eintragen in ein Input und Button "Hinzufügen"
• Als erledigt markieren durch einen eigenen Button "Erledigt". Der löscht dann auch sofort

"Todo-Liste Speichern" haben wir - meine ich - beim localStorage. Das sollte mn als Funktion im Beispiel als Tool drin haben, für Erklärungen aber zum localStorage verweisen.

Phase 2:

• Trennen von Erledigt und Löschen. Hier kann man auf Eventhandling in einer Liste eingehen (d.h. Bubbling ausnutzen)
• Up/Down Buttons

Phase 3:

• Bearbeiten per Dialog

Das wäre mein Plan. Ob der ideal ist, überlasse ich didaktisch gebildeteren Leuten 😉. Pass nur auf, dass Du nicht versehentlich Hieroglyphen verwendest, alter Ägypter!

Rolf

[Matthias Scharwies]

Servus!

Das wäre mein Plan. Ob der ideal ist, überlasse ich didaktisch gebildeteren Leuten 😉.

Ich hirne mal - mir bleibt auch gar nix anderes übrig, bei den schlechten Datenraten. :-)

Pass nur auf, dass Du nicht versehentlich Hieroglyphen verwendest, alter Ägypter!

Sind jetzt auf der Rückreise nilabwärts. Das Schiff ist doppelt so schnell wie stromaufwärts, der Wind bläst einen in die Kabine.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

ToDo-Liste […]
Schwierig wird's, wenn man Listenelemente anklicken will, um sie als erledigt zu markieren. Wie würdet ihr das machen?

Ich würde als erstes nachschauen, wie es Heydon in seinen Inclusive Components gemacht hat, worin ja auch eine Todo-Liste zu finden ist.

Kwakoni Yiquan

[MudGuard]

Hi,

Schwierig wird's, wenn man Listenelemente anklicken will, um sie als erledigt zu markieren. Wie würdet ihr das machen? Am Liebsten wäre es mir, wenn das "0" da stünde, man aber den gesamten Text anklicken dürfte und das "✓" dann als Pseudoelement erschiene.

0 heißt "erledigt"??? Da kommt doch keiner drauf.

Ich würde für Erledigt eine Checkbox erwarten.

Ist es überhaupt sinnvoll, Einträge nachträglich ändern zu dürfen?

sollen Tippfehler nicht korrigiert werden dürfen?

Oder: Todo-Eintrag: "6 Eier kaufen". Dann ruft das Partner an und sagt, nimm lieber 10". Da würd ich dann lieber den einen Eintrag anpassen, als einen zweiten "4 Eier kaufen" anzulegen.

Sollte man in einem zweiten Schritt aus der ul eine ol machen und Einträge nach oben oder unten schieben können?

ja, die Prioritäten können sich ja ändern.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Oder: Todo-Eintrag: "6 Eier kaufen".

„Und wenn sie Eier haben, bring 6 Stück mit.“ 😆

Kwakoni Yiquan

[MudGuard]

Hi,

@@MudGuard

Oder: Todo-Eintrag: "6 Eier kaufen".

„Und wenn sie Eier haben, bring 6 Stück mit.“ 😆

genau das hatte ich im Hinterkopf …

cu,
Andreas a/k/a MudGuard

[Felix Riesterer]

Lieber Matthias,

das DOM für so eine ToDo-Liste würde ich so angehen:

<ul id="task-list">
  <li>
    <input id="task-1" name="task-1" type="checkbox">
    <button name="delete">löschen</button>
    <button name="edit">bearbeiten</button>
    <label for="task-1">im Wiki aktiv werden</label>
  </li>
  <li>
    <input id="task-2" name="task-2" type="checkbox">
    <button name="delete">löschen</button>
    <button name="edit">bearbeiten</button>
    <label for="task-2">Spende an SELFHTML e.V.</label>
  </li>
  <li>
    <button id="add">neuen Eintrag hinzufügen</button>
  </li>
</ul>

[jsFiddle]

Mit diesem DOM kann man den „Checkbox-Hack“ verwenden, um erledigte Tasks entsprechend anders darzustellen. Auch die Buttons kann man dann (wahlweise) unsichtbar schalten.

Für alles, was den Eintrag inhaltlich verändert, braucht es einen passenden Button. Das Abhaken sollte eine Checkbox sein.

Das mit contenteditable würde bedeuten, dass man das DOM innerhalb eines Elements verändern kann. Das willst Du bei einer ToDo-Liste nicht, denn sonst könnte man das <li> mit beliebigen Kindelementen befüllen, die ihrerseits Listen, Tabellen und noch viel mehr sein können. Und nur damit der User etwas kursiv und fett formatieren kann... würde ich unbedingt davon abraten.

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Guten Morgen,

es geht ja um ein DOM-Tutorial, in dem man anhand eines Beispiels die meisten dieser Punkte abarbeitet:

1. Selecting Elements
2. Creating and Inserting Elements
   document.createElement(tagName)
parentElement.appendChild(childElement)
element.insertAdjacentHTML(position, html)
3. Changing Content
   element.textContent
4. Changing Attributes
   element.setAttribute(attribute, value)
5. Traversing the DOM

Mit diesem DOM kann man den „Checkbox-Hack“ verwenden, um erledigte Tasks entsprechend anders darzustellen.

Und genau so etwas würde ich mit [aria-selected]{ background: green;} realisieren.

Auch die Buttons kann man dann (wahlweise) unsichtbar schalten.

Das war meine Überlegung: Anstelle des li-Inhalts einen Button mit dem Tasttext, da gäbe es aber keinen Hinweis, dass man ihn anklicken solle, um ihn als erledigt abzuhaken.

Für alles, was den Eintrag inhaltlich verändert, braucht es einen passenden Button. Das Abhaken sollte eine Checkbox sein.

Genau. So mache ich es. Wobei ich das Editieren wohl weglasse, und links die Checkbox und rechts den Löschen-Button (frei nach Heydon Pickering) platziere.

Das mit contenteditable würde bedeuten, dass man das DOM innerhalb eines Elements verändern kann. Das willst Du bei einer ToDo-Liste nicht, denn sonst könnte man das <li> mit beliebigen Kindelementen befüllen, die ihrerseits Listen, Tabellen und noch viel mehr sein können. Und nur damit der User etwas kursiv und fett formatieren kann... würde ich unbedingt davon abraten.

Das könnte man ja auch mit Script um HTML bereinigen und nur in textContent schreiben (siehe 3.), wäre für ein Anfänger-Tutorial aber zu komplex.

---

Im Original-Artikel wird erst ein Absatz dynamisch eingefügt → 1. Idee: Da mach' ich eine li draus.

Leider kommt danach eine Helfer-Funktion, die auf Wunsch Buttons oder p-Absätze erzeugt; Das geht in einer Liste leider nicht.
→ li und ul>li erzeugen lassen? -> li und li>button erzeugen lassen? → beides zu komplex!

Wsl. lass ich diesen Abschnitt drin und fang erst danach an mit dem Anwendungsbeispiel an. Oder ich lasse Buttons und li-Elemente in verschiedene Elternelemente → wäre aber unübersichtlich.

Wäre aber ein Übergang zu removeElement.

---

Ich überlege noch!

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Mit diesem DOM kann man den „Checkbox-Hack“ verwenden, um erledigte Tasks entsprechend anders darzustellen.

Und genau so etwas würde ich mit [aria-selected]{ background: green;} realisieren.

Nein, input ist ok! Das ist aber kein „Checkbox-Hack“, da es nur das label formatiert, aber keine anderen Elemente.

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Lieber Matthias,

1. Selecting Elements
2. Creating and Inserting Elements
   document.createElement(tagName)
parentElement.appendChild(childElement)
element.insertAdjacentHTML(position, html)
3. Changing Content
   element.textContent
4. Changing Attributes
   element.setAttribute(attribute, value)
5. Traversing the DOM

naja, in meinem Fiddle werden ja manche dieser Eigenschaften und Methoden verwendet. Es mag einen Sinn haben, zu zeigen, wie man diese im Zusammenhang mit innerHTML verwendet. Auch das zeigt mein Fiddle.

Wenn Du auf die Verwendung von Buttons Wert legst, musst Du Ereignisse verarbeiten. Das kann hinsichtlich der DOM-Thematik eine sinnvolle Ergänzung in diesem Kapitel sein. In meinem Fiddle wirst Du sehen, wie ich von einem Button auf seine Elternknoten schließe und dann damit etwas tue.

Was die Position der Buttons im DOM angeht, so hatte ich diese auch zuerst am Ende. Aber da die Länge des label-Elements vom Inhalt abhängt, ich die Buttons aber vertical untereinander haben wollte, hatte ich mich dazu entschlossen, diese links zu positionieren. Das mag sich mit der Checkbox beißen, aber wenn ich die Buttons ganz rechts haben wollte, hätte ich mir erst ein passendes Grid-Layout überlegen müssen, mit dem ich aber noch immer nicht so fit bin...

Wobei ich das Editieren wohl weglasse, und links die Checkbox und rechts den Löschen-Button (frei nach Heydon Pickering) platziere.

Warum das Editieren nicht ebenso hinein nehmen? Das ergibt die Möglichkeit, beim Reagieren auf Button-Klicks zwischen den Buttons zu unterscheiden.

Das mit contenteditable [...]

Das könnte man ja auch mit Script um HTML bereinigen und nur in textContent schreiben (siehe 3.), wäre für ein Anfänger-Tutorial aber zu komplex.

In der Tat. Deshalb hatte ich mir auch erlaubt, das Editieren mit window.prompt zu implementieren. Natürlich könnte man ein schickes dialog-Teil bauen, mit Fokusfangen und allem Schnickschnack, aber wie Du selbst richtig schreibst: Overkill. Ist das dann aber ein sinnvoller Grund es ganz zu lassen?

Im Original-Artikel [...]

Wäre aber ein Übergang zu removeElement.

Der löschen-Button kann ja nur dann seine Funktion sinnvoll erfüllen, wenn man da removeElement verwendet. Tut mein Fiddle auch.

Liebe Grüße

Felix Riesterer