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