Refactored OverviewToolbar. (8d9164dd) · Commits · extjs / jsduck

template/js/OverviewToolbar.js

+126 −102

Original line number	Diff line number	Diff line
		/**
		* Toolbar with menus providing quick access to class members.
		*/
		Ext.define('Docs.OverviewToolbar', {
		extend: 'Ext.toolbar.Toolbar',
		dock: 'top',
		@@ -5,31 +8,89 @@ Ext.define('Docs.OverviewToolbar', {
		cls: 'member-links',
		padding: '3 5',

		items: [],

		initComponent: function() {

		var self = this;
		var members = [
		['cfgs', 'Configs', 'configs', 'config'],
		['properties', 'Properties', 'properties', 'property'],
		['methods', 'Methods', 'methods', 'method'],
		['events', 'Events', 'events', 'event']
		];
		this.items = [];

		members.forEach(function(member) {

		if (clsInfo[member[0]] && clsInfo[member[0]].length) {
		if (clsInfo.cfgs.length) {
		this.items.push(this.createMemberButton({
		items: clsInfo.cfgs,
		type: "config",
		cls: "configs",
		title: "Configs"
		}));
		}
		if (clsInfo.properties.length) {
		this.items.push(this.createMemberButton({
		items: clsInfo.properties,
		type: "property",
		cls: "properties",
		title: "Properties"
		}));
		}
		if (clsInfo.methods.length) {
		this.items.push(this.createMemberButton({
		items: clsInfo.methods,
		type: "method",
		cls: "methods",
		title: "Methods"
		}));
		}
		if (clsInfo.events.length) {
		this.items.push(this.createMemberButton({
		items: clsInfo.events,
		type: "event",
		cls: "events",
		title: "Events"
		}));
		}
		if (clsInfo.subclasses.length) {
		this.items.push(this.createSubClassesButton({
		items: clsInfo.subclasses,
		title: "Sub Classes"
		}));
		}

		var menuItems = [];
		for(var i=0; i< clsInfo[member[0]].length; i++) {
		var memberName = clsInfo[member[0]][i];
		menuItems.push({text: memberName, memberName: member[3] + '-' + memberName});
		this.items = this.items.concat([
		{ xtype: 'tbfill' },
		{
		boxLabel: 'Hide inherited',
		boxLabelAlign: 'before',
		xtype: 'checkbox',
		margin: '0 5 0 0',
		padding: '0 0 5 0',
		handler: this.hideInherited
		},
		{
		xtype: 'button',
		iconCls: 'expandAllMembers',
		handler: function() {
		Ext.Array.forEach(Ext.query('.member'), function(el) {
		Ext.get(el).addCls('open');
		});
		}
		},
		{
		xtype: 'button',
		iconCls: 'collapseAllMembers',
		handler: function() {
		Ext.Array.forEach(Ext.query('.member'), function(el) {
		Ext.get(el).removeCls('open');
		});
		}
		}
		]);

		this.callParent(arguments);
		},

		var butMenu = Ext.create('Ext.menu.Menu', {
		items: menuItems,
		createMemberButton: function(cfg) {
		var menu = Ext.create('Ext.menu.Menu', {
		items: Ext.Array.map(cfg.items, function(m) {
		return {
		text: m.name,
		memberName: cfg.type + '-' + m.name
		};
		}),
		plain: true,
		listeners: {
		click: function(menu, item) {
		@@ -38,29 +99,24 @@ Ext.define('Docs.OverviewToolbar', {
		}
		});

		self.items.push({
		xtype: 'splitbutton',
		iconCls: 'icon-' + member[3],
		cls: member[2],
		text: member[1] + ' <span class="num">' + clsInfo[member[0]].length + '</span>',
		return Ext.create('Ext.button.Split', {
		cls: cfg.cls,
		iconCls: 'icon-' + cfg.type,
		text: cfg.title + ' <span class="num">' + cfg.items.length + '</span>',
		listeners: {
		click: function() {
		Ext.getCmp('doc-overview').scrollToEl("a[name=" + member[2] + "]");
		Ext.getCmp('doc-overview').scrollToEl("a[name=" + cfg.cls + "]");
		}
		},
		menu: butMenu
		});
		}
		menu: menu
		});
		},

		if (clsInfo.subclasses.length) {
		var menuItems = [];
		for(var i=0; i< clsInfo.subclasses.length; i++) {
		menuItems.push({text: clsInfo.subclasses[i], clsName: clsInfo.subclasses[i]});
		}

		var butMenu = Ext.create('Ext.menu.Menu', {
		items: menuItems,
		createSubClassesButton: function(cfg) {
		var menu = Ext.create('Ext.menu.Menu', {
		items: Ext.Array.map(cfg.items, function(className) {
		return {text: className, clsName: className};
		}),
		plain: true,
		listeners: {
		click: function(menu, item) {
		@@ -69,25 +125,16 @@ Ext.define('Docs.OverviewToolbar', {
		}
		});

		self.items.push({
		xtype: 'button',
		return Ext.create('Ext.button.Button', {
		cls: 'subcls',
		iconCls: 'icon-subclass',
		text: 'Sub Classes <span class="num">' + clsInfo.subclasses.length + '</span>',
		menu: butMenu
		text: cfg.title + ' <span class="num">' + cfg.items.length + '</span>',
		menu: menu
		});
		}
		},

		self.items = self.items.concat([
		{ xtype: 'tbfill' },
		{
		boxLabel: 'Hide inherited',
		boxLabelAlign: 'before',
		xtype: 'checkbox',
		margin: '0 5 0 0',
		padding: '0 0 5 0',
		handler: function(el) {
		Ext.query('.member.inherited').forEach(function(m) {
		hideInherited: function(el) {
		Ext.Array.forEach(Ext.query('.member.inherited'), function(m) {
		if (el.checked) {
		Ext.get(m).setStyle({display: 'none'});
		} else {
		@@ -95,11 +142,11 @@ Ext.define('Docs.OverviewToolbar', {
		}
		});

		Ext.query('.member.f').forEach(function(m) {
		Ext.Array.forEach(Ext.query('.member.f'), function(m) {
		Ext.get(m).removeCls('f');
		});

		['cfgs', 'properties', 'methods', 'events'].forEach(function(m) {
		Ext.Array.forEach(['cfgs', 'properties', 'methods', 'events'], function(m) {
		// If the number of inherited members is the same as the total number of members...
		if (Ext.query('.m-'+m+' .member').length == Ext.query('.m-'+m+' .member.inherited').length) {
		var first = Ext.query('.m-'+m)[0];
		@@ -118,27 +165,4 @@ Ext.define('Docs.OverviewToolbar', {
		}
		});
		}
		},
		{
		xtype: 'button',
		iconCls: 'expandAllMembers',
		handler: function() {
		Ext.query('.member').forEach(function(el) {
		Ext.get(el).addCls('open');
		});
		}
		},
		{
		xtype: 'button',
		iconCls: 'collapseAllMembers',
		handler: function() {
		Ext.query('.member').forEach(function(el) {
		Ext.get(el).removeCls('open');
		});
		}
		}
		]);

		this.callParent(arguments);
		}
		});