diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md index 10945ccd7..22a25cd91 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md @@ -1,65 +1,72 @@ -The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end. +L'essence de la solution est une fonction qui ajoute plus de dates à la page (ou charge plus de chose en réalité) alors que nous sommes en fin de page. -We can call it immediately and add as a `window.onscroll` handler. +Nous pouvons l'appeler immédiatement et y ajouter un contrôleur d’évènement avec `window.onscroll`. -The most important question is: "How do we detect that the page is scrolled to bottom?" +La question cruciale est: " Comment détectons nous que la page est défilée vers le bas?" -Let's use window-relative coordinates. +Utilisons les coordonnées relatives de window: window-relative. -The document is represented (and contained) within `` tag, that is `document.documentElement`. +Le document est représenté (et contenu) dans la balise ``, qui est `document.documentElement`. -We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`, the `bottom` property will be window-relative coordinate of the document bottom. -For instance, if the height of the whole HTML document is `2000px`, then: +Nous pouvons obtenir les coordonnées relatives à la fenêtre du document en entier avec `document.documentElement.getBoundingClientRect()`, la propriété `bottom` sera la coordonnée relative à la fenêtre de la fin du document. + +Par exemple, si la hauteur totale du document HTML est de 2000px, alors : ```js -// when we're on the top of the page +// Lorsqu'on est en haut de la page + // window-relative top = 0 document.documentElement.getBoundingClientRect().top = 0 -// window-relative bottom = 2000 -// the document is long, so that is probably far beyond the window bottom +// window-relative en bas de page = 2000 +// le document est long, alors c'est probablement bien au-delà des limites inferieures de la fenêtre document.documentElement.getBoundingClientRect().bottom = 2000 ``` -If we scroll `500px` below, then: +Si nous défilonsla page de `500px` vers le bas, alors: ```js // document top is above the window 500px document.documentElement.getBoundingClientRect().top = -500 -// document bottom is 500px closer +// le bas du document est 500px plus proche document.documentElement.getBoundingClientRect().bottom = 1500 ``` -When we scroll till the end, assuming that the window height is `600px`: +Lorsque nous défilons jusque vers la fin, en assumant que la hauteur de la fenêtre est de `600px`: ```js -// document top is above the window 1400px +// La limite supérieure du document est au-dessus de la fenêtre à 1400px document.documentElement.getBoundingClientRect().top = -1400 -// document bottom is below the window 600px +// Le bas du document est au bas de la fenêtre à 600px document.documentElement.getBoundingClientRect().bottom = 600 ``` -Please note that the `bottom` can't be `0`, because it never reaches the window top. The lowest limit of the `bottom` coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up. -We can obtain the window height as `document.documentElement.clientHeight`. +Veuillez noter que le `bottom` ne peut être `0`, parce qu’elle n'atteint jamais le haut de la fenêtre. La limite la plus basse de coordonées `bottom` est la hauteur de la fenêtre (nous avons supposé que ce soit `600`),, nous ne pouvons plus la défiler vers le haut. + +Nous pouvons obtenir la hauteur de la fenêtre comme `document.documentElement.clientHeight`. + +Pour notre tâche, nous devons savoir quand la fin du document n’est pas plus éloigné de `100px` (c’est-à-dire `600-700px` si la hauteur est `600`). -For our task, we need to know when the document bottom is not no more than `100px` away from it (that is: `600-700px`, if the height is `600`). -So here's the function: +Donc voici la fonction: ```js function populate() { while(true) { - // document bottom + // la fin du document let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; - // if the user scrolled far enough (<100px to the end) + + // si l'utilisateur a suffisamment défilé (<100px de la fin) if (windowRelativeBottom < document.documentElement.clientHeight + 100) { - // let's add more data - document.body.insertAdjacentHTML("beforeend", `
Date: ${new Date()}
`); + + // ajoutons plus de données + document.body.insertAdjacentHTML("beforeend", `Date: ${new Date()}
`); } + } } -``` +``` \ No newline at end of file diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html index 8dc1b2949..304c90351 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html @@ -6,7 +6,7 @@ -Text and pictures are from https://wikipedia.org.
- -data-src
load when become visible.The Solar System is the gravitationally bound system comprising the Sun and the objects that - orbit it, either directly or indirectly. Of those objects that orbit the Sun directly, - the largest eight are the planets, with the remainder being significantly smaller objects, - such as dwarf planets and small Solar System bodies. - Of the objects that orbit the Sun indirectly, the moons, - two are larger than the smallest planet, Mercury.
- -The Solar System formed 4.6 billion years ago from the gravitational collapse of a giant - interstellar molecular cloud. The vast majority of the system's mass is in the Sun, with most - of the remaining mass contained in Jupiter. The four smaller inner planets, Mercury, Venus, - Earth and Mars, are terrestrial planets, being primarily composed of rock and metal. - The four outer planets are giant planets, being substantially more massive than the terrestrials. - The two largest, Jupiter and Saturn, are gas giants, being composed mainly of hydrogen and helium; - the two outermost planets, Uranus and Neptune, are ice giants, - being composed mostly of substances with relatively high melting points compared with hydrogen - and helium, called volatiles, such as water, ammonia and methane. - All planets have almost circular orbits that lie within a nearly flat disc called the ecliptic.
+Les Textes et images proviennent de https://wikipedia.org.
+ +data-src
se chargent lorsqu'elles deviennent visible.Le système solaire est un système centre gravitationnel comprenant le soleil et les objets orbitant autour de celui-ci, soit directement ou indirectement. Parmi ces objets qui tournent en orbite directement autour du soleil, les huit plus grands sont des planètes, le reste étant des objets significativement plus petits, tels que les planètes naines et les petits corps du système solaire. Des objets qui gravitent indirectement autour du soleil, les lunes, deux d’entre eux sont plus grands que la plus petite planète, Mercure.
+ +Le système solaire est forme il y a 4.6 milliards années à partir de la chute gravitationnelle d'un géant nuage moléculaire interstellaire. La grande majorité de la masse du système est dans le soleil, avec la plus grande partie du reste de la masse contenue dans Jupiter. Les quatre planètes intérieures les plus petites, Mercure, Venus, + la Terre et Mars, sont des planètes terrestres, étant principalement composées de roche et de métal. + Les quatre planètes se situant vers l'extérieure sont des planètes géantes, étant de manière substantielle plus massive que celles terrestres. + Les deux plus grandes, Jupiter et Saturne, sont des géantes gazeuses, étant principalement compose d'hydrogène et de hélium; + Les deux planètes les plus à l'extérieure, Uranus et Neptune, sont des géantes glaciales, + étant composées de substances ayant des points de fusion relativement élevés compare à l'hydrogène + et l'hélium, appelés les volatiles, telle que l'eau, ammonium et le méthane. + Toutes les planètes ont presque des orbites circulaires pouvant être couches sur un disque presque plat appelé l'elliptique.
The Sun is the Solar System's star and by far its most massive component. - Its large mass (332,900 Earth masses) produces temperatures and densities in its core - high enough to sustain nuclear fusion of hydrogen into helium, making it a main-sequence star. - This releases an enormous amount of energy, - mostly radiated into space as electromagnetic radiation peaking in visible light.
+Le soleil est une étoile du système solaire et est de loin sa composante la plus massive. + Sa masse la plus large (332,900 masses terrestre) produit d'assez fortes températures et de densités dans son noyau + pour soutenir une fusion de l'hydrogène en hélium, faisant d'elle une étoile de séquence principale. + Cela dégage une énorme quantité d'énergie, en majeur partie radiée dans l'espace en radiation électromagnétique devenant en son summum une lumière visible.
Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet - in the Solar System (0.055 Earth masses). - Mercury has no natural satellites; besides impact craters, its only known geological features - are lobed ridges or rupes that were probably produced by a period of contraction early in - its history.[67] Mercury's very tenuous atmosphere consists of atoms blasted off its - surface by the solar wind.[68] Its relatively large iron core and thin mantle have not yet - been adequately explained. Hypotheses include that its outer layers were stripped off by a - giant impact; or, that it was prevented from fully accreting by the young Sun's energy.
+Mercure (0,4 UA du Soleil) est la planète la plus proche du soleil et est la plus petite planète du système solaire (0,055 masse terrestre). + Mercure n'a pas de satellites naturels, en outre des cratères d'impacts, ses seuls aspects géologiques connues sont + les escarpements lobés ou rupes qui étaient probablement produits par une période de contraction tôt dans son histoire.[67] L'atmosphère ténu de Mercure est composé d' atomes projetés à sa surface par le vent solaire.[68] Son noyau de fer relativement large et son mince manteau n'ont pas été expliqué de manière adéquate jusqu'à présent. Les hypothèses incluent le fait que ses couches externes soient écorchées par un géant impact; ou, que cela fut empêché de totalement accréter par l’énergie solaire juvénile.
Venus (0.7 AU from the Sun) is close in size to Earth (0.815 Earth masses) and, like Earth, - has a thick silicate mantle around an iron core, a substantial atmosphere, and evidence of - internal geological activity. It is much drier than Earth, and its atmosphere is ninety times - as dense. Venus has no natural satellites. It is the hottest planet, with surface temperatures - over 400 °C (752°F), most likely due to the amount of greenhouse gases in the atmosphere. - No definitive evidence of current geological activity has been detected on Venus, - but it has no magnetic field that would prevent depletion of its substantial atmosphere, - which suggests that its atmosphere is being replenished by volcanic eruptions.
+Venus (0,7 UA du Soleil) est proche de par sa taille de la terre (0,815 masse terrestre) et, comme la terre, + a un épais manteau en silicate autour de son noyau de fer, une atmosphère substantielle, et l’évidence d'une activité géologique interne. + Elle est plus sèche que la Terre, et son atmosphère est quatre-vingt-dix fois plus dense. Venus n'as pas de satellites naturels. + C'est la planète la plus chaude, avec des températures à la surface allant au-delà de 400 °C (752°F), très probablement due à la quantité de gazes à effet de serre dans l'atmosphère. + Aucune évidence définitive d'une activité géologique actuelle n’a été détectée sur Venus, + mais elle n'as pas de champ magnétique qui empêcherait la raréfaction de son atmosphère substantielle, ce qui suggère que son atmosphère est entrain remplie par les éruptions volcaniques.
Earth (1 AU from the Sun) is the largest and densest of the inner planets, - the only one known to have current geological activity, and the only place where life - is known to exist. Its liquid hydrosphere is unique among the terrestrial planets, - and it is the only planet where plate tectonics has been observed. - Earth's atmosphere is radically different from those of the other planets, - having been altered by the presence of life to contain 21% free oxygen. - It has one natural satellite, the Moon, the only large satellite of a terrestrial planet - in the Solar System.
+La Terre (1 UA du Soleil) est la plus grande et la plus dense des planètes internes, + la seule connue pour avoir une activité géologique actuellement, et la seule place ou l'existence de vie est connue. Son liquide hydrosphère est unique parmi les planètes terrestres, + et c'est la seule planète ou la tectonique des plaques a été observée. + L'atmosphère de la terre est radicalement différente de celle des autres planètes, + ayant été altérée par la présence de vie pour contenir 21% oxygène libre. + Elle a un satellite naturel, la Lune, la seule grande satellite d'une planète terrestre du système solaire.
Mars (1.5 AU from the Sun) is smaller than Earth and Venus (0.107 Earth masses). - It has an atmosphere of mostly carbon dioxide with a surface pressure of 6.1 millibars - (roughly 0.6% of that of Earth). Its surface, peppered with vast volcanoes, - such as Olympus Mons, and rift valleys, such as Valles Marineris, shows geological - activity that may have persisted until as recently as 2 million years ago. - Its red colour comes from iron oxide (rust) in its soil. - Mars has two tiny natural satellites (Deimos and Phobos) thought to be captured asteroids.
+Mars (1,5 UA du Soleil) est plus petite que la Terre et Venus (0.107 masse terrestre). + Elle a une atmosphère en majorité composée de dioxyde de carbone avec une pression à la surface de 6,1 millibars + (Approximativement 0.6% de celle de la Terre). Sa surface, poivrée de vastes volcans, + tels que Olympus Mons, tel que la Vallée du Marineris, montrent une activité géologique qui a pu persister jusqu'à une période récente remontant à 2 million années. + Sa couleur rouge provient du dioxyde de fer (la rouille) dans la terre. + Mars a deux satellites naturels (Deimos and Phobos) dont on pense être des astéroïdes capturés.
Jupiter (5.2 AU), at 318 Earth masses, is 2.5 times the mass of all the other planets put together. - It is composed largely of hydrogen and helium. - Jupiter's strong internal heat creates semi-permanent features in its atmosphere, - such as cloud bands and the Great Red Spot. Jupiter has 67 known satellites. - The four largest, Ganymede, Callisto, Io, and Europa, show similarities to the terrestrial planets, - such as volcanism and internal heating. - Ganymede, the largest satellite in the Solar System, is larger than Mercury.
+Jupiter (5,2 UA), a 318 masse terrestre, est 2,5 fois la masse de toutes les autres planètes mises ensemble. + Elle est composée en grande partie d’hydrogène et d'hélium. + la forte chaleur de Jupiter crée des aspects semi-permanent dans son atmosphère, + tel que des bandes de nuages et la Grande Tache Rouge. Jupiter a 67 satellites connus. + Les quatre grands les plus connus, Ganymede, Callisto, Io, and Europe, montrent des similarités aux planètes terrestres, + tel que le volcanisme et le réchauffement interne. + Ganymede, le plus grand satellite dans le système solaire, est plus large que Mercure.
Saturn (9.5 AU), distinguished by its extensive ring system, - has several similarities to Jupiter, such as its atmospheric composition and magnetosphere. - Although Saturn has 60% of Jupiter's volume, it is less than a third as massive, - at 95 Earth masses. Saturn is the only planet of the Solar System that is less dense than water. - The rings of Saturn are made up of small ice and rock particles. - Saturn has 62 confirmed satellites composed largely of ice. - Two of these, Titan and Enceladus, show signs of geological activity. - Titan, the second-largest moon in the Solar System, is larger than Mercury - and the only satellite in the Solar System with a substantial atmosphere.
+Saturne (9,5 UA), qui se distingue par son extensif système d'anneau, à plusieurs similarités avec Jupiter, + tel que sa composition atmosphérique et son magnétosphère. + Bien que Saturne ait 60% du volume de Jupiter, elle est moins massive au tiers, + à 95 masse terrestre. Saturne est la seule planète du système Solaire qui est moins dense que l'eau. + Les anneaux de Saturne sont faits de petites quantités de glaces et de particules de roches. + Saturne a 62 satellites confirmés composés largement de glace. + Deux d'entre eux, Titan and Encelade, montrent des signes d'une activité géologique. + Titan, la deuxième plus grande lune du système solaire, est plus grande que Mercure + et est le seul satellite du système solaire avec une atmosphère substantielle.
Uranus (19.2 AU), at 14 Earth masses, is the lightest of the outer planets. - Uniquely among the planets, it orbits the Sun on its side; - its axial tilt is over ninety degrees to the ecliptic. - It has a much colder core than the other giant planets and radiates very little heat into space. - Uranus has 27 known satellites, the largest ones being Titania, - Oberon, Umbriel, Ariel, and Miranda.
+Uranus (19,2 UA), a 14 masse terrestre, est la plus légère des planètes externes. + Particulière parmi les autres planètes, elle tourne en orbite autour du soleil sur sa face; + Son inclinaison axiale est a plus de quatre-vingt-dix dégrée elliptique. + Elle a un noyau beaucoup plus froid que les autres planètes géantes et elle radie peu de chaleur dans l'espace. + Uranus a 27 satellites connus, les plus grandes étant Titania, + Oberon, Umbriel, Ariel, et Miranda.
Neptune (30.1 AU), though slightly smaller than Uranus, is more massive (equivalent to 17 Earths) - and hence more dense. It radiates more internal heat, - but not as much as Jupiter or Saturn. - Neptune has 14 known satellites. The largest, Triton, is geologically active, - with geysers of liquid nitrogen. - Triton is the only large satellite with a retrograde orbit. - Neptune is accompanied in its orbit by several minor planets, termed Neptune trojans, - that are in 1:1 resonance with it.
+Neptune (30,1 UA), bien que un peu plus petite que Uranus, est plus massive (équivalent à 17 fois la Terre) + et dès lors plus dense. Elle radie plus de chaleur interne, + mais pas autant que Jupiter ou Saturne. + Neptune a 14 satellites connus. Le plus grand, Triton, est géologiquement actif, + avec des geysers de nitrogène liquide. + Triton est le seul grand satellite avec un orbite rétrograde. + Neptune est accompagnée dans son orbite par plusieurs petites planètes, dénommées les troyens de Neptune, + qui sont en résonance 1:1 avec elle.