manager/assets/modext/core/modx.layout.js
/**
* Loads the MODx Ext-driven Layout
*
* @class MODx.Layout
* @extends Ext.Viewport
* @param {Object} config An object of config options.
* @xtype modx-layout
*/
Ext.apply(Ext, {
isFirebug: (window.console && window.console.firebug)
});
MODx.Layout = function(config){
config = config || {};
Ext.BLANK_IMAGE_URL = MODx.config.manager_url+'assets/ext3/resources/images/default/s.gif';
Ext.Ajax.defaultHeaders = {
'modAuth': config.auth
};
Ext.Ajax.extraParams = {
'HTTP_MODAUTH': config.auth
};
MODx.siteId = config.auth;
MODx.expandHelp = !!+MODx.config.inline_help;
var sp = new MODx.HttpProvider();
Ext.state.Manager.setProvider(sp);
sp.initState(MODx.defaultState);
config.showTree = false;
Ext.applyIf(config, {
layout: 'border'
,id: 'modx-layout'
,stateSave: true
,items: this.buildLayout(config)
});
MODx.Layout.superclass.constructor.call(this,config);
this.config = config;
this.addEvents({
'afterLayout': true
,'loadKeyMap': true
,'loadTabs': true
});
this.loadKeys();
if (!config.showTree) {
Ext.getCmp('modx-leftbar-tabs').collapse(false);
Ext.get('modx-leftbar').hide();
Ext.get('modx-leftbar-tabs-xcollapsed').setStyle('display','none');
}
this.fireEvent('afterLayout');
};
Ext.extend(MODx.Layout, Ext.Viewport, {
/**
* Wrapper method to build the layout regions
*
* @param {Object} config
*
* @returns {Array}
*/
buildLayout: function(config) {
var items = []
,north = this.getNorth(config)
,west = this.getWest(config)
,center = this.getCenter(config)
,south = this.getSouth(config)
,east = this.getEast(config);
if (north && Ext.isObject(north)) {
items.push(north);
}
if (west && Ext.isObject(west)) {
items.push(west);
}
if (center && Ext.isObject(center)) {
items.push(center);
}
if (south && Ext.isObject(south)) {
items.push(south);
}
if (east && Ext.isObject(east)) {
items.push(east);
}
return items;
}
/**
* Build the north region (header)
*
* @param {Object} config
*
* @returns {Object|void}
*/
,getNorth: function(config) {
return {
xtype: 'box'
,region: 'north'
,applyTo: 'modx-header'
//,height: 55
};
}
/**
* Build the west region (trees)
*
* @param {Object} config
*
* @returns {Object|void}
*/
,getWest: function(config) {
var tabs = [];
if (MODx.perm.resource_tree) {
tabs.push({
title: _('resources')
,xtype: 'modx-tree-resource'
,id: 'modx-resource-tree'
});
config.showTree = true;
}
if (MODx.perm.element_tree) {
tabs.push({
title: _('elements')
,xtype: 'modx-tree-element'
,id: 'modx-tree-element'
});
config.showTree = true;
}
if (MODx.perm.file_tree) {
tabs.push({
title: _('files')
,xtype: 'modx-panel-filetree'
,id: 'modx-file-tree'
});
config.showTree = true;
}
var activeTab = 0;
return {
region: 'west'
,applyTo: 'modx-leftbar'
,id: 'modx-leftbar-tabs'
,split: true
,width: 310
,minSize: 288
,autoScroll: true
,unstyled: true
,collapseMode: 'mini'
,useSplitTips: true
,monitorResize: true
,layout: 'anchor'
,items: [{
xtype: 'modx-tabs'
,plain: true
,defaults: {
autoScroll: true
,fitToFrame: true
}
,id: 'modx-leftbar-tabpanel'
,border: false
,anchor: '100%'
,activeTab: activeTab
,stateful: true
//,stateId: 'modx-leftbar-tabs'
,stateEvents: ['tabchange']
,getState:function() {
return {
activeTab: this.items.indexOf(this.getActiveTab())
};
}
,items: tabs
}]
,getState: function() {
// The region's attributes we want to save/restore
return {
collapsed: this.collapsed
,width: this.width
};
}
,listeners:{
beforestatesave: this.onBeforeSaveState
,scope: this
}
};
}
/**
* Build the center region (main content)
*
* @param {Object} config
*
* @returns {Object|void}
*/
,getCenter: function(config) {
return {
region: 'center'
,applyTo: 'modx-content'
,padding: '0 1px 0 0'
,bodyStyle: 'background-color:transparent;'
,id: 'modx-content'
,border: false
,autoScroll: true
};
}
/**
* Build the south region (footer)
*
* @param {Object} config
*
* @returns {Object|void}
*/
,getSouth: function(config) {
}
/**
* Build the east region
*
* @param {Object} config
*
* @returns {Object|void}
*/
,getEast: function(config) {
}
/**
* Convenient method to target the west region
*
* @returns {Ext.Component|void}
*/
,getLeftBar: function() {
var nav = Ext.getCmp('modx-leftbar-tabpanel');
if (nav) {
return nav;
}
return null;
}
/**
* Add the given item(s) to the west container
*
* @param {Object|Array} items
*/
,addToLeftBar: function(items) {
var nav = this.getLeftBar();
if (nav && items) {
nav.add(items);
this.onAfterLeftBarAdded(nav, items);
}
}
/**
* Method executed after some item(s) has been added to the west container
*
* @param {Ext.Component} nav The container
* @param {Object|Array} items Added item(s)
*/
,onAfterLeftBarAdded: function(nav, items) {
}
/**
* Set keyboard shortcuts
*/
,loadKeys: function() {
Ext.KeyMap.prototype.stopEvent = true;
var k = new Ext.KeyMap(Ext.get(document));
// ctrl + shift + h : toggle left bar
k.addBinding({
key: Ext.EventObject.H
,ctrl: true
,shift: true
,fn: this.toggleLeftbar
,scope: this
,stopEvent: true
});
// ctrl + shift + n : new document
k.addBinding({
key: Ext.EventObject.N
,ctrl: true
,shift: true
,fn: function() {
var t = Ext.getCmp('modx-resource-tree');
if (t) { t.quickCreate(document,{},'modDocument','web',0); }
}
,stopEvent: true
});
// ctrl + shift + u : clear cache
k.addBinding({
key: Ext.EventObject.U
,ctrl: true
,shift: true
,alt: false
,fn: MODx.clearCache
,scope: this
,stopEvent: true
});
this.fireEvent('loadKeyMap',{
keymap: k
});
}
/**
* Wrapper method to refresh all available trees
*/
,refreshTrees: function() {
var t;
t = Ext.getCmp('modx-resource-tree');
if (t && t.rendered) {
t.refresh();
}
t = Ext.getCmp('modx-tree-element');
if (t && t.rendered) {
t.refresh();
}
t = Ext.getCmp('modx-file-tree');
if (t && t.rendered) {
// Iterate over panel's items (trees) to refresh them
t.items.each(function(tree, idx) {
tree.refresh();
});
}
}
// Why here & why assuming visible ??
,leftbarVisible: true
/**
* Toggle left bar
*/
,toggleLeftbar: function() {
this.leftbarVisible ? this.hideLeftbar(true) : this.showLeftbar(true);
// Toggle the left bar visibility
this.leftbarVisible = !this.leftbarVisible;
}
/**
* Hide the left bar
*
* @param {Boolean} [anim] Whether or not to animate the transition
* @param {Boolean} [state] Whether or not to save the component's state
*/
,hideLeftbar: function(anim, state) {
Ext.getCmp('modx-leftbar-tabs').collapse(anim);
if (Ext.isBoolean(state)) {
this.stateSave = state;
}
}
/**
* Show the left bar
*
* @param {Boolean} [anim] Whether or not to animate the transition
*/
,showLeftbar: function(anim) {
Ext.getCmp('modx-leftbar-tabs').expand(anim);
}
/**
* Actions performed before we save the component state
*
* @param {Ext.Component} component
* @param {Object} state
*/
,onBeforeSaveState: function(component, state) {
var collapsed = state.collapsed;
if (collapsed && !this.stateSave) {
// Stateful status changed to prevent saving the state
this.stateSave = true;
return false;
}
if (!collapsed) {
var wrap = Ext.get('modx-leftbar').down('div');
if (!wrap.isVisible()) {
// Set the "masking div" to visible
wrap.setVisible(true);
Ext.getCmp('modx-leftbar-tabpanel').expand(true);
}
}
}
});
/**
* Handles layout functions. In module format for easier privitization.
* @class MODx.LayoutMgr
*/
MODx.LayoutMgr = function() {
var _activeMenu = 'menu0';
return {
loadPage: function(action, parameters) {
// Handles url, passed as first argument
var parts = [];
if (action) {
if (isNaN(parseInt(action)) && (action.substr(0,1) == '?' || (action.substr(0, "index.php?".length) == 'index.php?'))) {
parts.push(action);
} else {
parts.push('?a=' + action);
}
}
if (parameters) {
parts.push(parameters);
}
var url = parts.join('&');
if (MODx.fireEvent('beforeLoadPage', url)) {
var e = window.event;
var middleMouseButtonClick = (e && (e.button === 4 || e.which === 2));
var keyboardKeyPressed = (e && (e.button === 1 || e.ctrlKey === true || e.metaKey === true || e.shiftKey === true));
if (middleMouseButtonClick || keyboardKeyPressed) {
// Middle mouse button click or keyboard key pressed,
// let the browser handle the way it should be opened (new tab/window)
return window.open(url);
}
location.href = url;
}
return false;
}
,changeMenu: function(a,sm) {
if (sm === _activeMenu) return false;
Ext.get(sm).addClass('active');
var om = Ext.get(_activeMenu);
if (om) om.removeClass('active');
_activeMenu = sm;
return false;
}
}
}();
/* aliases for quicker reference */
MODx.loadPage = MODx.LayoutMgr.loadPage;
MODx.showDashboard = MODx.LayoutMgr.showDashboard;
MODx.hideDashboard = MODx.LayoutMgr.hideDashboard;
MODx.changeMenu = MODx.LayoutMgr.changeMenu;