/src/templates/html/sencha/examples/kitchensink/src/demos/simulator.js
JavaScript | 362 lines | 316 code | 34 blank | 12 comment | 50 complexity | fce1bfa81490f3ba12ba03a6282ea273 MD5 | raw file
- demos.isSimulatorEnabled = false;
- demos.isSimulatorDemoing = false;
- demos.Simulator = new Ext.Panel({
- layout: {
- type: 'vbox',
- pack: 'center',
- align: 'stretch'
- },
- defaults: {
- xtype: 'button',
- cls: 'demobtn'
- },
- items: [
- // {
- // text: 'Dump',
- // handler: function() {
- // var events = Ext.getCmp('simulator').getRecorder().getEventSet('main');
- // console.log(JSON.stringify(events));
- // Ext.Ajax.request({
- // url: '../../dump.php',
- // method: 'POST',
- // params: {data: JSON.stringify(events)}
- // });
- // }
- // },
- {
- text: "What's This?",
- handler: function() {
- if (!this.popup) {
- var popup = this.popup = new Ext.Panel({
- cls: "x-simulator-popup",
- floating: true,
- modal: true,
- centered: true,
- width: "90%",
- height: "80%",
- styleHtmlContent: true,
- scroll: 'vertical',
- html: "<p>Sencha Touch's <b>EventRecorder</b> and <b>EventSimulator</b> allow you to capture, \n\
- store and later playback all the touch events fired on the device's screen.</p>\n\
- <p>This opens up the possibility for automated UI and functional testing, or something\n\
- cool like live demostration of how your app works without the need of any pre-recorded videos.</p>\n\
- <p>Close this dialog and tap on the <b>\"Show Me!\"</b> button to see it in action. A demo series of events \n\
- (technically an array of serialized events in JSON format) will be replayed live on the screen.</p>\n\
- <p>To try it yourself, follow the steps below:\n\
- <ul>\n\
- <li>Show the Simulator Toolbar by tapping on the <b>\"Enable Simulator\"</b> button</li>\n\
- <li>Tap on the <b>\"Start\"</b> button to start recording events.</li>\n\
- <li>Interact with the app in any way you like, then tap on the <b>\"Stop\"</b> button to stop recording.</li>\n\
- <li>Tap on the <b>\"Playback\"</b> button and enjoy watching!.</li>\n\
- <li>Remember to tap on the <b>\"Erase\"</b> button before tapping on <b>\"Start\"</b> again if you want to start a new session.\n\
- Otherwise it will resume recording from where it was left off.</li>\n\
- </ul></p>",
- dockedItems: [{
- dock: 'bottom',
- xtype: 'toolbar',
- layout: {
- type: 'vbox',
- pack: 'center',
- align: 'stretch'
- },
- items: [
- { xtype: 'button', ui: 'decline', text: 'Close', handler: function() { popup.hide('fade'); } }
- ]
- }]
- });
- }
- this.popup.show('pop');
- }
- },
- {
- ui: 'action',
- text: "Show Me!",
- handler: function() {
- if (Ext.Viewport.orientation != 'portrait') {
- Ext.Msg.alert('Sorry...', 'The pre-recorded data were made for portrait orientation only. Rotate your device and try again');
- }
- else if (Ext.is.Desktop){
- Ext.Msg.alert('Sorry...', "There's no pre-recorded data for desktop yet. Tap on \"What's This?\" for instructions.");
- }
- else {
- var simulator = Ext.getCmp('simulator');
- simulator.enableSimulator();
-
- demos.Simulator.setLoading(true);
- Ext.Ajax.request({
- url: 'resources/simulator/' + ((Ext.is.Phone) ? 'phone' : 'tablet') + '.json',
- method: 'GET',
- success: function(response, opts) {
- demos.Simulator.setLoading(false);
- simulator.getRecorder().setEventSet('demo', Ext.decode(response.responseText));
- simulator.getRecorder().replay('demo');
- }
- });
- }
- }
- },
- {
- id: 'simulator',
- ui: 'confirm',
- text: 'Enable Simulator',
- recorderEvents: ['touchstart', 'touchmove', 'touchend', 'mousedown', 'mousemove', 'mouseup', 'click'],
- handler: function() {
- if (!demos.isSimulatorEnabled) {
- this.enableSimulator();
- } else {
- this.disableSimulator();
- }
- },
- enableSimulator: function() {
- if (!demos.isSimulatorEnabled) {
- demos.isSimulatorEnabled = true;
- this.setText('Disable Simulator');
- this.el.addCls('x-button-decline').removeCls('x-button-confirm');
- this.showToolbar();
- }
- },
- disableSimulator: function() {
- if (demos.isSimulatorEnabled) {
- demos.isSimulatorEnabled = false;
- this.setText('Enable Simulator');
- this.el.removeCls('x-button-decline').addCls('x-button-confirm');
- this.hideToolbar();
- this.eraseRecorder();
- }
- },
- doRecord: function(e) {
- var target = e.target;
- if (target.nodeType == 3)
- target = target.parentNode;
- if (Ext.get(target).hasCls('x-button-label')) {
- target = target.parentNode;
- }
- if (!Ext.get(target).hasCls('recorderButton')) {
- this.getRecorder().record('main', e);
- }
- },
- getRecorder: function() {
- if (!this.recorder) {
- this.recorder = new Ext.util.EventRecorder();
- this.recorder.on({
- replaystart: this.onReplayStart,
- replayend: this.onReplayEnd,
- beforecalculatetarget: this.onBeforeCalculateTarget,
- aftercalculatetarget: this.onAfterCalculateTarget,
- beforefire: this.onBeforeFire,
- afterfire: this.onAfterFire,
- interrupted: this.onInterrupted,
- scope: this
- });
- }
- return this.recorder;
- },
- startRecorder: function() {
- if (demos.isSimulatorDemoing) {
- return;
- }
- var me = this;
- if (!this.doRecordWrap) {
- this.doRecordWrap = Ext.createDelegate(me.doRecord, me);
- }
- this.getRecorder().start('main');
- this.recorderEvents.forEach(function(name) {
- document.addEventListener(name, me.doRecordWrap, true);
- });
- this.isRecording = true;
- },
- stopRecorder: function() {
- if (demos.isSimulatorDemoing) {
- return;
- }
-
- var me = this;
- if (!this.doRecordWrap) {
- this.doRecordWrap = Ext.createDelegate(me.doRecord, me);
- }
- this.recorderEvents.forEach(function(name) {
- document.removeEventListener(name, me.doRecordWrap, true);
- });
- window.localStorage.setItem('recordedEvents', JSON.stringify(this.getRecorder().getEventSet('main')));
- },
- eraseRecorder: function() {
- this.getThumb().hide();
- this.getRecorder().erase('main');
- window.localStorage.setItem('recordedEvents', null);
- },
- replayRecorder: function() {
- if (this.isRecording) {
- this.stopRecorder();
- this.isRecording = false;
- }
- var events = window.localStorage.getItem('recordedEvents');
- if (events) {
- this.getRecorder().setEventSet('main', JSON.parse(events));
- }
- this.getRecorder().replay('main');
- },
- showToolbar: function() {
- sink.Main.ui.addDocked(this.getToolbar());
- },
- hideToolbar: function() {
- sink.Main.ui.removeDocked(this.getToolbar(), false);
- },
- getToolbar: function() {
- if (!this.toolbar) {
- this.toolbar = new Ext.Toolbar({
- docked: 'bottom',
- items: [
- {
- xtype: 'button',
- ui: 'confirm',
- cls: 'recorderButton',
- text: 'Start',
- handler: Ext.createDelegate(this.startRecorder, this)
- },
- {
- xtype: 'button',
- text: 'Stop',
- ui: 'decline',
- cls: 'recorderButton',
- handler: Ext.createDelegate(this.stopRecorder, this)
- },
- {
- xtype: 'button',
- text: 'Erase',
- ui: 'action',
- cls: 'recorderButton',
- handler: Ext.createDelegate(this.eraseRecorder, this)
- },
- {
- xtype: 'button',
- ui: 'forward',
- text: 'Playback',
- cls: 'recorderButton',
- handler: Ext.createDelegate(this.replayRecorder, this)
- }
- ]
- });
- }
- return this.toolbar;
- },
- onEventDuringReplay: function(e) {
- if (!e.isSimulated) {
- e.preventDefault();
- e.stopPropagation();
- e.stopped = true;
- if (e.type == 'touchstart' || e.type == 'mousedown') {
- this.getRecorder().stopReplay();
- }
-
- return false;
- }
- },
- getThumb: function() {
- if (!this.thumb) {
- this.thumb = Ext.getBody().createChild({
- cls: 'x-simulator-thumb'
- });
- this.thumb.hide();
- }
- return this.thumb;
- },
- onReplayStart: function(name) {
- if (name == 'demo') {
- demos.isSimulatorDemoing = true;
- }
- if (!this.onEventDuringReplayWrap) {
- this.onEventDuringReplayWrap = Ext.createDelegate(this.onEventDuringReplay, this);
- }
- Ext.gesture.Manager.detachListeners();
- this.recorderEvents.forEach(function(name) {
- document.addEventListener(name, this.onEventDuringReplayWrap, true);
- }, this);
- Ext.gesture.Manager.attachListeners();
-
- this.getThumb().show();
- },
- onReplayEnd: function(name, isInterrupted) {
- var me = this;
- if (name == 'demo') {
- demos.isSimulatorDemoing = false;
- }
- this.recorderEvents.forEach(function(name) {
- document.removeEventListener(name, this.onEventDuringReplayWrap, true);
- }, this);
-
- this.getThumb().hide();
-
- if (isInterrupted) {
- if (!confirm("Do you want to stop this playback?")) {
- setTimeout(function() {
- me.getRecorder().resumeReplay(name);
- }, 100);
- }
- } else {
- if (name == 'demo') {
- Ext.Msg.alert("End of Demo", "For full description / instructions, tap on the \"What's This?\" button");
- }
- }
- },
- onBeforeCalculateTarget: function() {
- this.getThumb().dom.style.visibility = 'hidden';
- },
- onAfterCalculateTarget: function() {
- this.getThumb().dom.style.visibility = 'visible';
- },
- onAfterFire: Ext.emptyFn,
- onInterrupted: function() {
- this.getThumb().removeCls('pressed');
- },
- onBeforeFire: function(type, target, event) {
- var point = Ext.util.Point.fromEvent(event);
- point.translate(-20, -20);
-
- Ext.Element.cssTranslate(this.getThumb(), point);
- if (type == 'touchstart' || type == 'mousedown') {
- this.getThumb().addCls('pressed');
- } else if (type == 'touchend' || type == 'mouseup') {
- this.getThumb().removeCls('pressed');
- }
- }
- }]
- });
- Ext.Element.fromPoint = function(x, y) {
- if (!demos.isSimulatorEnabled) {
- return Ext.get(document.elementFromPoint(x, y));
- } else {
- var thumb = Ext.getCmp('simulator').getThumb(),
- target;
- thumb.dom.style.visibility = 'hidden';
- target = Ext.get(document.elementFromPoint(x, y));
- thumb.dom.style.visibility = 'visible';
- return target;
- }
- };