Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez Discussion :

Calendrier developpez V2 ( plus mieux mieux )


Sujet :

Contribuez

  1. #1
    Expert confirmé
    Calendrier developpez V2 ( plus mieux mieux )
    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...ges/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
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  2. #2
    Rédacteur

    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...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Expert confirmé
    j'hésite a rajouter un bouton ou un click sur la page pour le faire disparaitre ....
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  4. #4
    Rédacteur

    Citation Envoyé par le_chomeur Voir le message
    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...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Rédacteur/Modérateur

    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)
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  6. #6
    Expert confirmé
    si si l'iframe est bien la mais effectivement elle était ajouté en tant que div

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    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
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  7. #7
    Rédacteur/Modérateur

    ç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
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  8. #8
    Expert confirmé
    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
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  9. #9
    Membre expérimenté
    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

  10. #10
    Expert confirmé
    Citation Envoyé par DoubleU Voir le message
    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
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  11. #11
    Membre chevronné
    Citation Envoyé par le_chomeur Voir le message

    - 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

  12. #12
    Expert confirmé
    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 ...
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  13. #13
    Membre expérimenté
    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    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).

  14. #14
    Expert confirmé
    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    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
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  15. #15
    Membre chevronné
    Citation Envoyé par DoubleU Voir le message
    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 :Sélectionner tout -Visualiser dans une fenêtre à part
    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.

  16. #16
    Expert confirmé
    de mon coté la fonction purge a résolu les fuites de mémoire
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  17. #17
    Rédacteur

    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...

    Voilà.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  18. #18
    Rédacteur

    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 :
    Exemple en ligne ici.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  19. #19
    Expert confirmé
    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 ?
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  20. #20
    Rédacteur

    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é !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

###raw>template_hook.ano_emploi###