From c576c68a1f96b269b02117771038be9eecdc8edd Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Sat, 11 May 2019 04:41:54 +0000
Subject: [PATCH] Add TimelessFileModule and $wgTimelessBackdropImage
 configuration option to set configurable background image for the skin as a
 whole

Defaults to the cat, but can ideally be set to anything appropriate
to the wiki in question. Recommendation is a 20-50% opacity black/
white background image, where the alpha values of the b/w parts are
likewise around 10-50/255.

Bug: T193330
Change-Id: Ica3e2ce2568557ef157d06d1b7127b030f3c38f0
---
 includes/TimelessFileModule.php | 46 +++++++++++++++++++++++++++++++++
 resources/screen-common.less    |  9 ++++---
 resources/screen-desktop.less   |  6 -----
 skin.json                       |  9 +++++--
 4 files changed, 58 insertions(+), 12 deletions(-)
 create mode 100644 includes/TimelessFileModule.php

diff --git a/includes/TimelessFileModule.php b/includes/TimelessFileModule.php
new file mode 100644
index 0000000..9536fd2
--- /dev/null
+++ b/includes/TimelessFileModule.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * ResourceLoader module to set the skin-backdrop background image (by default,
+ * the angry cat)
+ */
+
+class TimelessFileModule extends ResourceLoaderFileModule {
+	/**
+	 * Make the style from the config var!
+	 * TODO: Just set a less variable here instead of hardcoding the full definition (T223112)
+	 *
+	 * @param ResourceLoaderContext $context
+	 * @return array
+	 */
+	public function getStyles( ResourceLoaderContext $context ) {
+		$config = $this->getConfig();
+		$background = $config->get( 'TimelessBackdropImage' );
+		if ( $background === 'cat.svg' ) {
+			// expand default
+			$background = $config->get( 'StylePath' ) . '/Timeless/resources/images/cat.svg';
+		}
+
+		$background = OutputPage::transformResourcePath( $config, $background );
+		$styles = parent::getStyles( $context );
+
+		$styles['all'][] = '#mw-content-container { background-image: ' .
+			CSSMin::buildUrlValue( $background ) .
+			'; }';
+
+		return $styles;
+	}
+
+	/**
+	 * Register the config var with the caching stuff so it properly updates the cache
+	 *
+	 * @param ResourceLoaderContext $context
+	 * @return array
+	 */
+	public function getDefinitionSummary( ResourceLoaderContext $context ) {
+		$summary = parent::getDefinitionSummary( $context );
+		$summary[] = [
+			'TimelessBackdropImage' => $this->getConfig()->get( 'TimelessBackdropImage' )
+		];
+		return $summary;
+	}
+}
diff --git a/resources/screen-common.less b/resources/screen-common.less
index 18a161a..33b9d64 100644
--- a/resources/screen-common.less
+++ b/resources/screen-common.less
@@ -26,10 +26,6 @@ body {
 	z-index: 0;
 }
 
-#mw-content-container {
-	background: @background2;
-}
-
 .mw-body {
 	word-wrap: break-word;
 }
@@ -217,7 +213,12 @@ body {
 /* Content */
 
 #mw-content-container {
+	background: @background2;
 	border-bottom: solid 4px @green;
+
+	// Background image (default cat) set via TimelessFileModule
+	background-repeat: no-repeat;
+	background-position: center 10em;
 }
 
 #mw-page-header-links {
diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less
index c204ad0..5e89b2f 100644
--- a/resources/screen-desktop.less
+++ b/resources/screen-desktop.less
@@ -13,12 +13,6 @@
 	margin: auto;
 }
 
-#mw-content-container {
-	.background-image( 'images/cat.svg' );
-	background-repeat: no-repeat;
-	background-position: center 15em;
-}
-
 /* Header */
 
 #mw-header-container {
diff --git a/skin.json b/skin.json
index 5520906..d842460 100644
--- a/skin.json
+++ b/skin.json
@@ -18,10 +18,13 @@
 			"i18n"
 		]
 	},
+	"config": {
+		"TimelessBackdropImage": "cat.svg"
+	},
 	"ResourceModules": {
 		"skins.timeless": {
 			"targets": [ "desktop", "mobile" ],
-			"class": "ResourceLoaderSkinModule",
+			"class": "TimelessFileModule",
 			"styles": {
 				"resources/libraries/normalise.css": {
 					"media": "screen"
@@ -55,6 +58,7 @@
 		},
 		"skins.timeless.misc": {
 			"targets": [ "desktop", "mobile" ],
+			"class": "ResourceLoaderSkinModule",
 			"styles": [
 				"resources/screen-misc.less"
 			]
@@ -90,7 +94,8 @@
 	},
 	"AutoloadClasses": {
 		"SkinTimeless": "includes/SkinTimeless.php",
-		"TimelessTemplate": "includes/TimelessTemplate.php"
+		"TimelessTemplate": "includes/TimelessTemplate.php",
+		"TimelessFileModule": "includes/TimelessFileModule.php"
 	},
 	"manifest_version": 1
 }