WIP toggle sidebar menu:

- Keep toggleSidebar state
- Fix documentation
- Fix default width size

phpgwapi/js/framework/fw_desktop.js

@@ -184,6 +184,9 @@
 				//Wrap a scroll area handler around the applications
 				this.scrollAreaUi = new egw_fw_ui_scrollarea(this.sidemenuDiv);
 
+				// Create toggleSidebar menu
+				this.toggleSidebarUi = new egw_fw_ui_toggleSidebar(this.sidemenuDiv, this._toggleSidebarCallback,this);
+
 				//Create the sidemenu, the tabs area and the splitter
 				this.sidemenuUi = new desktop_ui_sidemenu(this.scrollAreaUi.contentDiv,
 					this.sortCallback);
@@ -292,18 +295,19 @@
 		},
 
 		/**
-		 *
+		 * Splitter resize callback
 		 * @param {type} _width
+		 * @param {string} _toggleMode if mode is "toggle" then resize happens without changing splitter preference
 		 * @returns {undefined}
 		 */
-		splitterResize: function(_width)
+		splitterResize: function(_width, _toggleMode)
 		{
 			if (this.tag.activeApp)
 			{
-				var req = egw.jsonq(
+
-					this.tag.activeApp.getMenuaction('ajax_sideboxwidth'),
+				if (_toggleMode !== "toggle")
-					[this.tag.activeApp.internalName, _width]
+				{
-				);
+					egw.set_preference(this.tag.activeApp.internalName, 'jdotssideboxwidth', _width);
 
 					//If there are no global application width values, set the sidebox width of
 					//the application every time the splitter is resized
@@ -312,6 +316,7 @@
 						this.tag.activeApp.sideboxWidth = _width;
 					}
 				}
+			}
 			this.tag.sideboxSizeCallback(_width);
 
 			// Notify app about change
@@ -355,6 +360,7 @@
 			{
 				this.splitterUi.constraints[0].size = _app.sideboxWidth;
 			}
+			this.getToggleSidebarState();
 		},
 
 		/**
@@ -401,6 +407,48 @@
 		categoryAnimationCallback: function()
 		{
 			this.tag.parentFw.scrollAreaUi.update();
+		},
+
+		/**
+		 * tabClickCallback is used internally by egw_fw in order to handle clicks on
+		 * a tab.
+		 *
+		 * @param {egw_fw_ui_tab} _sender specifies the tab ui object, the user has clicked
+		 */
+		tabClickCallback: function(_sender)
+		{
+			this._super.apply(this,arguments);
+
+			framework.getToggleSidebarState();
+			framework.activeApp.browser.callResizeHandler();
+		},
+
+		/**
+		 * toggleSidebar callback function, handles preference and resize
+		 * @param {string} _state state can be on/off
+		 */
+		_toggleSidebarCallback: function (_state)
+		{
+			var splitterWidth = egw.preference('jdotssideboxwidth',this.activeApp.appName) || this.activeApp.sideboxWidth;
+			if (_state === "on")
+			{
+				this.splitterUi.resizeCallback(70,'toggle');
+				egw.set_preference(this.activeApp.appName, 'toggleSidebar', 'on');
+			}
+			else
+			{
+				this.splitterUi.resizeCallback(splitterWidth);
+				egw.set_preference(this.activeApp.appName, 'toggleSidebar', 'off');
+			}
+		},
+
+		/**
+		 * function to get the stored toggleSidebar state and set the sidebar accordingly
+		 */
+		getToggleSidebarState: function()
+		{
+			var toggleSidebar = egw.preference('toggleSidebar',this.activeApp.appName);
+			this.toggleSidebarUi.set_toggle(toggleSidebar?toggleSidebar:"off", this._toggleSidebarCallback, this);
 		}
 	});
 })(window);

phpgwapi/js/framework/fw_ui.js

@@ -1228,16 +1228,18 @@ egw_fw_ui_splitter.prototype.set_disable = function (_state)
  * Constructor for toggleSidebar UI object
  *
  * @param {type} _contentDiv sidemenu div
+ * @param {function} _toggleCallback callback function to set toggle prefernces and resize handling
+ * @param {object} _callbackContext context of the toggleCallback
  * @returns {egw_fw_ui_toggleSidebar}
  */
-function egw_fw_ui_toggleSidebar (_contentDiv)
+function egw_fw_ui_toggleSidebar (_contentDiv, _toggleCallback, _callbackContext)
 {
 	var self = this;
-
+	this.toggleCallback = _toggleCallback;
 	this.toggleDiv = $j(document.createElement('div'))
 			.attr({id:"egw_fw_toggler"})
 			.click(function(){
-				self.onToggle();
+				self.onToggle(_callbackContext);
 			});
 	var span = $j(document.createElement('span')).addClass('et2_clickable').appendTo(this.toggleDiv);
 
@@ -1253,18 +1255,35 @@ function egw_fw_ui_toggleSidebar (_contentDiv)
 
 /**
  * Toggle menu on/off
+ * @param {object} _callbackContext context of the toggleCallback
  */
-egw_fw_ui_toggleSidebar.prototype.onToggle = function()
+egw_fw_ui_toggleSidebar.prototype.onToggle = function(_callbackContext)
 {
 	if (typeof this.toggleAudio != 'undefined') this.toggleAudio[0].play();
 	if (this.contDiv.hasClass('egw_fw_sidebar_toggleOn'))
 	{
 		this.contDiv.removeClass('egw_fw_sidebar_toggleOn');
-		framework.splitterUi.set_disable(false);
+		_callbackContext.splitterUi.set_disable(false);
+		this.toggleCallback.call(_callbackContext,'off');
 	}
 	else
 	{
 		this.contDiv.addClass('egw_fw_sidebar_toggleOn');
-		framework.splitterUi.set_disable(true);
+		_callbackContext.splitterUi.set_disable(true);
+		this.toggleCallback.call(_callbackContext, 'on');
 	}
 };
+
+/**
+ * Set sidebar toggle state
+ *
+ * @param {string} _state state can be 'on' or 'off'
+ * @param {type} _toggleCallback callback function to handle toggle preference and resize
+ * @param {type} _context context of callback function
+ */
+egw_fw_ui_toggleSidebar.prototype.set_toggle = function (_state, _toggleCallback, _context)
+{
+		this.contDiv.toggleClass('egw_fw_sidebar_toggleOn',_state === 'on'?true:false);
+		_context.splitterUi.set_disable(_state === 'on'?true:false);
+		_toggleCallback.call(_context, _state);
+};

pixelegg/js/fw_pixelegg.js

@@ -46,7 +46,7 @@
 
 		$j(document).ready(function() {
 			window.framework = new fw_pixelegg("egw_fw_sidemenu", "egw_fw_tabs",
-					window.egw_webserverUrl, egw_setSideboxSize,"egw_fw_splitter", 255, 70);	// should be identical to jdots_framework::(DEFAULT|MIN)_SIDEBAR_WIDTH
+					window.egw_webserverUrl, egw_setSideboxSize,"egw_fw_splitter", 255, 215);	// should be identical to jdots_framework::(DEFAULT|MIN)_SIDEBAR_WIDTH
 			window.callManual = window.framework.callManual;
 			jQuery('#egw_fw_print').click(function(){window.framework.print();});
 			jQuery('#egw_fw_logout').click(function(){ window.framework.redirect(this.getAttribute('data-logout-url')); });