From 91fa523cf03b453cedec5dcd728aaf3c2a627d74 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 12 Jun 2017 14:55:46 +0200
Subject: [PATCH] Implemented support for custom favicons

See #2257
---
 com.woltlab.wcf/templates/headInclude.tpl     |   2 +-
 wcfsetup/install/files/acp/style/layout.scss  |   3 +-
 .../install/files/acp/templates/styleAdd.tpl  |  24 ++-
 .../images/favicon/default.browserconfig.xml  |   2 +-
 .../images/favicon/default.manifest.json      |   4 +-
 .../Core/Acp/Ui/Style/Favicon/Upload.js       |  68 ++++++++
 .../lib/data/style/ActiveStyle.class.php      |  25 ---
 .../files/lib/data/style/Style.class.php      |  28 ++++
 .../lib/data/style/StyleAction.class.php      | 157 ++++++++++++++++++
 wcfsetup/install/lang/de.xml                  |   5 +
 wcfsetup/install/lang/en.xml                  |   5 +
 11 files changed, 292 insertions(+), 31 deletions(-)
 create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Favicon/Upload.js

diff --git a/com.woltlab.wcf/templates/headInclude.tpl b/com.woltlab.wcf/templates/headInclude.tpl
index f08fbf457f..aaf222d949 100644
--- a/com.woltlab.wcf/templates/headInclude.tpl
+++ b/com.woltlab.wcf/templates/headInclude.tpl
@@ -32,7 +32,7 @@
 <link rel="manifest" href="{@$__wcf->getStyleHandler()->getStyle()->getFaviconManifest()}">
 <link rel="shortcut icon" href="{@$__wcf->getFavicon()}">
 <meta name="msapplication-config" content="{@$__wcf->getStyleHandler()->getStyle()->getFaviconBrowserconfig()}">
-<meta name="theme-color" content="{$__wcf->getStyleHandler()->getStyle()->getVariable('wcfHeaderBackground')}">
+<meta name="theme-color" content="{$__wcf->getStyleHandler()->getStyle()->getVariable('wcfHeaderBackground', true)}">
 
 <script data-relocate="true">
 	$(function() {
diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 49bab44d2d..7c2e75a806 100644
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -365,7 +365,8 @@ $wcfAcpSubMenuWidth: 300px;
 	min-width: 20px;
 }
 
-.selectedImagePreview {
+.selectedImagePreview,
+.selectedFaviconPreview {
 	img {
 		margin-bottom: 5px;
 	}
diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index 72340b90e5..bad4b98dfe 100644
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -5,13 +5,14 @@
 {js application='wcf' acp='true' file='WCF.ACP.Style'}
 {js application='wcf' file='WCF.ColorPicker' bundle='WCF.Combined'}
 <script data-relocate="true">
-	require(['WoltLabSuite/Core/Acp/Ui/Style/Image/Upload', 'WoltLabSuite/Core/Acp/Ui/Style/Editor', 'WoltLabSuite/Core/Ui/Toggle/Input'], function(AcpUiStyleImageUpload, AcpUiStyleEditor, UiToggleInput) {
+	require(['WoltLabSuite/Core/Acp/Ui/Style/Favicon/Upload', 'WoltLabSuite/Core/Acp/Ui/Style/Image/Upload', 'WoltLabSuite/Core/Acp/Ui/Style/Editor', 'WoltLabSuite/Core/Ui/Toggle/Input'], function(AcpUiStyleFaviconUpload, AcpUiStyleImageUpload, AcpUiStyleEditor, UiToggleInput) {
 		AcpUiStyleEditor.setup({
 			isTainted: {if $isTainted}true{else}false{/if},
 			styleId: {if $action === 'edit'}{@$style->styleID}{else}0{/if},
 			styleRuleMap: styleRuleMap
 		});
 		
+		{if $action == 'edit'}new AcpUiStyleFaviconUpload({@$style->styleID});{/if}
 		new AcpUiStyleImageUpload({if $action == 'add'}0{else}{@$style->styleID}{/if}, '{$tmpHash}');
 		
 		new UiToggleInput('input[name="useGoogleFont"]', {
@@ -27,6 +28,8 @@
 			'wcf.style.colorPicker.new': '{lang}wcf.style.colorPicker.new{/lang}',
 			'wcf.style.colorPicker.current': '{lang}wcf.style.colorPicker.current{/lang}',
 			'wcf.style.colorPicker.button.apply': '{lang}wcf.style.colorPicker.button.apply{/lang}',
+			'wcf.acp.style.favicon.error.dimensions': '{lang}wcf.acp.style.favicon.error.dimensions{/lang}',
+			'wcf.acp.style.favicon.error.invalidExtension': '{lang}wcf.acp.style.favicon.error.invalidExtension{/lang}',
 			'wcf.acp.style.image.error.invalidExtension': '{lang}wcf.acp.style.image.error.invalidExtension{/lang}'
 		});
 		new WCF.ACP.Style.LogoUpload('{$tmpHash}', '{@$__wcf->getPath()}images/');
@@ -283,6 +286,25 @@
 				{event name='fileFields'}
 			</section>
 			
+			{if $action == 'edit'}
+				<section class="section">
+					<h2 class="sectionTitle">{lang}wcf.acp.style.general.favicon{/lang}</h2>
+					
+					<dl>
+						<dt><label for="favicon">{lang}wcf.acp.style.favicon{/lang}</label></dt>
+						<dd>
+							<div class="selectedFaviconPreview">
+								<img src="{if $action == 'add'}{@$__wcf->getPath()}images/favicon/default.apple-touch-icon.png{else}{@$style->getFaviconAppleTouchIcon()}{/if}" alt="" id="faviconImage" style="height: 32px; width: 32px;">
+							</div>
+							<div id="uploadFavicon"></div>
+							<small>{lang}wcf.acp.style.favicon.description{/lang}</small>
+						</dd>
+					</dl>
+					
+					{event name='faviconFields'}
+				</section>
+			{/if}
+			
 			{event name='generalFieldsets'}
 		</div>
 		
diff --git a/wcfsetup/install/files/images/favicon/default.browserconfig.xml b/wcfsetup/install/files/images/favicon/default.browserconfig.xml
index 5c4d1e29d1..046422076e 100644
--- a/wcfsetup/install/files/images/favicon/default.browserconfig.xml
+++ b/wcfsetup/install/files/images/favicon/default.browserconfig.xml
@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/abc/test/mstile-150x150.png"/>
+            <square150x150logo src="default.mstile-150x150.png"/>
             <TileColor>#3a6d9c</TileColor>
         </tile>
     </msapplication>
diff --git a/wcfsetup/install/files/images/favicon/default.manifest.json b/wcfsetup/install/files/images/favicon/default.manifest.json
index 8380019f91..fb439082c0 100644
--- a/wcfsetup/install/files/images/favicon/default.manifest.json
+++ b/wcfsetup/install/files/images/favicon/default.manifest.json
@@ -2,12 +2,12 @@
     "name": "",
     "icons": [
         {
-            "src": "/abc/test/android-chrome-192x192.png",
+            "src": "default.android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/abc/test/android-chrome-256x256.png",
+            "src": "default.android-chrome-256x256.png",
             "sizes": "256x256",
             "type": "image/png"
         }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Favicon/Upload.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Favicon/Upload.js
new file mode 100644
index 0000000000..ddf66ebc40
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Favicon/Upload.js
@@ -0,0 +1,68 @@
+/**
+ * Handles uploading the style favicon.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2017 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLabSuite/Core/Acp/Ui/Style/Favicon/Upload
+ */
+define(['Core', 'Dom/Traverse', 'Language', 'Ui/Notification', 'Upload'], function(Core, DomTraverse, Language, UiNotification, Upload) {
+	"use strict";
+	
+	/**
+	 * @constructor
+	 */
+	function AcpUiStyleImageUpload(styleId) {
+		this._styleId = ~~styleId;
+		
+		Upload.call(this, 'uploadFavicon', 'faviconImage', {
+			action: 'uploadFavicon',
+			className: 'wcf\\data\\style\\StyleAction'
+		});
+	}
+	Core.inherit(AcpUiStyleImageUpload, Upload, {
+		/**
+		 * @see	WoltLabSuite/Core/Upload#_createFileElement
+		 */
+		_createFileElement: function(file) {
+			return this._target;
+		},
+		
+		/**
+		 * @see	WoltLabSuite/Core/Upload#_getParameters
+		 */
+		_getParameters: function() {
+			return {
+				styleID: this._styleId
+			};
+		},
+		
+		/**
+		 * @see	WoltLabSuite/Core/Upload#_success
+		 */
+		_success: function(uploadId, data) {
+			var error = DomTraverse.childByClass(this._button.parentNode, 'innerError');
+			if (data.returnValues.url) {
+				elAttr(this._target, 'src', data.returnValues.url + '?timestamp=' + Date.now());
+				
+				if (error) {
+					elRemove(error);
+				}
+				
+				UiNotification.show();
+			}
+			else if (data.returnValues.errorType) {
+				if (!error) {
+					error = elCreate('small');
+					error.className = 'innerError';
+					
+					this._button.parentNode.appendChild(error);
+				}
+				
+				error.textContent = Language.get('wcf.acp.style.favicon.error.' + data.returnValues.errorType);
+			}
+		}
+	});
+	
+	return AcpUiStyleImageUpload;
+});
diff --git a/wcfsetup/install/files/lib/data/style/ActiveStyle.class.php b/wcfsetup/install/files/lib/data/style/ActiveStyle.class.php
index 1fafba7b8f..77f61f33f3 100644
--- a/wcfsetup/install/files/lib/data/style/ActiveStyle.class.php
+++ b/wcfsetup/install/files/lib/data/style/ActiveStyle.class.php
@@ -69,29 +69,4 @@ class ActiveStyle extends DatabaseObjectDecorator {
 		
 		return WCF::getPath() . 'images/default-logo-small.png';
 	}
-	
-	public function getFaviconAppleTouchIcon() {
-		return $this->getFaviconPath('apple-touch-icon.png');
-	}
-	
-	public function getFaviconManifest() {
-		return $this->getFaviconPath('manifest.json');
-	}
-	
-	public function getFaviconBrowserconfig() {
-		return $this->getFaviconPath('browserconfig.xml');
-	}
-	
-	public function getRelativeFavicon() {
-		return $this->getFaviconPath('favicon.ico', false);
-	}
-	
-	protected function getFaviconPath($filename, $absolutePath = true) {
-		$path = 'images/favicon/'. ($this->getDecoratedObject()->hasFavicon ? $this->getDecoratedObject()->styleID : 'default') . ".{$filename}";
-		if ($absolutePath) {
-			return WCF::getPath() . $path;
-		}
-		
-		return $path;
-	}
 }
diff --git a/wcfsetup/install/files/lib/data/style/Style.class.php b/wcfsetup/install/files/lib/data/style/Style.class.php
index 6b35f62407..a2870f8cf2 100644
--- a/wcfsetup/install/files/lib/data/style/Style.class.php
+++ b/wcfsetup/install/files/lib/data/style/Style.class.php
@@ -40,6 +40,9 @@ class Style extends DatabaseObject {
 	const PREVIEW_IMAGE_MAX_HEIGHT = 64;
 	const PREVIEW_IMAGE_MAX_WIDTH = 102;
 	
+	const FAVICON_IMAGE_HEIGHT = 256;
+	const FAVICON_IMAGE_WIDTH = 256;
+	
 	/**
 	 * Returns the name of this style.
 	 * 
@@ -123,6 +126,31 @@ class Style extends DatabaseObject {
 		return WCF::getPath().'images/stylePreview.png';
 	}
 	
+	public function getFaviconAppleTouchIcon() {
+		return $this->getFaviconPath('apple-touch-icon.png');
+	}
+	
+	public function getFaviconManifest() {
+		return $this->getFaviconPath('manifest.json');
+	}
+	
+	public function getFaviconBrowserconfig() {
+		return $this->getFaviconPath('browserconfig.xml');
+	}
+	
+	public function getRelativeFavicon() {
+		return $this->getFaviconPath('favicon.ico', false);
+	}
+	
+	protected function getFaviconPath($filename, $absolutePath = true) {
+		$path = 'images/favicon/'. ($this->hasFavicon ? $this->styleID : 'default') . ".{$filename}";
+		if ($absolutePath) {
+			return WCF::getPath() . $path;
+		}
+		
+		return $path;
+	}
+	
 	/**
 	 * Splits the less variables string.
 	 * 
diff --git a/wcfsetup/install/files/lib/data/style/StyleAction.class.php b/wcfsetup/install/files/lib/data/style/StyleAction.class.php
index 8716e8b46d..b10b944aa2 100644
--- a/wcfsetup/install/files/lib/data/style/StyleAction.class.php
+++ b/wcfsetup/install/files/lib/data/style/StyleAction.class.php
@@ -98,6 +98,9 @@ class StyleAction extends AbstractDatabaseObjectAction implements IToggleAction,
 			// handle style preview image
 			$this->updateStylePreviewImage($style->getDecoratedObject());
 			
+			// create favicon data
+			$this->updateFavicons($style->getDecoratedObject());
+			
 			// reset stylesheet
 			StyleHandler::getInstance()->resetStylesheet($style->getDecoratedObject());
 		}
@@ -246,6 +249,88 @@ class StyleAction extends AbstractDatabaseObjectAction implements IToggleAction,
 		}
 	}
 	
+	/**
+	 * Updates style favicon files.
+	 * 
+	 * @param       Style           $style
+	 */
+	protected function updateFavicons(Style $style) {
+		$styleID = $style->styleID;
+		$fileExtension = WCF::getSession()->getVar('styleFavicon-template-'.$styleID);
+		$hasFavicon = (bool)$style->hasFavicon;
+		if ($fileExtension) {
+			$template = WCF_DIR . "images/favicon/{$styleID}.favicon-template.{$fileExtension}";
+			$images = [
+				'android-chrome-192x192.png' => 192,
+				'android-chrome-256x256.png' => 256,
+				'apple-touch-icon.png' => 180,
+				'mstile-150x150.png' => 150
+			];
+			
+			$adapter = ImageHandler::getInstance()->getAdapter();
+			$adapter->loadFile($template);
+			foreach ($images as $filename => $length) {
+				$thumbnail = $adapter->createThumbnail($length, $length);
+				$adapter->writeImage($thumbnail, WCF_DIR."images/favicon/{$styleID}.{$filename}");
+			}
+			
+			// create ico
+			require(WCF_DIR . 'lib/system/api/chrisjean/php-ico/class-php-ico.php');
+			$phpIco = new \PHP_ICO($template, [
+				[16, 16],
+				[32, 32]
+			]);
+			$phpIco->save_ico(WCF_DIR . "images/favicon/{$styleID}.favicon.ico");
+			
+			$hasFavicon = true;
+			
+			(new StyleEditor($style))->update(['hasFavicon' => 1]);
+			WCF::getSession()->unregister('styleFavicon-template-'.$style->styleID);
+		}
+		
+		if ($hasFavicon) {
+			// update manifest.json
+			$manifest = <<<MANIFEST
+{
+    "name": "",
+    "icons": [
+        {
+            "src": "{$styleID}.android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "{$styleID}.android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
+MANIFEST;
+			file_put_contents(WCF_DIR . "images/favicon/{$styleID}.manifest.json", $manifest);
+			
+			$style->loadVariables();
+			$tileColor = $style->getVariable('wcfHeaderBackground', true);
+			
+			// update browserconfig.xml
+			$browserconfig = <<<BROWSERCONFIG
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="{$styleID}.mstile-150x150.png"/>
+            <TileColor>{$tileColor}</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
+BROWSERCONFIG;
+			file_put_contents(WCF_DIR . "images/favicon/{$styleID}.browserconfig.xml", $browserconfig);
+		}
+	}
+	
 	/**
 	 * @inheritDoc
 	 */
@@ -451,6 +536,78 @@ class StyleAction extends AbstractDatabaseObjectAction implements IToggleAction,
 		return ['errorType' => $file->getValidationErrorType()];
 	}
 	
+	/**
+	 * Validates parameters to upload a favicon.
+	 */
+	public function validateUploadFavicon() {
+		// ignore tmp hash, uploading is supported for existing styles only
+		// and files will be finally processed on form submit
+		$this->parameters['tmpHash'] = '@@@WCF_INVALID_TMP_HASH@@@';
+		
+		$this->validateUpload();
+	}
+	
+	/**
+	 * Handles favicon upload.
+	 *
+	 * @return	string[]
+	 */
+	public function uploadFavicon() {
+		// save files
+		/** @noinspection PhpUndefinedMethodInspection */
+		/** @var UploadFile[] $files */
+		$files = $this->parameters['__files']->getFiles();
+		$file = $files[0];
+		
+		try {
+			if (!$file->getValidationErrorType()) {
+				$fileLocation = $file->getLocation();
+				try {
+					if (($imageData = getimagesize($fileLocation)) === false) {
+						throw new UserInputException('favicon');
+					}
+					switch ($imageData[2]) {
+						case IMAGETYPE_PNG:
+						case IMAGETYPE_JPEG:
+						case IMAGETYPE_GIF:
+							// fine
+							break;
+						default:
+							throw new UserInputException('favicon');
+					}
+					
+					if ($imageData[0] != Style::FAVICON_IMAGE_WIDTH || $imageData[1] != Style::FAVICON_IMAGE_HEIGHT) {
+						throw new UserInputException('favicon', 'dimensions');
+					}
+				}
+				catch (SystemException $e) {
+					throw new UserInputException('favicon');
+				}
+				
+				// move uploaded file
+				if (@copy($fileLocation, WCF_DIR.'images/favicon/'.$this->style->styleID.'.favicon-template.'.$file->getFileExtension())) {
+					@unlink($fileLocation);
+					
+					// store extension within session variables
+					WCF::getSession()->register('styleFavicon-template-'.$this->style->styleID, $file->getFileExtension());
+					
+					// return result
+					return [
+						'url' => WCF::getPath().'images/favicon/'.$this->style->styleID.'.favicon-template.'.$file->getFileExtension()
+					];
+				}
+				else {
+					throw new UserInputException('favicon', 'uploadFailed');
+				}
+			}
+		}
+		catch (UserInputException $e) {
+			$file->setValidationErrorType($e->getType());
+		}
+		
+		return ['errorType' => $file->getValidationErrorType()];
+	}
+	
 	/**
 	 * Validates parameters to assign a new default style.
 	 */
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index e48f3525c2..b07e2fb684 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -1798,6 +1798,11 @@ GmbH=Gesellschaft mit beschränkter Haftung]]></item>
 		<item name="wcf.acp.style.globals.useGoogleFont"><![CDATA[Google-Schriftart aktivieren]]></item>
 		<item name="wcf.acp.style.globals.fontFamilyGoogle"><![CDATA[Schriftart]]></item>
 		<item name="wcf.acp.style.globals.fontFamilyFallback"><![CDATA[Schriftart (Fallback)]]></item>
+		<item name="wcf.acp.style.general.favicon"><![CDATA[Favicon]]></item>
+		<item name="wcf.acp.style.favicon"><![CDATA[Individuelles Favicon]]></item>
+		<item name="wcf.acp.style.favicon.description"><![CDATA[Laden Sie hier ein 256px × 256px großes Bild hoch, als Bildformate sind JPG und PNG zulässig. Das hochgeladene Bild wird für die Erzeugung aller notwendigen Grafiken verwendet.]]></item>
+		<item name="wcf.acp.style.favicon.error.dimensions"><![CDATA[Das Bild muss exakt 256px × 256px groß sein.]]></item>
+		<item name="wcf.acp.style.favicon.error.invalidExtension"><![CDATA[Die Datei hat eine ungültige Dateiendung.]]></item>
 	</category>
 	
 	<category name="wcf.acp.tag">
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index a99738a95e..dc85a0dd47 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -1695,6 +1695,7 @@
 		<item name="wcf.acp.style.exportStyle.components"><![CDATA[Options]]></item>
 		<item name="wcf.acp.style.exportStyle.components.description"><![CDATA[Select components included in the export for the style “{$style->styleName}”.]]></item>
 		<item name="wcf.acp.style.general"><![CDATA[Data]]></item>
+		<item name="wcf.acp.style.general.favicon"><![CDATA[Favicon]]></item>
 		<item name="wcf.acp.style.general.files"><![CDATA[Files]]></item>
 		<item name="wcf.acp.style.globals"><![CDATA[Global Settings]]></item>
 		<item name="wcf.acp.style.globals.fixedLayoutWidth"><![CDATA[Width]]></item>
@@ -1749,6 +1750,10 @@
 		<item name="wcf.acp.style.globals.useGoogleFont"><![CDATA[Use Google font face]]></item>
 		<item name="wcf.acp.style.globals.fontFamilyGoogle"><![CDATA[Font Face]]></item>
 		<item name="wcf.acp.style.globals.fontFamilyFallback"><![CDATA[Font Face (Fallback)]]></item>
+		<item name="wcf.acp.style.favicon"><![CDATA[Individual Favicon]]></item>
+		<item name="wcf.acp.style.favicon.description"><![CDATA[Upload an 256px × 256px image, acceptable image types are JPG and PNG. The uploaded image will be used to derive all required favicon sizes.]]></item>
+		<item name="wcf.acp.style.favicon.error.dimensions"><![CDATA[The image must be exactly 256px × 256px large.]]></item>
+		<item name="wcf.acp.style.favicon.error.invalidExtension"><![CDATA[The file extension is invalid.]]></item>
 	</category>
 	
 	<category name="wcf.acp.tag">
-- 
2.20.1