More tab implementation (9edd59d9) · Commits · extjs / jsduck

template/app/Application.js

+3 −3

Original line number	Diff line number	Diff line
		@@ -52,9 +52,9 @@ Ext.define('Docs.Application', {
		Docs.initEventTracking();
		}

		setInterval(function(){
		Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
		}, 1000)
		// setInterval(function(){
		// Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
		// }, 1000)
		}

		});

template/app/controller/Classes.js

+8 −4

Original line number	Diff line number	Diff line
		@@ -196,14 +196,14 @@ Ext.define('Docs.controller.Classes', {
		var cls = matches[1];
		var member = matches[2];

		if (this.cache[cls]) {
		this.showClass(this.cache[cls], member);
		}
		else {
		if (this.getOverview()) {
		this.getOverview().setLoading(true);
		}

		if (this.cache[cls]) {
		this.showClass(this.cache[cls], member);
		}
		else {
		Ext.data.JsonP.request({
		url: this.getBaseUrl() + '/output/' + cls + '.js',
		callbackName: cls.replace(/\./g, '_'),
		@@ -228,6 +228,10 @@ Ext.define('Docs.controller.Classes', {

		this.getTree().selectUrl("/api/"+cls.name);
		this.fireEvent('showClass', cls.name);

		var iconCls = this.getTree().findRecordByUrl("/api/"+cls.name);
		var clsName = cls.name.match(/([^\.]+)$/)[0];
		Ext.getCmp('doctabs').addTab({cls: '#/api/' + cls.name, clsName: clsName, icn: iconCls.raw.iconCls})
		}

		if (anchor) {

template/app/controller/Tabs.js

+52 −1

Original line number	Diff line number	Diff line
		@@ -5,11 +5,62 @@ Ext.define('Docs.controller.Tabs', {
		this.control({
		'container [componentCls=doctabs]': {
		afterrender: function(cmp) {
		cmp.el.addListener('mouseover', function(event, el) {
		Ext.get(el).addCls('ovr');
		}, this, {
		delegate: '.icn'
		});
		cmp.el.addListener('mouseout', function(event, el) {
		Ext.get(el).removeCls('ovr');
		}, this, {
		delegate: '.icn'
		});
		cmp.el.addListener('click', function(evt, el) {
		cmp.justClosed = true;
		var docTab = Ext.get(el).up('.doctab');
		docTab.animate({
		to: { top: 30 }
		}).animate({
		to: { width: 10 },
		listeners: {
		afteranimate: function() {
		Ext.getCmp('doctabs').removeTab(docTab.down('.docClass').getAttribute('href'));
		docTab.remove();
		},
		scope: this
		}
		});
		}, this, {
		delegate: '.icn',
		preventDefault: true
		});

		cmp.el.addListener('click', function(event, el) {
		if (cmp.justClosed) {
		cmp.justClosed = false;
		return;
		}
		Ext.Array.each(Ext.get(el).up('.doctabs').query('.doctab'), function(t) {
		Ext.get(t).removeCls('active');
		});
		Ext.get(el).addCls('active')
		Ext.get(el).addCls('active');
		}, this, {
		delegate: '.doctab'
		});

		cmp.el.addListener('mouseover', function(event, el) {
		var icn = Ext.get(el).down('.icn');
		if (icn) {
		icn.addCls('close');
		}
		}, this, {
		delegate: '.doctab'
		});
		cmp.el.addListener('mouseout', function(event, el) {
		var icn = Ext.get(el).down('.icn');
		if (icn) {
		icn.removeCls('close');
		}
		}, this, {
		delegate: '.doctab'
		});

template/app/view/Tabs.js

+105 −47

Original line number	Diff line number	Diff line
		Ext.define('Docs.view.Tabs', {
		extend: 'Ext.container.Container',
		alias: 'widget.doctabs',
		id: 'doctabs',

		componentCls: 'hover-menu',
		itemSelector: 'div.item',
		deferEmptyText: false,

		/**
		* @cfg {Number} colHeight maximum number of items in one column.
		* When more than that, items are placed into multiple columns.
		* Defaults to 25 (current maximum length of history).
		*/
		columnHeight: 25,
		/**
		* @cfg {Boolean} showCloseButtons true to show "x" after each menu item.
		* Defaults to false.
		*/
		showCloseButtons: false,
		componentCls: 'doctabs',

		openTabs: [],

		initComponent: function() {
		this.renderTo = Ext.getBody();

		this.tpl = new Ext.XTemplate(
		'<table>',
		'<tr>',
		'<td>',
		'<tpl for=".">',
		'<div class="item">',
		'{[this.renderLink(values)]}',
		'<tpl if="this.showCloseButtons">',
		'<a class="close" href="#" rel="{cls}">x</a>',
		'</tpl>',

		this.html = [
		'<div class="doctab home"><div class="l"></div><div class="m"><a class="docClass" href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab api active"><div class="l"></div><div class="m"><a class="docClass" href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab videos"><div class="l"></div><div class="m"><a class="docClass" href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab guides"><div class="l"></div><div class="m"><a class="docClass" href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab themes"><div class="l"></div><div class="m"><a class="docClass" href="#"> </a></div><div class="r"></div></div>',
		'<div style="float: left; width: 8px"> </div>'
		].join('');

		this.callParent();
		},

		addTab: function(item) {

		if (!Ext.Array.contains(this.openTabs, item.cls)) {
		var tpl = Ext.create('Ext.XTemplate',
		'<div class="doctab" style="visibility: hidden">',
		'<div class="l"></div>',
		'<div class="m">',
		'<a class="icn {icn}" href="#"> </a>',
		'<a class="docClass" href="{cls}">{clsName}</a>',
		'</div>',
		// Start new column when columnHeight reached
		'<tpl if="xindex % this.columnHeight === 0 && xcount > xindex">',
		'</td><td>',
		'</tpl>',
		'</tpl>',
		'</td>',
		'</tr>',
		'</table>',
		{
		columnHeight: this.columnHeight,
		showCloseButtons: this.showCloseButtons,
		renderLink: function(values) {
		var url = values.url \|\| values.cls;
		var label = values.label \|\| values.cls;
		var stat = values['static'] ? '<span class="static">static</span>' : "";
		return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{1} {2}</a>', url, label, stat);
		}
		'<div class="r"></div>',
		'</div>'
		)
		var docTab = Ext.get(tpl.append(this.el.dom, item));
		var width = docTab.getWidth();
		docTab.setStyle('width', '10px')
		docTab.setStyle({visibility: 'visible'})
		docTab.animate({
		to: { width: width }
		});

		this.openTabs.push(item.cls);
		}
		);
		this.activateTab(item.cls)
		},

		this.callParent();
		activateTab: function(url) {
		this.activeTab = Ext.Array.indexOf(this.openTabs, url);
		Ext.Array.each(Ext.query('.doctab a[class=docClass]'), function(d) {
		Ext.get(d).up('.doctab').removeCls('active');
		});
		var activeTab = Ext.query('.doctab a[href="' + url + '"]')[0];
		if (activeTab) Ext.get(activeTab).up('.doctab').addCls('active');
		},

		removeTab: function(url) {
		var idx = Ext.Array.indexOf(this.openTabs, url);
		if (idx !== false) {
		Ext.Array.erase(this.openTabs, idx, 1);
		if (this.activeTab > idx) this.activeTab -= 1;
		}
		// console.log("Total", this.openTabs.length, "Clicked: ", idx, "Active: ", this.activeTab, this.openTabs)
		if (idx == this.activeTab) {
		if (this.openTabs.length == 0) {
		// Go to home screen
		} else {
		if (idx == 0) idx = 1;
		Docs.App.getController('Classes').handleUrlClick(this.openTabs[idx - 1], {});
		}
		}
		}
		});

template/app/view/Viewport.js

+3 −16

Original line number	Diff line number	Diff line
		@@ -10,6 +10,7 @@ Ext.define('Docs.view.Viewport', {
		'Docs.view.index.Container',
		'Docs.view.tree.Tree',
		'Docs.view.FavoritesPanel',
		'Docs.view.Tabs',
		'Docs.Favorites',
		'Docs.Settings',
		'Docs.History'
		@@ -69,22 +70,8 @@ Ext.define('Docs.view.Viewport', {

		},
		{
		xtype: 'container',
		componentCls: 'doctabs',
		width: '100%',
		html: [
		'<div class="doctab home"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab api"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab videos"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab guides"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div class="doctab themes"><div class="l"></div><div class="m"><a href="#"> </a></div><div class="r"></div></div>',
		'<div style="position: relative; display: inline-block; width: 8px"></div>',
		'<div class="doctab"><div class="l"></div><div class="m"><a class="icon-class" href="#/api/Ext.Base">Base</a></div><div class="r"></div></div>',
		'<div class="doctab"><div class="l"></div><div class="m"><a class="icon-component" href="#/api/Ext.grid.Panel">Grid</a></div><div class="r"></div></div>',
		'<div class="doctab active"><div class="l"></div><div class="m"><a class="icon-singleton" href="#/api/Ext.Ajax">AJAX</a></div><div class="r"></div></div>',
		'<div class="doctab"><div class="l"></div><div class="m"><a class="icon-component" href="#/api/Ext.panel.Panel">Panel</a></div><div class="r"></div></div>',
		'<div class="doctab"><div class="l"></div><div class="m"><a class="icon-component" href="#/api/Ext.form.field.ComboBox">ComboBox</a></div><div class="r"></div></div>'
		].join('')
		xtype: 'doctabs',
		width: '100%'
		}
		]
		},