From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 23 Oct 2012 15:57:41 +0000 (+0200)
Subject: Fixed button for collapsible sidebar
X-Git-Tag: 2.0.0_Beta_1~843
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a3574790b90ed1b54cd0176836a7d30ad648602d;p=GitHub%2FWoltLab%2FWCF.git

Fixed button for collapsible sidebar
---

diff --git a/com.woltlab.wcf/template/header.tpl b/com.woltlab.wcf/template/header.tpl
index f206a4793f..5f6259acb5 100644
--- a/com.woltlab.wcf/template/header.tpl
+++ b/com.woltlab.wcf/template/header.tpl
@@ -39,7 +39,7 @@
 <div id="main" class="layoutFluid{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst} clearfix{/if}">
 	<div>
 		{if $sidebar|isset}
-			<aside class="sidebar"{if $sidebarOrientation|isset && $sidebarOrientation == 'right'} data-is-open="{if $sidebarCollapsed}0{else}1{/if}" data-sidebar-name="{$sidebarName}"{/if}>
+			<aside class="sidebar"{if $sidebarOrientation|isset && $sidebarOrientation == 'right'} data-is-open="{if $sidebarCollapsed}false{else}true{/if}" data-sidebar-name="{$sidebarName}"{/if}>
 				{@$sidebar}
 			</aside>
 			
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index c8f722735d..7000f885e3 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -3501,12 +3501,24 @@ WCF.Collapsible.Sidebar = Class.extend({
 	 */
 	_button: null,
 	
+	/**
+	 * trigger button height
+	 * @var	integer
+	 */
+	_buttonHeight: 0,
+	
 	/**
 	 * sidebar state
 	 * @var	boolean
 	 */
 	_isOpen: false,
 	
+	/**
+	 * main container object
+	 * @var	jQuery
+	 */
+	_mainContainer: null,
+	
 	/**
 	 * action proxy
 	 * @var	WCF.Action.Proxy
@@ -3519,12 +3531,30 @@ WCF.Collapsible.Sidebar = Class.extend({
 	 */
 	_sidebar: null,
 	
+	/**
+	 * sidebar height
+	 * @var	integer
+	 */
+	_sidebarHeight: 0,
+	
 	/**
 	 * sidebar identifier
 	 * @var	string
 	 */
 	_sidebarName: '',
 	
+	/**
+	 * sidebar offset from document top
+	 * @var	integer
+	 */
+	_sidebarOffset: 0,
+	
+	/**
+	 * user panel height
+	 * @var	integer
+	 */
+	_userPanelHeight: 0,
+	
 	/**
 	 * Creates a new WCF.Collapsible.Sidebar object.
 	 */
@@ -3535,18 +3565,27 @@ WCF.Collapsible.Sidebar = Class.extend({
 			return;
 		}
 		
-		this._isOpen = (this._sidebar.data('isOpen') === 'false') ? false : true;
+		this._isOpen = (this._sidebar.data('isOpen')) ? true : false;
 		this._sidebarName = this._sidebar.data('sidebarName');
+		this._mainContainer = $('#main');
+		this._sidebarHeight = this._sidebar.height();
+		this._sidebarOffset = this._sidebar.getOffsets('offset').top;
+		this._userPanelHeight = $('#topMenu').outerHeight();
 		
 		// add toggle button
 		this._button = $('<a class="collapsibleButton jsTooltip" title="' + WCF.Language.get('wcf.global.button.collapsible') + '" />').prependTo(this._sidebar);
 		this._button.click($.proxy(this._click, this));
+		this._buttonHeight = this._button.outerHeight();
 		
 		this._proxy = new WCF.Action.Proxy({
-			url: 'index.php/AJAXInvoke/?t=' + SECURITY_TOKEN + SID_2ND
+			showLoadingOverlay: false,
+			url: 'index.php/AJAXInvoke/?t=' + SECURITY_TOKEN + SID_ARG_2ND
 		});
 		
+		$(document).scroll($.proxy(this._scroll, this)).resize($.proxy(this._scroll, this));
+		
 		this._renderSidebar();
+		this._scroll();
 	},
 	
 	/**
@@ -3566,15 +3605,54 @@ WCF.Collapsible.Sidebar = Class.extend({
 		this._renderSidebar();
 	},
 	
+	/**
+	 * Aligns the toggle button upon scroll or resize.
+	 */
+	_scroll: function() {
+		var $window = $(window);
+		var $scrollOffset = $window.scrollTop();
+		
+		// calculate top and bottom coordinates of visible sidebar
+		var $topOffset = Math.max($scrollOffset - this._sidebarOffset, 0);
+		var $bottomOffset = Math.min(this._mainContainer.height(), ($window.height() + $scrollOffset) - this._sidebarOffset);
+		
+		var $buttonTop = 0;
+		if ($bottomOffset === $topOffset) {
+			// sidebar not within visible area
+			$buttonTop = this._sidebarOffset + this._sidebarHeight;
+		}
+		else {
+			$buttonTop = $topOffset + (($bottomOffset - $topOffset) / 2);
+			
+			// if the user panel is above the sidebar, substract it's height
+			var $overlap = Math.max(Math.min($topOffset - this._userPanelHeight, this._userPanelHeight), 0);
+			if ($overlap > 0) {
+				$buttonTop += ($overlap / 2);
+			}
+		}
+		
+		// ensure the button does not exceed bottom boundaries
+		if (($bottomOffset - $topOffset - this._userPanelHeight) < this._buttonHeight) {
+			$buttonTop = $buttonTop - this._buttonHeight;
+		}
+		else {
+			// exclude half button height
+			$buttonTop = Math.max($buttonTop - (this._buttonHeight / 2), 0);
+		}
+		
+		this._button.css({ top: $buttonTop + 'px' });
+		
+	},
+	
 	/**
 	 * Renders the sidebar state.
 	 */
 	_renderSidebar: function() {
 		if (this._isOpen) {
-			this._sidebar.addClass('sidebarCollapsed');
+			this._mainContainer.removeClass('sidebarCollapsed');
 		}
 		else {
-			this._sidebar.removeClass('sidebarCollapsed');
+			this._mainContainer.addClass('sidebarCollapsed');
 		}
 	}
 });
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index a6086e5495..0b26ec5d1c 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -262,8 +262,24 @@
 		background-color: @wcfSidebarBackgroundColor;
 		
 		> .sidebar {
+			position: relative;
 			width: 300px;
 			z-index: 120;
+
+			> .collapsibleButton {
+				background-color: @wcfSidebarBackgroundColor;
+				background-image: url('../icon/arrowRight.svg');
+				background-position: 4px 4px;
+				background-repeat: no-repeat;
+				background-size: 16px;
+				border-radius: 6px 0 0 6px;
+				display: block;
+				height: 24px;
+				left: -20px;
+				position: absolute;
+				top: 0;
+				width: 24px;
+			}
 		}
 		
 		> .content {
@@ -291,6 +307,25 @@
 	}
 	
 	&.sidebarOrientationRight {
+		&.sidebarCollapsed > div {
+			> .content {
+				margin-right: 20px;
+			}
+			
+			> .sidebar {
+				width: 20px;
+				
+				> div,
+				> fieldset {
+					visibility: hidden;
+				}
+				
+				> .collapsibleButton {
+					background-image: url('../icon/arrowLeft.svg');
+				}
+			}
+		}
+		
 		.content {
 			margin-right: 300px;
 		}