From 413870d3506123abe74ba78e89024c4231ce924e Mon Sep 17 00:00:00 2001
From: Baha <bmansurov@wikimedia.org>
Date: Wed, 19 Jul 2017 15:27:55 -0400
Subject: [PATCH] Add print logo

Logo cannot be displayed as a background image because it won't be
visible in print unless the user prints backgrounds too.

A sample configuration looks like this:

$wgVectorPrintLogo = [
	'url' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
	'width' => 174,
	'height' => 27
];

The solution presented in the patch has a downside of not being able
to scale images down if their dimensions are bigger than the
dimensions specified in the config variable. For example, if we want
to go with an SVG image, then IE8 won't be able to render it.
Alternatively, if we want to go with a PNG image, its dimensions need
to match the exact dimensoins in the config variable, otherwise the
image will show up larger or smaller depending on its dimensions.

A more complicated approach of scaling images using `transform: scale`
hasn't been used because we wanted to keep the configuration simple
while supporting the majority of our users. With the current change,
we can reuse the existing configuration options from Minerva, for
exmaple. It would look something like this:

$wgVectorPrintLogo = [
	'url' => $wgMFCustomLogos['copyright'],
	'width' => $wgMFCustomLogos['copyright-width'],
	'height' => $wgMFCustomLogos['copyright-height']
];

Bug: T169826
Change-Id: If8f9f8d95fd3c955ece37d6c8ab6995596189667
---
 README.md                    | 26 +++++++++++++++++
 ResourceLoaderLessModule.php | 55 ++++++++++++++++++++++++++++++++++++
 print.less                   | 16 +++++++++++
 skin.json                    |  7 +++--
 4 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 README.md
 create mode 100644 ResourceLoaderLessModule.php

diff --git a/README.md b/README.md
new file mode 100644
index 000000000..4b3f40bed
--- /dev/null
+++ b/README.md
@@ -0,0 +1,26 @@
+Vector Skin
+========================
+
+Configuration options
+---------------------
+
+### $wgVectorPrintLogo
+
+Logo used in print styles. Keys are `url`, `width`, and `height` (in
+pixels). Note that this solution only works correctly if the image
+pointed to by `url` is an SVG that does not specify width and height
+attributes, or its width and height match the corresponding variables
+below. Alternatively, a PNG or other type of image can be used, but
+its dimensions also need to match the corresponding variable below.
+That in turn may result in blurry images, though.
+
+Example configuration:
+
+	$wgVectorPrintLogo = [
+		'url' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
+		'width' => 174,
+		'height' => 27
+	];
+
+* Type: `Array`
+* Default: `false`
diff --git a/ResourceLoaderLessModule.php b/ResourceLoaderLessModule.php
new file mode 100644
index 000000000..ca980fd93
--- /dev/null
+++ b/ResourceLoaderLessModule.php
@@ -0,0 +1,55 @@
+<?php
+/**
+ * ResourceLoader module for print styles.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ * http://www.gnu.org/copyleft/gpl.html
+ *
+ * @file
+ */
+
+namespace Vector;
+
+use ConfigFactory;
+use CSSMin;
+use MediaWiki\MediaWikiServices;
+use ResourceLoaderContext;
+use ResourceLoaderFileModule;
+
+/**
+ * ResourceLoader module for print styles.
+ */
+class ResourceLoaderLessModule extends ResourceLoaderFileModule {
+	/**
+	 * Get language-specific LESS variables for this module.
+	 *
+	 * @param ResourceLoaderContext $context
+	 * @return array
+	 */
+	protected function getLessVars( ResourceLoaderContext $context ) {
+		$lessVars = parent::getLessVars( $context );
+		$config = MediaWikiServices::getInstance()->getConfigFactory()->makeConfig( 'vector' );
+		$printLogo = $config->get( 'VectorPrintLogo' );
+		if ( $printLogo ) {
+			$lessVars[ 'printLogo' ] = true;
+			$lessVars[ 'printLogoUrl' ] = CSSMin::buildUrlValue( $printLogo['url'] );
+			$lessVars[ 'printLogoWidth' ] = intval( $printLogo['width'] );
+			$lessVars[ 'printLogoHeight' ] = intval( $printLogo['height'] );
+		} else {
+			$lessVars[ 'printLogo' ] = false;
+		}
+		return $lessVars;
+	}
+}
diff --git a/print.less b/print.less
index 15870858d..8c230f29f 100644
--- a/print.less
+++ b/print.less
@@ -39,6 +39,22 @@
 			line-height: 28pt;
 			margin-bottom: 20px;
 			padding-bottom: 5px;
+
+			// We could also use a CSS background to display the logo.
+			// The problem is that the logo won't be printed unless the user prints the background too.
+			// Note. This specification does not fully define the interaction of :before and :after with
+			// replaced elements (such as IMG in HTML). This will be defined in more detail in a future
+			// specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content
+			& when( @printLogo = 1 ) {
+				&:before {
+					content: @printLogoUrl;
+					display: block;
+					height: ~'@{printLogoHeight}px';
+					line-height: 0;  // line-height is needed for correctly displaying the size of the content box.
+					margin-bottom: 10px;
+					width: ~'@{printLogoWidth}px';
+				}
+			}
 		}
 
 		// Headings
diff --git a/skin.json b/skin.json
index 3694d6d64..f283c67b6 100644
--- a/skin.json
+++ b/skin.json
@@ -27,7 +27,8 @@
 	"AutoloadClasses": {
 		"VectorHooks": "Hooks.php",
 		"SkinVector": "SkinVector.php",
-		"VectorTemplate": "VectorTemplate.php"
+		"VectorTemplate": "VectorTemplate.php",
+		"Vector\\ResourceLoaderLessModule": "ResourceLoaderLessModule.php"
 	},
 	"Hooks": {
 		"BeforePageDisplayMobile": [
@@ -49,6 +50,7 @@
 			}
 		},
 		"skins.vector.styles.experimental.print": {
+			"class": "Vector\\ResourceLoaderLessModule",
 			"targets": [ "desktop", "mobile" ],
 			"position": "top",
 			"styles": [
@@ -110,7 +112,8 @@
 		"VectorUseIconWatch": true,
 		"@VectorExperimentalPrintStyles": "Temporary config variable to feature flag new print styles (T154965)",
 		"VectorExperimentalPrintStyles": false,
-		"VectorResponsive": false
+		"VectorResponsive": false,
+		"VectorPrintLogo": false
 	},
 	"manifest_version": 1
 }