Visualisation d'une page Webjax
Scriptaculous (description du fichier effects.js)
Le fichier "effects.js" de la librairie Scriptaculous a de multiples rôles le principal étant de définir toute une série d'objets Effect. qui permettent d'appliquer des effets graphiques intéressants à des éléments ou parties des interfaces web (X)HTML/CSS .
Le fichier commence par définir 9 méthodes qui sont listées et décrites succintement ci après :
- String.prototype.parseColor () : permet de transformer la valeur d'un couleur au format HTML ou exprimée en RGB sous une forme utilisable.
- Element.collectTextNodes (element) : permet de récupérer l'ensemble des nodes de type 'text' dans un élément précisé
- Element.collectTextNodesIgnoreClass (element,nomClasse) : permet de récupérer l'ensemble des nodes de type 'text' d'un élément en ommettant les nodes portant le 'nomClasse' CSS précisé dans l'appel de la méthode.
- Element.setContentZoom (element,percent) : méthode qui permet de 'zoomer' le contenu texte d'un élément précisé . Ce zoom influe sur la propriété CSS 'font-size' qui voit sa valeur exprimée en 'em' en fonction du pourcentage précisé.
- Element.getOpacity (element) : méthode permettant de récupérer l'opacité courante d'un élément DOM précisé.
La méthode commence par tenter de récupérer la propriété CSS 'opacity' puis si cette propriété n'est pas lisible la méthode tente de lire à partir d'une expression régulière la propriété CSS 'filter' et si cette propriété n'est pas trouvée non plus, la méthode retourne la valeur décimale '1.0'
- Element.setOpacity (element, valeur) : méthode permettant de mettre à jour l'opacité d'un élément précisé avec une valeur elle aussi précisée. La méthode setOpacity() comme getOpacity() applique une distinction entre la propriété CSS 'opacity' et 'filter'. 'filter' est utilisée pour les navigateurs de type IE et 'opacity' pour tous les autres.
- Element.getInlineOpacity (element) : méthode permettant d'obtenir l'opacité d'un élément à partir de la propriété 'opacity'. Cette méthode renvoit une chaîne de caractère vide si la propriété CSS ne peut être lue.
- Element.forceRendering (element) : cette méthode permet de créer puis de supprimer directement après une node texte vide dans un élément DOM précisé.
- Array.prototype.call () : 06/01/07 => mise à jour à faire
(ligne 103 à ligne 163), Définition de Effect
Le fichier 'effect.js' présente suite à la définition des méthodes présentées ci avant, l'objet Effect qui servira de container global pour tous les effets qui seront définis après.
Cet objet Effect est doté de 4 méthodes et d'un objet complexe 'PAIRS' comme propriété.
(ligne 165 à ligne 196), Les transitions d'effets
Le fichier se poursuit en définissant ensuite les transitions d'effets basiques qui pourront être utilisées dans les implémentations spécifiques de Effect.
Les différents types de transitions définies sont listées ci après dans un souci de clarté par rapport au code que vous utilisez avec Scriptaculous :
- linear () : méthode qui appelle la méthode Prototype.K ou 'fonction qui retourne le seul argument qu'on lui transmet'
- sinoidal (position) : méthode qui retourne à partir d'une position envoyée la valeur sinusoidale suivante.
- reverse (position) : méthode qui enlève 1 à une valeur dite 'position' transmise.
- flicker (position) : méthode qui retourne une valeur dont le calcul a mis en jeu des valeurs Cosinus, PI, et une valeur aléatoire. Le tout en relation avec la position transmise.
- wobble (position) : méthode qui effectue à peu près le même type de calcul que la précédente mais sans valeur aléatoire.
- pulse (position,nbPulse) : méthode qui fonctionne notamment avec un argument 'nbPulse'.
Cet argument est défini par défaut à 5 si non défini.
La méthode retourne le résultat d'un calcul tenant compte de 'nbPulse'.
- none (position) : méthode qui retourne 0 quelquesoit la position transmise.
- full (position) : méthode qui retourne 1 quelquesoit la position transmise.
Nous avons donc vu quel type de transition vont être utilisées dans l'écriture des effets dits 'Core' soit ceux la racine de l'objet et les effets dits 'combination' ou en français 'combinaison' c'est à dire qui mélange avec leur propre recette les effets 'Core' et des nouvelles idées de traitement.
Les effets "Core"
(ligne 199 à ligne 251) Effect.ScopedQueue
06/01/07 : mise à jour à faire
(ligne 253 à ligne 264) Effect.Queues
06/01/07 : mise à jour à faire
(ligne 266 à ligne 275) Effect.DefaultOptions
Cet objet permet de définir les paramètres ou options par défaut qui seront appliqué à des Effect. pour lesquels rien n'a été mentionné en terme d'options.
Les valeurs par défaut et les différentes options sont listées et présentées succintement ci après :
- transition (par défaut : Effect.Transitions.sinoidal) : transition applicable par défaut dans les Effect.
- duration (par défaut : 1.0) : durée de l'effet applicable de base (ndr : 1 seconde).
- fps (par défaut : 25.00) : nombre de frames par seconde (ndr : d'après la documentation officielle, en relation avec l'intégration de Effect.Queues ).
- sync (par défaut : false) :
- from (par défaut : 0.0) :
- to (par défaut : 1.0) :
- delay (par défaut : 0.0) :
- queue (par défaut : 'parallel') :
(ligne 277 à ligne 339) Effect.Base
Les différentes méthodes de cet objet sont listées ci après :
- start (options) :
- loop (positionTemps) :
- render (position) :
- cancel () :
- event (nomEvenement) :
- inspect () : fonction d'inspection permettant de rendre la chaîne de caractères reprenant les valeurs de l'objet en cours et de ses options.
06/01/07 : mise à jour à faire
(ligne 341 à ligne 359) Effect.Parallel
Cet objet hérite de Effect.Base.
Ses méthodes sont listées ci après :
- initialize (effets) :
- update (position) :
- finish (position) :
(ligne 361 à ligne 370) Effect.Event
Cet objet hérite de Effect.Base.
Ses méthodes sont listées ci après :
- initialize () :
- update () : cette méthode utilise la méthode Prototype.emptyFunction() ou 'méthode qui fait rien mais rien du tout' .
(ligne 372 à ligne 389) Effect.Opacity
Cet objet hérite de Effect.Base.
Ses méthodes sont listées ci après :
- initialize (element) : lance l'application de l'effet d'opacité sur un élément DOM précisé.
- update (position) : permet d'utiliser la méthode Element.setOpacity().
Profitons de cet objet Effect.Opacity pour repérer la ligne de code Javascript permettant de tester l'existence d'un élément et de retourner en cas de non existence un message d'erreur dans la console Javascript.
Le code est recopié ci après :
(ligne 391 à ligne 423) Effect.Move
Cet objet hérite de Effect.Base.
Ses méthodes sont listées ci après :
- initialize (element) :
- setup () :
- update (position) : méthode qui met à jour la position d'un élément via Element.setStyle() méthode extension définie dans Prototype.
(ligne 425 à 429) Effect.MoveBy (ndr : dépréciée)
Objet déprécié qui est toujours présent pour des raisons de compatibilité ascendante.
Cet objet effectue en fait un appel à Effect.Move succintement décrit ci avant.
(ligne 431 à ligne 504) Effect.Scale
Cet objet hérite de Effect.Base.
Ses méthodes sont listées ci après :
- initialize (element,pourcentage) :
- setup () :
- update (position) :
- finish (position) :
- setDimensions (hauteur,largeur) :
(ligne 506 à ligne 538) Effect.Highlight
Cet objet hérite de Effect.Base.
Ses méthodes sont listées ci après :
- initialize (element) :
- setup () :
- update () :
- finish () :
(ligne 540 à ligne 563) Effect.ScrollTo
Cet objet hérite de Effect.Base.
Ses méthodes sont listées ci après :
- initialize (element) :
- setup () :
- update () :
Les effets 'combination' ou de combinaisons
(ligne 567 à ligne 578) Effect.Fade
(ligne 580 à ligne 593) Effect.Appear
(ligne 595 à ligne 617) Effect.Puff
(ligne 619 à ligne 631) Effect.BlindUp
(ligne 633 à ligne 649) Effect.BlindDown
(ligne 651 à ligne 671) Effect.SwitchOff
(ligne 673 à ligne 691) Effect.DropOut
(ligne 693 à ligne 712) Effect.Shake
(ligne 714 à ligne 740) Effect.SlideDown
(ligne 742 à ligne 767) Effect.SlideUp
(ligne 770 à ligne 780) Effect.Squish
(ligne 782 à ligne 854) Effect.Grow
(ligne 856 à ligne 908) Effect.Shrink
(ligne 910 à ligne 921) Effect.Pulsate
(ligne 923 à ligne 947) Effect.Fold
Le fichier commence par définir 9 méthodes qui sont listées et décrites succintement ci après :
- String.prototype.parseColor () : permet de transformer la valeur d'un couleur au format HTML ou exprimée en RGB sous une forme utilisable.
- Element.collectTextNodes (element) : permet de récupérer l'ensemble des nodes de type 'text' dans un élément précisé
- Element.collectTextNodesIgnoreClass (element,nomClasse) : permet de récupérer l'ensemble des nodes de type 'text' d'un élément en ommettant les nodes portant le 'nomClasse' CSS précisé dans l'appel de la méthode.
- Element.setContentZoom (element,percent) : méthode qui permet de 'zoomer' le contenu texte d'un élément précisé . Ce zoom influe sur la propriété CSS 'font-size' qui voit sa valeur exprimée en 'em' en fonction du pourcentage précisé.
- Element.getOpacity (element) : méthode permettant de récupérer l'opacité courante d'un élément DOM précisé.
La méthode commence par tenter de récupérer la propriété CSS 'opacity' puis si cette propriété n'est pas lisible la méthode tente de lire à partir d'une expression régulière la propriété CSS 'filter' et si cette propriété n'est pas trouvée non plus, la méthode retourne la valeur décimale '1.0' - Element.setOpacity (element, valeur) : méthode permettant de mettre à jour l'opacité d'un élément précisé avec une valeur elle aussi précisée. La méthode setOpacity() comme getOpacity() applique une distinction entre la propriété CSS 'opacity' et 'filter'. 'filter' est utilisée pour les navigateurs de type IE et 'opacity' pour tous les autres.
- Element.getInlineOpacity (element) : méthode permettant d'obtenir l'opacité d'un élément à partir de la propriété 'opacity'. Cette méthode renvoit une chaîne de caractère vide si la propriété CSS ne peut être lue.
- Element.forceRendering (element) : cette méthode permet de créer puis de supprimer directement après une node texte vide dans un élément DOM précisé.
- Array.prototype.call () : 06/01/07 => mise à jour à faire
(ligne 103 à ligne 163), Définition de Effect
Le fichier 'effect.js' présente suite à la définition des méthodes présentées ci avant, l'objet Effect qui servira de container global pour tous les effets qui seront définis après.Cet objet Effect est doté de 4 méthodes et d'un objet complexe 'PAIRS' comme propriété.
(ligne 165 à ligne 196), Les transitions d'effets
Le fichier se poursuit en définissant ensuite les transitions d'effets basiques qui pourront être utilisées dans les implémentations spécifiques de Effect.Les différents types de transitions définies sont listées ci après dans un souci de clarté par rapport au code que vous utilisez avec Scriptaculous :
- linear () : méthode qui appelle la méthode Prototype.K ou 'fonction qui retourne le seul argument qu'on lui transmet'
- sinoidal (position) : méthode qui retourne à partir d'une position envoyée la valeur sinusoidale suivante.
- reverse (position) : méthode qui enlève 1 à une valeur dite 'position' transmise.
- flicker (position) : méthode qui retourne une valeur dont le calcul a mis en jeu des valeurs Cosinus, PI, et une valeur aléatoire. Le tout en relation avec la position transmise.
- wobble (position) : méthode qui effectue à peu près le même type de calcul que la précédente mais sans valeur aléatoire.
- pulse (position,nbPulse) : méthode qui fonctionne notamment avec un argument 'nbPulse'.
Cet argument est défini par défaut à 5 si non défini.
La méthode retourne le résultat d'un calcul tenant compte de 'nbPulse'. - none (position) : méthode qui retourne 0 quelquesoit la position transmise.
- full (position) : méthode qui retourne 1 quelquesoit la position transmise.
Nous avons donc vu quel type de transition vont être utilisées dans l'écriture des effets dits 'Core' soit ceux la racine de l'objet et les effets dits 'combination' ou en français 'combinaison' c'est à dire qui mélange avec leur propre recette les effets 'Core' et des nouvelles idées de traitement.
Les effets "Core"
(ligne 199 à ligne 251) Effect.ScopedQueue
06/01/07 : mise à jour à faire(ligne 253 à ligne 264) Effect.Queues
06/01/07 : mise à jour à faire(ligne 266 à ligne 275) Effect.DefaultOptions
Cet objet permet de définir les paramètres ou options par défaut qui seront appliqué à des Effect. pour lesquels rien n'a été mentionné en terme d'options.Les valeurs par défaut et les différentes options sont listées et présentées succintement ci après :
- transition (par défaut : Effect.Transitions.sinoidal) : transition applicable par défaut dans les Effect.
- duration (par défaut : 1.0) : durée de l'effet applicable de base (ndr : 1 seconde).
- fps (par défaut : 25.00) : nombre de frames par seconde (ndr : d'après la documentation officielle, en relation avec l'intégration de Effect.Queues ).
- sync (par défaut : false) :
- from (par défaut : 0.0) :
- to (par défaut : 1.0) :
- delay (par défaut : 0.0) :
- queue (par défaut : 'parallel') :
(ligne 277 à ligne 339) Effect.Base
Les différentes méthodes de cet objet sont listées ci après :- start (options) :
- loop (positionTemps) :
- render (position) :
- cancel () :
- event (nomEvenement) :
- inspect () : fonction d'inspection permettant de rendre la chaîne de caractères reprenant les valeurs de l'objet en cours et de ses options.
06/01/07 : mise à jour à faire
(ligne 341 à ligne 359) Effect.Parallel
Cet objet hérite de Effect.Base.Ses méthodes sont listées ci après :
- initialize (effets) :
- update (position) :
- finish (position) :
(ligne 361 à ligne 370) Effect.Event
Cet objet hérite de Effect.Base.Ses méthodes sont listées ci après :
- initialize () :
- update () : cette méthode utilise la méthode Prototype.emptyFunction() ou 'méthode qui fait rien mais rien du tout' .
(ligne 372 à ligne 389) Effect.Opacity
Cet objet hérite de Effect.Base.Ses méthodes sont listées ci après :
- initialize (element) : lance l'application de l'effet d'opacité sur un élément DOM précisé.
- update (position) : permet d'utiliser la méthode Element.setOpacity().
Profitons de cet objet Effect.Opacity pour repérer la ligne de code Javascript permettant de tester l'existence d'un élément et de retourner en cas de non existence un message d'erreur dans la console Javascript.
Le code est recopié ci après :
(ligne 391 à ligne 423) Effect.Move
Cet objet hérite de Effect.Base.Ses méthodes sont listées ci après :
- initialize (element) :
- setup () :
- update (position) : méthode qui met à jour la position d'un élément via Element.setStyle() méthode extension définie dans Prototype.
(ligne 425 à 429) Effect.MoveBy (ndr : dépréciée)
Objet déprécié qui est toujours présent pour des raisons de compatibilité ascendante.Cet objet effectue en fait un appel à Effect.Move succintement décrit ci avant.
(ligne 431 à ligne 504) Effect.Scale
Cet objet hérite de Effect.Base.Ses méthodes sont listées ci après :
- initialize (element,pourcentage) :
- setup () :
- update (position) :
- finish (position) :
- setDimensions (hauteur,largeur) :
(ligne 506 à ligne 538) Effect.Highlight
Cet objet hérite de Effect.Base.Ses méthodes sont listées ci après :
- initialize (element) :
- setup () :
- update () :
- finish () :
(ligne 540 à ligne 563) Effect.ScrollTo
Cet objet hérite de Effect.Base.Ses méthodes sont listées ci après :
- initialize (element) :
- setup () :
- update () :
Les effets 'combination' ou de combinaisons
(ligne 567 à ligne 578) Effect.Fade
(ligne 580 à ligne 593) Effect.Appear
(ligne 595 à ligne 617) Effect.Puff
(ligne 619 à ligne 631) Effect.BlindUp
(ligne 633 à ligne 649) Effect.BlindDown
(ligne 651 à ligne 671) Effect.SwitchOff
(ligne 673 à ligne 691) Effect.DropOut
(ligne 693 à ligne 712) Effect.Shake
(ligne 714 à ligne 740) Effect.SlideDown
(ligne 742 à ligne 767) Effect.SlideUp
(ligne 770 à ligne 780) Effect.Squish
(ligne 782 à ligne 854) Effect.Grow
(ligne 856 à ligne 908) Effect.Shrink
(ligne 910 à ligne 921) Effect.Pulsate
(ligne 923 à ligne 947) Effect.Fold
: 05/01/2007 04:28:31 | 
: Scriptaculous, fichier, effects.js, Effects, Pulsate, Rotate, graphique, Thomas, Fuchs, thomasfuchs, effetsVisuels, visualEffects, 
