jsduck 0.6.1 → 2.0.pre

data/template/app/History.js

@@ -0,0 +1,45 @@
+/**
+ * Browser history management using Ext.util.History.
+ */
+Ext.define("Docs.History", {
+    singleton: true,
+
+    /**
+     * Initializes history management.
+     */
+    init: function() {
+        Ext.util.History.init(function() {
+            this.navigate(Ext.util.History.getToken());
+        }, this);
+        Ext.util.History.on("change", this.navigate, this);
+    },
+
+    // Parses current URL and navigates to the page
+    navigate: function(token) {
+        var url = this.parseToken(token);
+        if (url.type === "api") {
+            Docs.App.getController('Classes').loadClass(url.url, true);
+        }
+        else if (url.type === "guide") {
+            Docs.App.getController('Classes').loadGuide(url.url, true);
+        }
+        else {
+            Docs.App.getController('Classes').loadIndex(true);
+        }
+    },
+
+    // Parses current browser location
+    parseToken: function(token) {
+        var matches = token && token.match(/\/(api|guide)\/(.*)/);
+        return matches ? {type: matches[1], url: matches[0]} : {};
+    },
+
+    /**
+     * Adds URL to history
+     *
+     * @param {String} token  the part of URL after #
+     */
+    push: function(token) {
+        Ext.util.History.add(token);
+    }
+});

data/template/app/LocalStore.js

@@ -0,0 +1,45 @@
+/**
+ * Provides methods dealing with localStorage- and memory-store.
+ *
+ * Base class for Favorites and Settings.
+ */
+Ext.define("Docs.LocalStore", {
+    storeName: '',
+
+    /**
+     * Initializes store management.
+     *
+     * Initializes this.store variable and loads the store if
+     * localStorage available.
+     */
+    init: function() {
+        this.localStorage = ('localStorage' in window && window['localStorage'] !== null);
+        this.store = Ext.getStore(this.storeName);
+
+        if (this.localStorage) {
+            this.store.load();
+            if (window.addEventListener) {
+                window.addEventListener("storage", Ext.Function.bind(this.onStorageChange, this), false);
+            }
+            else {
+                window.attachEvent("onstorage", Ext.Function.bind(this.onStorageChange, this));
+            }
+        }
+    },
+
+    // When records in localstorage change, reload the store.
+    onStorageChange: function(e) {
+        e = e || window.event;
+        if (e.key === this.store.getProxy().id) {
+            this.store.load();
+        }
+    },
+
+    /**
+     * Syncs the store with localStorage if possible.
+     */
+    syncStore: function() {
+        this.localStorage && this.store.sync();
+    }
+
+});

data/template/app/Settings.js

@@ -0,0 +1,39 @@
+/**
+ * Provides access to Docs app settings.
+ */
+Ext.define("Docs.Settings", {
+    extend: 'Docs.LocalStore',
+    storeName: 'Settings',
+    singleton: true,
+
+    /**
+     * Saves a setting
+     *
+     * @param {String} key  Name of the setting
+     * @param {Mixed} value  Value of the setting
+     */
+    set: function(key, value) {
+        var index = this.store.findExact("key", key);
+        // There is currently a bug in localstorage with Ext that
+        // prevents updated records getting synced properly. As a
+        // temporary fix, remove and re-add the item instead of just
+        // changing the value.
+        if (index > -1) {
+            this.store.removeAt(index);
+        }
+        this.store.add({key: key, value: value});
+
+        this.syncStore();
+    },
+
+    /**
+     * Gets value of a setting.
+     *
+     * @param {String} key  Name of the setting
+     * @return {Mixed} value of the setting or undefined.
+     */
+    get: function(key) {
+        var index = this.store.findExact("key", key);
+        return index > -1 ? this.store.getAt(index).get("value") : undefined;
+    }
+});

data/template/app/Syntax.js

@@ -0,0 +1,20 @@
+/**
+ * Utility for performing syntax highlighting.
+ */
+Ext.define("Docs.Syntax", {
+    singleton: true,
+
+    /**
+     * Marks all code blocks with "prettyprint" class and then calls
+     * the prettify library function to highlight them.
+     *
+     * @param {HTMLElement/Ext.core.Element} root HTML element inside
+     * which to perform the highlighting.
+     */
+    highlight: function(root) {
+        Ext.Array.forEach(Ext.query("pre > code", root.dom || root), function(el) {
+            Ext.get(el).addCls("prettyprint");
+        });
+        prettyPrint();
+    }
+});

data/template/app/controller/Classes.js

@@ -0,0 +1,301 @@
+/**
+ * Listeners should be defined here instead of in the view classes
+ */
+Ext.define('Docs.controller.Classes', {
+    extend: 'Ext.app.Controller',
+
+    requires: [
+        'Docs.History',
+        'Docs.Syntax',
+        'Docs.view.cls.Overview'
+    ],
+
+    stores: [
+        'Favorites',
+        'Settings'
+    ],
+
+    models: [
+        'Favorite',
+        'Setting'
+    ],
+
+    refs: [
+        {
+            ref: 'viewport',
+            selector: '#viewport'
+        },
+        {
+            ref: 'header',
+            selector: 'classheader'
+        },
+        {
+            ref: 'overview',
+            selector: 'classoverview'
+        },
+        {
+            ref: 'tree',
+            selector: 'classtree'
+        },
+        {
+            ref: 'favoritesGrid',
+            selector: '#favorites-grid'
+        }
+    ],
+
+    activeUrl: null,
+
+    init: function() {
+        this.addEvents(
+            /**
+             * @event showClass
+             * Fired after class shown. Used for analytics event tracking.
+             * @param {String} cls  name of the class.
+             */
+            "showClass",
+            /**
+             * @event showMember
+             * Fired after class member scrolled to view. Used for analytics event tracking.
+             * @param {String} cls  name of the class.
+             * @param {String} anchor  name of the member in form type-name like "method-bind".
+             */
+            "showMember",
+            /**
+             * @event showGuide
+             * Fired after guide shown. Used for analytics event tracking.
+             * @param {String} guide  name of the guide.
+             */
+            "showGuide"
+        );
+
+        Ext.getBody().addListener('click', function(event, el) {
+            this.handleUrlClick(el.href, event);
+        }, this, {
+            preventDefault: true,
+            delegate: '.docClass'
+        });
+
+        this.control({
+            'classtree': {
+                urlclick: function(url, event) {
+                    this.handleUrlClick(url, event, this.getTree());
+                }
+            },
+            'classgrid': {
+                urlclick: function(url, event) {
+                    this.handleUrlClick(url, event, this.getFavoritesGrid());
+                }
+            },
+
+            'indexcontainer': {
+                afterrender: function(cmp) {
+                    cmp.el.addListener('click', function(event, el) {
+                        this.handleUrlClick(el.href, event);
+                    }, this, {
+                        preventDefault: true,
+                        delegate: '.guide'
+                    });
+                }
+            },
+
+            'toolbar': {
+                toggleExpanded: function(expanded) {
+                    Ext.Array.forEach(Ext.query('.side.expandable'), function(el) {
+                        Ext.get(el).parent()[expanded ? "addCls" : "removeCls"]('open');
+                    });
+                }
+            },
+
+            'classoverview': {
+                afterrender: function(cmp) {
+                    // Expand member when clicked
+                    cmp.el.addListener('click', function(cmp, el) {
+                        Ext.get(Ext.get(el).up('.member')).toggleCls('open');
+                    }, this, {
+                        preventDefault: true,
+                        delegate: '.expandable'
+                    });
+
+                    // Do nothing when clicking on not-expandable items
+                    cmp.el.addListener('click', Ext.emptyFn, this, {
+                        preventDefault: true,
+                        delegate: '.not-expandable'
+                    });
+                }
+            }
+        });
+    },
+
+    // We don't want to select the class that was opened in another window,
+    // so restore the previous selection.
+    handleUrlClick: function(url, event, view) {
+        // Remove everything up to #
+        url = url.replace(/.*#/, "");
+
+        if (this.opensNewWindow(event)) {
+            window.open(url);
+            view && view.selectUrl(this.activeUrl ? this.activeUrl : "");
+        }
+        else {
+            if (/^\/api\//.test(url)) {
+                this.loadClass(url);
+            }
+            else {
+                this.loadGuide(url);
+            }
+        }
+    },
+
+    // Code for the middle mouse button
+    MIDDLE: 1,
+
+    // True when middle mouse button pressed or shift/ctrl key pressed
+    // together with mouse button (for Mac)
+    opensNewWindow: function(event) {
+        return event.button === this.MIDDLE || event.shiftKey || event.ctrlKey;
+    },
+
+    /**
+     * Loads main page.
+     *
+     * @param {Boolean} noHistory  true to disable adding entry to browser history
+     */
+    loadIndex: function(noHistory) {
+        this.activeUrl = "";
+        if (!noHistory) {
+            Docs.History.push("");
+        }
+        this.getViewport().setPageTitle("");
+        Ext.getCmp('card-panel').layout.setActiveItem(0);
+    },
+
+    cache: {},
+
+    /**
+     * Loads class.
+     *
+     * @param {String} url  name of the class + optionally name of the method, separated with dash.
+     * @param {Boolean} noHistory  true to disable adding entry to browser history
+     */
+    loadClass: function(url, noHistory) {
+        if (this.activeUrl === url) return;
+        this.activeUrl = url;
+
+        if (!noHistory) {
+            Docs.History.push(url);
+        }
+
+        Ext.getCmp('card-panel').layout.setActiveItem(1);
+
+        // separate class and member name
+        var matches = url.match(/^\/api\/(.*?)(?:-(.*))?$/);
+        var cls = matches[1];
+        var member = matches[2];
+
+        if (this.cache[cls]) {
+            this.showClass(this.cache[cls], member);
+        }
+        else {
+            if (this.getOverview()) {
+                this.getOverview().setLoading(true);
+            }
+
+            Ext.data.JsonP.request({
+                url: this.getBaseUrl() + '/output/' + cls + '.js',
+                callbackName: cls.replace(/\./g, '_'),
+                success: function(json, opts) {
+                    this.cache[cls] = json;
+                    this.showClass(json, member);
+                },
+                failure: function(response, opts) {
+                    this.showFailure("Class <b>"+cls+"</b> was not found.");
+                },
+                scope: this
+            });
+        }
+    },
+
+    showClass: function(cls, anchor) {
+        if (this.currentCls !== cls) {
+            this.getViewport().setPageTitle(cls.name);
+            this.getHeader().load(cls);
+            this.getOverview().load(cls);
+
+            this.getOverview().setLoading(false);
+
+            this.getTree().selectUrl("/api/"+cls.name);
+            this.fireEvent('showClass', cls.name);
+        }
+
+        if (anchor) {
+            this.getOverview().scrollToEl("#" + anchor);
+            this.fireEvent('showMember', cls.name, anchor);
+        } else {
+            this.getOverview().getEl().down('.x-panel-body').scrollTo('top', 0);
+        }
+
+        this.currentCls = cls;
+
+        this.getFavoritesGrid().selectUrl("/api/"+cls.name);
+    },
+
+    /**
+     * Loads guide.
+     *
+     * @param {String} url  URL of the guide
+     * @param {Boolean} noHistory  true to disable adding entry to browser history
+     */
+    loadGuide: function(url, noHistory) {
+        if (this.activeUrl === url) return;
+        this.activeUrl = url;
+
+        noHistory || Docs.History.push(url);
+
+        var name = url.match(/^\/guide\/(.*)$/)[1];
+        Ext.data.JsonP.request({
+            url: this.getBaseUrl() + "/guides/" + name + "/README.js",
+            callbackName: name,
+            success: function(json) {
+                this.getViewport().setPageTitle(json.guide.match(/<h1>(.*)<\/h1>/)[1]);
+                Ext.getCmp("guide").update(json.guide);
+                Ext.getCmp('card-panel').layout.setActiveItem(2);
+                Docs.Syntax.highlight(Ext.get("guide"));
+                this.fireEvent('showGuide', name);
+                this.getTree().selectUrl(url);
+                this.getFavoritesGrid().selectUrl(url);
+            },
+            failure: function(response, opts) {
+                this.showFailure("Guide <b>"+name+"</b> was not found.");
+            },
+            scope: this
+        });
+    },
+
+    /**
+     * Displays page with 404 error message.
+     * @param {String} msg
+     * @private
+     */
+    showFailure: function(msg) {
+        this.getOverview().setLoading(false);
+        var tpl = new Ext.XTemplate(
+            "<h1>Oops...</h1>",
+            "<p>{msg}</p>",
+            "<p>Maybe it was renamed to something else? Or maybe it has passed away permanently to the 404 land? ",
+            "This would be sad. Hopefully it's just a bug in our side. ",
+            "Report it to <a href='http://www.sencha.com/forum/showthread.php?135036'>Sencha Forum</a> if you feel so.</p>",
+            "<p>Sorry for all this :(</p>"
+        );
+        Ext.getCmp("failure").update(tpl.apply({msg: msg}));
+        Ext.getCmp('card-panel').layout.setActiveItem("failure");
+    },
+
+    /**
+     * Returns base URL used for making AJAX requests.
+     * @return {String} URL
+     */
+    getBaseUrl: function() {
+        return document.location.href.replace(/#.*/, "").replace(/index.html/, "");
+    }
+
+});