docs/js/OverviewToolbar.js

   1 /**
   2  * Toolbar with menus providing quick access to class members.
   3  */
   4 Ext.define('Docs.OverviewToolbar', {
   5     extend: 'Ext.toolbar.Toolbar',
   6     dock: 'top',
   7     cls: 'member-links',
   8     padding: '3 5',
   9
  10     /**
  11      * @cfg {Object} docClass
  12      * Documentation for a class.
  13      */
  14     docClass: {},
  15
  16     initComponent: function() {
  17         this.items = [];
  18
  19         var memberTitles = {
  20             cfg: "Configs",
  21             property: "Properties",
  22             method: "Methods",
  23             event: "Events"
  24         };
  25         for (var type in memberTitles) {
  26             var members = this.docClass[type];
  27             if (members.length) {
  28                 this.items.push(this.createMemberButton({
  29                     items: members,
  30                     type: type,
  31                     title: memberTitles[type]
  32                 }));
  33             }
  34         }
  35
  36         if (this.docClass.subclasses.length) {
  37             this.items.push(this.createSubClassesButton({
  38                 items: this.docClass.subclasses,
  39                 title: "Sub Classes"
  40             }));
  41         }
  42
  43         this.items = this.items.concat([
  44             { xtype: 'tbfill' },
  45             {
  46                 boxLabel: 'Hide inherited',
  47                 boxLabelAlign: 'before',
  48                 xtype: 'checkbox',
  49                 margin: '0 5 0 0',
  50                 padding: '0 0 5 0',
  51                 handler: this.hideInherited
  52             },
  53             {
  54                 xtype: 'button',
  55                 iconCls: 'expandAllMembers',
  56                 tooltip: "Expand all",
  57                 handler: function() {
  58                     Ext.Array.forEach(Ext.query('.side.expandable'), function(el) {
  59                         Ext.get(el).parent().addCls('open');
  60                     });
  61                 }
  62             },
  63             {
  64                 xtype: 'button',
  65                 iconCls: 'collapseAllMembers',
  66                 tooltip: "Collapse all",
  67                 handler: function() {
  68                     Ext.Array.forEach(Ext.query('.side.expandable'), function(el) {
  69                         Ext.get(el).parent().removeCls('open');
  70                     });
  71                 }
  72             }
  73         ]);
  74
  75         this.callParent(arguments);
  76     },
  77
  78     createMemberButton: function(cfg) {
  79         var menu = Ext.create('Ext.menu.Menu', {
  80             items: Ext.Array.map(cfg.items, function(m) {
  81                 return {
  82                     text: m.name,
  83                     memberName: cfg.type + '-' + m.name
  84                 };
  85             }),
  86             plain: true,
  87             listeners: {
  88                 click: function(menu, item) {
  89                     Ext.getCmp('doc-overview').scrollToEl("#" + item.memberName);
  90                 }
  91             }
  92         });
  93
  94         return Ext.create('Ext.button.Split', {
  95             cls: cfg.type,
  96             iconCls: 'icon-' + cfg.type,
  97             text: cfg.title + ' <span class="num">' + cfg.items.length + '</span>',
  98             listeners: {
  99                 click: function() {
 100                     Ext.getCmp('doc-overview').scrollToEl("#m-" + cfg.type);
 101                 }
 102             },
 103             menu: menu
 104         });
 105     },
 106
 107     createSubClassesButton: function(cfg) {
 108         var menu = Ext.create('Ext.menu.Menu', {
 109             items: Ext.Array.map(cfg.items, function(className) {
 110                 return {text: className, clsName: className};
 111             }),
 112             plain: true,
 113             listeners: {
 114                 click: function(menu, item) {
 115                     Docs.ClassLoader.load(item.clsName);
 116                 }
 117             }
 118         });
 119
 120         return Ext.create('Ext.button.Button', {
 121             cls: 'subcls',
 122             iconCls: 'icon-subclass',
 123             text: cfg.title + ' <span class="num">' + cfg.items.length + '</span>',
 124             menu: menu
 125         });
 126     },
 127
 128     hideInherited: function(el) {
 129         var hide = el.checked;
 130
 131         // show/hide all inherited members
 132         Ext.Array.forEach(Ext.query('.member.inherited'), function(m) {
 133             Ext.get(m).setStyle({display: hide ? 'none' : 'block'});
 134         });
 135
 136         // Remove all first-child classes
 137         Ext.Array.forEach(Ext.query('.member.first-child'), function(m) {
 138             Ext.get(m).removeCls('first-child');
 139         });
 140
 141         Ext.Array.forEach(['cfg', 'property', 'method', 'event'], function(m) {
 142             var sectionId = '#m-' + m;
 143
 144             // Hide the section completely if all items in it are inherited
 145             if (Ext.query(sectionId+' .member.not-inherited').length === 0) {
 146                 var section = Ext.query(sectionId)[0];
 147                 section && Ext.get(section).setStyle({display: hide ? 'none' : 'block'});
 148             }
 149
 150             // add first-child class to first member in section
 151             var sectionMembers = Ext.query(sectionId+' .member' + (hide ? ".not-inherited" : ""));
 152             if (sectionMembers.length > 0) {
 153                 Ext.get(sectionMembers[0]).addCls('first-child');
 154             }
 155         });
 156     }
 157 });