add extjs 6.0.1 sources

[extjs.git] / extjs / packages / ux / classic / src / event / RecorderManager.js

/**\r
 * Recorder manager.\r
 * Used as a bookmarklet:\r
 *\r
 *    javascript:void(window.open("../ux/event/RecorderManager.html","recmgr"))\r
 */\r
Ext.define('Ext.ux.event.RecorderManager', {\r
    extend: 'Ext.panel.Panel',\r
\r
    alias: 'widget.eventrecordermanager',\r
\r
    uses: [\r
        'Ext.ux.event.Recorder',\r
        'Ext.ux.event.Player'\r
    ],\r
\r
    layout: 'fit',\r
    buttonAlign: 'left',\r
\r
    eventsToIgnore: {\r
        mousemove: 1,\r
        mouseover: 1,\r
        mouseout: 1\r
    },\r
\r
    bodyBorder: false,\r
    playSpeed: 1,\r
\r
    initComponent: function () {\r
        var me = this;\r
\r
        me.recorder = new Ext.ux.event.Recorder({\r
            attachTo: me.attachTo,\r
            listeners: {\r
                add: me.updateEvents,\r
                coalesce: me.updateEvents,\r
                buffer: 200,\r
                scope: me\r
            }\r
        });\r
        me.recorder.eventsToRecord = Ext.apply({}, me.recorder.eventsToRecord);\r
\r
        function speed (text, value) {\r
            return {\r
                text: text,\r
                speed: value,\r
                group: 'speed',\r
                checked: value == me.playSpeed,\r
                handler: me.onPlaySpeed,\r
                scope: me\r
            };\r
        }\r
\r
        me.tbar = [\r
            {\r
                text: 'Record',\r
                xtype: 'splitbutton',\r
                whenIdle: true,\r
                handler: me.onRecord,\r
                scope: me,\r
                menu: me.makeRecordButtonMenu()\r
            },\r
            {\r
                text: 'Play',\r
                xtype: 'splitbutton',\r
                whenIdle: true,\r
                handler: me.onPlay,\r
                scope: me,\r
                menu: [\r
                    speed('Qarter Speed (0.25x)', .25),\r
                    speed('Half Speed (0.5x)', .5 ),\r
                    speed('3/4 Speed (0.75x)', .75),\r
                    '-',\r
                    speed('Recorded Speed (1x)', 1),\r
                    speed('Double Speed (2x)', 2),\r
                    speed('Quad Speed (4x)', 4),\r
                    '-',\r
                    speed('Full Speed', 1000)\r
                ]\r
            },\r
            {\r
                text: 'Clear',\r
                whenIdle: true,\r
                handler: me.onClear,\r
                scope: me\r
            },\r
            '->',\r
            {\r
                text: 'Stop',\r
                whenActive: true,\r
                disabled: true,\r
                handler: me.onStop,\r
                scope: me\r
            }\r
        ];\r
\r
        var events = me.attachTo && me.attachTo.testEvents;\r
        me.items = [\r
            {\r
                xtype: 'textarea',\r
                itemId: 'eventView',\r
                fieldStyle: 'font-family: monospace',\r
                selectOnFocus: true,\r
                emptyText: 'Events go here!',\r
                value: events ? me.stringifyEvents(events) : '',\r
                scrollToBottom: function () {\r
                    var inputEl = this.inputEl.dom;\r
                    inputEl.scrollTop = inputEl.scrollHeight;\r
                }\r
            }\r
        ];\r
        me.fbar = [\r
            {\r
                xtype: 'tbtext',\r
                text: 'Attached To: ' + (me.attachTo && me.attachTo.location.href)\r
            }\r
        ];\r
\r
        me.callParent();\r
    },\r
\r
    makeRecordButtonMenu: function () {\r
        var ret = [],\r
            subs = {},\r
            eventsToRec = this.recorder.eventsToRecord,\r
            ignoredEvents = this.eventsToIgnore;\r
\r
        Ext.Object.each(eventsToRec, function (name, value) {\r
            var sub = subs[value.kind];\r
            if (!sub) {\r
                subs[value.kind] = sub = [];\r
                ret.push({\r
                    text: value.kind,\r
                    menu: sub\r
                });\r
            }\r
\r
            sub.push({\r
                text: name,\r
                checked: true,\r
                handler: function (menuItem) {\r
                    if (menuItem.checked) {\r
                        eventsToRec[name] = value;\r
                    } else {\r
                        delete eventsToRec[name];\r
                    }\r
                }\r
            });\r
\r
            if (ignoredEvents[name]) {\r
                sub[sub.length - 1].checked = false;\r
                Ext.Function.defer(function () {\r
                    delete eventsToRec[name];\r
                }, 1);\r
            }\r
        });\r
\r
        function less (lhs, rhs) {\r
            return (lhs.text < rhs.text) ? -1\r
                        : ((rhs.text < lhs.text) ? 1 : 0);\r
        }\r
\r
        ret.sort(less);\r
        Ext.Array.each(ret, function (sub) {\r
            sub.menu.sort(less);\r
        });\r
\r
        return ret;\r
    },\r
\r
    getEventView: function () {\r
        return this.down('#eventView');\r
    },\r
\r
    onClear: function () {\r
        var view = this.getEventView();\r
        view.setValue('');\r
    },\r
\r
    onPlay: function () {\r
        var me = this,\r
            view = me.getEventView(),\r
            events = view.getValue();\r
\r
        if (events) {\r
            events = Ext.decode(events);\r
            if (events.length) {\r
                me.player = Ext.create('Ext.ux.event.Player', {\r
                    attachTo: window.opener,\r
                    eventQueue: events,\r
                    speed: me.playSpeed,\r
                    listeners: {\r
                        stop: me.onPlayStop,\r
                        scope: me\r
                    }\r
                });\r
\r
                me.player.start();\r
                me.syncBtnUI();\r
            }\r
        }\r
    },\r
\r
    onPlayStop: function () {\r
        this.player = null;\r
        this.syncBtnUI();\r
    },\r
\r
    onPlaySpeed: function (menuitem) {\r
        this.playSpeed = menuitem.speed;\r
    },\r
\r
    onRecord: function () {\r
        this.recorder.start();\r
        this.syncBtnUI();\r
    },\r
\r
    onStop: function () {\r
        var me = this;\r
\r
        if (me.player) {\r
            me.player.stop();\r
            me.player = null;\r
        } else {\r
            me.recorder.stop();\r
        }\r
        me.syncBtnUI();\r
        me.updateEvents();\r
    },\r
\r
    syncBtnUI: function () {\r
        var me = this,\r
            idle = !me.player && !me.recorder.active;\r
\r
        Ext.each(me.query('[whenIdle]'), function (btn) {\r
            btn.setDisabled(!idle);\r
        });\r
        Ext.each(me.query('[whenActive]'), function (btn) {\r
            btn.setDisabled(idle);\r
        });\r
\r
        var view = me.getEventView();\r
        view.setReadOnly(!idle);\r
    },\r
\r
    stringifyEvents: function (events) {\r
        var line,\r
            lines = [];\r
\r
        Ext.each(events, function (ev) {\r
            line = [];\r
\r
            Ext.Object.each(ev, function (name, value) {\r
                if (line.length) {\r
                    line.push(', ');\r
                } else {\r
                    line.push('  { ');\r
                }\r
                line.push(name, ': ');\r
                line.push(Ext.encode(value));\r
            });\r
\r
            line.push(' }');\r
            lines.push(line.join(''));\r
        });\r
\r
        return '[\n' + lines.join(',\n') + '\n]';\r
    },\r
\r
    updateEvents: function () {\r
        var me = this,\r
            text = me.stringifyEvents(me.recorder.getRecordedEvents()),\r
            view = me.getEventView();\r
\r
        view.setValue(text);\r
        view.scrollToBottom();\r
    }\r
});\r