}
});
-/**
- * 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 = $('<a class="collapsibleButton jsTooltip" title="' + WCF.Language.get('wcf.global.button.collapsible') + '" />').prependTo(this._sidebar);
- this._button.wrap('<span />');
- 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
*/
--- /dev/null
+/**
+ * Provides the sidebar toggle button.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2015 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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;
+});
projects / GitHub / WoltLab / WCF.git / commitdiff