Skip to content

Commit 411e670

Browse files
author
Julien Michaud
committed
Just improve your old module and render it wonderfully nicer
1 parent 4bdb406 commit 411e670

File tree

4 files changed

+165
-77
lines changed

4 files changed

+165
-77
lines changed

‎Model/Config/Source/Season.php

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<?php
2+
/**
3+
* Copyright © OpenGento, All rights reserved.
4+
* See LICENSE bundled with this library for license details.
5+
*/
6+
declare(strict_types=1);
7+
8+
namespace Opengento\Snowflake\Model\Config\Source;
9+
10+
use Magento\Framework\Data\OptionSourceInterface;
11+
12+
class Season implements OptionSourceInterface
13+
{
14+
public function toOptionArray(): array
15+
{
16+
return [
17+
['value' => 'halloween', 'label' => __('Halloween')],
18+
['value' => 'noel', 'label' => __('Noel')],
19+
['value' => 'printemps', 'label' => __('Printemps')],
20+
['value' => 'ete', 'label' => __('Été')],
21+
['value' => 'automne', 'label' => __('Automne')],
22+
['value' => 'fete_nationale', 'label' => __('Fête Nationale')],
23+
['value' => 'nouvel_an', 'label' => __('Nouvel An')],
24+
['value' => 'paques', 'label' => __('Pâques')],
25+
['value' => 'saint_valentin', 'label' => __('Saint-Valentin')],
26+
['value' => 'fete_travail', 'label' => __('Fête du Travail')],
27+
['value' => 'fete_musique', 'label' => __('Fête de la Musique')],
28+
['value' => 'hiver', 'label' => __('Hiver')],
29+
['value' => 'carnaval', 'label' => __('Carnaval')],
30+
['value' => 'saint_patrick', 'label' => __('Saint Patrick')],
31+
['value' => 'hanoucca', 'label' => __('Hanoucca')],
32+
['value' => 'ramadan', 'label' => __('Ramadan')],
33+
['value' => 'diwali', 'label' => __('Diwali')],
34+
['value' => 'chinese_new_year', 'label' => __('Nouvel An Chinois')],
35+
['value' => 'fete_meres', 'label' => __('Fête des Mères')],
36+
['value' => 'fete_peres', 'label' => __('Fête des Pères')],
37+
['value' => 'action_de_grace', 'label' => __('Action de Grâce')],
38+
['value' => 'fete_saucisse', 'label' => __('Fête à la Saucisse')],
39+
['value' => 'apero_time', 'label' => __('l\'heure de l\'apéro')]
40+
];
41+
}
42+
43+
}

‎ViewModel/Snowflake.php

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,67 @@
1010
use Magento\Framework\View\Element\Block\ArgumentInterface;
1111
use Opengento\Snowflake\Model\Config\OpenWeather as OpenWeatherConfig;
1212
use Opengento\Snowflake\Model\Config\Snowflake as SnowflakeConfig;
13+
use Magento\Framework\Serialize\SerializerInterface;
14+
use Magento\Framework\App\Config\ScopeConfigInterface;
15+
use Magento\Store\Model\ScopeInterface;
1316

1417
final class Snowflake implements ArgumentInterface
1518
{
16-
private SnowflakeConfig $snowflakeConfig;
19+
public function __construct(
20+
private SerializerInterface $serializer,
21+
private SnowflakeConfig $snowflakeConfig,
22+
private OpenWeatherConfig $openWeatherConfig,
23+
private ScopeConfigInterface $scopeConfig
24+
) {}
1725

18-
private OpenWeatherConfig $openWeatherConfig;
26+
public function getSeasonalIcons(): array
27+
{
28+
return [
29+
'halloween' => ['🎃', '👻', '🦇'],
30+
'noel' => ['❄️', '🎅', '🎄'],
31+
'printemps' => ['🌷', '🐣', '☀️'],
32+
'ete' => ['🌞', '🏖️', '🍉'],
33+
'automne' => ['🍂', '🍁', '🎃'],
34+
'fete_nationale' => ['🎆', '🇫🇷', '🥳'],
35+
'nouvel_an' => ['🎇', '🎉', '🥂'],
36+
'paques' => ['🐰', '🥚', '🐣'],
37+
'saint_valentin' => ['💖', '🌹', '💕'],
38+
'fete_travail' => ['⚒️', '🌻', '🛠️'],
39+
'fete_musique' => ['🎵', '🎸', '🎤'],
40+
'hiver' => ['❄️', '☃️', '🌨️'],
41+
'printemps' => ['🌸', '🌷', '🦋'],
42+
'ete' => ['🌞', '🍦', '🏄'],
43+
'automne' => ['🍁', '🍂', '🍄'],
44+
'halloween' => ['🎃', '🕸️', '👻'],
45+
'noel' => ['🎄', '🎅', '🤶'],
46+
'carnaval' => ['🎭', '🎊', '🤹'],
47+
'saint_patrick' => ['☘️', '🍺', '🇮🇪'],
48+
'hanoucca' => ['🕎', '✨', '🥯'],
49+
'ramadan' => ['🌙', '🕌', '🕋'],
50+
'diwali' => ['🪔', '🎆', '🌟'],
51+
'chinese_new_year' => ['🐉', '🏮', '🧧'],
52+
'fete_meres' => ['💐', '👩‍👧‍👦', '🌹'],
53+
'fete_peres' => ['👔', '🍻', '🎣'],
54+
'halloween' => ['🎃', '🦇', '🕸️'],
55+
'action_de_grace' => ['🦃', '🥧', '🍂'],
56+
'noel' => ['🎄', '🎁', '❄️'],
57+
'nouvel_an_chinois' => ['🐲', '🧨', '🧧'],
58+
'fete_saucisse' => ['🌭', '🍻', '🎉', '🕺', '🎶'],
59+
'apero_time' => ['🍺', '🍹', '🍾']
60+
];
61+
}
1962

20-
public function __construct(
21-
SnowflakeConfig $snowflakeConfig,
22-
OpenWeatherConfig $openWeatherConfig
23-
) {
24-
$this->snowflakeConfig = $snowflakeConfig;
25-
$this->openWeatherConfig = $openWeatherConfig;
63+
public function getSelectedSeason(): string
64+
{
65+
return $this->scopeConfig->getValue('snowflake/general/season', ScopeInterface::SCOPE_STORE);
2666
}
2767

28-
public function getSnowflakeChar(): string
68+
public function getIconsForSelectedSeason(): string
2969
{
30-
return $this->snowflakeConfig->getSnowflakeChar();
70+
$selectedSeason = $this->getSelectedSeason();
71+
$seasonalIcons = $this->getSeasonalIcons();
72+
$icons = $seasonalIcons[$selectedSeason] ?? [];
73+
return $this->serializer->serialize($icons);
3174
}
3275

3376
public function getSnowflakeVSpeed(): float

‎etc/adminhtml/system.xml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
<config_path>snowflake/general/enable</config_path>
2020
<source_model>Magento\Config\Model\Config\Source\Enabledisable</source_model>
2121
</field>
22-
<field id="icon" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
23-
<label>Icon</label>
24-
<comment><![CDATA[Icon to display as a snowflake ❄️, get <a href="https://emojipedia.org/" target="_blank">more emoji</a>.]]></comment>
25-
<backend_model>Opengento\Snowflake\Model\Config\Backend\EmojiConverter</backend_model>
22+
<field id="season" translate="label" type="select" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
23+
<label>Season/Festival</label>
24+
<source_model>Opengento\Snowflake\Model\Config\Source\Season</source_model>
25+
<comment><![CDATA[Choose a season or festival for the icons.]]></comment>
2626
<depends>
2727
<field id="snowflake/general/enable">1</field>
2828
</depends>

‎view/frontend/templates/snowflake.phtml

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -5,72 +5,68 @@
55
*/
66
declare(strict_types=1);
77

8+
use Hyva\Theme\Model\ViewModelRegistry;
89
use Magento\Framework\View\Element\Template;
910
use Opengento\Snowflake\ViewModel\Snowflake;
1011

1112
/** @var Template $block */
12-
/** @var Snowflake $viewModel */
13-
$viewModel = $block->getData('viewModel');
13+
/** @var ViewModelRegistry $viewModels */
14+
15+
/** @var Snowflake $snowflake */
16+
$snowflake = $viewModels->require(Snowflake::class)
1417
?>
1518
<div id="snowflake_container"></div>
1619

1720
<script>
18-
require([
19-
'jquery',
20-
'jquery/ui',
21-
'domReady!'
22-
], function($) {
21+
document.addEventListener('DOMContentLoaded', function() {
2322
"use strict";
2423

25-
<?php if ($viewModel->isForceSnow()): ?>
24+
// Vérifiez si la neige de saucisses doit commencer
25+
if (forceSnow()) {
2626
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) {
27+
} else if (isApiEnabled()) {
28+
fetch("<?= $snowflake->getIpLocatorApiUrl() ?>")
29+
.then(response => response.json())
30+
.then(data => {
31+
let [lat, lon] = data.loc.split(',');
32+
return fetch(`<?= $block->getData('meteoUrl') ?>lat/${lat}/lon/${lon}`);
33+
})
34+
.then(response => response.json())
35+
.then(data => {
3936
if (data.is_snowing) {
4037
letSnow();
4138
}
42-
});
43-
});
44-
<?php endif; ?>
39+
})
40+
.catch(error => console.error('Error:', error));
41+
}
4542

4643
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() ?>;
44+
let snowMax = <?= $snowflake->getSnowflakeQty() ?>;
45+
let snowEntities = <?= $snowflake->getIconsForSelectedSeason() ?>;
46+
let snowVSpeed = <?= $snowflake->getSnowflakeVSpeed() ?>;
47+
let snowHSpeed = <?= $snowflake->getSnowflakeHSpeed() ?>;
48+
let snowRotSpeed = <?= $snowflake->getSnowflakeRotSpeed() ?>;
49+
let snowMinSize = <?= $snowflake->getSnowflakeMinSize() ?>;
50+
const snowMaxSize = <?= $snowflake->getSnowflakeMaxSize() ?>;
5551
const snowRefresh = 50;
56-
const snowMaxBlur = 3;
52+
const snowMaxBlur = 0;
5753
const snowStyles = "cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;";
5854

59-
let snow = [],
60-
pos = [],
61-
coords = [],
62-
left = [],
63-
marginBottom,
64-
marginRight;
55+
let snow = [];
56+
let pos = [];
57+
let coords = [];
58+
let left = [];
59+
let marginBottom;
60+
let marginRight;
6561

6662
let newPositions = '';
6763

6864
for (let i = 0; i <= snowMax; i++) {
69-
newPositions += ("<span id='flake" + i + "'" +
70-
" style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>"
71-
+ snowEntity + "</span>");
65+
// Utiliser l'index modulo pour choisir une icône différente à chaque itération
66+
let entity = snowEntities[i % snowEntities.length].trim(); // Utilisation de trim() pour éviter les espaces indésirables
67+
newPositions += `<span id='flake${i}' style='${snowStyles} position:absolute; top:-${snowMaxSize}px;'>${entity}</span>`;
7268
}
73-
$('#snowflake_container').html(newPositions);
69+
document.getElementById('snowflake_container').innerHTML = newPositions;
7470

7571
let snowSize = snowMaxSize - snowMinSize;
7672
marginBottom = document.body.scrollHeight - 5;
@@ -80,23 +76,22 @@ $viewModel = $block->getData('viewModel');
8076
coords[i] = 0;
8177
left[i] = Math.random() * 15;
8278
pos[i] = 0.03 + Math.random() / 10;
83-
snow[i] = document.getElementById("flake" + i);
79+
snow[i] = document.getElementById(`flake${i}`);
8480
snow[i].style.fontFamily = "inherit";
85-
let size = randomise(snowSize) + snowMinSize
81+
let size = randomise(snowSize) + snowMinSize;
8682
snow[i].size = size;
8783
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)];
84+
snow[i].style.filter = `blur(${(snowMaxBlur * ((snowMaxSize - size) / (snowMaxSize - snowMinSize))) / 2}px)`;
85+
snow[i].style.fontSize = `${size}px`;
9186
snow[i].style.zIndex = 1000;
9287
snow[i].style.textShadow = "1px 1px 5px #0000DD55";
9388
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";
89+
snow[i].vsink = snowVSpeed * size / 5;
90+
snow[i].hsink = snowHSpeed * size / 5;
91+
snow[i].posX = randomise(marginRight - size);
92+
snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * size);
93+
snow[i].style.left = `${snow[i].posX}px`;
94+
snow[i].style.top = `${snow[i].posY}px`;
10095

10196
snow[i].rotationAngleStep = 0;
10297
snow[i].rotationAngActual = 0;
@@ -125,31 +120,38 @@ $viewModel = $block->getData('viewModel');
125120
coords[i] += pos[i];
126121
snow[i].posY += snow[i].vsink;
127122
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";
123+
snow[i].style.left = `${snow[i].posX + left[i] * Math.sin(coords[i])}px`;
124+
snow[i].style.top = `${snow[i].posY}px`;
130125
snow[i].rotationAngActual += snow[i].rotationAngleStep;
131-
snow[i].style.transform = "rotate(" + snow[i].rotationAngActual + "deg)";
126+
snow[i].style.transform = `rotate(${snow[i].rotationAngActual}deg)`;
132127

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)) {
128+
if (snowVSpeed > 0 && snow[i].posY >= marginBottom - 2 * snow[i].size) {
135129
snow[i].posX = randomise(marginRight - snow[i].size);
136130
snow[i].posY = 0;
137131
}
138-
if (snowVSpeed < 0 && (snow[i].posY < 0)) {
139-
snow[i].posY = document.body.scrollHeight - snow[i].size *2;
132+
if (snowVSpeed < 0 && snow[i].posY < 0) {
133+
snow[i].posY = document.body.scrollHeight - snow[i].size * 2;
140134
}
141-
if (snowHSpeed > 0 && (snow[i].posX >= marginRight - 2 * snow[i].size)) {
135+
if (snowHSpeed > 0 && snow[i].posX >= marginRight - 2 * snow[i].size) {
142136
snow[i].posX = randomise(marginRight - snow[i].size);
143137
snow[i].posY = 0;
144138
}
145-
if (snowHSpeed < 0 && (snow[i].posX < 0)) {
139+
if (snowHSpeed < 0 && snow[i].posX < 0) {
146140
snow[i].posY = document.body.clientWidth - snow[i].size * 2;
147141
}
148142
}
149143
}
150144

151145
window.addEventListener('resize', resize);
152-
window.setInterval(moveSnow, snowRefresh);
146+
setInterval(moveSnow, snowRefresh);
147+
}
148+
149+
function forceSnow() {
150+
return <?= $snowflake->isForceSnow() ?>;
151+
}
152+
153+
function isApiEnabled() {
154+
return <?= $snowflake->isApiEnabled() ?>;
153155
}
154156
});
155157
</script>

0 commit comments

Comments
 (0)