Tab fixes and cleanup (66ea8e62) · Commits · extjs / jsduck

template/app/controller/Classes.js

+1 −1

Original line number	Diff line number	Diff line
		@@ -231,7 +231,7 @@ Ext.define('Docs.controller.Classes', {

		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})
		Ext.getCmp('doctabs').addTab({href: '#/api/' + cls.name, text: clsName, iconCls: iconCls.raw.iconCls})
		}

		if (anchor) {

template/app/controller/Tabs.js

+4 −1

Original line number	Diff line number	Diff line
		/**
		* Controller for tabs. Adds listeners for clicking tabs and their corresponding 'close' buttons
		*/
		Ext.define('Docs.controller.Tabs', {
		extend: 'Ext.app.Controller',

		@@ -18,13 +21,13 @@ Ext.define('Docs.controller.Tabs', {
		cmp.el.addListener('click', function(evt, el) {
		cmp.justClosed = true;
		var docTab = Ext.get(el).up('.doctab');
		Ext.getCmp('doctabs').removeTab(docTab.down('.docClass').getAttribute('href'));
		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

template/app/view/Tabs.js

+53 −58

Original line number	Diff line number	Diff line
		/**
		* Handles the custom Tab bar functionality and tracking of Tabs. This is a cu
		*/
		Ext.define('Docs.view.Tabs', {
		extend: 'Ext.container.Container',
		alias: 'widget.doctabs',
		@@ -9,32 +12,52 @@ Ext.define('Docs.view.Tabs', {

		initComponent: function() {

		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>',
		var tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'<div class="doctab {cls}{active}">',
		'<div class="l"></div>',
		'<div class="m"><a class="docClass" href="#"> </a></div>',
		'<div class="r"></div>',
		'</div>',
		'</tpl>',
		'<div style="float: left; width: 8px"> </div>'
		].join('');
		);

		this.html = tpl.applyTemplate([
		{ cls: 'home' },
		{ cls: 'api', active: " active" },
		{ cls: 'videos' },
		{ cls: 'guides' },
		{ cls: 'themes' }
		]);

		this.callParent();
		},

		addTab: function(item) {

		if (!Ext.Array.contains(this.openTabs, item.cls)) {
		/**
		* Adds a new tab to the Tab bar
		*
		* @param {Object} tab
		* @param {String} tab.href URL of the resource
		* @param {String} tab.text Text to be used on the tab
		* @param {String} tab.iconCls CSS class to be used as the icon
		*/
		addTab: function(tab) {

		if (!Ext.Array.contains(this.openTabs, tab.href)) {
		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>',
		'<a class="icn {iconCls}" href="#"> </a>',
		'<a class="docClass" href="{href}">{text}</a>',
		'</div>',
		'<div class="r"></div>',
		'</div>'
		)
		var docTab = Ext.get(tpl.append(this.el.dom, item));
		var docTab = Ext.get(tpl.append(this.el.dom, tab));

		// Effect to 'slide' the tab out when it is created.
		var width = docTab.getWidth();
		docTab.setStyle('width', '10px')
		docTab.setStyle({visibility: 'visible'})
		@@ -42,11 +65,17 @@ Ext.define('Docs.view.Tabs', {
		to: { width: width }
		});

		this.openTabs.push(item.cls);
		this.openTabs.push(tab.href);
		}
		this.activateTab(item.cls)

		this.activateTab(tab.href)
		},

		/**
		* Activates a tab
		*
		* @param {String} url URL of the tab to activate
		*/
		activateTab: function(url) {
		this.activeTab = Ext.Array.indexOf(this.openTabs, url);
		Ext.Array.each(Ext.query('.doctab a[class=docClass]'), function(d) {
		@@ -56,59 +85,25 @@ Ext.define('Docs.view.Tabs', {
		if (activeTab) Ext.get(activeTab).up('.doctab').addCls('active');
		},

		/**
		* Removes a tab from the tab bar. If the tab to be removed is the current tab,
		* activate the tab to the right.
		*
		* @param {String} url URL of the tab to remove
		*/
		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], {});
		if (idx == this.openTabs.length) idx -= 1;
		Docs.App.getController('Classes').handleUrlClick(this.openTabs[idx], {});
		}
		}
		}
		});