Page d'exemple de ygwm, une petite bibliothèque pour faire des fenêtres dynamiques en JavaScript

Si vous voyez ce texte c'est que le code ne s'est pas encore initialisé, ou qu'il y a eu une erreur. Examinez la console d'erreurs JavaScript du navigateur.

Juste une petite démo de fenêtres dynamiques, le code n'est pas encore complet mais suffisant pour passer à autre chose.
Je ne cherche pas à faire un "vrai window manager" mais quelque chose pour listed
Note : ça a été testé OK sous Firefox, Seamonkey, Omniweb, Shiira, Safari, Konqueror, Chrome et Opera, mais aucune garantie pour MSIE ou Camino.

Sun Feb 15 04:09:09 CET 2009

* Le déplacement à la souris ainsi que le clic-to-focus sont OK
* redimensionnement en bas (à gauche et à droite) : ok
* minimisation/restauration : simpliste mais OK.
* Effacement : bouton ajouté, optionnel.
Un callback peut aussi être fourni pour déterminer si une fenêtre doit être effacée à la fin d'un déplacement (pour faire un drag&drop dans une poubelle par exemple)
* Masquage provisoire du contenu de la fenêtre lorsque l'affichage est trop lent durant les déplacements et redimensionnements
* Autoscroll ajouté pour "naviguer" dans d'immenses espaces de travail (32000 pixels de large et de long avec Opéra, encore plus sous Firefox)

Cette fenêtre n'a pas de zone de redimensionnement ni de zone de message, c'est fait exprès et ça peut être utile dans certains cas.

On ne peut pas la fermer non plus.

Explications:

L'objet ygwm contenu dans le fichier JavaScript contient toute la machinerie nécessaire (variables et fonctions) pour faire fonctionner les fenêtres.

Les fenêtres sont placées dans le DOM dans un ordre particulier afin d'obtenir un recouvrement donné. Attention, le code HTML doit définir leur place dans le même ordre que le code JS de création de fenêtres, pour éviter un effet de bord désagréable de focus des fenêtres.

Le contenu des fenêtres peut être soit
- vide (argument "none"),
- un autre élément (donné en argument au lieu de "none"),
- l'élément donné par l'argument de place (argument null)
Donc une fenêtre peut être créée avant ou après la création de son contenu.

Les DIVs des fenêtres contiennent aussi des variables et des fonctions privées, suffisantes au fonctionnement de chaque fenêtre. Donc c'est un "modèle objet" mais l'objet est fondu avec le DIV, pas besoin de conserver l'objet créé dans une variable (il reste dans le DOM).

Les fenêtres peuvent avoir leur chapeau et/ou leur pied désactivé à la création. Cela rend la fenêtre non redimensionnable et/ou indéplaçable, pour des messages d'erreur par exemple. On peut aussi empêcher la fenêtre d'être effacée normalement.

Merci aux personnes qui m'ont aidé à rendre ce code meilleur, en particulier à Laura, Milhouse et à Stéphane Moriaux

Vous aussi, vous pouvez avoir votre nom dans cette fenêtre, en m'envoyant des patches et/ou en trouvant des bugs !