add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / modern / src / controller / Main.js

/**\r
 * @class KitchenSink.controller.Main\r
 * @extends Ext.app.Controller\r
 *\r
 * This is an abstract base class that is extended by both the phone and tablet versions. This controller is\r
 * never directly instantiated, it just provides a set of common functionality that the phone and tablet\r
 * subclasses both extend.\r
 */\r
Ext.define('KitchenSink.controller.Main', {\r
    extend: 'Ext.app.Controller',\r
\r
    requires: [\r
        'Ext.Deferred'\r
    ],\r
\r
    config: {\r
        /**\r
         * @private\r
         */\r
        viewCache: [],\r
\r
        refs: {\r
            nav: '#mainNestedList',\r
            main: 'mainview',\r
            toolbar: '#mainNavigationBar',\r
            sourceButton: 'button[action=viewSource]',\r
            themeToggleButton: 'button[action=toggleTheme]',\r
\r
\r
            sourceOverlay: {\r
                selector: 'sourceoverlay',\r
                xtype: 'sourceoverlay',\r
                autoCreate: true\r
            }\r
        },\r
\r
        control: {\r
            sourceButton: {\r
                tap: 'onSourceTap'\r
            },\r
            themeToggleButton: {\r
                tap: 'onThemeToggleTap'\r
            },\r
            nav: {\r
                itemtap: 'onNavTap',\r
                leafitemtap: 'onNavLeafTap'\r
\r
            }\r
        },\r
\r
        routes: {\r
            'demo/:id': 'showViewById',\r
            'menu/:id': 'showMenuById',\r
            '': 'showMenuById'\r
        },\r
\r
        /**\r
         * @cfg {Ext.data.Model} currentDemo The Demo that is currently loaded. This is set whenever showViewById\r
         * is called and used by functions like onSourceTap to fetch the source code for the current demo.\r
         */\r
        currentDemo: undefined\r
    },\r
\r
    /**\r
     * Finds a given view by ID and shows it. End-point of the "demo/:id" route\r
     */\r
    showViewById: function (id) {\r
        var nav = this.getNav(),\r
            view = nav.getStore().getNodeById(id);\r
\r
        this.showView(view);\r
        this.setCurrentDemo(view);\r
        this.hideSheets();\r
    },\r
\r
    isProfile: function(item) {\r
        var profileName = item.get('profileName'),\r
            ret = false;\r
\r
        if (profileName !== undefined) {\r
            window.location = profileName ? (location.pathname + '?profile=' + profileName) : '';\r
            ret = true;\r
        }\r
\r
        return ret;\r
    },\r
\r
    /**\r
     * Shows the source code for the {@link #currentDemo} in an overlay\r
     */\r
    onSourceTap: function () {\r
        var me = this,\r
            overlay = this.getSourceOverlay(),\r
            demo = this.getCurrentDemo(),\r
            view = this.activeView,\r
            cls, files, content;\r
\r
        if (demo) {\r
            if (!overlay.getParent()) {\r
                Ext.Viewport.add(overlay);\r
            }\r
\r
            overlay.show();\r
\r
            if (view.$cachedContent) {\r
                me.setOverlayContent(overlay, view.$cachedContent);\r
            } else {\r
                overlay.setMasked({\r
                    xtype: 'loadmask',\r
                    message: 'Loading Source'\r
                });\r
\r
                cls = demo.get('view') || demo.get('text');\r
                cls = cls.replace(/\./g, '/');\r
\r
                files = [this.getFileContent({\r
                    type: 'View',\r
                    path: 'modern/src/view/' + cls + '.js'\r
                })];\r
\r
                content = view.otherContent;\r
                if (content) {\r
                    content.forEach(function(content) {\r
                        files.push(this.getFileContent(Ext.apply({}, content)));\r
                    }, this);\r
                }\r
\r
                Ext.Deferred.all(files).then(function(values) {\r
                    values.forEach(function(item) {\r
                        item.title = item.type;\r
                        delete item.type;\r
                    });\r
                    me.setOverlayContent(overlay, values);\r
                    overlay.unmask();\r
\r
                    view.self.prototype.$cachedContent = values;\r
                });\r
            }\r
        }\r
    },\r
\r
    setOverlayContent: function(overlay, items) {\r
        overlay.removeAll();\r
        overlay.add(items);\r
        overlay.getTabBar().setHidden(items.length === 1);\r
    },\r
\r
    getFileContent: function(options) {\r
        return Ext.Ajax.request({\r
            url: options.path\r
        }).then(function(response) {\r
            return {\r
                type: options.type,\r
                html: response.responseText\r
            };\r
        }, function() {\r
            return null;\r
        });\r
    },\r
\r
    onThemeToggleTap: function() {\r
        if (Ext.theme.name === 'Tizen') {\r
            if (!KitchenSink.app.getThemeVariationTransitionCls()) {\r
                KitchenSink.app.setThemeVariationTransitionCls("tizenThemeTransition");\r
            }\r
\r
            if (KitchenSink.app.getThemeVariation() === "light") {\r
                KitchenSink.app.setThemeVariation("dark");\r
            } else {\r
                KitchenSink.app.setThemeVariation("light");\r
            }\r
        }\r
\r
    },\r
\r
    /**\r
     * @private\r
     * In the kitchen sink we have a large number of dynamic views. If we were to keep all of them rendered\r
     * we'd risk causing the browser to run out of memory, especially on older devices. If we destroy them as\r
     * soon as we're done with them, the app can appear sluggish. Instead, we keep a small number of rendered\r
     * views in a viewCache so that we can easily reuse recently used views while destroying those we haven't\r
     * used in a while.\r
     * @param {String} name The full class name of the view to create (e.g. "KitchenSink.view.Forms")\r
     * @return {Ext.Component} The component, which may be from the cache\r
     */\r
    createView: function (item) {\r
        var name = this.getViewName(item),\r
            cache = this.getViewCache(),\r
            ln = cache.length,\r
            limit = item.get('limit') || 20,\r
            view, i = 0, j, oldView;\r
\r
        for (; i < ln; i++) {\r
            view = cache[i];\r
            if (view.viewName === name) {\r
                this.activeView = view;\r
                return view;\r
            }\r
        }\r
\r
        if (ln >= limit) {\r
            for (i = 0, j = 0; i < ln; i++) {\r
                oldView = cache[i];\r
                if (!oldView.isPainted()) {\r
                    oldView.destroy();\r
                } else {\r
                    cache[j++] = oldView;\r
                }\r
            }\r
            cache.length = j;\r
        }\r
\r
        view = Ext.create(name);\r
        view.viewName = name;\r
        cache.push(view);\r
        this.setViewCache(cache);\r
\r
        this.activeView = view;\r
\r
        return view;\r
    },\r
\r
    /**\r
     * @private\r
     * Returns the full class name of the view to construct for a given Demo\r
     * @param {KitchenSink.model.Demo} item The demo\r
     * @return {String} The full class name of the view\r
     */\r
    getViewName: function (item) {\r
        var name = item.get('view') || item.get('text'),\r
            ns = 'KitchenSink.view.';\r
\r
        if (name == 'TouchEvents') {\r
            if (this.getApplication().getCurrentProfile().getName() === 'Tablet') {\r
                return ns + 'tablet.' + name;\r
            } else {\r
                return ns + 'phone.' + name;\r
            }\r
        } else {\r
            return ns + name;\r
        }\r
    },\r
\r
    /**\r
     * we iterate over all of the floating sheet components and make sure they're hidden when we\r
     * navigate to a new view. This stops things like Picker overlays staying visible when you hit\r
     * the browser's back button\r
     */\r
    hideSheets: function () {\r
        Ext.each(Ext.ComponentQuery.query('sheet, #editorPanel'), function (sheet) {\r
            if(sheet instanceof Ext.Menu) {\r
                Ext.Viewport.hideMenu(sheet);\r
            }else {\r
                sheet.setHidden(true);\r
            }\r
        });\r
    }\r
});\r