extjs/packages/ux/classic/src/event/RecorderManager.js

   1 /**
   2  * Recorder manager.
   3  * Used as a bookmarklet:
   4  *
   5  *    javascript:void(window.open("../ux/event/RecorderManager.html","recmgr"))
   6  */
   7 Ext.define('Ext.ux.event.RecorderManager', {
   8     extend: 'Ext.panel.Panel',
   9
  10     alias: 'widget.eventrecordermanager',
  11
  12     uses: [
  13         'Ext.ux.event.Recorder',
  14         'Ext.ux.event.Player'
  15     ],
  16
  17     layout: 'fit',
  18     buttonAlign: 'left',
  19
  20     eventsToIgnore: {
  21         mousemove: 1,
  22         mouseover: 1,
  23         mouseout: 1
  24     },
  25
  26     bodyBorder: false,
  27     playSpeed: 1,
  28
  29     initComponent: function () {
  30         var me = this;
  31
  32         me.recorder = new Ext.ux.event.Recorder({
  33             attachTo: me.attachTo,
  34             listeners: {
  35                 add: me.updateEvents,
  36                 coalesce: me.updateEvents,
  37                 buffer: 200,
  38                 scope: me
  39             }
  40         });
  41         me.recorder.eventsToRecord = Ext.apply({}, me.recorder.eventsToRecord);
  42
  43         function speed (text, value) {
  44             return {
  45                 text: text,
  46                 speed: value,
  47                 group: 'speed',
  48                 checked: value == me.playSpeed,
  49                 handler: me.onPlaySpeed,
  50                 scope: me
  51             };
  52         }
  53
  54         me.tbar = [
  55             {
  56                 text: 'Record',
  57                 xtype: 'splitbutton',
  58                 whenIdle: true,
  59                 handler: me.onRecord,
  60                 scope: me,
  61                 menu: me.makeRecordButtonMenu()
  62             },
  63             {
  64                 text: 'Play',
  65                 xtype: 'splitbutton',
  66                 whenIdle: true,
  67                 handler: me.onPlay,
  68                 scope: me,
  69                 menu: [
  70                     speed('Qarter Speed (0.25x)', .25),
  71                     speed('Half Speed (0.5x)', .5 ),
  72                     speed('3/4 Speed (0.75x)', .75),
  73                     '-',
  74                     speed('Recorded Speed (1x)', 1),
  75                     speed('Double Speed (2x)', 2),
  76                     speed('Quad Speed (4x)', 4),
  77                     '-',
  78                     speed('Full Speed', 1000)
  79                 ]
  80             },
  81             {
  82                 text: 'Clear',
  83                 whenIdle: true,
  84                 handler: me.onClear,
  85                 scope: me
  86             },
  87             '->',
  88             {
  89                 text: 'Stop',
  90                 whenActive: true,
  91                 disabled: true,
  92                 handler: me.onStop,
  93                 scope: me
  94             }
  95         ];
  96
  97         var events = me.attachTo && me.attachTo.testEvents;
  98         me.items = [
  99             {
 100                 xtype: 'textarea',
 101                 itemId: 'eventView',
 102                 fieldStyle: 'font-family: monospace',
 103                 selectOnFocus: true,
 104                 emptyText: 'Events go here!',
 105                 value: events ? me.stringifyEvents(events) : '',
 106                 scrollToBottom: function () {
 107                     var inputEl = this.inputEl.dom;
 108                     inputEl.scrollTop = inputEl.scrollHeight;
 109                 }
 110             }
 111         ];
 112         me.fbar = [
 113             {
 114                 xtype: 'tbtext',
 115                 text: 'Attached To: ' + (me.attachTo && me.attachTo.location.href)
 116             }
 117         ];
 118
 119         me.callParent();
 120     },
 121
 122     makeRecordButtonMenu: function () {
 123         var ret = [],
 124             subs = {},
 125             eventsToRec = this.recorder.eventsToRecord,
 126             ignoredEvents = this.eventsToIgnore;
 127
 128         Ext.Object.each(eventsToRec, function (name, value) {
 129             var sub = subs[value.kind];
 130             if (!sub) {
 131                 subs[value.kind] = sub = [];
 132                 ret.push({
 133                     text: value.kind,
 134                     menu: sub
 135                 });
 136             }
 137
 138             sub.push({
 139                 text: name,
 140                 checked: true,
 141                 handler: function (menuItem) {
 142                     if (menuItem.checked) {
 143                         eventsToRec[name] = value;
 144                     } else {
 145                         delete eventsToRec[name];
 146                     }
 147                 }
 148             });
 149
 150             if (ignoredEvents[name]) {
 151                 sub[sub.length - 1].checked = false;
 152                 Ext.Function.defer(function () {
 153                     delete eventsToRec[name];
 154                 }, 1);
 155             }
 156         });
 157
 158         function less (lhs, rhs) {
 159             return (lhs.text < rhs.text) ? -1
 160                         : ((rhs.text < lhs.text) ? 1 : 0);
 161         }
 162
 163         ret.sort(less);
 164         Ext.Array.each(ret, function (sub) {
 165             sub.menu.sort(less);
 166         });
 167
 168         return ret;
 169     },
 170
 171     getEventView: function () {
 172         return this.down('#eventView');
 173     },
 174
 175     onClear: function () {
 176         var view = this.getEventView();
 177         view.setValue('');
 178     },
 179
 180     onPlay: function () {
 181         var me = this,
 182             view = me.getEventView(),
 183             events = view.getValue();
 184
 185         if (events) {
 186             events = Ext.decode(events);
 187             if (events.length) {
 188                 me.player = Ext.create('Ext.ux.event.Player', {
 189                     attachTo: window.opener,
 190                     eventQueue: events,
 191                     speed: me.playSpeed,
 192                     listeners: {
 193                         stop: me.onPlayStop,
 194                         scope: me
 195                     }
 196                 });
 197
 198                 me.player.start();
 199                 me.syncBtnUI();
 200             }
 201         }
 202     },
 203
 204     onPlayStop: function () {
 205         this.player = null;
 206         this.syncBtnUI();
 207     },
 208
 209     onPlaySpeed: function (menuitem) {
 210         this.playSpeed = menuitem.speed;
 211     },
 212
 213     onRecord: function () {
 214         this.recorder.start();
 215         this.syncBtnUI();
 216     },
 217
 218     onStop: function () {
 219         var me = this;
 220
 221         if (me.player) {
 222             me.player.stop();
 223             me.player = null;
 224         } else {
 225             me.recorder.stop();
 226         }
 227         me.syncBtnUI();
 228         me.updateEvents();
 229     },
 230
 231     syncBtnUI: function () {
 232         var me = this,
 233             idle = !me.player && !me.recorder.active;
 234
 235         Ext.each(me.query('[whenIdle]'), function (btn) {
 236             btn.setDisabled(!idle);
 237         });
 238         Ext.each(me.query('[whenActive]'), function (btn) {
 239             btn.setDisabled(idle);
 240         });
 241
 242         var view = me.getEventView();
 243         view.setReadOnly(!idle);
 244     },
 245
 246     stringifyEvents: function (events) {
 247         var line,
 248             lines = [];
 249
 250         Ext.each(events, function (ev) {
 251             line = [];
 252
 253             Ext.Object.each(ev, function (name, value) {
 254                 if (line.length) {
 255                     line.push(', ');
 256                 } else {
 257                     line.push('  { ');
 258                 }
 259                 line.push(name, ': ');
 260                 line.push(Ext.encode(value));
 261             });
 262
 263             line.push(' }');
 264             lines.push(line.join(''));
 265         });
 266
 267         return '[\n' + lines.join(',\n') + '\n]';
 268     },
 269
 270     updateEvents: function () {
 271         var me = this,
 272             text = me.stringifyEvents(me.recorder.getRecordedEvents()),
 273             view = me.getEventView();
 274
 275         view.setValue(text);
 276         view.scrollToBottom();
 277     }
 278 });