From e53b4cf522bdd2e58739dd048816e420e2026ca3 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Fri, 30 Jun 2017 12:21:16 -0700
Subject: [PATCH] Vector should operate in responsive mode when the mobile skin

With MobileFrontend installed applying
?useskin=vector&useformat=mobile will ensure that responsive vector
mode is invoked.

I'm keen to do this, as it would help to have more examples of skins
that are MobileFrontend aware as part of the work I am doing in
T166748

Change-Id: I81edd855a5e96400d1179fb10907fcc30ea43ef7
---
 Hooks.php      | 29 +++++++++++++++++++++++++++++
 SkinVector.php | 16 ++++++++++++++--
 skin.json      |  6 ++++++
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 Hooks.php

diff --git a/Hooks.php b/Hooks.php
new file mode 100644
index 0000000..82121d3
--- /dev/null
+++ b/Hooks.php
@@ -0,0 +1,29 @@
+<?php
+/**
+ * Hooks.php
+ */
+
+/**
+ * Hook handlers for Vector skin.
+ *
+ * Hook handler method names should be in the form of:
+ *	on<HookName>()
+ */
+
+class VectorHooks {
+	/**
+	 * BeforePageDisplayMobile hook handler
+	 *
+	 * Make Vector responsive when operating in mobile mode (useformat=mobile)
+	 *
+	 * @see https://www.mediawiki.org/wiki/Extension:MobileFrontend/BeforePageDisplayMobile
+	 * @param OutputPage $out
+	 * @param SkinTemplate $sk
+	 */
+	public static function onBeforePageDisplayMobile( OutputPage $out, $sk ) {
+		// This makes Vector behave in responsive mode when MobileFrontend is installed
+		if ( $sk instanceof SkinVector ) {
+			$sk->enableResponsiveMode();
+		}
+	}
+}
diff --git a/SkinVector.php b/SkinVector.php
index 8af200f..1733bb6 100644
--- a/SkinVector.php
+++ b/SkinVector.php
@@ -34,11 +34,24 @@ class SkinVector extends SkinTemplate {
 	 * @var Config
 	 */
 	private $vectorConfig;
+	private $responsiveMode = false;
 
 	public function __construct() {
 		$this->vectorConfig = ConfigFactory::getDefaultInstance()->makeConfig( 'vector' );
 	}
 
+	/**
+	 * Enables the responsive mode
+	 */
+	public function enableResponsiveMode() {
+		if ( !$this->responsiveMode ) {
+			$out = $this->getOutput();
+			$out->addMeta( 'viewport', 'width=device-width, initial-scale=1' );
+			$out->addModuleStyles( 'skins.vector.styles.responsive' );
+			$this->responsiveMode = true;
+		}
+	}
+
 	/**
 	 * Initializes output page and sets up skin-specific parameters
 	 * @param OutputPage $out Object to initialize
@@ -47,8 +60,7 @@ class SkinVector extends SkinTemplate {
 		parent::initPage( $out );
 
 		if ( $this->vectorConfig->get( 'VectorResponsive' ) ) {
-			$out->addMeta( 'viewport', 'width=device-width, initial-scale=1' );
-			$out->addModuleStyles( 'skins.vector.styles.responsive' );
+			$this->enableResponsiveMode();
 		}
 
 		$out->addModules( 'skins.vector.js' );
diff --git a/skin.json b/skin.json
index 6eba1ab..3f016a7 100644
--- a/skin.json
+++ b/skin.json
@@ -25,9 +25,15 @@
 		]
 	},
 	"AutoloadClasses": {
+		"VectorHooks": "Hooks.php",
 		"SkinVector": "SkinVector.php",
 		"VectorTemplate": "VectorTemplate.php"
 	},
+	"Hooks": {
+		"BeforePageDisplayMobile": [
+			"VectorHooks::onBeforePageDisplayMobile"
+		]
+	},
 	"@note": "When modifying skins.vector.styles definition, make sure the installer still works",
 	"ResourceModules": {
 		"skins.vector.styles": {