HoverMenuButton now used by both tree/toolbar. (c9e8cd8c) · Commits · extjs / jsduck

template/app/view/HoverMenu.js

+2 −1

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

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

template/app/view/cls/HoverMenuButton.js→template/app/view/HoverMenuButton.js

+58 −34

Original line number	Diff line number	Diff line
		/**
		* Toolbar button with menu that appears when hovered over.
		*/
		Ext.define('Docs.view.cls.HoverMenuButton', {
		Ext.define('Docs.view.HoverMenuButton', {
		extend: 'Ext.toolbar.TextItem',
		alias: 'widget.hovermenubutton',
		componentCls: "hover-menu-button",
		requires: [
		'Docs.view.HoverMenu'
		],

		/**
		* @cfg {[String]} links
		* Array of HTML anchor elements to be shown in menu.
		* @cfg {Ext.data.Store} store
		* Store with menu items (required).
		*/
		links: [],

		/**
		* @cfg {Object} menuCfg
		* Additional config options for {@link Docs.view.HoverMenu}
		*/
		menuCfg: {},

		/**
		* @cfg {Boolean} showCount
		* True to show small number in button indicating the number of items in menu.
		* Defaults to false.
		*/
		showCount: false,

		statics: {
		// Global list of all menus.
		@@ -26,12 +39,28 @@ Ext.define('Docs.view.cls.HoverMenuButton', {
		* @event click
		* Fired when button clicked.
		*/
		"click"
		"click",
		/**
		* @event closeclick
		* Fired when close link in menu clicked.
		* @param {String} name Name of the class and or member that was closed.
		* For example "Ext.Ajax" or "Ext.Ajax-method-request".
		*/
		"closeclick"
		);

		// Append links count to button text
		// Append links count to button text, update it when store filtered
		if (this.showCount) {
		this.initialText = this.text;
		this.text += ' <span class="num">' + this.links.length + '</span>';
		this.text += ' <sup>' + this.store.getCount() + '</sup>';
		this.store.on("datachanged", function() {
		this.setText(this.initialText + ' <sup>' + this.store.getCount() + '</sup>');
		}, this);
		}

		this.menu = Ext.create('Docs.view.HoverMenu', Ext.apply({
		store: this.store
		}, this.menuCfg));

		this.callParent(arguments);
		},
		@@ -47,16 +76,16 @@ Ext.define('Docs.view.cls.HoverMenuButton', {
		},
		mouseover: function() {
		// hide other menus
		Ext.Array.forEach(Docs.view.cls.HoverMenuButton.menus, function(menu) {
		Ext.Array.forEach(Docs.view.HoverMenuButton.menus, function(menu) {
		if (menu !== this.menu) {
		menu.hide();
		}
		});
		// stop pending menuhide process
		clearTimeout(this.hideTimeout);
		this.menu.show();
		// position menu right below button and show it
		var p = this.getEl().getXY();
		this.menu.show();
		this.menu.getEl().setStyle({
		left: (p[0]-10)+"px",
		top: (p[1]+23)+"px"
		@@ -73,51 +102,46 @@ Ext.define('Docs.view.cls.HoverMenuButton', {
		mouseout: this.deferHideMenu,
		scope: this
		});

		},

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

		this.callParent(arguments);
		},

		renderMenu: function() {
		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.getEl().setVisibilityMode(Ext.core.Element.DISPLAY);
		this.menu.hide();

		this.menu.getEl().addListener('click', function() {
		this.menu.getEl().addListener('click', function(e) {
		if (e.getTarget(".close")) {
		this.fireEvent("closeclick", e.getTarget().rel);
		} else {
		this.menu.hide();
		}
		e.preventDefault();
		}, this);
		Docs.view.cls.HoverMenuButton.menus.push(this.menu);
		},

		/**
		* Changes the list of links in menu.
		* @param {[Object]} links
		*/
		setLinks: function(links) {
		this.links = links;
		this.setText(this.initialText + ' <span class="num">' + this.links.length + '</span>');
		this.store.removeAll();
		this.store.add(this.links);
		Docs.view.HoverMenuButton.menus.push(this.menu);
		},

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

		/**
		* Returns the store used by menu.
		* @return {Ext.data.Store}
		*/
		getStore: function() {
		return this.store;
		}

		});

template/app/view/cls/Toolbar.js

+33 −28

Original line number	Diff line number	Diff line
		@@ -4,7 +4,7 @@
		Ext.define('Docs.view.cls.Toolbar', {
		extend: 'Ext.toolbar.Toolbar',
		requires: [
		'Docs.view.cls.HoverMenuButton'
		'Docs.view.HoverMenuButton'
		],

		dock: 'top',
		@@ -84,12 +84,15 @@ Ext.define('Docs.view.cls.Toolbar', {
		},

		createMemberButton: function(cfg) {
		return Ext.create('Docs.view.cls.HoverMenuButton', {
		var data = Ext.Array.map(cfg.members, function(m) {
		return this.createLinkRecord(this.docClass.name, m);
		}, this);

		return Ext.create('Docs.view.HoverMenuButton', {
		text: cfg.text,
		cls: 'icon-'+cfg.type,
		links: Ext.Array.map(cfg.members, function(m) {
		return this.createLink(this.docClass.name, m);
		}, this),
		store: this.createStore(data),
		showCount: true,
		listeners: {
		click: function() {
		Ext.getCmp('doc-overview').scrollToEl("#m-" + cfg.type);
		@@ -99,29 +102,34 @@ Ext.define('Docs.view.cls.Toolbar', {
		},

		createClassListButton: function(text, classes) {
		return Ext.create('Docs.view.cls.HoverMenuButton', {
		var data = Ext.Array.map(classes, function(cls) {
		return this.createLinkRecord(cls);
		}, this);

		return Ext.create('Docs.view.HoverMenuButton', {
		text: text,
		cls: 'icon-subclass',
		links: Ext.Array.map(classes, function(cls) {
		return this.createLink(cls);
		}, this)
		showCount: true,
		store: this.createStore(data)
		});
		},

		// creates store tha holds link records
		createStore: function(records) {
		var store = Ext.create('Ext.data.Store', {
		fields: ['id', 'cls', 'url', 'label', 'inherited']
		});
		store.add(records);
		return store;
		},

		// Creates link object referencing a class (and optionally a class member)
		createLink: function(cls, member) {
		if (member) {
		var url = cls+"-"+member.tagname+"-"+member.name;
		var label = member.name;
		}
		else {
		var url = cls;
		var label = cls;
		}
		createLinkRecord: function(cls, member) {
		return {
		cls: cls,
		url: url,
		label: label
		url: member ? cls+"-"+member.tagname+"-"+member.name : cls,
		label: member ? member.name : cls,
		inherited: member ? member.member !== cls : false
		};
		},

		@@ -154,16 +162,13 @@ Ext.define('Docs.view.cls.Toolbar', {
		}

		if (this.memberButtons[type]) {
		var members = this.docClass[type];
		var store = this.memberButtons[type].getStore();
		if (hide) {
		members = Ext.Array.filter(members, function(m) {
		return m.member === this.docClass.name;
		}, this);
		store.filterBy(function(m) { return !m.get("inherited"); });
		}
		else {
		store.clearFilter();
		}
		var links = Ext.Array.map(members, function(m) {
		return this.createLink(this.docClass.name, m);
		}, this);
		this.memberButtons[type].setLinks(links);
		}
		}, this);
		}

template/app/view/tree/MenuButton.js

deleted100644 → 0

+0 −94

Original line number	Diff line number	Diff line
		/**
		* Button with fly-out menu of history/favorites entries.
		*/
		Ext.define('Docs.view.tree.MenuButton', {
		extend: 'Ext.Component',
		alias: 'widget.menubutton',
		requires: [
		'Docs.view.HoverMenu'
		],

		/**
		* @cfg {Ext.data.Store} store
		* The store that contains the menu entries.
		*/
		/**
		* @cfg {String} text
		* Text for the button.
		*/
		text: "",
		/**
		* @cfg {String} emptyText
		* Text to display in menu when store empty.
		*/
		emptyText: "",

		initComponent: function() {
		this.addEvents(
		/**
		* @event closeclick
		* Fired when close link in menu clicked.
		* @param {String} cls Name of the class that was closed.
		*/
		"closeclick"
		);
		this.html = '<span></span>' + this.text;

		this.callParent();
		},

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

		this.getEl().on({
		mouseover: function() {
		if (!this.hoverMenu) {
		this.renderMenu();
		}
		this.hoverMenu.show();
		clearTimeout(this.hideTimeout);
		},
		mouseout: this.deferHideMenu,
		scope: this
		});
		},

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

		this.hoverMenu.getEl().setVisibilityMode(Ext.core.Element.DISPLAY);

		this.hoverMenu.getEl().on({
		mouseover: function() {
		clearTimeout(this.hideTimeout);
		},
		mouseout: this.deferHideMenu,
		click: function(e) {
		if (e.getTarget(".close")) {
		this.fireEvent("closeclick", e.getTarget().rel);
		} else {
		this.hoverMenu.hide();
		}
		e.preventDefault();
		},
		scope: this
		});

		var p = this.getEl().getXY();
		this.hoverMenu.getEl().setStyle({
		left: "20px",
		top: (p[1]+23)+"px"
		});
		},

		deferHideMenu: function() {
		this.hideTimeout = Ext.Function.defer(function() {
		this.hoverMenu.hide();
		}, 200, this);
		}
		});

template/app/view/tree/Tree.js

+15 −7

Original line number	Diff line number	Diff line
		@@ -5,7 +5,7 @@ Ext.define('Docs.view.tree.Tree', {
		extend: 'Ext.tree.Panel',
		alias : 'widget.classtree',
		requires: [
		'Docs.view.tree.MenuButton',
		'Docs.view.HoverMenuButton',
		'Docs.Favorites',
		'Docs.History'
		],
		@@ -50,10 +50,14 @@ Ext.define('Docs.view.tree.Tree', {
		margin: '0 0 15 0',
		items: [
		{
		xtype: 'menubutton',
		id: 'favoritesBtn',
		xtype: 'hovermenubutton',
		cls: 'icon-fav sidebar',
		text: 'Favorites',
		menuCfg: {
		cls: 'sidebar',
		emptyText: 'No favorites',
		showCloseButtons: true
		},
		store: Ext.getStore('Favorites'),
		listeners: {
		closeclick: function(cls) {
		@@ -62,10 +66,14 @@ Ext.define('Docs.view.tree.Tree', {
		}
		},
		{
		xtype: 'menubutton',
		id: 'historyBtn',
		xtype: 'hovermenubutton',
		cls: 'icon-hist sidebar',
		text: 'History',
		menuCfg: {
		cls: 'sidebar',
		emptyText: 'No history',
		showCloseButtons: true
		},
		store: Ext.getStore('History'),
		listeners: {
		closeclick: function(cls) {