<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-ux-event-RecorderManager'>/**
|
</span> * 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'
|
],
|
|
<span id='Ext-ux-event-RecorderManager-cfg-layout'> layout: 'fit',
|
</span><span id='Ext-ux-event-RecorderManager-cfg-buttonAlign'> buttonAlign: 'left',
|
</span>
|
<span id='Ext-ux-event-RecorderManager-property-eventsToIgnore'> eventsToIgnore: {
|
</span> mousemove: 1,
|
mouseover: 1,
|
mouseout: 1
|
},
|
|
<span id='Ext-ux-event-RecorderManager-cfg-bodyBorder'> bodyBorder: false,
|
</span><span id='Ext-ux-event-RecorderManager-property-playSpeed'> playSpeed: 1,
|
</span>
|
<span id='Ext-ux-event-RecorderManager-method-initComponent'> initComponent: function () {
|
</span> var me = this;
|
|
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('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
|
}
|
];
|
|
var events = 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.location.href
|
}
|
];
|
|
me.callParent();
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-makeRecordButtonMenu'> makeRecordButtonMenu: function () {
|
</span> 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.Function.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;
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-getEventView'> getEventView: function () {
|
</span> return this.down('#eventView');
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-onClear'> onClear: function () {
|
</span> var view = this.getEventView();
|
view.setValue('');
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-onPlay'> onPlay: function () {
|
</span> 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,
|
listeners: {
|
stop: me.onPlayStop,
|
scope: me
|
}
|
});
|
|
me.player.start();
|
me.syncBtnUI();
|
}
|
}
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-onPlayStop'> onPlayStop: function () {
|
</span> this.player = null;
|
this.syncBtnUI();
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-onPlaySpeed'> onPlaySpeed: function (menuitem) {
|
</span> this.playSpeed = menuitem.speed;
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-onRecord'> onRecord: function () {
|
</span> this.recorder.start();
|
this.syncBtnUI();
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-onStop'> onStop: function () {
|
</span> var me = this;
|
|
if (me.player) {
|
me.player.stop();
|
me.player = null;
|
} else {
|
me.recorder.stop();
|
}
|
me.syncBtnUI();
|
me.updateEvents();
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-syncBtnUI'> syncBtnUI: function () {
|
</span> var me = this,
|
idle = !me.player && !me.recorder.active;
|
|
Ext.each(me.query('[whenIdle]'), function (btn) {
|
btn.setDisabled(!idle);
|
});
|
Ext.each(me.query('[whenActive]'), function (btn) {
|
btn.setDisabled(idle);
|
});
|
|
var view = me.getEventView();
|
view.setReadOnly(!idle);
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-stringifyEvents'> stringifyEvents: function (events) {
|
</span> 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]';
|
},
|
|
<span id='Ext-ux-event-RecorderManager-method-updateEvents'> updateEvents: function () {
|
</span> var me = this,
|
text = me.stringifyEvents(me.recorder.getRecordedEvents()),
|
view = me.getEventView();
|
|
view.setValue(text);
|
view.scrollToBottom();
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
