jsduck 0.6.1 → 2.0.pre

data/template/app/controller/Search.js

@@ -0,0 +1,156 @@
+/**
+ * Controller for search.
+ */
+Ext.define('Docs.controller.Search', {
+    extend: 'Ext.app.Controller',
+
+    views: [
+        'search.Dropdown'
+    ],
+
+    stores: ['Search'],
+
+    init: function() {
+        this.control({
+            '#search-dropdown': {
+                itemclick: function(dropdown, record) {
+                    this.loadRecord(record);
+                }
+            },
+            '#search-field': {
+                keyup: function(el, ev) {
+                    var dropdown = this.getDropdown();
+
+                    el.setHideTrigger(el.getValue().length === 0);
+
+                    if (ev.keyCode === Ext.EventObject.ESC || !el.value) {
+                        dropdown.hide();
+                        el.setValue("");
+                        return;
+                    }
+                    else {
+                        dropdown.show();
+                    }
+
+                    var selModel = dropdown.getSelectionModel();
+                    var record = selModel.getLastSelected();
+                    var curIndex = dropdown.store.indexOf(record);
+                    var lastIndex = dropdown.store.getCount() - 1;
+
+                    if (ev.keyCode === Ext.EventObject.UP) {
+                        if (curIndex === undefined) {
+                            selModel.select(0);
+                        } else {
+                            selModel.select(curIndex === 0 ? lastIndex : (curIndex - 1));
+                        }
+                    }
+                    else if (ev.keyCode === Ext.EventObject.DOWN) {
+                        if (curIndex === undefined) {
+                            selModel.select(0);
+                        } else {
+                            selModel.select(curIndex === lastIndex ? 0 : curIndex + 1);
+                        }
+                    }
+                    else if (ev.keyCode === Ext.EventObject.ENTER) {
+                        ev.preventDefault();
+                        record && this.loadRecord(record);
+                    }
+                    else {
+                        // Wait a bit before actually performing the search.
+                        // When user is typing fast, the value of el.value
+                        // might not right away be the final value.  For example
+                        // user might type "tre" but we will get three keyup events
+                        // where el.value === "t".
+                        clearTimeout(this.searchTimeout);
+                        this.searchTimeout = Ext.Function.defer(function() {
+                            this.search(el.value);
+                        }, 50, this);
+                    }
+                },
+                focus: function(el) {
+                    if (el.value && this.getDropdown().store.getCount() > 0) {
+                        this.getDropdown().show();
+                    }
+                },
+                blur: function() {
+                    // Don't hide the dropdown right away, otherwise
+                    // we don't receive the itemclick event when focus
+                    // was lost because we clicked on dropdown item.
+                    // Not really a good solution, but I can't
+                    // currently think of anything better.  Behaves
+                    // badly when you make a long mouse press on
+                    // dropdown item.
+                    var dropdown = this.getDropdown();
+                    Ext.Function.defer(dropdown.hide, 500, dropdown);
+                }
+            }
+        });
+    },
+
+    getDropdown: function() {
+        return this.dropdown || (this.dropdown = Ext.getCmp('search-dropdown'));
+    },
+
+    // loads class/method corrseponding to the record
+    loadRecord: function(record) {
+        var name = record.get("cls");
+        if (record.get("type") !== 'cls') {
+            name += '-' + record.get("type") + '-' + record.get("member");
+        }
+        Docs.App.getController('Classes').loadClass("/api/"+name);
+        this.getDropdown().hide();
+    },
+
+    search: function(term) {
+        // perform search and load results to store
+        var limit = 10;
+        var results = this.filterMembers(term);
+        this.getDropdown().setTotal(results.length);
+        this.getDropdown().getStore().loadData(results.slice(0, limit));
+        // position dropdown below search box
+        this.getDropdown().alignTo('search-field', 'bl', [-23, 2]);
+        // hide dropdown when nothing found
+        if (results.length === 0) {
+            this.getDropdown().hide();
+        }
+        else {
+            // auto-select first result
+            this.getDropdown().getSelectionModel().select(0);
+        }
+    },
+
+    filterMembers: function(text) {
+        var results = [[], [], [], [], [], [], [], []];
+        var xFull=0, clsFull=1, mFull=2, xBeg=3, clsBeg=4, mBeg=5, clsMid=6, mMid=7;
+        var hasDot = /\./.test(text);
+        var safeText = Ext.escapeRe(text);
+        var reFull = new RegExp("^" + safeText + "$", "i");
+        var reBeg = new RegExp("^" + safeText, "i");
+        var reMid = new RegExp(safeText, "i");
+
+        Ext.Array.forEach(Docs.searchData.data, function(r) {
+            // when search text has "." in it, search from the full name (e.g. "Ext.Component.focus")
+            // Otherwise search from just the member name (e.g. "focus" or "Component")
+            var name = hasDot ? r.cls + (r.type === "cls" ? "" : "." + r.member) : r.member;
+
+            if (r.xtypes && Ext.Array.some(r.xtypes, function(x) {return reFull.test(x);})) {
+                results[xFull].push(r);
+            }
+            else if (reFull.test(name)) {
+                results[r.type === "cls" ? clsFull : mFull].push(r);
+            }
+            else if (r.xtypes && Ext.Array.some(r.xtypes, function(x) {return reBeg.test(x);})) {
+                results[xBeg].push(r);
+            }
+            else if (reBeg.test(name)) {
+                results[r.type === "cls" ? clsBeg : mBeg].push(r);
+            }
+            else if (reMid.test(name)) {
+                results[r.type === "cls" ? clsMid : mMid].push(r);
+            }
+        });
+
+        return Ext.Array.flatten(results);
+    }
+
+});

data/template/app/model/Favorite.js

@@ -0,0 +1,11 @@
+/**
+ * Favorite classes
+ */
+Ext.define('Docs.model.Favorite', {
+    fields: ['id', 'url', 'title', 'cls'],
+    extend: 'Ext.data.Model',
+    proxy: {
+        type: ('localStorage' in window && window['localStorage'] !== null) ? 'localstorage' : 'memory',
+        id  : 'docs-favorites'
+    }
+});

data/template/app/model/Setting.js

@@ -0,0 +1,11 @@
+/**
+ * Key-value pairs of Docs app settings.
+ */
+Ext.define('Docs.model.Setting', {
+    fields: ['id', 'key', 'value'],
+    extend: 'Ext.data.Model',
+    proxy: {
+        type: ('localStorage' in window && window['localStorage'] !== null) ? 'localstorage' : 'memory',
+        id  : 'docs-settings'
+    }
+});

data/template/app/store/Favorites.js

@@ -0,0 +1,7 @@
+/**
+ * Favorites Store
+ */
+Ext.define('Docs.store.Favorites', {
+    extend: 'Ext.data.Store',
+    model: 'Docs.model.Favorite'
+});

data/template/app/store/Search.js

@@ -0,0 +1,14 @@
+/**
+ * Store for keeping search results.
+ */
+Ext.define('Docs.store.Search', {
+    extend: 'Ext.data.Store',
+
+    fields: ['cls', 'member', 'type', 'xtypes'],
+    proxy: {
+        type: 'memory',
+        reader: {
+            type: 'json'
+        }
+    }
+});

data/template/app/store/Settings.js

@@ -0,0 +1,7 @@
+/**
+ * Store for keeping Docs app settings
+ */
+Ext.define('Docs.store.Settings', {
+    extend: 'Ext.data.Store',
+    model: 'Docs.model.Setting'
+});

data/template/app/view/ClassGrid.js

@@ -0,0 +1,109 @@
+/**
+ * Gridpanel for showing list of classes.
+ */
+Ext.define('Docs.view.ClassGrid', {
+    extend: 'Ext.grid.Panel',
+    alias: 'widget.classgrid',
+    hideHeaders: true,
+    border: false,
+    bodyBorder: false,
+
+    /**
+     * @cfg {Object} icons
+     * Mapping of class names to icon class names.
+     */
+    icons: {},
+
+    /**
+     * @cfg {Boolean} enableClose
+     * Show or hide the close column
+     */
+    enableClose: true,
+
+    initComponent: function() {
+        this.addEvents(
+            /**
+             * @event
+             * Fired when class in grid clicked.
+             * @param {String} url  URL of the page that was selected. For example "/api/Ext.Ajax".
+             * @param {Ext.EventObject} e
+             */
+            "urlclick",
+            /**
+             * @event
+             * Fired when close button in grid clicked.
+             * @param {String} url  URL of the page that was closed. For example "/api/Ext.Ajax".
+             */
+            "closeclick"
+        );
+
+        this.columns = [
+            {
+                width: 18,
+                dataIndex: 'url',
+                renderer: function(url, data) {
+                    data.tdCls = this.icons[url];
+                },
+                scope: this
+            },
+            {
+                dataIndex: 'title',
+                flex: true
+            }
+        ];
+
+        if (this.enableClose) {
+            this.columns = this.columns.concat([
+                {
+                    xtype: 'actioncolumn',
+                    width: 18,
+                    icon: 'resources/images/x12.png',
+                    tooltip: 'Delete',
+                    handler: function(view, rowIndex) {
+                        this.fireEvent("closeclick", this.getStore().getAt(rowIndex).get("url"));
+                    },
+                    scope: this
+                }
+            ]);
+        }
+
+        this.callParent(arguments);
+
+        this.on("itemclick", function(view, record, item, index, event) {
+            // Don't fire urlclick when close button clicked
+            if (!event.getTarget("img")) {
+                this.fireEvent("urlclick", record.get("url"), event);
+            }
+        }, this);
+
+        // Initialize selection after rendering
+        this.on("afterrender", function() {
+            this.selectUrl(this.selectedUrl);
+        }, this);
+    },
+
+    /**
+     * Selects page if grid contains such.
+     * Fires no events while selecting.
+     * @param {String} url  page URL.
+     */
+    selectUrl: function(url) {
+        this.selectedUrl = url;
+        // when grid hasn't been rendered yet, trying to select will give us error.
+        if (this.rendered) {
+            var index = this.getStore().findExact('url', url);
+            this.selectIndex(index);
+        }
+    },
+
+    selectIndex: function(index) {
+        if (index > -1) {
+            this.view.focusRow(index);
+            this.getSelectionModel().select(index, false, true);
+        }
+        else {
+            this.getSelectionModel().deselectAll(true);
+        }
+    }
+
+});

data/template/app/view/HoverMenu.js

@@ -0,0 +1,59 @@
+/**
+ * Menu shown by {@link Docs.view.HoverMenuButton}.
+ */
+Ext.define('Docs.view.HoverMenu', {
+    extend: 'Ext.view.View',
+
+    componentCls: 'hover-menu',
+    itemSelector: 'div.item',
+    deferEmptyText: false,
+
+    /**
+     * @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.renderTo = Ext.getBody();
+
+        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 &gt; 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;
+                    var stat = values['static'] ? '<span class="static">static</span>' : "";
+                    return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{1} {2}</a>', url, label, stat);
+                }
+            }
+        );
+
+        this.callParent();
+    }
+});

data/template/app/view/HoverMenuButton.js

@@ -0,0 +1,147 @@
+/**
+ * Toolbar button with menu that appears when hovered over.
+ */
+Ext.define('Docs.view.HoverMenuButton', {
+    extend: 'Ext.toolbar.TextItem',
+    alias: 'widget.hovermenubutton',
+    componentCls: "hover-menu-button",
+    requires: [
+        'Docs.view.HoverMenu'
+    ],
+
+    /**
+     * @cfg {Ext.data.Store} store
+     * Store with menu items (required).
+     */
+
+    /**
+     * @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.
+        // So we can hide all other menus while showing a specific one.
+        menus: []
+    },
+
+    initComponent: function() {
+        this.addEvents(
+            /**
+             * @event click
+             * Fired when button clicked.
+             */
+            "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, update it when store filtered
+        if (this.showCount) {
+            this.initialText = this.text;
+            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);
+    },
+
+    onRender: function() {
+        this.callParent(arguments);
+
+        this.renderMenu();
+
+        this.getEl().on({
+            click: function() {
+                this.fireEvent("click");
+            },
+            mouseover: function() {
+                // hide other menus
+                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.getEl().setStyle({
+                    left: (p[0]-10)+"px",
+                    top: (p[1]+23)+"px"
+                });
+            },
+            mouseout: this.deferHideMenu,
+            scope: this
+        });
+
+        this.menu.getEl().on({
+            mouseover: function() {
+                clearTimeout(this.hideTimeout);
+            },
+            mouseout: this.deferHideMenu,
+            scope: this
+        });
+
+    },
+
+    onDestroy: function() {
+        // clean up DOM
+        this.menu.destroy();
+        // remove from global menu list
+        Ext.Array.remove(Docs.view.HoverMenuButton.menus, this.menu);
+
+        this.callParent(arguments);
+    },
+
+    renderMenu: function() {
+        this.menu.getEl().setVisibilityMode(Ext.core.Element.DISPLAY);
+        this.menu.hide();
+
+        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.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;
+    }
+
+});