add extjs 6.0.1 sources

[extjs.git] / extjs / packages / ux / classic / src / desktop / Desktop.js

/*!\r
 * Ext JS Library\r
 * Copyright(c) 2006-2014 Sencha Inc.\r
 * licensing@sencha.com\r
 * http://www.sencha.com/license\r
 */\r
\r
/**\r
 * @class Ext.ux.desktop.Desktop\r
 * @extends Ext.panel.Panel\r
 * <p>This class manages the wallpaper, shortcuts and taskbar.</p>\r
 */\r
Ext.define('Ext.ux.desktop.Desktop', {\r
    extend: 'Ext.panel.Panel',\r
\r
    alias: 'widget.desktop',\r
\r
    uses: [\r
        'Ext.util.MixedCollection',\r
        'Ext.menu.Menu',\r
        'Ext.view.View', // dataview\r
        'Ext.window.Window',\r
\r
        'Ext.ux.desktop.TaskBar',\r
        'Ext.ux.desktop.Wallpaper'\r
    ],\r
\r
    activeWindowCls: 'ux-desktop-active-win',\r
    inactiveWindowCls: 'ux-desktop-inactive-win',\r
    lastActiveWindow: null,\r
\r
    border: false,\r
    html: '&#160;',\r
    layout: 'fit',\r
\r
    xTickSize: 1,\r
    yTickSize: 1,\r
\r
    app: null,\r
\r
    /**\r
     * @cfg {Array/Ext.data.Store} shortcuts\r
     * The items to add to the DataView. This can be a {@link Ext.data.Store Store} or a\r
     * simple array. Items should minimally provide the fields in the\r
     * {@link Ext.ux.desktop.ShortcutModel Shortcut}.\r
     */\r
    shortcuts: null,\r
\r
    /**\r
     * @cfg {String} shortcutItemSelector\r
     * This property is passed to the DataView for the desktop to select shortcut items.\r
     * If the {@link #shortcutTpl} is modified, this will probably need to be modified as\r
     * well.\r
     */\r
    shortcutItemSelector: 'div.ux-desktop-shortcut',\r
\r
    /**\r
     * @cfg {String} shortcutTpl\r
     * This XTemplate is used to render items in the DataView. If this is changed, the\r
     * {@link #shortcutItemSelector} will probably also need to changed.\r
     */\r
    shortcutTpl: [\r
        '<tpl for=".">',\r
            '<div class="ux-desktop-shortcut" id="{name}-shortcut">',\r
                '<div class="ux-desktop-shortcut-icon {iconCls}">',\r
                    '<img src="',Ext.BLANK_IMAGE_URL,'" title="{name}">',\r
                '</div>',\r
                '<span class="ux-desktop-shortcut-text">{name}</span>',\r
            '</div>',\r
        '</tpl>',\r
        '<div class="x-clear"></div>'\r
    ],\r
\r
    /**\r
     * @cfg {Object} taskbarConfig\r
     * The config object for the TaskBar.\r
     */\r
    taskbarConfig: null,\r
\r
    windowMenu: null,\r
\r
    initComponent: function () {\r
        var me = this;\r
\r
        me.windowMenu = new Ext.menu.Menu(me.createWindowMenu());\r
\r
        me.bbar = me.taskbar = new Ext.ux.desktop.TaskBar(me.taskbarConfig);\r
        me.taskbar.windowMenu = me.windowMenu;\r
\r
        me.windows = new Ext.util.MixedCollection();\r
\r
        me.contextMenu = new Ext.menu.Menu(me.createDesktopMenu());\r
\r
        me.items = [\r
            { xtype: 'wallpaper', id: me.id+'_wallpaper' },\r
            me.createDataView()\r
        ];\r
\r
        me.callParent();\r
\r
        me.shortcutsView = me.items.getAt(1);\r
        me.shortcutsView.on('itemclick', me.onShortcutItemClick, me);\r
\r
        var wallpaper = me.wallpaper;\r
        me.wallpaper = me.items.getAt(0);\r
        if (wallpaper) {\r
            me.setWallpaper(wallpaper, me.wallpaperStretch);\r
        }\r
    },\r
\r
    afterRender: function () {\r
        var me = this;\r
        me.callParent();\r
        me.el.on('contextmenu', me.onDesktopMenu, me);\r
    },\r
\r
    //------------------------------------------------------\r
    // Overrideable configuration creation methods\r
\r
    createDataView: function () {\r
        var me = this;\r
        return {\r
            xtype: 'dataview',\r
            overItemCls: 'x-view-over',\r
            trackOver: true,\r
            itemSelector: me.shortcutItemSelector,\r
            store: me.shortcuts,\r
            style: {\r
                position: 'absolute'\r
            },\r
            x: 0, y: 0,\r
            tpl: new Ext.XTemplate(me.shortcutTpl)\r
        };\r
    },\r
\r
    createDesktopMenu: function () {\r
        var me = this, ret = {\r
            items: me.contextMenuItems || []\r
        };\r
\r
        if (ret.items.length) {\r
            ret.items.push('-');\r
        }\r
\r
        ret.items.push(\r
                { text: 'Tile', handler: me.tileWindows, scope: me, minWindows: 1 },\r
                { text: 'Cascade', handler: me.cascadeWindows, scope: me, minWindows: 1 }\r
        );\r
\r
        return ret;\r
    },\r
\r
    createWindowMenu: function () {\r
        var me = this;\r
        return {\r
            defaultAlign: 'br-tr',\r
            items: [\r
                { text: 'Restore', handler: me.onWindowMenuRestore, scope: me },\r
                { text: 'Minimize', handler: me.onWindowMenuMinimize, scope: me },\r
                { text: 'Maximize', handler: me.onWindowMenuMaximize, scope: me },\r
                '-',\r
                { text: 'Close', handler: me.onWindowMenuClose, scope: me }\r
            ],\r
            listeners: {\r
                beforeshow: me.onWindowMenuBeforeShow,\r
                hide: me.onWindowMenuHide,\r
                scope: me\r
            }\r
        };\r
    },\r
\r
    //------------------------------------------------------\r
    // Event handler methods\r
\r
    onDesktopMenu: function (e) {\r
        var me = this, menu = me.contextMenu;\r
        e.stopEvent();\r
        if (!menu.rendered) {\r
            menu.on('beforeshow', me.onDesktopMenuBeforeShow, me);\r
        }\r
        menu.showAt(e.getXY());\r
        menu.doConstrain();\r
    },\r
\r
    onDesktopMenuBeforeShow: function (menu) {\r
        var me = this, count = me.windows.getCount();\r
\r
        menu.items.each(function (item) {\r
            var min = item.minWindows || 0;\r
            item.setDisabled(count < min);\r
        });\r
    },\r
\r
    onShortcutItemClick: function (dataView, record) {\r
        var me = this, module = me.app.getModule(record.data.module),\r
            win = module && module.createWindow();\r
\r
        if (win) {\r
            me.restoreWindow(win);\r
        }\r
    },\r
\r
    onWindowClose: function(win) {\r
        var me = this;\r
        me.windows.remove(win);\r
        me.taskbar.removeTaskButton(win.taskButton);\r
        me.updateActiveWindow();\r
    },\r
\r
    //------------------------------------------------------\r
    // Window context menu handlers\r
\r
    onWindowMenuBeforeShow: function (menu) {\r
        var items = menu.items.items, win = menu.theWin;\r
        items[0].setDisabled(win.maximized !== true && win.hidden !== true); // Restore\r
        items[1].setDisabled(win.minimized === true); // Minimize\r
        items[2].setDisabled(win.maximized === true || win.hidden === true); // Maximize\r
    },\r
\r
    onWindowMenuClose: function () {\r
        var me = this, win = me.windowMenu.theWin;\r
\r
        win.close();\r
    },\r
\r
    onWindowMenuHide: function (menu) {\r
        Ext.defer(function() {\r
            menu.theWin = null;\r
        }, 1);\r
    },\r
\r
    onWindowMenuMaximize: function () {\r
        var me = this, win = me.windowMenu.theWin;\r
\r
        win.maximize();\r
        win.toFront();\r
    },\r
\r
    onWindowMenuMinimize: function () {\r
        var me = this, win = me.windowMenu.theWin;\r
\r
        win.minimize();\r
    },\r
\r
    onWindowMenuRestore: function () {\r
        var me = this, win = me.windowMenu.theWin;\r
\r
        me.restoreWindow(win);\r
    },\r
\r
    //------------------------------------------------------\r
    // Dynamic (re)configuration methods\r
\r
    getWallpaper: function () {\r
        return this.wallpaper.wallpaper;\r
    },\r
\r
    setTickSize: function(xTickSize, yTickSize) {\r
        var me = this,\r
            xt = me.xTickSize = xTickSize,\r
            yt = me.yTickSize = (arguments.length > 1) ? yTickSize : xt;\r
\r
        me.windows.each(function(win) {\r
            var dd = win.dd, resizer = win.resizer;\r
            dd.xTickSize = xt;\r
            dd.yTickSize = yt;\r
            resizer.widthIncrement = xt;\r
            resizer.heightIncrement = yt;\r
        });\r
    },\r
\r
    setWallpaper: function (wallpaper, stretch) {\r
        this.wallpaper.setWallpaper(wallpaper, stretch);\r
        return this;\r
    },\r
\r
    //------------------------------------------------------\r
    // Window management methods\r
\r
    cascadeWindows: function() {\r
        var x = 0, y = 0,\r
            zmgr = this.getDesktopZIndexManager();\r
\r
        zmgr.eachBottomUp(function(win) {\r
            if (win.isWindow && win.isVisible() && !win.maximized) {\r
                win.setPosition(x, y);\r
                x += 20;\r
                y += 20;\r
            }\r
        });\r
    },\r
\r
    createWindow: function(config, cls) {\r
        var me = this, win, cfg = Ext.applyIf(config || {}, {\r
                stateful: false,\r
                isWindow: true,\r
                constrainHeader: true,\r
                minimizable: true,\r
                maximizable: true\r
            });\r
\r
        cls = cls || Ext.window.Window;\r
        win = me.add(new cls(cfg));\r
\r
        me.windows.add(win);\r
\r
        win.taskButton = me.taskbar.addTaskButton(win);\r
        win.animateTarget = win.taskButton.el;\r
\r
        win.on({\r
            activate: me.updateActiveWindow,\r
            beforeshow: me.updateActiveWindow,\r
            deactivate: me.updateActiveWindow,\r
            minimize: me.minimizeWindow,\r
            destroy: me.onWindowClose,\r
            scope: me\r
        });\r
\r
        win.on({\r
            boxready: function () {\r
                win.dd.xTickSize = me.xTickSize;\r
                win.dd.yTickSize = me.yTickSize;\r
\r
                if (win.resizer) {\r
                    win.resizer.widthIncrement = me.xTickSize;\r
                    win.resizer.heightIncrement = me.yTickSize;\r
                }\r
            },\r
            single: true\r
        });\r
\r
        // replace normal window close w/fadeOut animation:\r
        win.doClose = function ()  {\r
            win.doClose = Ext.emptyFn; // dblclick can call again...\r
            win.el.disableShadow();\r
            win.el.fadeOut({\r
                listeners: {\r
                    afteranimate: function () {\r
                        win.destroy();\r
                    }\r
                }\r
            });\r
        };\r
\r
        return win;\r
    },\r
\r
    getActiveWindow: function () {\r
        var win = null,\r
            zmgr = this.getDesktopZIndexManager();\r
\r
        if (zmgr) {\r
            // We cannot rely on activate/deactive because that fires against non-Window\r
            // components in the stack.\r
\r
            zmgr.eachTopDown(function (comp) {\r
                if (comp.isWindow && !comp.hidden) {\r
                    win = comp;\r
                    return false;\r
                }\r
                return true;\r
            });\r
        }\r
\r
        return win;\r
    },\r
\r
    getDesktopZIndexManager: function () {\r
        var windows = this.windows;\r
        // TODO - there has to be a better way to get this...\r
        return (windows.getCount() && windows.getAt(0).zIndexManager) || null;\r
    },\r
\r
    getWindow: function(id) {\r
        return this.windows.get(id);\r
    },\r
\r
    minimizeWindow: function(win) {\r
        win.minimized = true;\r
        win.hide();\r
    },\r
\r
    restoreWindow: function (win) {\r
        if (win.isVisible()) {\r
            win.restore();\r
            win.toFront();\r
        } else {\r
            win.show();\r
        }\r
        return win;\r
    },\r
\r
    tileWindows: function() {\r
        var me = this, availWidth = me.body.getWidth(true);\r
        var x = me.xTickSize, y = me.yTickSize, nextY = y;\r
\r
        me.windows.each(function(win) {\r
            if (win.isVisible() && !win.maximized) {\r
                var w = win.el.getWidth();\r
\r
                // Wrap to next row if we are not at the line start and this Window will\r
                // go off the end\r
                if (x > me.xTickSize && x + w > availWidth) {\r
                    x = me.xTickSize;\r
                    y = nextY;\r
                }\r
\r
                win.setPosition(x, y);\r
                x += w + me.xTickSize;\r
                nextY = Math.max(nextY, y + win.el.getHeight() + me.yTickSize);\r
            }\r
        });\r
    },\r
\r
    updateActiveWindow: function () {\r
        var me = this, activeWindow = me.getActiveWindow(), last = me.lastActiveWindow;\r
        if (last && last.destroyed) {\r
            me.lastActiveWindow = null;\r
            return;\r
        }\r
        if (activeWindow === last) {\r
            return;\r
        }\r
\r
        if (last) {\r
            if (last.el.dom) {\r
                last.addCls(me.inactiveWindowCls);\r
                last.removeCls(me.activeWindowCls);\r
            }\r
            last.active = false;\r
        }\r
\r
        me.lastActiveWindow = activeWindow;\r
\r
        if (activeWindow) {\r
            activeWindow.addCls(me.activeWindowCls);\r
            activeWindow.removeCls(me.inactiveWindowCls);\r
            activeWindow.minimized = false;\r
            activeWindow.active = true;\r
        }\r
\r
        me.taskbar.setActiveButton(activeWindow && activeWindow.taskButton);\r
    }\r
});\r