From ad310ee63a6f82769d19bb9fbe674745ad8e81d7 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 27 Dec 2016 12:44:39 +0100
Subject: [PATCH] Fixed style region marker position

---
 .../js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js  |  4 +++-
 .../WoltLabSuite/Core/Acp/Ui/Style/Editor.js  | 23 ++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js
index 16d27500e6..59837658e8 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js
@@ -6,7 +6,7 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLabSuite/Core/Acp/Ui/Page/Menu
  */
-define(['Dictionary'], function(Dictionary) {
+define(['Dictionary', 'EventHandler'], function(Dictionary, EventHandler) {
 	"use strict";
 	
 	var _activeMenuItem = '';
@@ -66,6 +66,8 @@ define(['Dictionary'], function(Dictionary) {
 				
 				_activeMenuItem = menuItem;
 			}
+			
+			EventHandler.fire('com.woltlab.wcf.AcpMenu', 'resize');
 		}
 	};
 });
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
index 089c1b6f96..7d5d2d7031 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
@@ -12,10 +12,13 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
 	var _stylePreviewRegions = new Dictionary();
 	var _stylePreviewRegionMarker = null;
 	
+	var _isVisible = true;
+	var _updateRegionMarker = null;
+	
 	/**
 	 * @module	WoltLabSuite/Core/Acp/Ui/Style/Editor
 	 */
-	var AcpUiStyleEditor = {
+	return {
 		/**
 		 * Sets up dynamic style options.
 		 */
@@ -34,6 +37,16 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
 				unmatch: this.showVisualEditor.bind(this),
 				setup: this.hideVisualEditor.bind(this)
 			});
+			
+			var callbackRegionMarker = function () {
+				if (_isVisible) _updateRegionMarker();
+			};
+			window.addEventListener('resize', callbackRegionMarker);
+			EventHandler.add('com.woltlab.wcf.AcpMenu', 'resize', callbackRegionMarker);
+			EventHandler.add('com.woltlab.wcf.simpleTabMenu_styleTabMenuContainer', 'select', function (data) {
+				_isVisible = (data.activeName == 'colors');
+				callbackRegionMarker();
+			});
 		},
 		
 		/**
@@ -125,7 +138,7 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
 			var select = elById('spCategories');
 			var lastValue = select.value;
 			
-			function updateRegionMarker() {
+			_updateRegionMarker = function() {
 				if (lastValue === 'none') {
 					elHide(_stylePreviewRegionMarker);
 					updateWrapperPosition(null);
@@ -149,7 +162,7 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
 				
 				updateWrapperPosition(region);
 				scrollToRegion(top);
-			}
+			};
 			
 			var variablesWrapper = elById('spVariablesWrapper');
 			function updateWrapperPosition(region) {
@@ -205,7 +218,7 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
 				elShow(element);
 				
 				// set region marker
-				updateRegionMarker();
+				_updateRegionMarker();
 				
 				selectContainer.classList[(lastValue === 'none' ? 'remove' : 'add')]('pointer');
 			});
@@ -284,6 +297,4 @@ define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'],
 			}, 100);
 		}
 	};
-	
-	return AcpUiStyleEditor;
 });
-- 
2.20.1