From 39ed63008e2caafd333485f206e59a2fef6266f8 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Tue, 17 May 2011 21:24:58 +0300
Subject: [PATCH] Hacky implementation of old-style member menus.

This is a real quick-and-dirty solution, but works :)
---
 template/js/OverviewToolbar.js     | 103 +++++++++++++++++++++++------
 template/resources/sass/style.scss |  55 +++++++--------
 2 files changed, 110 insertions(+), 48 deletions(-)

diff --git a/template/js/OverviewToolbar.js b/template/js/OverviewToolbar.js
index 5c49cf98..7e13ecc1 100644
--- a/template/js/OverviewToolbar.js
+++ b/template/js/OverviewToolbar.js
@@ -76,34 +76,95 @@ Ext.define('Docs.OverviewToolbar', {
     },
 
     createMemberButton: function(cfg) {
-        var menu = Ext.create('Ext.menu.Menu', {
-            items: Ext.Array.map(cfg.items, function(m) {
-                return {
-                    text: m.name,
-                    memberName: cfg.type + '-' + m.name
-                };
-            }),
-            plain: true,
-            listeners: {
-                click: function(menu, item) {
-                    Ext.getCmp('doc-overview').scrollToEl("#" + item.memberName);
-                }
+        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)
             }
-        });
+        );
 
-        return Ext.create('Ext.button.Split', {
-            cls: cfg.type,
-            iconCls: 'icon-' + cfg.type,
+        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', {
+            cls: 'icon-' + cfg.type,
+            style: "padding-left: 20px; cursor: pointer;",
             text: cfg.title + ' <span class="num">' + cfg.items.length + '</span>',
             listeners: {
-                click: function() {
-                    Ext.getCmp('doc-overview').scrollToEl("#m-" + cfg.type);
-                }
-            },
-            menu: menu
+                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
+            }
         });
     },
 
+    createLink: function(cls, member) {
+        var url = cls+"-"+member.tagname+"-"+member.name;
+        return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{1}</a>', url, member.name);
+    },
+
     createSubClassesButton: function(cfg) {
         var menu = Ext.create('Ext.menu.Menu', {
             items: Ext.Array.map(cfg.items, function(className) {
diff --git a/template/resources/sass/style.scss b/template/resources/sass/style.scss
index 89b043c8..fecc9eb7 100644
--- a/template/resources/sass/style.scss
+++ b/template/resources/sass/style.scss
@@ -753,33 +753,34 @@ pre, code, kbd, samp, tt {
   .expandAllMembers {
     background: url(../images/expandcollapse.png) no-repeat -14px 2px; }
   .collapseAllMembers {
-    background: url(../images/expandcollapse.png) no-repeat 2px 2px; }
-  .member_sm {
-    position: absolute;
-    padding: 5px 15px 10px;
-    background: #eaeaea;
-    z-index: 8;
-    top: 21px;
-    line-height: 1.3em;
-    border: 1px solid #bfbfbf;
-    border-top: 1px solid #eaeaea;
-    left: -16px;
-    border-radius-bottom: 5px;
-    h2 {
-      font-weight: bold;
-      text-decoration: underline;
-      padding-bottom: 5px; }
-    a {
-      display: block;
-      position: relative;
-      padding: 2px 30px 2px 0;
-      color: #0464bb;
-      white-space: nowrap;
-      &:hover {
-        color: #083772;
-        text-decoration: underline; } }
-    .l {
-      vertical-align: top; } } }
+    background: url(../images/expandcollapse.png) no-repeat 2px 2px; } }
+.member_sm {
+  font-size: 12px;
+  position: absolute;
+  padding: 5px 15px 10px;
+  background: #eaeaea;
+  z-index: 8;
+  top: 21px;
+  line-height: 1.3em;
+  border: 1px solid #bfbfbf;
+  border-top: 1px solid #eaeaea;
+  left: -16px;
+  border-radius-bottom: 5px;
+  h2 {
+    font-weight: bold;
+    text-decoration: underline;
+    padding-bottom: 5px; }
+  a {
+    display: block;
+    position: relative;
+    padding: 2px 30px 2px 0;
+    color: #0464bb;
+    white-space: nowrap;
+    &:hover {
+      color: #083772;
+      text-decoration: underline; } }
+  .l {
+    vertical-align: top; } }
 
 #doc-source {
   .x-panel-body-default {
-- 
GitLab