From 3815cf5923caf5b95717f57f3553aad538d8257b Mon Sep 17 00:00:00 2001 From: Jeremy Herve Date: Tue, 17 Dec 2024 11:57:12 +0100 Subject: [PATCH] Holiday Snow: switch to a CSS-only implementation (#40629) * Holiday Snow: switch to a CSS-only implementation Fixes #40569 Moving away from Javascript: - should be better for performance - will avoid glitches like the one described in #40569 - will avoid issues with other parts of the site, such as notifications or comments. (see p1734109348431089-slack-C029GN3KD ) * Do not ship the SCSS file in mirror repo * Lower snow density a bit * Switch to defining version number manually --- .../packages/jetpack-mu-wpcom/.gitattributes | 1 + .../changelog/update-snow-scss | 4 ++ .../holiday-snow/class-holiday-snow.php | 34 +++++++--- .../features/holiday-snow/holiday-snow.scss | 67 +++++++++++++++++++ .../src/features/holiday-snow/snowstorm.js | 29 -------- .../jetpack-mu-wpcom/webpack.config.js | 1 + 6 files changed, 98 insertions(+), 38 deletions(-) create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/update-snow-scss create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/holiday-snow.scss delete mode 100644 projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/snowstorm.js diff --git a/projects/packages/jetpack-mu-wpcom/.gitattributes b/projects/packages/jetpack-mu-wpcom/.gitattributes index f24c7138ab785..91e6d89703734 100644 --- a/projects/packages/jetpack-mu-wpcom/.gitattributes +++ b/projects/packages/jetpack-mu-wpcom/.gitattributes @@ -17,3 +17,4 @@ phpunit.xml.dist production-exclude tests/** production-exclude .phpcsignore production-exclude bin/** production-exclude +src/**/**/*.scss production-exclude diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-snow-scss b/projects/packages/jetpack-mu-wpcom/changelog/update-snow-scss new file mode 100644 index 0000000000000..bb147025e71ef --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/update-snow-scss @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Holiday Snow: switch to a CSS-only implementation. diff --git a/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/class-holiday-snow.php b/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/class-holiday-snow.php index e6dacf5da5548..90bcf477af7ad 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/class-holiday-snow.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/class-holiday-snow.php @@ -52,6 +52,8 @@ public static function is_snow_season() { * p2 is currently not compatible with Holiday Snow. * This covers both P2 and P2020 themes. * + * @deprecated $$next-version$$ + * * @return bool */ private static function is_p2() { @@ -74,7 +76,7 @@ public static function is_snow_enabled() { * @return void */ public static function init() { - if ( ! self::is_snow_season() || self::is_p2() ) { + if ( ! self::is_snow_season() ) { return; } @@ -84,12 +86,23 @@ public static function init() { add_action( 'update_option_' . self::HOLIDAY_SNOW_OPTION_NAME, array( __CLASS__, 'holiday_snow_option_updated' ) ); if ( self::is_snow_enabled() ) { + add_action( 'wp_footer', array( __CLASS__, 'holiday_snow_markup' ) ); add_action( 'wp_enqueue_scripts', array( __CLASS__, 'holiday_snow_script' ) ); } } /** - * Enqueue the snowstorm script on the frontend. + * Add the snowstorm markup to the footer. + * + * @return void + * @since $$next-version$$ + */ + public static function holiday_snow_markup() { + echo '
'; + } + + /** + * Enqueue the snowstorm CSS on the frontend. * * @return void */ @@ -118,20 +131,23 @@ public static function holiday_snow_script() { * Filter the URL of the snowstorm script. * * @since $$next-version$$ + * @deprecated $$next-version$$ We've switched to a CSS-only snow effect. * * @param string $snowstorm_url URL of the snowstorm script. */ - $snowstorm_url = apply_filters( + $snowstorm_url = apply_filters_deprecated( // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable 'jetpack_holiday_snow_js_url', - plugins_url( 'snowstorm.js', __FILE__ ) + array( plugins_url( 'snowstorm.js', __FILE__ ) ), + '6.1.1', + '', + 'This filter is no longer useful. We use a CSS-only snow effect instead.' ); - wp_enqueue_script( - 'snowstorm', - $snowstorm_url, + wp_enqueue_style( + 'holiday-snow', + plugins_url( 'build/holiday-snow/holiday-snow.css', \Automattic\Jetpack\Jetpack_Mu_Wpcom::BASE_FILE ), array(), - \Automattic\Jetpack\Jetpack_Mu_Wpcom::PACKAGE_VERSION, - true + \Automattic\Jetpack\Jetpack_Mu_Wpcom::PACKAGE_VERSION ); } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/holiday-snow.scss b/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/holiday-snow.scss new file mode 100644 index 0000000000000..c548402cf8483 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/holiday-snow.scss @@ -0,0 +1,67 @@ +/** + * Holiday Snow + * Credits: https://codepen.io/keithclark/pen/DjXzBw + * + * @package automattic/jetpack-mu-wpcom + */ + +$grid_width: 600; +$snow_density: 10; +$snow_speed: 9s; +$snow_selector: '#jetpack-holiday-snow'; + +html { + $grad: ( + ); + + @for $i from 0 to $snow_density { + $v: random(4) + 2; + $alpha: random(5) * .1 + .5; + $grad: $grad, radial-gradient($v+px $v+px at (random($grid_width - $v * 2) + $v)+px (random($grid_width - $v * 2) + $v)+px, + rgba(255, 255, 255, $alpha) 50%, + rgba(0, 0, 0, 0)); + } + + #{$snow_selector} { + display: inline !important; + background-color: rgba(0, 0, 0, 0.05); + z-index: 9999999999 !important; + } + + #{$snow_selector}, + #{$snow_selector}:before, + #{$snow_selector}:after { + pointer-events: none; + position: fixed; + top: -600px; + left: 0; + bottom: 0; + right: 0; + background-image: $grad; + background-size: 600px 600px; + animation: snowstorm $snow_speed linear infinite; + content: ""; + } + + #{$snow_selector}:after { + margin-left: -$grid_width/3 + px; + opacity: .4; + animation-duration: $snow_speed * 2; + animation-direction: reverse; + filter: blur(3px); + } + + #{$snow_selector}:before { + animation-duration: $snow_speed * 3; + animation-direction: reverse; + margin-left: -$grid_width/2 + px; + opacity: .65; + filter: blur(1.5px); + } + + @keyframes snowstorm { + to { + transform: translateY($grid_width + px); + } + } +} diff --git a/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/snowstorm.js b/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/snowstorm.js deleted file mode 100644 index 1559e4e4df738..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/snowstorm.js +++ /dev/null @@ -1,29 +0,0 @@ -/** @license - - DHTML Snowstorm! JavaScript-based snow for web pages - Making it snow on the internets since 2003. You're welcome. - ----------------------------------------------------------- - Version 1.44.20131215 (Previous rev: 1.44.20131208) - Copyright (c) 2007, Scott Schiller. All rights reserved. - Code provided under the BSD License - http://schillmania.com/projects/snowstorm/license.txt -*/ -var snowStorm=function(g,f){function k(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function x(){g.setTimeout(function(){a.start(!0)},20);a.events.remove(m?f:g,"mousemove",x)}function y(){(!a.excludeMobile||!D)&&x();a.events.remove(g,"load",y)}this.excludeMobile=this.autoStart=!0;this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=33;this.useGPU=!0;this.className=null;this.excludeMobile=!0;this.flakeBottom=null;this.followMouse=!0;this.snowColor="#fff";this.snowCharacter="•";this.snowStick= -!0;this.targetElement=null;this.useMeltEffect=!0;this.usePixelPosition=this.usePositionFixed=this.useTwinkleEffect=!1;this.freezeOnBlur=!0;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,q,m=navigator.userAgent.match(/msie/i),E=navigator.userAgent.match(/msie 6/i),D=navigator.userAgent.match(/mobile|opera m(ob|in)/i),r=m&&"BackCompat"===f.compatMode||E,h=null,n=null,l=null,p=null,s=null,z=null,A=null,v=1,t=!1,w=!1, -u;a:{try{f.createElement("div").style.opacity="0.5"}catch(F){u=!1;break a}u=!0}var B=!1,C=f.createDocumentFragment();q=function(){function c(b){g.setTimeout(b,1E3/(a.animationInterval||20))}function d(a){return void 0!==h.style[a]?a:null}var e,b=g.requestAnimationFrame||g.webkitRequestAnimationFrame||g.mozRequestAnimationFrame||g.oRequestAnimationFrame||g.msRequestAnimationFrame||c;e=b?function(){return b.apply(g,arguments)}:null;var h;h=f.createElement("div");e={transform:{ie:d("-ms-transform"), -moz:d("MozTransform"),opera:d("OTransform"),webkit:d("webkitTransform"),w3:d("transform"),prop:null},getAnimationFrame:e};e.transform.prop=e.transform.w3||e.transform.moz||e.transform.webkit||e.transform.ie||e.transform.opera;h=null;return e}();this.timer=null;this.flakes=[];this.active=this.disabled=!1;this.meltFrameCount=20;this.meltFrames=[];this.setXY=function(c,d,e){if(!c)return!1;a.usePixelPosition||w?(c.style.left=d-a.flakeWidth+"px",c.style.top=e-a.flakeHeight+"px"):r?(c.style.right=100-100* -(d/h)+"%",c.style.top=Math.min(e,s-a.flakeHeight)+"px"):a.flakeBottom?(c.style.right=100-100*(d/h)+"%",c.style.top=Math.min(e,s-a.flakeHeight)+"px"):(c.style.right=100-100*(d/h)+"%",c.style.bottom=100-100*(e/l)+"%")};this.events=function(){function a(c){c=b.call(c);var d=c.length;e?(c[1]="on"+c[1],3b.vX?b.vX=0.2:0>b.vX&&-0.2b.vY&&(b.vY=0.2)};this.move=function(){var c=b.vX*v;b.x+=c;b.y+=b.vY*b.vAmp;b.x>=h||h-b.xc&&b.x-a.flakeLeftOffset<-a.flakeWidth&&(b.x=h-a.flakeWidth-1);b.refresh();l+p-b.y+a.flakeHeightb.type&&!b.melting&&0.998b.twinkleFrame?0.97a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;a.targetElement.appendChild(C)};this.timerInit= -function(){a.timer=!0;a.snow()};this.init=function(){var c;for(c=0;c