Présentation

TaskList est un projet issue de css-checklist destiné à unifier :

• Un code html pouvant décrire une liste de tâches.
• Un code css permettant de présenter cette liste de tâches.
• Un code javascript pour gérer dynamiquement la liste des tâches.
• Une syntaxe wiki permettant de créer/éditer la liste des tâches.

Spécifications

Une tâche

Une tâche doit pouvoir être décrite par :

Nom

summary

Description

Un libellé servant de titre à la tâche

type

String

Nom

state

Description

Un état : ouvert, annulé, fermé avec succès ou en echec.

type

String

enum

needs-action, in-process, completed, canceled

Nom

description

Description

Un texte descriptif plus détaillé (facultatif).

type

String

Nom

dtstart

Description

Une date de création (facultatif).

type

Date

Nom

dtend

Description

Une date de fermeture (facultatif).

type

Date

Nom

due

Description

Une date de rendu (facultatif).

type

Date

Nom

priorirty

Description

Un degré de priorité (facultatif).

type

integer

Une liste de tâches

Une liste de tâches doit permettre :

• D'ajouter ou supprimer une tâche.
• D'éditer une tâche enregistrée, notamment modifier son état et sa priorité.
• De trier les tâches selon différents critères : priorité, état, date d'ouverture, de fermeture ou de rendu.

Syntaxe wiki

Discussion

La syntaxe wiki est pour partie inspirée de celle utilisée dans Zim.

• Si dtstart et/ou due sont présents, ils doivent être séparés du libellé de la tâche (summary) par le séprateur d'attributs en ligne (« pipe » par défaut).
• dtstart, due et dtend au format yyyy-mm-dd.
• Si la tâche possède une date de rendu (due), alors la date de fermeture (dtend) doit être notée entre parenthèses après due. Sinon, elle suit summary.
• Si une seule date de fin est donnée, sa nature est définit par l'état de la tâche : si celle-ci est ouverte ou en cours, il s'agit de due, sinon il s'agit de dtend.
• Priorité marquée par une liste de point d'exclamations, leur nombre représentant de degré d'importance de la tâche.

Code de la syntaxe wiki

[ ] [dtstart|]summary[|due][ !+]
    [description]

[_*x] [dtstart|]summary[|due[(dtend)]][ !+]
      [description]

[_*x] [dtstart|]summary[|dtend][ !+]
      [description]

Exemples :

// Tâche simple avec priorité
[ ] Tâche 1 !!!

// Tâche avec date de début
[ ] 2011-08-25|Tâche 2

// Tâche avec date de rendu et description
[ ] Tâche 3|2011-08-30
    lorem ipsum sine amnet.

// tâches dûe non encore accomplies
[ ] 2011-08-25|Tâche 4|2011-08-30
[ ] 2011-08-25|Tâche 5|2011-08-30()

// Tâche dûe et accomplie.
[*] 2011-08-25|Tâche 6|2011-08-30(2011-08-31)

// Tâche en cours
[_] Tâche 7

Code HTML

Discussion

• Le projet css-checklist utilise les éléments ins et del pour marquer les items de la liste. Sans doute pas la bonne solution ici.
• Les dates (dtstart, due et dtend) devraient être lisibles directement par l'utilisateur sans avoir besoin de CSS ou de javascript ; les placer dans un attribut pour les afficher dans un pseudo-élément n'est donc pas envisageable.
• Les dates peuvent être représentées par un élément time.
• priority et status peuvent être traduit dans le code HTML par des attributs.
• Une tâche devrait avoir un code html de présentation et un code html d'édition permettant de modifier son état.

Code HTML de liste de tâches

<ol class="tasklist">
    <li>
        <!-- code HTML d'une tâche -->
    </li>
    <!-- tâches suivantes -->
</ol>

Code HTML de tâche

<div class="task" data-status="[status]">
    <time class="dtstart" datetime="[dtstart]">[dtstart]</time>
    <p class="summary">[summary]</p>
    <time class="due" datetime="[due]">[due]</time>
    <time class="dtend" datetime="[dtend]">[dtend]</time>
    <p class="priority">[priority]</p>
    <div class="description">[description]</div>
</div>

<div class="task" data-status="[status]">
    <input class="status" type="checkbox">
    <time class="dtstart" datetime="[dtstart]">[dtstart]</time>
    <p class="summary">[summary]</p>
    <time class="due" datetime="[due]">[due]</time>
    <time class="dtend" datetime="[dtend]">[dtend]</time>
    <p class="priority">[priority]</p>
    <div class="description">[description]</div>
</div>

<dl class="task" data-priority="0" data-status="[status]">
    <dt>dtstart</dt>
    <dd class="dtstart"><time datetime="[dtstart]">[dtstart]</time></dd>
    <dt>Summary</dt>
    <dd class="summary">[summary]</dd>
    <dt>Due</dt>
    <dd class="due"><time datetime="[due]">[due]</time></dd>
    <dt>End</dt>
    <dd class="dtend"><time datetime="[dtend]">[dtend]</time></dd>
</dl>

Code CSS

Discussion

• La présentation d'une liste de tâche est affaire de goût. On peut cependant reprendre le rendu de css-checklist pour illustrer l'état d'une tâche.
• Reprendre les codes couleurs des messages pour illustrer les états completed et canceled.
• La représentation de l'état peut se faire dans le pseudo-élément before de l'élément portant la tâche.

Mise en forme d'une tâche

1. Tâche simple.

2. 2011-01-10

   Tâche avec début.

3. 2011-01-10

   Tâche en cours.

4. 2011-01-10

   Tâche avec début, fin, réussit.

   2011-10-15
5. 2011-01-10

   Tâche avec début, fin, ratée.

   2011-10-15
6. 2011-01-10

   Tâche avec début, dûe, fin.

   2011-10-152011-10-16
7. 2011-01-10

   Tâche avec descriptif.

   Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Est risus.

8. 2011-01-10

   Tâche avec priorité.

Gestion en javascript : API

Task

method

constructor ([datas])

Description

Création d'une tâche.

Paramètre

Object [datas] Objets décrivant les propriétés de la tâche.

method

getStatus ()

Description

Récupérer le statut de la tâche.

returns

{String} (open|progress|completed|canceled)

method

setStatus (Statut)

Description

Définir le statut de la tâche.

Paramètre

String Statut de la tâche : (open|progress|completed|canceled)

method

getPriority ()

Description

Récupérer la prioriété de la tâche.

returns

{int}

method

setPriority (priorirty)

Description

Définir la prioriété de la tâche.

Paramètre

int priorirty La priorité de la tâche

method

getDescription ()

Description

Récupérer la description de la tâche.

returns

{String}

method

setDescription (des)

Description

Définir la description de la tâche.

Paramètre

String des

method

getStartDate ()

Description

Récupérer la date de création de la tâche.

returns

{Date}

method

setStartDate (date)

Description

Définir la date de création de la tâche.

Paramètre

Date date

method

getDueDate ()

Description

Récupérer la date de rendu de la tâche.

returns

{Date}

method

setDueDate (date)

Description

Définir la date de rendu de la tâche.

Paramètre

Date date

method

getCloseDate ()

Description

Récupérer la date de fermeture de la tâche.

returns

{Date}

method

close (date, [status=ok])

Description

Fermer la tâche.

Paramètre

Date date Date de fermeture

Paramètre

String [status=ok] Statut de la fermeture (canceled|completed)

method

isClosed ()

Description

La tâche est-elle fermée ?

returns

{boolean}

method

toJson ()

returns

{Object} représentation de la tâche au format JSON.

method

toWiki ()

returns

{String} Représentation de la tâche sous forme de syntaxe wiki.

TaskList

method

constructor ([tasks])

Description

Création d'un objet de gestion de liste de tâches.

Paramètre

Task[] [tasks] Liste de tâches.

method

addTask (task)

Description

Ajouter une tâche.

Paramètre

Task|Object task Tâche ou objet décrivant la tâche à ajouter.

method

removeTask (task)

Description

Supprimer une tâche.

Paramètre

Task task Tâche à supprimer.

method

getOpenedTasks ()

Description

Récupérer la liste des tâches ouvertes.

returns

{Task[]}

method

getClosedTasks ()

Description

Récupérer la liste des tâches fermées.

returns

{Task[]}

method

getNokTasks ()

Description

Récupérer la liste des tâches fermées en echec.

returns

{Task[]}

method

orderByPriority ([asc=false])

Description

Trier la liste des tâches par le degré de priorité.

Paramètre

boolean [asc=false] Si le tri doit se faire par ordre croissant.

method

orderByStatus ()

Description

Trier la liste des tâches par statuts.

method

orderByOpenDate ()

Description

Trier la liste par date de création des tâches.

method

orderByDueDate ()

Description

Trier la liste par date de rendu des tâches.

method

toJson ()

returns

{Object} représentation de la liste de tâches au format JSON.

method

toWiki ()

returns

{String} Représentation de la liste de tâches sous forme de syntaxe wiki.

TaskListView

Basée sur l'objet rnb.itemable.

Historique

2011-08-29

Première formalisation du document.

2011-09-01

• Définition de la liste des statuts.
• Mise à jour du code HTML d'une tâche.

2012-01-15

• Modification de la liste de statuts pour coller à celle des objets « VTODO » de la spécification iCalendar.
• Création d'un Reader de syntaxe wiki.

Ressources et références

NIBAU, Rui. CSS Checklist. Omacronides, 16 septembre 2006

NIBAU, Rui. Syntaxe wiki. Omacronides, 23 août 2010

HICKSON, Ian. HTML 5. W3C, 04 mars 2010. 3.2.3.8 Embedding custom non-visible data with the data-* attributes

HICKSON, Ian. HTML 5. W3C, 04 mars 2010. 4.6.10 The time element

KARSSENBERG, Jaap. Zim User Manual. zim-wiki.org, 2011. Task List

KARSSENBERG, Jaap. Zim User Manual. zim-wiki.org, 2011. Checkboxes

DAWSON, Franck ; STENERSON, Derick. Internet Calendaring and Scheduling Core Object Specification (iCalendar). IETF Tools, novembre 1998. 4.6.2 To-do Component