Refactor hover menu button to separate class. (323b8441) · Commits · extjs / jsduck

template/index.html

+2 −1

Original line number	Diff line number	Diff line
		@@ -109,6 +109,7 @@
		<script type="text/javascript" src="js/PageHeader.js"></script>
		<script type="text/javascript" src="js/ClassTree.js"></script>
		<script type="text/javascript" src="js/OverviewPanel.js"></script>
		<script type="text/javascript" src="js/HoverMenuButton.js"></script>
		<script type="text/javascript" src="js/OverviewToolbar.js"></script>
		<script type="text/javascript" src="js/ClassPanel.js"></script>
		<script type="text/javascript" src="js/Guides.js"></script>

template/js/HoverMenuButton.js

0 → 100644

+120 −0

Original line number	Diff line number	Diff line
		/**
		* Toolbar button with menu that appears when hovered over.
		*/
		Ext.define('Docs.HoverMenuButton', {
		extend: 'Ext.toolbar.TextItem',
		componentCls: "hover-menu-button",

		/**
		* @cfg {[String]} links
		* Array of HTML anchor elements to be shown in menu.
		*/
		links: [],

		statics: {
		// Global list of all menus.
		// So we can hide all other menus while showing a specific one.
		menus: []
		},

		initComponent: function() {
		this.addEvents(
		/**
		* @event click
		* Fired when button clicked.
		*/
		"click"
		);

		// Append links count to button text
		this.text += ' <span class="num">' + this.links.length + '</span>';

		this.callParent(arguments);
		},

		onRender: function() {
		this.callParent(arguments);

		this.renderMenu();

		this.getEl().on({
		click: function() {
		this.fireEvent("click");
		},
		mouseover: function() {
		// hide other menus
		Ext.Array.forEach(Docs.HoverMenuButton.menus, function(menu) {
		if (menu !== this.menu) {
		menu.setStyle({display: "none"});
		}
		});
		// stop pending menuhide process
		clearTimeout(this.hideTimeout);
		// position menu right below button and show it
		var p = this.getEl().getXY();
		this.menu.setStyle({
		left: p[0]+"px",
		top: (p[1]+23)+"px",
		display: "block"
		});
		},
		mouseout: this.deferHideMenu,
		scope: this
		});

		this.menu.on({
		mouseover: function() {
		clearTimeout(this.hideTimeout);
		},
		mouseout: this.deferHideMenu,
		scope: this
		});
		},

		onDestroy: function() {
		// clean up DOM
		this.menu.remove();
		// remove from global menu list
		Ext.Array.remove(Docs.HoverMenuButton.menus, this.menu);

		this.callParent(arguments);
		},

		renderMenu: function() {
		this.menu = Ext.get(Ext.core.DomHelper.append(document.body, {
		html: this.renderMenuHtml(),
		cls: 'hover-menu-menu'
		}));
		Docs.HoverMenuButton.menus.push(this.menu);
		},

		renderMenuHtml: function() {
		// divide links into columns with at most 25 links in one column
		var columns = [];
		for (var i=0; i<this.links.length; i+=25) {
		columns.push(this.links.slice(i, i+25));
		}

		var tpl = new Ext.XTemplate(
		'<table>',
		'<tr>',
		'<tpl for="columns">',
		'<td>',
		'<tpl for=".">',
		'{.}',
		'</tpl>',
		'</td>',
		'</tpl>',
		'</tr>',
		'</table>'
		);
		return tpl.apply({columns: columns});
		},

		deferHideMenu: function() {
		this.hideTimeout = Ext.Function.defer(function() {
		this.menu.setStyle({display: "none"});
		}, 200, this);
		}

		});

template/js/OverviewToolbar.js

+11 −81

Original line number	Diff line number	Diff line
		@@ -26,9 +26,9 @@ Ext.define('Docs.OverviewToolbar', {
		var members = this.docClass[type];
		if (members.length) {
		this.items.push(this.createMemberButton({
		items: members,
		text: memberTitles[type],
		type: type,
		title: memberTitles[type]
		members: members
		}));
		}
		}
		@@ -76,86 +76,16 @@ Ext.define('Docs.OverviewToolbar', {
		},

		createMemberButton: function(cfg) {
		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.toolbar.TextItem', {
		return Ext.create('Docs.HoverMenuButton', {
		text: cfg.text,
		cls: 'icon-'+cfg.type,
		style: "padding-left: 20px; cursor: pointer;",
		text: cfg.title + ' <span class="num">' + cfg.items.length + '</span>',
		links: Ext.Array.map(cfg.members, function(m) {
		return this.createLink(this.docClass.name, m);
		}, this),
		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"});
		},
		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
		}
		});
		},

template/resources/sass/style.scss

+6 −2

Original line number	Diff line number	Diff line
		@@ -754,7 +754,11 @@ pre, code, kbd, samp, tt {
		background: url(../images/expandcollapse.png) no-repeat -14px 2px; }
		.collapseAllMembers {
		background: url(../images/expandcollapse.png) no-repeat 2px 2px; } }
		.member_sm {
		.hover-menu-button {
		padding-left: 20px;
		cursor: pointer; }
		.hover-menu-menu {
		display: none; // hide initially
		font-size: 12px;
		position: absolute;
		padding: 5px 15px 10px;
		@@ -779,7 +783,7 @@ pre, code, kbd, samp, tt {
		&:hover {
		color: #083772;
		text-decoration: underline; } }
		.l {
		td {
		vertical-align: top; } }

		#doc-source {