From 65348b8424685ef6f1a38224a0f80e45d4552bdd Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 9 Jul 2015 18:00:21 +0200 Subject: [PATCH] Optimized and rewrote sidebar button --- .../templates/headIncludeJavaScript.tpl | 1 + com.woltlab.wcf/templates/header.tpl | 6 +- wcfsetup/install/files/js/WCF.js | 181 ------------------ .../js/WoltLab/WCF/UI/Collapsible/Sidebar.js | 88 +++++++++ 4 files changed, 91 insertions(+), 185 deletions(-) create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/UI/Collapsible/Sidebar.js diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl index 1d7e9be560..915f5a3b3e 100644 --- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl +++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl @@ -13,6 +13,7 @@ {js application='wcf' file='require' bundle='WCF.Core' core='true'} {js application='wcf' file='require.config' bundle='WCF.Core' core='true'} +{js application='wcf' file='require.linearExecution' bundle='WCF.Core' core='true'} {/if} {/if} diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index 64c34743b4..a66aa9dad4 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -3832,187 +3832,6 @@ WCF.Collapsible.SimpleRemote = WCF.Collapsible.Remote.extend({ } }); -/** - * Provides collapsible sidebars with persistency support. - */ -WCF.Collapsible.Sidebar = Class.extend({ - /** - * trigger button object - * @var jQuery - */ - _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 - */ - _proxy: null, - - /** - * sidebar object - * @var jQuery - */ - _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. - */ - init: function() { - this._sidebar = $('.sidebar:eq(0)'); - if (!this._sidebar.length) { - console.debug("[WCF.Collapsible.Sidebar] Could not find sidebar, aborting."); - return; - } - - 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 = $('').prependTo(this._sidebar); - this._button.wrap(''); - this._button.click($.proxy(this._click, this)); - this._buttonHeight = this._button.outerHeight(); - - WCF.DOMNodeInsertedHandler.execute(); - - this._proxy = new WCF.Action.Proxy({ - 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(); - - // fake resize event once transition has completed - var $window = $(window); - this._sidebar.on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { $window.trigger('resize'); }); - }, - - /** - * Handles clicks on the trigger button. - */ - _click: function() { - this._isOpen = (this._isOpen) ? false : true; - - this._proxy.setOption('data', { - actionName: 'toggle', - className: 'wcf\\system\\user\\collapsible\\content\\UserCollapsibleSidebarHandler', - isOpen: (this._isOpen ? 1 : 0), - sidebarName: this._sidebarName - }); - this._proxy.sendRequest(); - - 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) { - $('.sidebarOrientationLeft, .sidebarOrientationRight').removeClass('sidebarCollapsed'); - } - else { - $('.sidebarOrientationLeft, .sidebarOrientationRight').addClass('sidebarCollapsed'); - } - - // update button position - this._scroll(); - - // IE9 does not support transitions, fire resize event manually - if ($.browser.msie && $.browser.version.indexOf('9') === 0) { - $(window).trigger('resize'); - } - } -}); - /** * Holds userdata of the current user */ diff --git a/wcfsetup/install/files/js/WoltLab/WCF/UI/Collapsible/Sidebar.js b/wcfsetup/install/files/js/WoltLab/WCF/UI/Collapsible/Sidebar.js new file mode 100644 index 0000000000..79d8f01d1c --- /dev/null +++ b/wcfsetup/install/files/js/WoltLab/WCF/UI/Collapsible/Sidebar.js @@ -0,0 +1,88 @@ +/** + * Provides the sidebar toggle button. + * + * @author Alexander Ebert + * @copyright 2001-2015 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLab/WCF/UI/Collapsible/Sidebar + */ +define(['Ajax', 'Language', 'DOM/Util'], function(Ajax, Language, DOMUtil) { + "use strict"; + + var _isOpen = false; + var _main = null; + var _name = ''; + + /** + * @module WoltLab/WCF/UI/Collapsible/Sidebar + */ + var UICollapsibleSidebar = { + /** + * Sets up the toggle button. + */ + setup: function() { + var sidebar = document.querySelector('.sidebar'); + if (sidebar === null) { + return; + } + + _isOpen = (sidebar.getAttribute('data-is-open') === 'true'); + _main = document.getElementById('main'); + _name = sidebar.getAttribute('data-sidebar-name'); + + this._createUI(sidebar); + + _main.classList[(_isOpen ? 'remove' : 'add')]('sidebarCollapsed'); + }, + + /** + * Creates the toggle button. + * + * @param {Element} sidebar sidebar element + */ + _createUI: function(sidebar) { + var button = document.createElement('a'); + button.href = '#'; + button.className = 'collapsibleButton jsTooltip'; + button.setAttribute('title', Language.get('wcf.global.button.collapsible')); + + var span = document.createElement('span'); + span.appendChild(button); + DOMUtil.prepend(span, sidebar); + + button.addEventListener('click', this._click.bind(this)); + }, + + /** + * Toggles the sidebar on click. + * + * @param {object} event event object + */ + _click: function(event) { + event.preventDefault(); + + _isOpen = (_isOpen === false); + + Ajax.api(this, { + isOpen: ~~_isOpen + }); + }, + + _ajaxSetup: function() { + return { + data: { + actionName: 'toggle', + className: 'wcf\\system\\user\\collapsible\\content\\UserCollapsibleSidebarHandler', + sidebarName: _name + }, + url: 'index.php/AJAXInvoke/?t=' + SECURITY_TOKEN + SID_ARG_2ND + }; + }, + + _ajaxSuccess: function(data) { + _main.classList[(_isOpen ? 'remove' : 'add')]('sidebarCollapsed'); + } + }; + + return UICollapsibleSidebar; +}); -- 2.20.1