Hacky implementation of old-style member menus. (39ed6300) · Commits · extjs / jsduck

template/js/OverviewToolbar.js

+82 −21

Original line number	Diff line number	Diff line
		@@ -76,33 +76,94 @@ Ext.define('Docs.OverviewToolbar', {
		},

		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) {
		Ext.getCmp('doc-overview').scrollToEl("#" + item.memberName);
		var columns = [];
		for (var i=0; i<cfg.items.length; i+=25) {
		columns.push(cfg.items.slice(i, i+25));
		}

		var tpl = new Ext.XTemplate(
		'<table>',
		'<tr>',
		'<tpl for="columns">',
		'<td class="l">',
		'<tpl for=".">',
		'{[this.renderLink(values)]}',
		'</tpl>',
		'</td>',
		'</tpl>',
		'</tr>',
		'</table>',
		{
		renderLink: Ext.bind(function(member) {
		return this.createLink(this.docClass.name, member);
		}, this)
		}
		});
		);

		var menu = Ext.get(Ext.core.DomHelper.append(document.body, {
		html: tpl.apply({columns: columns}),
		style: "display: none; position: absolute",
		cls: 'member_sm'
		}));
		this.menus = this.menus \|\| [];
		this.menus.push(menu);

		var timeout;

		return Ext.create('Ext.button.Split', {
		cls: cfg.type,
		iconCls: 'icon-' + cfg.type,
		return Ext.create('Ext.toolbar.TextItem', {
		cls: 'icon-' + cfg.type,
		style: "padding-left: 20px; cursor: pointer;",
		text: cfg.title + ' <span class="num">' + cfg.items.length + '</span>',
		listeners: {
		render: function(item) {
		var el = item.getEl();
		el.on({
		click: function() {
		Ext.getCmp('doc-overview').scrollToEl("#m-" + cfg.type);
		},
		mouseover: function() {
		// hide other menus
		Ext.Array.forEach(this.menus, function(m) {
		if (m !== menu) {
		m.setStyle({display: "none"});
		}
		});
		clearTimeout(timeout);
		var p = el.getXY();
		menu.setStyle({left: p[0]+"px", top: (p[1]+23)+"px", display: "block"});
		},
		menu: menu
		mouseout: function() {
		timeout = Ext.Function.defer(function() {
		menu.setStyle({display: "none"});
		}, 200);
		},
		scope: this
		});
		menu.on({
		mouseover: function() {
		clearTimeout(timeout);
		},
		mouseout: function() {
		timeout = Ext.Function.defer(function() {
		menu.setStyle({display: "none"});
		}, 200);
		},
		scope: this
		});
		},
		beforeDestroy: function() {
		// clean up DOM
		menu.remove();
		},
		scope: this
		}
		});
		},

		createLink: function(cls, member) {
		var url = cls+"-"+member.tagname+"-"+member.name;
		return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{1}</a>', url, member.name);
		},

		createSubClassesButton: function(cfg) {
		var menu = Ext.create('Ext.menu.Menu', {

template/resources/sass/style.scss

+28 −27

Original line number	Diff line number	Diff line
		@@ -753,8 +753,9 @@ pre, code, kbd, samp, tt {
		.expandAllMembers {
		background: url(../images/expandcollapse.png) no-repeat -14px 2px; }
		.collapseAllMembers {
		background: url(../images/expandcollapse.png) no-repeat 2px 2px; }
		background: url(../images/expandcollapse.png) no-repeat 2px 2px; } }
		.member_sm {
		font-size: 12px;
		position: absolute;
		padding: 5px 15px 10px;
		background: #eaeaea;
		@@ -779,7 +780,7 @@ pre, code, kbd, samp, tt {
		color: #083772;
		text-decoration: underline; } }
		.l {
		vertical-align: top; } } }
		vertical-align: top; } }

		#doc-source {
		.x-panel-body-default {