From: Ed Sanders <esanders@wikimedia.org>
Date: Mon, 25 Mar 2019 14:28:55 +0000 (+0000)
Subject: Replace spinner.gif with CSS solution
X-Git-Tag: 1.34.0-rc.0~2327^2
X-Git-Url: http://git.cyclocoop.org/%7B%24admin_url%7Dcompta/comptes/journal.php?a=commitdiff_plain;h=425c38ec5132655c25caba4f61208a9518951636;p=lhc%2Fweb%2Fwiklou.git

Replace spinner.gif with CSS solution

Bug: T219163
Change-Id: Icca5c4e01fe4c0ae377245ae7afb456a17626208
---

diff --git a/resources/Resources.php b/resources/Resources.php
index 5e5f3087f3..8da38a8d91 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -294,7 +294,7 @@ return [
 	],
 	'jquery.spinner' => [
 		'scripts' => 'resources/src/jquery.spinner/spinner.js',
-		'styles' => 'resources/src/jquery.spinner/spinner.css',
+		'styles' => 'resources/src/jquery.spinner/spinner.less',
 		'targets' => [ 'desktop', 'mobile' ],
 	],
 	'jquery.jStorage' => [
diff --git a/resources/src/jquery.spinner/images/spinner-large.gif b/resources/src/jquery.spinner/images/spinner-large.gif
deleted file mode 100644
index 72203fdd7f..0000000000
Binary files a/resources/src/jquery.spinner/images/spinner-large.gif and /dev/null differ
diff --git a/resources/src/jquery.spinner/images/spinner.gif b/resources/src/jquery.spinner/images/spinner.gif
deleted file mode 100644
index 6146be4e88..0000000000
Binary files a/resources/src/jquery.spinner/images/spinner.gif and /dev/null differ
diff --git a/resources/src/jquery.spinner/spinner.css b/resources/src/jquery.spinner/spinner.css
deleted file mode 100644
index 9c819a65cb..0000000000
--- a/resources/src/jquery.spinner/spinner.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.mw-spinner {
-	background-color: transparent;
-	background-position: center center;
-	background-repeat: no-repeat;
-}
-
-.mw-spinner-small {
-	/* @embed */
-	background-image: url( images/spinner.gif );
-	height: 20px;
-	width: 20px;
-	/* Avoid issues with .mw-spinner-block when floated without width. */
-	min-width: 20px;
-}
-
-.mw-spinner-large {
-	/* @embed */
-	background-image: url( images/spinner-large.gif );
-	height: 32px;
-	width: 32px;
-	/* Avoid issues with .mw-spinner-block when floated without width. */
-	min-width: 32px;
-}
-
-.mw-spinner-block {
-	display: block;
-	/* This overrides width from .mw-spinner-large / .mw-spinner-small,
-	 * This is where the min-width kicks in.
-	 */
-	width: 100%;
-}
-
-.mw-spinner-inline {
-	display: inline-block;
-	vertical-align: middle;
-}
diff --git a/resources/src/jquery.spinner/spinner.js b/resources/src/jquery.spinner/spinner.js
index 5dfbab7094..8cccedb4f5 100644
--- a/resources/src/jquery.spinner/spinner.js
+++ b/resources/src/jquery.spinner/spinner.js
@@ -59,7 +59,7 @@
 		 * @return {jQuery}
 		 */
 		createSpinner: function ( opts ) {
-			var $spinner;
+			var i, $spinner, $container;
 
 			if ( typeof opts === 'string' ) {
 				opts = {
@@ -74,8 +74,14 @@
 				$spinner.attr( 'id', 'mw-spinner-' + opts.id );
 			}
 
-			$spinner.addClass( opts.size === 'large' ? 'mw-spinner-large' : 'mw-spinner-small' );
-			$spinner.addClass( opts.type === 'block' ? 'mw-spinner-block' : 'mw-spinner-inline' );
+			$spinner
+				.addClass( opts.size === 'large' ? 'mw-spinner-large' : 'mw-spinner-small' )
+				.addClass( opts.type === 'block' ? 'mw-spinner-block' : 'mw-spinner-inline' );
+
+			$container = $( '<div>' ).addClass( 'mw-spinner-container' ).appendTo( $spinner );
+			for ( i = 0; i < 12; i++ ) {
+				$container.append( $( '<div>' ) );
+			}
 
 			return $spinner;
 		},
diff --git a/resources/src/jquery.spinner/spinner.less b/resources/src/jquery.spinner/spinner.less
new file mode 100644
index 0000000000..596858e559
--- /dev/null
+++ b/resources/src/jquery.spinner/spinner.less
@@ -0,0 +1,143 @@
+.mw-spinner {
+	position: relative;
+
+	> .mw-spinner-container {
+		transform-origin: 0 0;
+	}
+}
+
+@mw-spinner-small-size: 20px;
+@mw-spinner-large-size: 32px;
+
+.mw-spinner-small {
+	width: @mw-spinner-small-size;
+	height: @mw-spinner-small-size;
+
+	> .mw-spinner-container {
+		transform: scale( unit( @mw-spinner-small-size / 64 ) );
+	}
+}
+
+.mw-spinner-large {
+	width: @mw-spinner-large-size;
+	height: @mw-spinner-large-size;
+
+	> .mw-spinner-container {
+		transform: scale( unit( @mw-spinner-large-size / 64 ) );
+	}
+}
+
+.mw-spinner-block {
+	display: block;
+	width: 100%;
+	text-align: center;
+
+	> .mw-spinner-container {
+		display: inline-block;
+		vertical-align: top;
+	}
+
+	&.mw-spinner-small > .mw-spinner-container {
+		min-width: @mw-spinner-small-size;
+	}
+
+	&.mw-spinner-large > .mw-spinner-container {
+		min-width: @mw-spinner-large-size;
+	}
+}
+
+.mw-spinner-inline {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+/**
+ * CSS loading spinner adapted from loadingio, CC0
+ * https://github.com/loadingio/css-spinner/
+ */
+.mw-spinner-container > div {
+	transform-origin: 32px 32px;
+	animation: mw-spinner 1.2s linear infinite;
+}
+
+.mw-spinner-container > div:after {
+	content: ' ';
+	display: block;
+	position: absolute;
+	top: 3px;
+	left: 29px;
+	width: 5px;
+	height: 14px;
+	border-radius: 20%;
+	background: #000;
+}
+
+.mw-spinner-container > div:nth-child( 1 ) {
+	transform: rotate( 0deg );
+	animation-delay: -1.1s;
+}
+
+.mw-spinner-container > div:nth-child( 2 ) {
+	transform: rotate( 30deg );
+	animation-delay: -1s;
+}
+
+.mw-spinner-container > div:nth-child( 3 ) {
+	transform: rotate( 60deg );
+	animation-delay: -0.9s;
+}
+
+.mw-spinner-container > div:nth-child( 4 ) {
+	transform: rotate( 90deg );
+	animation-delay: -0.8s;
+}
+
+.mw-spinner-container > div:nth-child( 5 ) {
+	transform: rotate( 120deg );
+	animation-delay: -0.7s;
+}
+
+.mw-spinner-container > div:nth-child( 6 ) {
+	transform: rotate( 150deg );
+	animation-delay: -0.6s;
+}
+
+.mw-spinner-container > div:nth-child( 7 ) {
+	transform: rotate( 180deg );
+	animation-delay: -0.5s;
+}
+
+.mw-spinner-container > div:nth-child( 8 ) {
+	transform: rotate( 210deg );
+	animation-delay: -0.4s;
+}
+
+.mw-spinner-container > div:nth-child( 9 ) {
+	transform: rotate( 240deg );
+	animation-delay: -0.3s;
+}
+
+.mw-spinner-container > div:nth-child( 10 ) {
+	transform: rotate( 270deg );
+	animation-delay: -0.2s;
+}
+
+.mw-spinner-container > div:nth-child( 11 ) {
+	transform: rotate( 300deg );
+	animation-delay: -0.1s;
+}
+
+.mw-spinner-container > div:nth-child( 12 ) {
+	transform: rotate( 330deg );
+	animation-delay: 0s;
+}
+
+@keyframes mw-spinner {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}