Share HoverMenu view between two types of buttons. (0fb537d8) · Commits · extjs / jsduck

template/app/view/HoverMenu.js

0 → 100644

+56 −0

Original line number	Diff line number	Diff line
		/**
		* Menu shown by cls.HoverMenuButton and tree.MenuButton.
		*/
		Ext.define('Docs.view.HoverMenu', {
		extend: 'Ext.view.View',

		itemSelector: 'div.item',
		deferEmptyText: false,
		renderTo: Ext.getBody(),

		/**
		* @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,

		initComponent: function() {
		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>',
		'</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;
		return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{1}</a>', url, label);
		}
		}
		);

		this.callParent();
		}
		});

template/app/view/cls/HoverMenuButton.js

+26 −37

Original line number	Diff line number	Diff line
		@@ -4,6 +4,9 @@
		Ext.define('Docs.view.cls.HoverMenuButton', {
		extend: 'Ext.toolbar.TextItem',
		componentCls: "hover-menu-button",
		requires: [
		'Docs.view.HoverMenu'
		],

		/**
		* @cfg {[String]} links
		@@ -46,24 +49,24 @@ Ext.define('Docs.view.cls.HoverMenuButton', {
		// hide other menus
		Ext.Array.forEach(Docs.view.cls.HoverMenuButton.menus, function(menu) {
		if (menu !== this.menu) {
		menu.setStyle({display: "none"});
		menu.hide();
		}
		});
		// stop pending menuhide process
		clearTimeout(this.hideTimeout);
		// position menu right below button and show it
		var p = this.getEl().getXY();
		this.menu.setStyle({
		this.menu.show();
		this.menu.getEl().setStyle({
		left: (p[0] - 10)+"px",
		top: (p[1]+23)+"px",
		display: "block"
		top: (p[1]+23)+"px"
		});
		},
		mouseout: this.deferHideMenu,
		scope: this
		});

		this.menu.on({
		this.menu.getEl().on({
		mouseover: function() {
		clearTimeout(this.hideTimeout);
		},
		@@ -74,7 +77,7 @@ Ext.define('Docs.view.cls.HoverMenuButton', {

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

		@@ -82,52 +85,38 @@ Ext.define('Docs.view.cls.HoverMenuButton', {
		},

		renderMenu: function() {
		this.menu = Ext.get(Ext.core.DomHelper.append(document.body, {
		html: this.renderMenuHtml(),
		this.store = Ext.create('Ext.data.Store', {
		fields: ['id', 'cls', 'url', 'label']
		});
		this.store.add(this.links);

		this.menu = Ext.create('Docs.view.HoverMenu', {
		store: this.store,
		cls: 'hover-menu-menu'
		}));
		this.menu.addListener('click', function() {
		this.menu.setStyle({display: "none"});
		});
		this.menu.getEl().setVisibilityMode(Ext.core.Element.DISPLAY);
		this.menu.hide();

		this.menu.getEl().addListener('click', function() {
		this.menu.hide();
		}, this);
		Docs.view.cls.HoverMenuButton.menus.push(this.menu);
		},

		/**
		* Changes the list of links in menu.
		* @param {[String]} links
		* @param {[Object]} links
		*/
		setLinks: function(links) {
		this.links = links;
		this.setText(this.initialText + ' <span class="num">' + this.links.length + '</span>');
		this.menu.update(this.renderMenuHtml());
		},

		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});
		this.store.removeAll();
		this.store.add(this.links);
		},

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

template/app/view/cls/Toolbar.js

+6 −2

Original line number	Diff line number	Diff line
		@@ -108,7 +108,7 @@ Ext.define('Docs.view.cls.Toolbar', {
		});
		},

		// Creates HTML link to class (and optionally to class member)
		// Creates link object referencing a class (and optionally a class member)
		createLink: function(cls, member) {
		if (member) {
		var url = cls+"-"+member.tagname+"-"+member.name;
		@@ -118,7 +118,11 @@ Ext.define('Docs.view.cls.Toolbar', {
		var url = cls;
		var label = cls;
		}
		return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{1}</a>', url, label);
		return {
		cls: cls,
		url: url,
		label: label
		};
		},

		hideInherited: function(el) {

template/app/view/tree/HoverMenu.js

deleted100644 → 0

+0 −20

Original line number	Diff line number	Diff line
		/**
		* Menu of history items.
		*/
		Ext.define('Docs.view.tree.HoverMenu', {
		extend: 'Ext.view.View',

		itemSelector: 'div.item',
		deferEmptyText: false,
		renderTo: Ext.getBody(),
		cls: 'hover-menu-menu show',

		tpl: new Ext.XTemplate(
		'<tpl for=".">',
		'<div class="item">',
		'<a href="#/api/{cls}" rel="{cls}" class="docClass">{cls}</a>',
		'<a class="close" href="#" rel="{cls}">x</a>',
		'</div>',
		'</tpl>'
		)
		});

template/app/view/tree/MenuButton.js

+5 −4

Original line number	Diff line number	Diff line
		@@ -5,7 +5,7 @@ Ext.define('Docs.view.tree.MenuButton', {
		extend: 'Ext.Component',
		alias: 'widget.menubutton',
		requires: [
		'Docs.view.tree.HoverMenu'
		'Docs.view.HoverMenu'
		],

		/**
		@@ -54,9 +54,11 @@ Ext.define('Docs.view.tree.MenuButton', {
		},

		renderMenu: function() {
		this.hoverMenu = Ext.create('Docs.view.tree.HoverMenu', {
		this.hoverMenu = Ext.create('Docs.view.HoverMenu', {
		store: this.store,
		emptyText: this.emptyText,
		store: this.store
		cls: 'hover-menu-menu show',
		showCloseButtons: true
		});

		this.hoverMenu.getEl().setVisibilityMode(Ext.core.Element.DISPLAY);
		@@ -80,7 +82,6 @@ Ext.define('Docs.view.tree.MenuButton', {
		var p = this.getEl().getXY();
		this.hoverMenu.getEl().setStyle({
		left: "20px",
		width: "220px",
		top: (p[1]+23)+"px"
		});
		},