examples/ux/event/Recorder.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.define('Ext.ux.event.Recorder', {
  16     extend: 'Ext.ux.event.Driver',
  17
  18     eventsToRecord: function () {
  19         var //key = { modKeys: true, key: true },
  20             mouse = { button: true, modKeys: true, xy: true };
  21
  22         return {
  23             //keydown: key,
  24             //keypress: key,
  25             //keyup: key,
  26
  27             //mousemove: mouse,
  28             //mouseover: mouse,
  29             //mouseout: mouse,
  30             click: mouse,
  31             //mousewheel: Ext.apply({ wheel: true }, mouse),
  32             mousedown: mouse,
  33             mouseup: mouse
  34         };
  35     }(),
  36
  37     ignoreIdRegEx: /ext-gen(?:\d+)/,
  38
  39     constructor: function (config) {
  40         var me = this,
  41             events = config && config.eventsToRecord;
  42
  43         if (events) {
  44             me.eventsToRecord = Ext.apply(Ext.apply({}, me.eventsToRecord), // duplicate
  45                                     events); // and merge
  46             delete config.eventsToRecord; // don't smash
  47         }
  48
  49         me.callParent(arguments);
  50
  51         me.clear();
  52         me.modKeys = [];
  53     },
  54
  55     clear: function () {
  56         this.events = [];
  57     },
  58
  59     coalesce: function (rec) {
  60         var me = this,
  61             events = me.events,
  62             length = events.length,
  63             tail = length && events[length-1];
  64
  65         if (tail && tail.type == 'mousemove' && rec.type == 'mousemove') {
  66             if (rec.ts - tail.ts < 200) {
  67                 events[length-1] = rec;
  68                 return true;
  69             }
  70         }
  71
  72         return false;
  73     },
  74
  75     getElementXPath: function (el) {
  76         var me = this,
  77             good = false,
  78             xpath = [],
  79             count,
  80             sibling,
  81             t,
  82             tag;
  83
  84         for (t = el; t; t = t.parentNode) {
  85             if (t == document.body) {
  86                 xpath.unshift('~');
  87                 good = true;
  88                 break;
  89             }
  90             if (t.id && !me.ignoreIdRegEx.test(t.id)) {
  91                 xpath.unshift('#' + t.id);
  92                 good = true;
  93                 break;
  94             }
  95
  96             for (count = 1, sibling = t; !!(sibling = sibling.previousSibling); ) {
  97                 if (sibling.tagName == t.tagName) {
  98                     ++count;
  99                 }
 100             }
 101
 102             tag = t.tagName.toLowerCase();
 103             if (count < 2) {
 104                 xpath.unshift(tag);
 105             } else {
 106                 xpath.unshift(tag + '[' + count + ']');
 107             }
 108         }
 109
 110         return good ? xpath.join('/') : null;
 111     },
 112
 113     onEvent: function (e) {
 114         var me = this,
 115             info = me.eventsToRecord[e.type],
 116             modKeys,
 117             rec = {
 118                 type: e.type,
 119                 ts: me.getTimestamp(),
 120                 target: me.getElementXPath(e.target)
 121             };
 122
 123         if (!rec.target) {
 124             return;
 125         }
 126
 127         if (info.xy) {
 128             rec.xy = e.getXY();
 129         }
 130
 131         if (info.button) {
 132             rec.button = e.button;
 133         }
 134
 135         if (info.wheel) {
 136             rec.wheel = e.getWheelDelta();
 137         }
 138
 139         if (info.modKeys) {
 140             me.modKeys[0] = e.altKey ? 'A' : '';
 141             me.modKeys[1] = e.ctrlKey ? 'C' : '';
 142             me.modKeys[2] = e.metaKey ? 'M' : '';
 143             me.modKeys[3] = e.shiftKey ? 'S' : '';
 144
 145             modKeys = me.modKeys.join('');
 146             if (modKeys) {
 147                 rec.modKeys = modKeys;
 148             }
 149         }
 150
 151         if (info.key) {
 152             rec.charCode = e.getCharCode();
 153             rec.keyCode = e.getKey();
 154         }
 155
 156         if (!me.coalesce(rec)) {
 157             me.events.push(rec);
 158         }
 159         Ext.log('record: ' + Ext.encode(rec));
 160     },
 161
 162     onStart: function () {
 163         var me = this,
 164             on = {
 165                 scope: me
 166             },
 167             ddm = Ext.dd.DragDropManager,
 168             evproto = Ext.EventObjectImpl.prototype;
 169
 170         Ext.Object.each(me.eventsToRecord, function (name, value) {
 171             if (value) {
 172                 on[name] = me.onEvent;
 173             }
 174         });
 175
 176         me.ddmStopEvent = ddm.stopEvent;
 177         ddm.stopEvent = Ext.Function.createSequence(ddm.stopEvent, function (e) {
 178             me.onEvent(e);
 179         });
 180         me.evStopEvent = evproto.stopEvent;
 181         evproto.stopEvent = Ext.Function.createSequence(evproto.stopEvent, function () {
 182             me.onEvent(this);
 183         });
 184
 185         Ext.getBody().on(on);
 186     },
 187
 188     onStop: function () {
 189         var me = this,
 190             body = Ext.getBody();
 191
 192         Ext.Object.each(me.eventsToRecord, function (name, value) {
 193             if (value) {
 194                 body.un(name, me.onEvent, me);
 195             }
 196         });
 197
 198         Ext.dd.DragDropManager.stopEvent = me.ddmStopEvent;
 199         Ext.EventObjectImpl.prototype.stopEvent = me.evStopEvent;
 200     }
 201 });
 202