docs/app/view/cls/Toolbar.js

   1 /**
   2  * Toolbar with menus providing quick access to class members.
   3  */
   4 Ext.define('Docs.view.cls.Toolbar', {
   5     extend: 'Ext.toolbar.Toolbar',
   6     requires: [
   7         'Docs.view.HoverMenuButton',
   8         'Docs.Settings'
   9     ],
  10
  11     dock: 'top',
  12     cls: 'member-links',
  13     padding: '3 5',
  14
  15     /**
  16      * @cfg {Object} docClass
  17      * Documentation for a class.
  18      */
  19     docClass: {},
  20
  21     initComponent: function() {
  22         this.items = [];
  23         this.memberButtons = {};
  24
  25         var memberTitles = {
  26             cfg: "Configs",
  27             property: "Properties",
  28             method: "Methods",
  29             event: "Events"
  30         };
  31         for (var type in memberTitles) {
  32             var members = this.docClass.members[type];
  33             if (members.length) {
  34                 var btn = this.createMemberButton({
  35                     text: memberTitles[type],
  36                     type: type,
  37                     members: members
  38                 });
  39                 this.memberButtons[type] = btn;
  40                 this.items.push(btn);
  41             }
  42         }
  43
  44         if (this.docClass.subclasses.length) {
  45             this.items.push(this.createClassListButton("Sub Classes", this.docClass.subclasses));
  46         }
  47         if (this.docClass.mixedInto.length) {
  48             this.items.push(this.createClassListButton("Mixed Into", this.docClass.mixedInto));
  49         }
  50
  51         this.items = this.items.concat([
  52             { xtype: 'tbfill' },
  53             {
  54                 boxLabel: 'Hide inherited',
  55                 boxLabelAlign: 'before',
  56                 xtype: 'checkbox',
  57                 margin: '0 5 0 0',
  58                 padding: '0 0 5 0',
  59                 checked: Docs.Settings.get("hideInherited"),
  60                 handler: function(el) {
  61                     this.hideInherited(el.checked);
  62                 },
  63                 scope: this
  64             },
  65             {
  66                 xtype: 'button',
  67                 iconCls: 'expandAllMembers',
  68                 tooltip: "Expand all",
  69                 handler: function() {
  70                     Ext.Array.forEach(Ext.query('.side.expandable'), function(el) {
  71                         Ext.get(el).parent().addCls('open');
  72                     });
  73                 }
  74             },
  75             {
  76                 xtype: 'button',
  77                 iconCls: 'collapseAllMembers',
  78                 tooltip: "Collapse all",
  79                 handler: function() {
  80                     Ext.Array.forEach(Ext.query('.side.expandable'), function(el) {
  81                         Ext.get(el).parent().removeCls('open');
  82                     });
  83                 }
  84             }
  85         ]);
  86
  87         this.callParent(arguments);
  88     },
  89
  90     createMemberButton: function(cfg) {
  91         var data = Ext.Array.map(cfg.members, function(m) {
  92             return this.createLinkRecord(this.docClass.name, m);
  93         }, this);
  94
  95         return Ext.create('Docs.view.HoverMenuButton', {
  96             text: cfg.text,
  97             cls: 'icon-'+cfg.type,
  98             store: this.createStore(data),
  99             showCount: true,
 100             listeners: {
 101                 click: function() {
 102                     this.up('classoverview').scrollToEl("#m-" + cfg.type);
 103                 },
 104                 scope: this
 105             }
 106         });
 107     },
 108
 109     createClassListButton: function(text, classes) {
 110         var data = Ext.Array.map(classes, function(cls) {
 111             return this.createLinkRecord(cls);
 112         }, this);
 113
 114         return Ext.create('Docs.view.HoverMenuButton', {
 115             text: text,
 116             cls: 'icon-subclass',
 117             showCount: true,
 118             store: this.createStore(data)
 119         });
 120     },
 121
 122     // creates store tha holds link records
 123     createStore: function(records) {
 124         var store = Ext.create('Ext.data.Store', {
 125             fields: ['id', 'cls', 'url', 'label', 'inherited']
 126         });
 127         store.add(records);
 128         return store;
 129     },
 130
 131     // Creates link object referencing a class (and optionally a class member)
 132     createLinkRecord: function(cls, member) {
 133         return {
 134             cls: cls,
 135             url: member ? cls+"-"+member.tagname+"-"+member.name : cls,
 136             label: member ? member.name : cls,
 137             inherited: member ? member.owner !== cls : false
 138         };
 139     },
 140
 141     /**
 142      * Hides or unhides inherited members.
 143      * @param {Boolean} hide
 144      */
 145     hideInherited: function(hide) {
 146         Docs.Settings.set("hideInherited", hide);
 147
 148         // show/hide all inherited members
 149         Ext.Array.forEach(Ext.query('.member.inherited'), function(m) {
 150             Ext.get(m).setStyle({display: hide ? 'none' : 'block'});
 151         });
 152
 153         // Remove all first-child classes
 154         Ext.Array.forEach(Ext.query('.member.first-child'), function(m) {
 155             Ext.get(m).removeCls('first-child');
 156         });
 157
 158         Ext.Array.forEach(['cfg', 'property', 'method', 'event'], function(type) {
 159             var sectionId = '#m-' + type;
 160
 161             // Hide the section completely if all items in it are inherited
 162             if (Ext.query(sectionId+' .member.not-inherited').length === 0) {
 163                 var section = Ext.query(sectionId)[0];
 164                 section && Ext.get(section).setStyle({display: hide ? 'none' : 'block'});
 165             }
 166
 167             // add first-child class to first member in section
 168             var sectionMembers = Ext.query(sectionId+' .member' + (hide ? ".not-inherited" : ""));
 169             if (sectionMembers.length > 0) {
 170                 Ext.get(sectionMembers[0]).addCls('first-child');
 171             }
 172
 173             if (this.memberButtons[type]) {
 174                 var store = this.memberButtons[type].getStore();
 175                 if (hide) {
 176                     store.filterBy(function(m) { return !m.get("inherited"); });
 177                 }
 178                 else {
 179                     store.clearFilter();
 180                 }
 181             }
 182         }, this);
 183     }
 184 });