holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP toggle sidebar menu:

Browse Source 
- Keep toggleSidebar state
- Fix documentation
- Fix default width size
This commit is contained in:
Hadi Nategh 2015-09-09 11:03:24 +00:00
parent fbd3069456
commit b24dc04138
3 changed files with 84 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
phpgwapi/js/framework/fw_desktop.js
View File

@ -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,24 +295,26 @@
},
/**
*
* 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'),
[this.tag.activeApp.internalName, _width]
);
//If there are no global application width values, set the sidebox width of
//the application every time the splitter is resized
if (this.tag.activeApp.sideboxWidth !== false)
if (_toggleMode !== "toggle")
{
this.tag.activeApp.sideboxWidth = _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
if (this.tag.activeApp.sideboxWidth !== false)
{
this.tag.activeApp.sideboxWidth = _width;
}
}
}
this.tag.sideboxSizeCallback(_width);
@ -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);

31
phpgwapi/js/framework/fw_ui.js
View File

@ -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);
};

2
pixelegg/js/fw_pixelegg.js
View File

@ -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')); });