/tine20/Tinebase/js/AppTabsPanel.js
JavaScript | 380 lines | 217 code | 50 blank | 113 comment | 23 complexity | f5d71ff4f0da38b9262de107544f68ff MD5 | raw file
- /*
- * Tine 2.0
- *
- * @license http://www.gnu.org/licenses/agpl.html AGPL Version 3
- * @author Cornelius Weiss <c.weiss@metaways.de>
- * @copyright Copyright (c) 2010 Metaways Infosystems GmbH (http://www.metaways.de)
- */
- Ext.ns('Tine.Tinebase');
- /**
- * Main appStarter/picker tab panel
- *
- * NOTE: Tab panels are not sortable yet {@see http://www.extjs.com/forum/showthread.php?p=55045#post55045}
- *
- * @todo discuss: default app vs. last active tab
- * @todo discuss: have a set of default apps?
- *
- * @namespace Tine.Tinebase
- * @class Tine.Tinebase.AppTabsPanel
- * @extends Ext.TabPanel
- * @author Cornelius Weiss <c.weiss@metaways.de>
- */
- Tine.Tinebase.AppTabsPanel = function(config) {
- Ext.apply(this, config);
- this.plugins = [new Ext.ux.TabPanelSortPlugin({
- dragZoneConfig: {
- onBeforeDrag: this.onBeforeDrag.createDelegate(this)
- },
- dropZoneConfig: {
- getTargetFromEvent: this.getTargetFromEvent.createDelegate(this)
- }
- })];
-
- Tine.Tinebase.AppTabsPanel.superclass.constructor.call(this, config);
- };
- Ext.extend(Tine.Tinebase.AppTabsPanel, Ext.TabPanel, {
- activeTab: 1,
-
- stateful: true,
- stateEvents: ['add', 'remove', 'tabchange', 'tabsort'],
- stateId: 'tinebase-mainscreen-apptabs',
-
- /**
- * @cfg {Array} of Strings currentTab ids
- */
- currentTabs: null,
-
- // private
- findTargets : function(e){
- var item = null,
- itemEl = e.getTarget('li:not(.x-tab-edge)', this.strip);
- if(itemEl){
- item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
- if(item && item.disabled){
- return {
- close : null,
- item : null,
- el : null
- };
- }
- }
- return {
- close : e.getTarget('.x-tab-strip-close', this.strip),
- item : item,
- el : itemEl
- };
- },
-
- /**
- * init appTabsPanel
- */
- initComponent: function() {
- Ext.apply(this, Ext.state.Manager.get(this.stateId));
-
- this.initMenu();
-
- this.items = [{
- id: this.app2id('menu'),
- title: Tine.title,
- iconCls: 'tine-favicon',
- closable: true,
- listeners: {
- scope: this,
- beforeclose: this.onBeforeTabClose
- }
- }].concat(this.getDefaultTabItems());
-
- // set states last active app to the sessions default app
- Tine.Tinebase.appMgr.setDefault(this.id2appName(this.activeTab));
-
- Tine.Tinebase.appMgr.on('activate', this.onActivateApp, this);
- this.on('beforetabchange', this.onBeforeTabChange, this);
- this.on('tabsort', this.onTabChange, this);
- this.on('add', this.onTabChange, this);
- this.on('remove', this.onTabChange, this);
-
- this.supr().initComponent.call(this);
-
- // fake an access stack
- for (var i=1, tabCount=this.items.getCount(); i<tabCount; i++) {
- this.stack.add(this.items.get(i));
- }
- },
- /**
- * init the combined appchooser/tine menu
- */
- initMenu: function() {
- this.menu = new Ext.menu.Menu({
- layout: 'column',
- width: 400,
- autoHeight: true,
- style: {
- 'background-image': 'none'
- },
- defaults: {
- xtype: 'menu',
- floating: false,
- columnWidth: 0.5,
- hidden: false,
- listeners: {
- scope: this,
- itemclick: function(item, e) {
- this.menu.hide();
- }
- },
- style: {
- //'border-color': 'transparent'
- 'border': '0'
- }
- },
- items: [{
- items: this.getAppItems(),
- style: {'border-right': '1px solid #E2E2E3'}
- }, {
- items: Tine.Tinebase.MainScreen.getMainMenu().getMainActions()
- }]
- });
- },
-
- /**
- * executed after render
- */
- afterRender: function() {
- this.supr().afterRender.apply(this, arguments);
-
- this.menuTabEl = Ext.get(this.getTabEl(0));
- this.menuTabEl.addClass('tine-mainscreen-apptabspanel-menu-tabel');
-
- // remove plain style
- this.header.removeClass('x-tab-panel-header-plain');
- },
-
- /**
- * get app items for the tabPanel
- *
- * @return {Array}
- */
- getAppItems: function() {
- var appItems = [];
- Tine.Tinebase.appMgr.getAll().each(function(app) {
- if (app.hasMainScreen) {
- appItems.push({
- text: app.getTitle(),
- iconCls: app.getIconCls(),
- handler: this.onAppItemClick.createDelegate(this, [app])
- });
- }
- }, this);
-
- return appItems.reverse();
- },
-
- /**
- * get default tab items configurations
- *
- * @return {Array}
- */
- getDefaultTabItems: function() {
- if (Ext.isEmpty(this.currentTabs)) {
- this.currentTabs = [this.id2appName(Tine.Tinebase.appMgr.getDefault())];
- }
-
- var tabItems = [];
-
- Ext.each(this.currentTabs, function(appName) {
- var app = Tine.Tinebase.appMgr.get(appName);
- if (app) {
- tabItems.push(this.getTabItem(app));
- }
- }, this);
-
- return tabItems;
- },
-
- /**
- * deny drag on menuEl
- * @param {} e
- * @return {}
- */
- onBeforeDrag: function(data, e) {
- return e.getTarget('li[class*=mainscreen-apptabspanel-menu-tabel]', 10) ? false : true;
- },
-
- /**
- * deny drop on menuEl
- * @param {} e
- * @return {}
- */
- getTargetFromEvent: function(e) {
- var target = e.getTarget('ul[class^=x-tab]', 10),
- li = this.findTargets(e);
-
- if (li.el && li.el == this.menuTabEl.dom) {
- return false;
- }
-
- return target;
- },
-
- /**
- * get tabs state
- *
- * @return {Object}
- */
- getState: function() {
- return {
- currentTabs: this.currentTabs,
- activeTab: Ext.isNumber(this.activeTab) ? this.activeTab : this.items.indexOf(this.activeTab)
- };
- },
-
- /**
- * get tab item configuration
- *
- * @param {Tine.Application} app
- * @return {Object}
- */
- getTabItem: function(app) {
- return {
- id: this.app2id(app),
- title: app.getTitle(),
- iconCls: app.getIconCls(),
- closable: true,
- listeners: {
- scope: this,
- beforeclose: this.onBeforeTabClose,
- activate: this.onTabActivate
- }
- };
- },
-
- /**
- * executed when an app get activated by mainscreen
- *
- * @param {Tine.Application} app
- */
- onActivateApp: function(app) {
- var tab = this.getItem(this.app2id(app)) || this.add(this.getTabItem(app));
-
- this.setActiveTab(tab);
- },
-
- /**
- * executed when an app item in this.menu is clicked
- *
- * @param {Tine.Application} app
- */
- onAppItemClick: function(app) {
- Tine.Tinebase.appMgr.activate(app);
-
- this.menu.hide();
- },
-
- /**
- * executed on tab changes
- *
- * @param {TabPanel} this
- * @param {Panel} newTab The tab being activated
- * @param {Panel} currentTab The current active tab
- */
- onBeforeTabChange: function(tp, newTab, currentTab) {
- if (this.id2appName(newTab) === 'menu') {
- this.menu.show(this.menuTabEl, 'tl-bl');
- return false;
- }
- },
-
- /**
- * executed before a tab panel is closed
- *
- * @param {Ext.Panel} tab
- * @return {boolean}
- */
- onBeforeTabClose: function(tab) {
- if (this.id2appName(tab) === 'menu') {
- return this.onBeforeTabChange(this, tab, this.activeTab);
- }
-
- // don't close last app panel
- return this.items.getCount() > 2;
- },
-
- /**
- * executed when a tab gets activated
- *
- * @param {Ext.Panel} tab
- */
- onTabActivate: function(tab) {
- var appName = this.id2appName(tab);
- var app = Tine.Tinebase.appMgr.get(appName);
-
- // fixme
- if (Ext.getCmp('treecards').rendered) {
- Tine.Tinebase.appMgr.activate(app);
- }
- },
-
- /**
- * executed when tabs chages
- */
- onTabChange: function() {
- var tabCount = this.items.getCount();
- var closable = tabCount > 2;
-
- this.currentTabs = [];
-
- for (var i=1, tab, el; i<tabCount; i++) {
- tab = this.items.get(i);
-
- // update currentTabs
- this.currentTabs.push(this.id2appName(tab.id));
-
- // handle closeables
- tab.closable = closable;
- el = this.getTabEl(i);
- if (el) {
- Ext.get(el)[closable ? 'addClass' : 'removeClass']('x-tab-strip-closable');
- }
- }
- },
-
- /**
- * returns appName of given tab/id
- *
- * @param {Ext.Panel/String/Number} id
- * @return {String} appName
- */
- id2appName: function(id) {
- if (Ext.isNumber(id)) {
- if (Ext.isArray(this.items)) {
- id = this.items[id] ? this.items[id].id : null;
- } else {
- id = this.items.get(id);
- }
- }
-
- if (Ext.isObject(id) && ! Ext.isEmpty(id)) {
- id = id.id;
- }
-
- if (Ext.isString(id)) {
- return id.split('-').pop();
- }
-
- return null;
- },
-
- /**
- * returns tab id of given app
- * @param {Tine.Application/String} app
- */
- app2id: function(app) {
- var appName = app.appName || app;
-
- return this.id + '-' + appName;
- }
- });