[JavaScript] [SRC] Calendrier developpez V2 ( plus mieux mieux )

[le_chomeur]

Plutôt qu'un long discours le code et la démo :

http://easynews.free.fr/calendrierv2/

l'image de fond : http://easynews.free.fr/calendrierv2/images/static.png

ce code est 100% pure dom , testé sous FF3 / IE8 (beta 2) / IE7 / IE6 / CHROME ( 0.3 )

le code + image est dans le zip car trop lourd pour être posté

l'image de base n'est pas de moi , je l'ai juste modifié
si une âme charitable vient a passer avec des talent de graphiste ...

j'attends vos commentaires et améliorations !

a venir :

- blocage de plage de date
- gestion multilingue

Le_chom

ChangeLog :
- 14/11/2008 : correction bug iframe

[Bovino]

Très bien pensé et très fluide, bravo, excellent travail !
Testé sur Safari et Opéra, fonctionne aussi très bien.

Seul détail selon moi, c'est dommage que l'on soit obligé de cliquer sur une date pour le faire disparaitre...

[le_chomeur]

j'hésite a rajouter un bouton ou un click sur la page pour le faire disparaitre ....

[Bovino]

Envoyé par le_chomeur

j'hésite a rajouter un bouton ou un click sur la page pour le faire disparaitre ....

Ne voyant pas de bouton, le premier truc que j'ai tenté, c'est un clic sur la page...

[SpaceFrog]

Il semblerait que certains aient des soucis avec les selects qui ne sont pas masqués par le calendrier ?

tu n'as pas mis un iframe dans le div ? ou directement utilisé un iframe à la place du div ?

Mais du coup il faudra se mefier du doctype (transitionnal pour IE7 sinon l'iframe n'apparait pas)

[le_chomeur]

si si l'iframe est bien la mais effectivement elle était ajouté en tant que div

Code :

1
2
//Création d'une frame pour combler un bug lié aux liste sous ie
this.bugFrame = this.newElement({"typeElement":"div","classeCss":"bugFrame","parent":this.calendar});

testé avec liste et sous les autres navigateur

mise a jour de la démo ainsi que du zip

[SpaceFrog]

ça serait super cool si tu pouvais nous filer les dimensions en pixels de chacune des zones constituant l'image ...
On pourrait faire un concours de skins

[le_chomeur]

heuuu ok j'vous fait ça ce we, car je n'ai pas photoshop au boulot

sinon rapidement :

conteneur global : 300 * 250
bouton navigation mois : 14 * 50
bouton navigation année : 14 * 25
conteneur nom du mois : 130 * 50
conteneur nom jour : 56 * 50
conteneur année : 56 * 50
conteneur liste des jours : 290 * 155

bouton over , sélection du jours : 41 * 25

MAIS la façon dont a été codé le calendrier , il n'y a QUE le css a modifier pour changer le skin , donc libre a vous de créer un skin et de modifier les dimension dans le css je vais essayer de fournir un manuel d'utilisation si certaine personne sont intéressées

[DoubleU]

Il a grave de la gueule ce calendrier

Quelques points négatifs quand même:
- il faut vraiment que tu rajoutes un moyen de le fermer quand on click en dehors
- un peu trop bling bling , c'est à dire que je suis pas sur qu'avec ce skin il puisse aller sur beaucoup de sites
- plus de 150 fuites de mémoires détectés par sIEve

[le_chomeur]

Envoyé par DoubleU

Il a grave de la gueule ce calendrier

Quelques points négatifs quand même:
- il faut vraiment que tu rajoutes un moyen de le fermer quand on click en dehors
- un peu trop bling bling , c'est à dire que je suis pas sur qu'avec ce skin il puisse aller sur beaucoup de sites
- plus de 150 fuites de mémoires détectés par sIEve

merci

- pour la fermeture ok ok je m'en occupe de suite
- pour le coté bling bling , si quelqu'un peut me faire un skin ??
je m'occupe de l'intègrer
- pour les fuites mémoiree je ne vois pas du tout comment les résoudre

[kaymak]

Envoyé par le_chomeur

- pour les fuites mémoiree je ne vois pas du tout comment les résoudre

Salut,

Perso j'ai testé le soft sIEve, pas vu le nbre de leaks monter plus haut que .... zéro.
Par contre quand j'ai fermé le soft j'ai eu le droit à une erreur en boucle qui ne'a cessé de ré apparaître.
Tout sa pour dire que les résultats de ce soft me semblent très relatives vu la qualité intrinsèque de la chose. et les résultats terriblement divergents.

Sinon top le datePicker.
tu ne le précises pas, mais utilises tu une librairie additionnels ?

a plus

[le_chomeur]

Moi non plus pas vu de leak en fait ...
( ou alors pas compris car même les input de base provoquais des leak ... )

tu ne le précises pas, mais utilises tu une librairie additionnels ?

NON code 100% de moi , effet etc ...

[DoubleU]

Pour utiliser sIEve:

Tu lances le soft, avec ta page de démo
Tu cliques sur le bouton "show in use", qui va te montrer tous les noeuds en mémoire dans une nouvelle fenetre.
Ensuite, tu fais apparaitre ton calendrier, puis dans la fenetre qui est apparue tu cliques à nouveau sur "show in use".
Tu sélectionnes une date, puis à nouveau sur "show in use". Normalement le calendrier à disparu
Tu cliques alors dans la fenetre principale sur "about:blank", ce qui va changer la page pour une page blanche. Normalement, à ce moment la, tous tes objets devraient être déchargés de la mémoire puisque tu changes de page. Seulement si tu regardes sur l'autre fenetre, tu as toute la liste des objets qui trainent dans la mémoire, donc des fuites.

Pour supprimer les principales, ce qu'il faut savoir c'est que quand tu écris quelque chose comme ca:

Code :

this.YearTop.onmouseover = function(){this.className = "YearTopOver"};

tu crées à priori une référence circulaire qui engendre une fuite entre un objet DOM (this.YearTop) et un objet javascript (la fonction anonyme).
Pour supprimer cette référence, soit tu mets this.YearTop à null, soit tu mets this.YearTop.onmouseover à null après les avoir utilisés.

Le premier cas est bien adapté quand t'es dans une fonction simple mais comme là ton instance est partagée dans l'objet calendar, c'est pas l'idéal.
Le deuxième est assez simple a traiter, il te suffit de faire une fonction récurente appelée lorsque tu fermes ton calendrier, qui parcourt tous tes objets DOM à partir de ta div principale, et qui met à null tous les évenements que t'as pu leur ajouter (je regarderai ce soir si je retrouve ma fonction qui fait ca, mais pas sur du tout que je l'ai chez moi).

[le_chomeur]

Ok merci

Voici la version patché en ligne :

http://easynews.free.fr/calendrierv2/

je me suis servis d'une ancienne discution dont j'avais justement trouvé la solution lol pour créer la méthode purge :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
calendar.prototype.purge = function (CurrentNode){
 
		//Récupération de tous les noeuds enfants 
		while (CurrentNode.childNodes.length>0) {
			//Si le premier enfant a des enfants appel récursif de la méthode
			if(CurrentNode.firstChild.childNodes.length>0){
				this.purge(CurrentNode.firstChild);
			}
			//Sinon on parcours ses propriétés pour supprimer les évènements lié aux objet, puis destruction de l'objet
			else{
 
				var tempo = CurrentNode.firstChild ;
				var a = tempo.attributes, i, l, n;
			    if (a) {
			        l = a.length;
			        for (i = 0; i < l; i += 1) {
			            n = a[i].name;
			            if (typeof tempo[n] === 'function') {
			                tempo[n] = null;
			            }
			        }
			    }
				tempo = null;
				CurrentNode.removeChild(CurrentNode.firstChild);
 
			}
		}
	}

en fait le problème vient des évènements lié aux objet ( méthode function ) qu'il faut supprimer ...

voila testé avec ton logiciel et 0 fuite ^^
je mettrais a jour le pack zip ce we quand j'aurais ajouter un skin et le click en dehors du calendrier

[kaymak]

Envoyé par DoubleU

Pour utiliser sIEve:

Tu lances le soft, avec ta page de démo
Tu cliques sur le bouton "show in use", qui va te montrer tous les noeuds en mémoire dans une nouvelle fenetre.
Ensuite, tu fais apparaitre ton calendrier, puis dans la fenetre qui est apparue tu cliques à nouveau sur "show in use".
Tu sélectionnes une date, puis à nouveau sur "show in use". Normalement le calendrier à disparu
Tu cliques alors dans la fenetre principale sur "about:blank", ce qui va changer la page pour une page blanche. Normalement, à ce moment la, tous tes objets devraient être déchargés de la mémoire puisque tu changes de page. Seulement si tu regardes sur l'autre fenetre, tu as toute la liste des objets qui trainent dans la mémoire, donc des fuites.

Pour supprimer les principales, ce qu'il faut savoir c'est que quand tu écris quelque chose comme ca:

Code :

this.YearTop.onmouseover = function(){this.className = "YearTopOver"};

tu crées à priori une référence circulaire qui engendre une fuite entre un objet DOM (this.YearTop) et un objet javascript (la fonction anonyme).
Pour supprimer cette référence, soit tu mets this.YearTop à null, soit tu mets this.YearTop.onmouseover à null après les avoir utilisés.

Le premier cas est bien adapté quand t'es dans une fonction simple mais comme là ton instance est partagée dans l'objet calendar, c'est pas l'idéal.
Le deuxième est assez simple a traiter, il te suffit de faire une fonction récurente appelée lorsque tu fermes ton calendrier, qui parcourt tous tes objets DOM à partir de ta div principale, et qui met à null tous les évenements que t'as pu leur ajouter (je regarderai ce soir si je retrouve ma fonction qui fait ca, mais pas sur du tout que je l'ai chez moi).

pouah c'est compliqué. L'explication est la bienvenue.
M'enfin j'ai encore ma boite d'erreur provoqué par sIeve mdr
On la compte dans les memory leaks celle là ?

Au passage n'y aurait il pas la même chose pour nos amis ff, opera, safari, chrome ?

Sinon en faits les memory leaks dont tu fais causes, c'est le principe du destructeur, simplement.

[le_chomeur]

de mon coté la fonction purge a résolu les fuites de mémoire

[Bovino]

Bon, j'ai pris un peu de temps pour enrichir le code.
Modifications apportées :
* Disparition du calendrier si on clique en dehors.
* Ajout d'un id sur la div principale pour faciliter la destruction.
* Ajout d'une propriété calendrier sur chaque élément du calendrier pour détecter si on a cliqué dessus ou non.
* Création de variables globales.
* Gestion du click sur le document entier, détection de l'élément cliqué, vérification si cet élément est dans le calendrier et destruction si ce n'est pas le cas.
* Gestion du timer pour ne permettre les défilements que si le calendrier est complètement affiché (opacité >= 100)

Reste un bug (d'après mes tests) à rectifier : lorsqu'on clique sur un champ, le calendrier s'affiche, on clique sur l'autre champ, le premier calendrier disparait et un autre s'affiche, on reclique sur le premier champ, le calendrier s'efface mais l'autre ne s'affiche pas...
index.html
Voilà.

[Bovino]

Mise à jour : le bug a été rectifié, mais au prix de rajouts de tests et de flags dont je ne suis pas pleinement satisfait, cependant, cela fonctionne correctement à priori : index.html
Exemple en ligne ici.

[le_chomeur]

Merci bivino tu t'es fait plaisir
tu as mis la source de la première page ?
ps indique que tu es l'auteur des modifications

apparté : comment as tu trouvé le code ?

[Bovino]

Oui, c'est bien la source de la 1re page.

Pour ce qui est du code, je l'ai trouvé assez simple et efficace (et bien commenté !) du coup, ça n'a pas été trop difficile à adapter.
En particulier, l'idée de créer une fonction de création d'élément m'a bien aidé pour ajouter facilement une propriété commune nécessaire pour gérer facilement le clic en dehors du calendrier.
A vrai dire, je dois avouer que je n'ai même pas eu à regarder l'ensemble du code vu que tout est parfaitement décomposé !