55 */
66declare (strict_types=1 );
77
8+ use Hyva \Theme \Model \ViewModelRegistry ;
89use Magento \Framework \View \Element \Template ;
910use Opengento \Snowflake \ViewModel \Snowflake ;
1011
1112/** @var Template $block */
12- /** @var Snowflake $viewModel */
13- $ viewModel = $ block ->getData ('viewModel ' );
13+ /** @var Snowflake $snowflake */
14+ $ snowflake = $ block ->getData ('viewModel ' );
1415?>
1516<div id="snowflake_container"></div>
1617
1718<script>
18- require([
19- 'jquery',
20- 'jquery/ui',
21- 'domReady!'
22- ], function($) {
23- "use strict";
24-
25- <?php if ($ viewModel ->isForceSnow ()): ?>
19+ "use strict";
20+
21+ document.addEventListener('DOMContentLoaded', function() {
22+
23+ // Vérifiez si la neige de saucisses doit commencer
24+ if (forceSnow()) {
2625 letSnow();
27- <?php elseif ($ viewModel ->isApiEnabled ()): ?>
28- let lat, lon, settings = {
29- "url": "<?= $ viewModel ->getIpLocatorApiUrl () ?> ",
30- "method": "GET",
31- "timeout": 0
32- };
33- $.ajax(settings).done(function (response) {
34- [lat, lon] = response.loc.split(',');
35- $.ajax({
36- url: '<?= $ block ->getData ('meteoUrl ' ) ?> lat/' + lat + '/lon/' + lon,
37- type: "GET",
38- }).done(function (data) {
26+ } else if (isApiEnabled()) {
27+ fetch("<?= $ snowflake ->getIpLocatorApiUrl () ?> ")
28+ .then(response => response.json())
29+ .then(data => {
30+ let [lat, lon] = data.loc.split(',');
31+ return fetch(`<?= $ block ->getData ('meteoUrl ' ) ?> lat/${lat}/lon/${lon}`);
32+ })
33+ .then(response => response.json())
34+ .then(data => {
3935 if (data.is_snowing) {
4036 letSnow();
4137 }
42- });
43- } );
44- <?php endif ; ?>
38+ })
39+ .catch(error => console.error('Error:', error) );
40+ }
4541
4642 function letSnow() {
47- let snowMax = <?= $ viewModel ->getSnowflakeQty () ?> ;
48- let snowColor = ["#DDD", "#BBB", "#AAA", "#EEE", "#CCC"];
49- let snowEntity = "<?= $ viewModel ->getSnowflakeChar () ?> ";
50- let snowVSpeed = <?= $ viewModel ->getSnowflakeVSpeed () ?> ;
51- let snowHSpeed = <?= $ viewModel ->getSnowflakeHSpeed () ?> ;
52- let snowRotSpeed = <?= $ viewModel ->getSnowflakeRotSpeed () ?> ;
53- let snowMinSize = <?= $ viewModel ->getSnowflakeMinSize () ?> ;
54- const snowMaxSize = <?= $ viewModel ->getSnowflakeMaxSize () ?> ;
43+ let snowMax = <?= $ snowflake ->getSnowflakeQty () ?> ;
44+ let snowEntities = <?= $ snowflake ->getIconsForSelectedSeason () ?> ;
45+ let snowVSpeed = <?= $ snowflake ->getSnowflakeVSpeed () ?> ;
46+ let snowHSpeed = <?= $ snowflake ->getSnowflakeHSpeed () ?> ;
47+ let snowRotSpeed = <?= $ snowflake ->getSnowflakeRotSpeed () ?> ;
48+ let snowMinSize = <?= $ snowflake ->getSnowflakeMinSize () ?> ;
49+ const snowMaxSize = <?= $ snowflake ->getSnowflakeMaxSize () ?> ;
5550 const snowRefresh = 50;
56- const snowMaxBlur = 3 ;
51+ const snowMaxBlur = 0 ;
5752 const snowStyles = "cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;";
5853
59- let snow = [],
60- pos = [],
61- coords = [],
62- left = [],
63- marginBottom,
64- marginRight;
54+ let snow = [];
55+ let pos = [];
56+ let coords = [];
57+ let left = [];
58+ let marginBottom;
59+ let marginRight;
6560
6661 let newPositions = '';
6762
6863 for (let i = 0; i <= snowMax; i++) {
69- newPositions += ("<span id='flake" + i + "'" +
70- " style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>"
71- + snowEntity + " </span>") ;
64+ // Utiliser l'index modulo pour choisir une icône différente à chaque itération
65+ let entity = snowEntities[i % snowEntities.length].trim(); // Utilisation de trim() pour éviter les espaces indésirables
66+ newPositions += `<span id='flake${i}' style='${snowStyles} position:absolute; top:-${snowMaxSize}px;'>${entity} </span>` ;
7267 }
73- $('# snowflake_container').html( newPositions) ;
68+ document.getElementById(' snowflake_container').innerHTML = newPositions;
7469
7570 let snowSize = snowMaxSize - snowMinSize;
7671 marginBottom = document.body.scrollHeight - 5;
@@ -80,23 +75,22 @@ $viewModel = $block->getData('viewModel');
8075 coords[i] = 0;
8176 left[i] = Math.random() * 15;
8277 pos[i] = 0.03 + Math.random() / 10;
83- snow[i] = document.getElementById(" flake" + i );
78+ snow[i] = document.getElementById(` flake${i}` );
8479 snow[i].style.fontFamily = "inherit";
85- let size = randomise(snowSize) + snowMinSize
80+ let size = randomise(snowSize) + snowMinSize;
8681 snow[i].size = size;
8782 snow[i].speedFactor = snowMaxSize / size / 2;
88- snow[i].style.filter = "blur(" + (snowMaxBlur * ((snowMaxSize - size) / (snowMaxSize - snowMinSize))) / 2 + "px)";
89- snow[i].style.fontSize = snow[i].size + "px";
90- snow[i].style.color = snowColor[randomise(snowColor.length)];
83+ snow[i].style.filter = `blur(${(snowMaxBlur * ((snowMaxSize - size) / (snowMaxSize - snowMinSize))) / 2}px)`;
84+ snow[i].style.fontSize = `${size}px`;
9185 snow[i].style.zIndex = 1000;
9286 snow[i].style.textShadow = "1px 1px 5px #0000DD55";
9387 snow[i].style.transform = "rotate(0deg)";
94- snow[i].vsink = snowVSpeed * snow[i]. size / 5;
95- snow[i].hsink = snowHSpeed * snow[i]. size / 5;
96- snow[i].posX = randomise(marginRight - snow[i]. size);
97- snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i]. size);
98- snow[i].style.left = snow[i].posX + "px" ;
99- snow[i].style.top = snow[i].posY + "px" ;
88+ snow[i].vsink = snowVSpeed * size / 5;
89+ snow[i].hsink = snowHSpeed * size / 5;
90+ snow[i].posX = randomise(marginRight - size);
91+ snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * size);
92+ snow[i].style.left = `${ snow[i].posX}px` ;
93+ snow[i].style.top = `${ snow[i].posY}px` ;
10094
10195 snow[i].rotationAngleStep = 0;
10296 snow[i].rotationAngActual = 0;
@@ -125,31 +119,38 @@ $viewModel = $block->getData('viewModel');
125119 coords[i] += pos[i];
126120 snow[i].posY += snow[i].vsink;
127121 snow[i].posX += snow[i].hsink * snow[i].speedFactor;
128- snow[i].style.left = snow[i].posX + left[i] * Math.sin(coords[i]) + "px" ;
129- snow[i].style.top = snow[i].posY + "px" ;
122+ snow[i].style.left = `${ snow[i].posX + left[i] * Math.sin(coords[i])}px` ;
123+ snow[i].style.top = `${ snow[i].posY}px` ;
130124 snow[i].rotationAngActual += snow[i].rotationAngleStep;
131- snow[i].style.transform = " rotate(" + snow[i].rotationAngActual + " deg)" ;
125+ snow[i].style.transform = ` rotate(${ snow[i].rotationAngActual} deg)` ;
132126
133- // if (snowVSpeed > 0 && (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * left[i]))) {
134- if (snowVSpeed > 0 && (snow[i].posY >= marginBottom - 2 * snow[i].size)) {
127+ if (snowVSpeed > 0 && snow[i].posY >= marginBottom - 2 * snow[i].size) {
135128 snow[i].posX = randomise(marginRight - snow[i].size);
136129 snow[i].posY = 0;
137130 }
138- if (snowVSpeed < 0 && ( snow[i].posY < 0) ) {
139- snow[i].posY = document.body.scrollHeight - snow[i].size *2;
131+ if (snowVSpeed < 0 && snow[i].posY < 0) {
132+ snow[i].posY = document.body.scrollHeight - snow[i].size * 2;
140133 }
141- if (snowHSpeed > 0 && ( snow[i].posX >= marginRight - 2 * snow[i].size) ) {
134+ if (snowHSpeed > 0 && snow[i].posX >= marginRight - 2 * snow[i].size) {
142135 snow[i].posX = randomise(marginRight - snow[i].size);
143136 snow[i].posY = 0;
144137 }
145- if (snowHSpeed < 0 && ( snow[i].posX < 0) ) {
138+ if (snowHSpeed < 0 && snow[i].posX < 0) {
146139 snow[i].posY = document.body.clientWidth - snow[i].size * 2;
147140 }
148141 }
149142 }
150143
151144 window.addEventListener('resize', resize);
152- window.setInterval(moveSnow, snowRefresh);
145+ setInterval(moveSnow, snowRefresh);
146+ }
147+
148+ function forceSnow() {
149+ return <?= $ snowflake ->isForceSnow () ?> ;
150+ }
151+
152+ function isApiEnabled() {
153+ return <?= $ snowflake ->isApiEnabled () ?> ;
153154 }
154155 });
155156</script>
0 commit comments