Added theme support and new theme for Valentine's Day

[pinsdorf]

I thought it would be nice to extend this module so that it shows hearts for Valentine's Day. Of course, we want to keep the great original snow flakes from this module for next winter. Therefor I've implemented a simple theme support for MMM-Snow, which let's you decide what to show.

The module's original snow flakes are now theme "winter" and there is ´a new theme "love" for Valentine's Day, which uses hearts as "flakes".

Renamed the original flake images in order to get naming consistent. Amended README to explain new setting and how to implement new themes.

[MichMich]

Super Awesome!

Just 2 small suggestions: make the snow version the default so it won’t break existing installations. And let the hearts move up (in stead of down) since that’s what hearts do! ;)

💕

[pinsdorf]

Thanks! :-) The winter theme is default already. So, I'd suggest it won't break existing installations without the "theme" setting.

Re moving hearts: actually, I've tried to make the hearts move up, but couldn't figure how. I'm not very experienced with CSS animations. Do you want to give it a try?

[pinsdorf]

Oops, you're right. Remainder from last test ...

[MichMich]

Regarding the upwards movement:

The snow-drop animation makes the flakes fall down:

@keyframes snow-drop {
    from {transform: translateY(0vh)}
    to {transform: translateY(calc(100vh + 20px))}
}

So if you duplicate this animation class, and reverse the from and to transformations they will move up.

A great exercise to learn more CSS ... ;)

[pinsdorf]

How do I reference the snow-drop vs snow-raise based on theme setting? Would I duplicate below as well or is there a smarter way?

.MMM-Snow .flake {
    position: absolute;
    top: -50px;
    animation-name: flake-drop;
    animation-iteration-count: infinite;
}

[pinsdorf]

Two latest commits fix default theme and allow to select direction of flakes' movement (upwards/downwards).

The duality in file MMM-Snow.js feels like it can be optimized. Need to learn more CSS, though. ;-)

[pinsdorf]

Hehe, found a way to simplify CSS with attribute selectors.

[pinsdorf]

... and one more theme. :)

[pinsdorf]

Hi @MichMich, I was able to address both your suggestions plus added a "water" theme with raising bubbles.