jsduck 0.6.1 → 2.0.pre

data/template/app/view/cls/Toolbar.js

@@ -0,0 +1,199 @@
+/**
+ * Toolbar with menus providing quick access to class members.
+ */
+Ext.define('Docs.view.cls.Toolbar', {
+    extend: 'Ext.toolbar.Toolbar',
+    requires: [
+        'Docs.view.HoverMenuButton',
+        'Docs.Settings',
+        'Ext.form.field.Checkbox'
+    ],
+
+    dock: 'top',
+    cls: 'member-links',
+    padding: '3 5',
+
+    /**
+     * @cfg {Object} docClass
+     * Documentation for a class.
+     */
+    docClass: {},
+
+    initComponent: function() {
+        this.addEvents(
+            /**
+             * @event hideInherited
+             * Fires when hideInherited checkbox toggled.
+             * @param {Boolean} hide  True when inherited items should get hidden.
+             */
+            "hideInherited",
+            /**
+             * @event filter
+             * Fires when text typed to filter.
+             * @param {String} search  The search text.
+             */
+            "filter",
+            /**
+             * @event toggleExpanded
+             * Fires expandAll/collapseAll buttons clicked.
+             * @param {Boolean} expand  True to expand all, false to collapse all.
+             */
+            "toggleExpanded"
+        );
+
+        this.items = [];
+        this.memberButtons = {};
+
+        var memberTitles = {
+            cfg: "Configs",
+            property: "Properties",
+            method: "Methods",
+            event: "Events"
+        };
+        for (var type in memberTitles) {
+            var members = this.docClass.members[type];
+            var statics = this.docClass.statics[type];
+            if (members.length || statics.length) {
+                var btn = this.createMemberButton({
+                    text: memberTitles[type],
+                    type: type,
+                    members: members.concat(statics)
+                });
+                this.memberButtons[type] = btn;
+                this.items.push(btn);
+            }
+        }
+
+        if (this.docClass.subclasses.length) {
+            this.items.push(this.createClassListButton("Sub Classes", this.docClass.subclasses));
+        }
+        if (this.docClass.mixedInto.length) {
+            this.items.push(this.createClassListButton("Mixed Into", this.docClass.mixedInto));
+        }
+
+        this.items = this.items.concat([
+            { xtype: 'tbspacer', width: 10 },
+            this.filterField = Ext.widget("textfield", {
+                emptyText: 'Find class members...',
+                enableKeyEvents: true,
+                listeners: {
+                    keyup: function(cmp) {
+                        this.fireEvent("filter", cmp.getValue());
+                    },
+                    specialkey: function(cmp, event) {
+                        if (event.keyCode === Ext.EventObject.ESC) {
+                            cmp.reset();
+                            this.fireEvent("filter", "");
+                        }
+                    },
+                    scope: this
+                }
+            }),
+            { xtype: 'tbfill' },
+            {
+                boxLabel: 'Hide inherited',
+                boxLabelAlign: 'before',
+                xtype: 'checkbox',
+                margin: '0 5 0 0',
+                padding: '0 0 5 0',
+                checked: Docs.Settings.get("hideInherited"),
+                handler: function(el) {
+                    this.fireEvent("hideInherited", el.checked);
+                },
+                scope: this
+            },
+            {
+                xtype: 'button',
+                iconCls: 'expandAllMembers',
+                tooltip: "Expand all",
+                enableToggle: true,
+                toggleHandler: function(btn, pressed) {
+                    btn.setIconCls(pressed ? 'collapseAllMembers' : 'expandAllMembers');
+                    btn.setTooltip(pressed ? "Collapse all" : "Expand all");
+                    this.fireEvent("toggleExpanded", pressed);
+                },
+                scope: this
+            }
+        ]);
+
+        this.callParent(arguments);
+    },
+
+    createMemberButton: function(cfg) {
+        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,
+            store: this.createStore(data),
+            showCount: true,
+            listeners: {
+                click: function() {
+                    this.up('classoverview').scrollToEl("#m-" + cfg.type);
+                },
+                scope: this
+            }
+        });
+    },
+
+    createClassListButton: function(text, classes) {
+        var data = Ext.Array.map(classes, function(cls) {
+            return this.createLinkRecord(cls);
+        }, this);
+
+        return Ext.create('Docs.view.HoverMenuButton', {
+            text: text,
+            cls: 'icon-subclass',
+            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', 'static']
+        });
+        store.add(records);
+        return store;
+    },
+
+    // Creates link object referencing a class (and optionally a class member)
+    createLinkRecord: function(cls, member) {
+        return {
+            cls: cls,
+            url: member ? cls+"-"+member.tagname+"-"+member.name : cls,
+            label: member ? ((member.name === "constructor") ? cls : member.name) : cls,
+            inherited: member ? member.owner !== cls : false,
+            'static': member ? member['static'] : false
+        };
+    },
+
+    /**
+     * Hides or unhides inherited members in dropdown menus.
+     * @param {Boolean} hide
+     */
+    hideInherited: function(hide) {
+        Ext.Array.forEach(['cfg', 'property', 'method', 'event'], function(type) {
+            if (this.memberButtons[type]) {
+                var store = this.memberButtons[type].getStore();
+                if (hide) {
+                    store.filterBy(function(m) { return !m.get("inherited"); });
+                }
+                else {
+                    store.clearFilter();
+                }
+            }
+        }, this);
+    },
+
+    /**
+     * Returns the current text in filter field.
+     * @return {String}
+     */
+    getFilterValue: function() {
+        return this.filterField.getValue();
+    }
+});

data/template/app/view/index/Container.js

@@ -0,0 +1,63 @@
+/**
+ * List of classes on front page.
+ * Together with links to guides and icons legend.
+ */
+Ext.define('Docs.view.index.Container', {
+    extend: 'Ext.container.Container',
+    alias : 'widget.indexcontainer',
+    cls: 'class-list',
+
+    initComponent: function() {
+        var tpl = new Ext.XTemplate(
+            '<h1 class="top">{title}</h1>',
+            '<tpl if="notice">',
+                '<div class="notice">{notice}</div>',
+            '</tpl>',
+            '<div class="section legend">',
+                '<h4>Legend</h4>',
+                '<ul>',
+                    '<li class="icon icon-pkg">Package</li>',
+                    '<li class="icon icon-class">Class</li>',
+                    '<li class="icon icon-singleton">Singleton</li>',
+                    '<li class="icon icon-component">Component</li>',
+                    '<li class="icon icon-guide">Guide</li>',
+                '</ul>',
+            '</div>',
+            '<tpl if="guides">',
+                '<div class="section guides">',
+                    '<h1>Guides</h1>',
+                    '{guides}',
+                    '<div class="examples">',
+                        '<a href="http://dev.sencha.com/deploy/ext-4.0.2a/examples/index.html">View the Ext 4.0 examples &rarr;</a>',
+                    '</div>',
+                '</div>',
+            '</tpl>',
+            '{categories}'
+        );
+
+        this.html = tpl.apply(this.extractData());
+        
+        this.callParent(arguments);
+    },
+
+    // Extracts HTML from hidden elements in page
+    extractData: function() {
+        var data = {
+            notice: Ext.get("notice-text"),
+            guides: Ext.get("guides-content"),
+            categories: Ext.get("categories-content")
+        };
+        for (var i in data) {
+            var el = data[i];
+            if (el) {
+                // If page contains the div then extract its contents,
+                // after that remove the original
+                data[i] = el.dom.innerHTML;
+                el.remove();
+            }
+        }
+        // Extract <title> text
+        data.title = Ext.query("title")[0].innerHTML;
+        return data;
+    }
+});

data/template/app/view/search/Dropdown.js

@@ -0,0 +1,53 @@
+/**
+ * Renders search results list.
+ */
+Ext.define('Docs.view.search.Dropdown', {
+    extend: 'Ext.view.View',
+    alias: 'widget.searchdropdown',
+
+    floating: true,
+    autoShow: false,
+    autoRender: true,
+    toFrontOnShow: true,
+    focusOnToFront: false,
+
+    store: 'Search',
+
+    id: 'search-dropdown',
+    overItemCls:'x-view-over',
+    trackOver: true,
+    itemSelector:'div.item',
+    singleSelect: true,
+
+    initComponent: function() {
+        this.tpl = new Ext.XTemplate(
+            '<tpl for=".">',
+                '<div class="item {type}">',
+                    '<div class="title">{member}</div>',
+                    '<div class="class">{cls}</div>',
+                '</div>',
+            '</tpl>',
+            '<div class="total">{[values.length]} of {[this.getTotal()]}</div>',
+            {
+                getTotal: Ext.bind(this.getTotal, this)
+            }
+        );
+        this.callParent(arguments);
+    },
+
+    /**
+     * Sets number of total search results
+     * @param {Number} total
+     */
+    setTotal: function(total) {
+        this.total = total;
+    },
+
+    /**
+     * Returns number of total search results
+     * @return {Number}
+     */
+    getTotal: function() {
+        return this.total;
+    }
+});

data/template/app/view/tree/Tree.js

@@ -0,0 +1,133 @@
+/**
+ * The class tree
+ */
+Ext.define('Docs.view.tree.Tree', {
+    extend: 'Ext.tree.Panel',
+    alias : 'widget.classtree',
+    requires: [
+        'Docs.Favorites'
+    ],
+
+    cls: 'class-tree iScroll',
+    useArrows: true,
+    rootVisible: false,
+
+    border: false,
+    bodyBorder: false,
+
+    initComponent: function() {
+        this.addEvents(
+            /**
+             * @event
+             * Fired when link in tree was clicked on and needs to be loaded.
+             * @param {String} url  URL of the page to load
+             * @param {Ext.EventObject} e
+             */
+            "urlclick"
+        );
+
+        // Expand the main tree
+        this.root.expanded = true;
+        this.root.children[0].expanded = true;
+
+        this.on("itemclick", this.onItemClick, this);
+
+        this.callParent();
+
+        // Add links for favoriting classes.
+        // Do this after callParent, because the getRootNode() will
+        // work after initComponent has run.
+        Docs.Favorites.setTree(this);
+        this.initFavIcons();
+    },
+
+    initFavIcons: function() {
+        this.getRootNode().cascadeBy(this.addFavIcons, this);
+    },
+
+    addFavIcons: function(node) {
+        if (node.get("leaf")) {
+            var url = node.raw.url;
+            var show = Docs.Favorites.has(url) ? "show" : "";
+            node.set("text", node.get("text") + Ext.String.format('<a rel="{0}" class="fav {1}"></a>', url, show));
+            node.commit();
+        }
+    },
+
+    onItemClick: function(view, node, item, index, e) {
+        var url = node.raw ? node.raw.url : node.data.url;
+
+        if (url) {
+            if (e.getTarget(".fav")) {
+                var favEl = Ext.get(e.getTarget(".fav"));
+                if (favEl.hasCls('show')) {
+                    Docs.Favorites.remove(url);
+                }
+                else {
+                    Docs.Favorites.add(url, this.getNodeTitle(node));
+                }
+            }
+            else {
+                this.fireEvent("urlclick", url, e);
+            }
+        }
+        else if (!node.isLeaf()) {
+            if (node.isExpanded()) {
+                node.collapse(false);
+            }
+            else {
+                node.expand(false);
+            }
+        }
+    },
+
+    /**
+     * Selects link node in tree by URL.
+     *
+     * @param {String} url
+     */
+    selectUrl: function(url) {
+        var r = this.findRecordByUrl(url);
+        if (r) {
+            r.bubble(function(n) {
+                n.expand();
+            });
+            this.getSelectionModel().select(r);
+        }
+        else {
+            this.getSelectionModel().deselectAll();
+        }
+    },
+
+    /**
+     * Sets favorite status of link on or off.
+     *
+     * @param {String} url  URL of the link
+     * @param {Boolean} enable  true to mark class as favorite.
+     */
+    setFavorite: function(url, enable) {
+        var r = this.findRecordByUrl(url);
+        if (r) {
+            var show = enable ? "show" : "";
+            r.set("text", r.get("text").replace(/class="fav *(show)?"/, 'class="fav '+show+'"'));
+            r.commit();
+        }
+    },
+
+    findRecordByUrl: function(url) {
+        return this.getRootNode().findChildBy(function(n) {
+            return url === n.raw.url;
+        }, this, true);
+    },
+
+    getNodeTitle: function(node) {
+        var m = node.raw.url.match(/^\/api\/(.*)$/);
+        if (m) {
+            return m[1];
+        }
+        else {
+            return node.raw.text;
+        }
+    }
+
+});