[927] | 1 | // Copyright 2012 Georg-August-Universität Göttingen, Germany |
---|
| 2 | // |
---|
| 3 | // Licensed under the Apache License, Version 2.0 (the "License"); |
---|
| 4 | // you may not use this file except in compliance with the License. |
---|
| 5 | // You may obtain a copy of the License at |
---|
| 6 | // |
---|
| 7 | // http://www.apache.org/licenses/LICENSE-2.0 |
---|
| 8 | // |
---|
| 9 | // Unless required by applicable law or agreed to in writing, software |
---|
| 10 | // distributed under the License is distributed on an "AS IS" BASIS, |
---|
| 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
---|
| 12 | // See the License for the specific language governing permissions and |
---|
| 13 | // limitations under the License. |
---|
| 14 | |
---|
[858] | 15 | /** |
---|
| 16 | * AutoQUEST - HTML Monitor |
---|
| 17 | * |
---|
| 18 | * Description: This script records the interactions done by an user on an |
---|
| 19 | * HTML-Website and sends them to a server. It does not register actions on |
---|
| 20 | * Flash, Java, or other special inputs. This script is tested on Firefox |
---|
| 21 | * 15.0.1. |
---|
| 22 | * |
---|
| 23 | * To insert it on your HTML-side, you need to write <script |
---|
| 24 | * language="JavaScript" type="text/javascript" src="autoquest-htmlmonitor.js"></script> in the |
---|
| 25 | * head and change the src-attribute to the location, you have chosen for this |
---|
| 26 | * script. |
---|
| 27 | * |
---|
| 28 | * To change the recorded events, edit the action config array. If you want to change |
---|
| 29 | * the server where the data is send to, rewrite the destination variable. The |
---|
| 30 | * records are send to the server, JSON-formatted, if there are 10 inputs or the |
---|
| 31 | * user changes/closes the site. |
---|
| 32 | * |
---|
| 33 | * Authors: Simon Leidenbach, Simon Reuss, Patrick Harms |
---|
| 34 | * |
---|
| 35 | * Version: 0.1 |
---|
| 36 | */ |
---|
| 37 | |
---|
| 38 | /** |
---|
| 39 | * the server to send the recorded data to |
---|
| 40 | */ |
---|
[879] | 41 | var autoquestDestination; |
---|
[858] | 42 | |
---|
| 43 | /** |
---|
[881] | 44 | * an ID that is more or less unique for the client |
---|
| 45 | */ |
---|
| 46 | var autoquestClientId; |
---|
| 47 | |
---|
| 48 | /** |
---|
[858] | 49 | * the maximum number of recorded events to be put into one package sent to the server |
---|
| 50 | */ |
---|
[879] | 51 | var autoquestPackageSize = 10; |
---|
[858] | 52 | |
---|
| 53 | /** |
---|
| 54 | * this variable defines the tags for which event handling shall be added, as well as the |
---|
| 55 | * event handling action to be monitored |
---|
| 56 | */ |
---|
[879] | 57 | var autoquestActionConfig = [ |
---|
[944] | 58 | { "tag": "a", "actions": [ "onclick", |
---|
| 59 | "onfocus" ] }, |
---|
| 60 | //{ "tag": "abbr", "actions": [ ] }, |
---|
| 61 | //{ "tag": "address", "actions": [ ] }, |
---|
| 62 | //{ "tag": "applet", "actions": [ ] }, |
---|
| 63 | { "tag": "area", "actions": [ "onclick", |
---|
| 64 | "onfocus" ] }, |
---|
| 65 | //{ "tag": "article", "actions": [ ] }, |
---|
| 66 | //{ "tag": "aside", "actions": [ ] }, |
---|
| 67 | { "tag": "audio", "actions": [ "onplaying", |
---|
| 68 | "onpause", |
---|
| 69 | "ontimeupdate" ] }, |
---|
| 70 | { "tag": "b", "actions": [ "onclick" ] }, |
---|
| 71 | //{ "tag": "bdi", "actions": [ ] }, |
---|
| 72 | //{ "tag": "bdo", "actions": [ ] }, |
---|
| 73 | //{ "tag": "blockquote", "actions": [ ] }, |
---|
[1073] | 74 | { "tag": "body", "actions": [ "onclick", |
---|
[944] | 75 | "onpagehide", |
---|
| 76 | "onpageshow", |
---|
[1073] | 77 | "onscroll", |
---|
[944] | 78 | "onundo" ] }, |
---|
| 79 | { "tag": "button", "actions": [ "onclick", |
---|
| 80 | "onfocus" ] }, |
---|
| 81 | { "tag": "canvas", "actions": [ "onclick" ] }, |
---|
| 82 | //{ "tag": "caption", "actions": [ ] }, |
---|
| 83 | { "tag": "cite", "actions": [ "onclick" ] }, |
---|
| 84 | { "tag": "code", "actions": [ "onclick" ] }, |
---|
| 85 | //{ "tag": "col", "actions": [ ] }, |
---|
| 86 | //{ "tag": "colgroup", "actions": [ ] }, |
---|
| 87 | { "tag": "command", "actions": [ "onclick", |
---|
| 88 | "onfocus" ] }, |
---|
| 89 | //{ "tag": "datalist", "actions": [ ] }, |
---|
| 90 | { "tag": "dd", "actions": [ "onclick" ] }, |
---|
| 91 | { "tag": "del", "actions": [ "onclick" ] }, |
---|
| 92 | //{ "tag": "details", "actions": [ ] }, |
---|
| 93 | { "tag": "dfn", "actions": [ "onclick" ] }, |
---|
[1247] | 94 | { "tag": "div", "actions": [ "onclick", |
---|
| 95 | "onscroll" ] }, |
---|
[944] | 96 | //{ "tag": "dl", "actions": [ ] }, |
---|
| 97 | { "tag": "dt", "actions": [ "onclick" ] }, |
---|
| 98 | { "tag": "em", "actions": [ "onclick" ] }, |
---|
| 99 | { "tag": "embed", "actions": [ "onclick" ] }, |
---|
| 100 | //{ "tag": "fieldset", "actions": [ ] }, |
---|
| 101 | //{ "tag": "figcaption", "actions": [ ] }, |
---|
| 102 | //{ "tag": "figure", "actions": [ ] }, |
---|
| 103 | //{ "tag": "footer", "actions": [ ] }, |
---|
[999] | 104 | { "tag": "form", "actions": [ "onreset", |
---|
| 105 | "onsubmit" ] }, |
---|
[944] | 106 | //{ "tag": "header", "actions": [ ] }, |
---|
| 107 | //{ "tag": "hgroup", "actions": [ ] }, |
---|
| 108 | { "tag": "h1", "actions": [ "onclick" ] }, |
---|
| 109 | { "tag": "h2", "actions": [ "onclick" ] }, |
---|
| 110 | { "tag": "h3", "actions": [ "onclick" ] }, |
---|
| 111 | { "tag": "h4", "actions": [ "onclick" ] }, |
---|
| 112 | { "tag": "h5", "actions": [ "onclick" ] }, |
---|
| 113 | { "tag": "h6", "actions": [ "onclick" ] }, |
---|
| 114 | //{ "tag": "hr", "actions": [ ] }, |
---|
| 115 | { "tag": "i", "actions": [ "onclick" ] }, |
---|
| 116 | //{ "tag": "iframe", "actions": [ ] }, |
---|
[999] | 117 | { "tag": "img", "actions": [ "onabort", |
---|
| 118 | "onclick" ] }, |
---|
[1247] | 119 | { "tag": "input_button", "actions": [ "onclick", |
---|
| 120 | "onfocus" ] }, |
---|
| 121 | { "tag": "input_checkbox", "actions": [ "onchange", |
---|
| 122 | "onclick", |
---|
| 123 | "onfocus" ] }, |
---|
| 124 | { "tag": "input_color", "actions": [ "onchange", |
---|
| 125 | "onclick", |
---|
| 126 | "onfocus", |
---|
| 127 | "onselect" ] }, |
---|
| 128 | { "tag": "input_date", "actions": [ "onchange", |
---|
| 129 | "onclick", |
---|
[999] | 130 | "onfocus", |
---|
| 131 | "onselect" ] }, |
---|
[1247] | 132 | { "tag": "input_datetime", "actions": [ "onchange", |
---|
| 133 | "onclick", |
---|
| 134 | "onfocus", |
---|
| 135 | "onselect" ] }, |
---|
| 136 | { "tag": "input_datetime-local", "actions": [ "onchange", |
---|
| 137 | "onclick", |
---|
| 138 | "onfocus", |
---|
| 139 | "onselect" ] }, |
---|
| 140 | { "tag": "input_email", "actions": [ "onchange", |
---|
| 141 | "onclick", |
---|
| 142 | "onfocus", |
---|
| 143 | "onselect" ] }, |
---|
| 144 | { "tag": "input_file", "actions": [ "onchange", |
---|
| 145 | "onclick", |
---|
| 146 | "onfocus", |
---|
| 147 | "onselect" ] }, |
---|
| 148 | { "tag": "input_image", "actions": [ "onclick", |
---|
| 149 | "onfocus" ] }, |
---|
| 150 | { "tag": "input_month", "actions": [ "onchange", |
---|
| 151 | "onclick", |
---|
| 152 | "onfocus", |
---|
| 153 | "onselect" ] }, |
---|
| 154 | { "tag": "input_number", "actions": [ "onchange", |
---|
| 155 | "onclick", |
---|
| 156 | "onfocus", |
---|
| 157 | "onselect" ] }, |
---|
[992] | 158 | { "tag": "input_password", "actions": [ "onchange", |
---|
| 159 | "onclick", |
---|
| 160 | "onfocus" ] }, |
---|
| 161 | { "tag": "input_radio", "actions": [ "onchange", |
---|
| 162 | "onclick", |
---|
| 163 | "onfocus" ] }, |
---|
[1247] | 164 | { "tag": "input_range", "actions": [ "onchange", |
---|
| 165 | "onclick", |
---|
| 166 | "onfocus", |
---|
| 167 | "onselect" ] }, |
---|
[992] | 168 | { "tag": "input_reset", "actions": [ "onclick", |
---|
| 169 | "onfocus" ] }, |
---|
[1247] | 170 | { "tag": "input_search", "actions": [ "onchange", |
---|
| 171 | "onclick", |
---|
| 172 | "onfocus", |
---|
| 173 | "onselect" ] }, |
---|
| 174 | { "tag": "input_submit", "actions": [ "onclick", |
---|
[992] | 175 | "onfocus" ] }, |
---|
[1247] | 176 | { "tag": "input_tel", "actions": [ "onchange", |
---|
| 177 | "onclick", |
---|
| 178 | "onfocus", |
---|
| 179 | "onselect" ] }, |
---|
| 180 | { "tag": "input_text", "actions": [ "onchange", |
---|
| 181 | "onclick", |
---|
| 182 | "onfocus", |
---|
| 183 | "onselect" ] }, |
---|
| 184 | { "tag": "input_time", "actions": [ "onchange", |
---|
| 185 | "onclick", |
---|
| 186 | "onfocus", |
---|
| 187 | "onselect" ] }, |
---|
| 188 | { "tag": "input_url", "actions": [ "onchange", |
---|
| 189 | "onclick", |
---|
| 190 | "onfocus", |
---|
| 191 | "onselect" ] }, |
---|
| 192 | { "tag": "input_week", "actions": [ "onchange", |
---|
| 193 | "onclick", |
---|
| 194 | "onfocus", |
---|
| 195 | "onselect" ] }, |
---|
[944] | 196 | { "tag": "input", "actions": [ "onchange", |
---|
[1247] | 197 | "onclick", |
---|
[944] | 198 | "onfocus" ] }, |
---|
| 199 | { "tag": "ins", "actions": [ "onclick" ] }, |
---|
| 200 | { "tag": "kbd", "actions": [ "onclick" ] }, |
---|
| 201 | { "tag": "keygen", "actions": [ "onchange", |
---|
| 202 | "onfocus" ] }, |
---|
| 203 | //{ "tag": "label", "actions": [ ] }, |
---|
| 204 | //{ "tag": "legend", "actions": [ ] }, |
---|
| 205 | { "tag": "li", "actions": [ "onclick" ] }, |
---|
| 206 | //{ "tag": "map", "actions": [ ] }, |
---|
| 207 | { "tag": "mark", "actions": [ "onclick" ] }, |
---|
| 208 | { "tag": "menu", "actions": [ "onclick" ] }, |
---|
| 209 | { "tag": "meter", "actions": [ "onclick" ] }, |
---|
| 210 | //{ "tag": "nav", "actions": [ ] }, |
---|
| 211 | //{ "tag": "noscript", "actions": [ ] }, |
---|
| 212 | { "tag": "object", "actions": [ "onclick" ] }, |
---|
| 213 | //{ "tag": "ol", "actions": [ ] }, |
---|
| 214 | //{ "tag": "optgroup", "actions": [ ] }, |
---|
| 215 | //{ "tag": "option", "actions": [ ] }, |
---|
| 216 | { "tag": "output", "actions": [ "onclick" ] }, |
---|
| 217 | { "tag": "p", "actions": [ "onclick" ] }, |
---|
| 218 | //{ "tag": "param", "actions": [ ] }, |
---|
| 219 | //{ "tag": "pre", "actions": [ ] }, |
---|
| 220 | { "tag": "progress", "actions": [ "onclick" ] }, |
---|
| 221 | { "tag": "q", "actions": [ "onclick" ] }, |
---|
| 222 | //{ "tag": "rp", "actions": [ ] }, |
---|
| 223 | //{ "tag": "rt", "actions": [ ] }, |
---|
| 224 | //{ "tag": "ruby", "actions": [ ] }, |
---|
| 225 | { "tag": "s", "actions": [ "onclick" ] }, |
---|
| 226 | { "tag": "samp", "actions": [ "onclick" ] }, |
---|
| 227 | //{ "tag": "section", "actions": [ ] }, |
---|
| 228 | { "tag": "select", "actions": [ "onchange", |
---|
| 229 | "onfocus" ] }, |
---|
| 230 | { "tag": "small", "actions": [ "onclick" ] }, |
---|
| 231 | //{ "tag": "source", "actions": [ ] }, |
---|
| 232 | { "tag": "span", "actions": [ "onclick" ] }, |
---|
| 233 | { "tag": "strong", "actions": [ "onclick" ] }, |
---|
| 234 | //{ "tag": "sub", "actions": [ ] }, |
---|
| 235 | //{ "tag": "summary", "actions": [ ] }, |
---|
| 236 | //{ "tag": "sup", "actions": [ ] }, |
---|
| 237 | //{ "tag": "table", "actions": [ ] }, |
---|
| 238 | //{ "tag": "tbody", "actions": [ ] }, |
---|
| 239 | { "tag": "td", "actions": [ "onclick" ] }, |
---|
| 240 | { "tag": "textarea", "actions": [ "onchange", |
---|
[999] | 241 | "onfocus", |
---|
| 242 | "onselect" ] }, |
---|
[944] | 243 | //{ "tag": "tfoot", "actions": [ ] }, |
---|
| 244 | { "tag": "th", "actions": [ "onclick" ] }, |
---|
| 245 | //{ "tag": "thead", "actions": [ ] }, |
---|
| 246 | { "tag": "time", "actions": [ "onclick" ] }, |
---|
| 247 | //{ "tag": "tr", "actions": [ ] }, |
---|
| 248 | //{ "tag": "track", "actions": [ ] }, |
---|
| 249 | { "tag": "u", "actions": [ "onclick" ] }, |
---|
| 250 | //{ "tag": "ul", "actions": [ ] }, |
---|
| 251 | { "tag": "var", "actions": [ "onclick" ] }, |
---|
| 252 | { "tag": "video", "actions": [ "onplaying", |
---|
| 253 | "onpause", |
---|
[1020] | 254 | "ontimeupdate" ] } |
---|
[944] | 255 | //{ "tag": "wbr", "actions": [ ] }, |
---|
[858] | 256 | ]; |
---|
| 257 | |
---|
| 258 | /** |
---|
| 259 | * a possibility to trace, what is going on |
---|
| 260 | */ |
---|
[879] | 261 | var autoquestDoLog = false; |
---|
[858] | 262 | |
---|
[869] | 263 | /** |
---|
[1020] | 264 | * stores the structure of the GUI of the current page |
---|
| 265 | */ |
---|
| 266 | var autoquestGUIModel; |
---|
| 267 | |
---|
| 268 | /** |
---|
[869] | 269 | * stores events, which were recorded but not sent to the server yet |
---|
| 270 | */ |
---|
[879] | 271 | var autoquestRecordedEvents = []; |
---|
[858] | 272 | |
---|
| 273 | /** |
---|
[999] | 274 | * stores the interval for sending data of inactive browser windows |
---|
| 275 | */ |
---|
| 276 | var autoquestSendInterval; |
---|
| 277 | |
---|
| 278 | /** |
---|
[869] | 279 | * automatically executed to initialize the event handling |
---|
[858] | 280 | */ |
---|
| 281 | (function() { |
---|
| 282 | initEventHandling(); |
---|
| 283 | }()); |
---|
| 284 | |
---|
| 285 | |
---|
| 286 | /** |
---|
| 287 | * initializes the event handling after the document is loaded completely |
---|
| 288 | */ |
---|
| 289 | function initEventHandling() { |
---|
| 290 | if (document.body) { |
---|
| 291 | if (document.readyState !== "complete") { |
---|
| 292 | // if the document is not loaded yet, try to add further event handling later |
---|
| 293 | setTimeout(initEventHandling, 200); |
---|
| 294 | } |
---|
[999] | 295 | else if (!autoquestSendInterval) { |
---|
[1021] | 296 | log("adding event handling attributes"); |
---|
| 297 | determineDestination(); |
---|
| 298 | autoquestGUIModel = |
---|
| 299 | addEventHandlingAndGetJSONRepresentation(document.documentElement, ""); |
---|
| 300 | |
---|
[1073] | 301 | addDefaultEventHandling(); |
---|
| 302 | |
---|
[999] | 303 | // recall sending data each 100 seconds to ensure, that for browser windows staying |
---|
| 304 | // open the data will be send, as well. |
---|
| 305 | autoquestSendInterval = setTimeout(sendRequest, 100000); |
---|
| 306 | } |
---|
[858] | 307 | } |
---|
| 308 | else { |
---|
| 309 | setTimeout(initEventHandling, 200); |
---|
| 310 | } |
---|
| 311 | } |
---|
| 312 | |
---|
| 313 | /** |
---|
[879] | 314 | * traverses the DOM-structure of the HTML-site and determines the URL of this script. Based on |
---|
| 315 | * this URL, it calculates the destination to which the traced interactions must be sent |
---|
| 316 | */ |
---|
| 317 | function determineDestination() { |
---|
| 318 | var scriptElements = document.getElementsByTagName("script"); |
---|
| 319 | var i; |
---|
| 320 | var index; |
---|
| 321 | |
---|
| 322 | for (i = 0; i < scriptElements.length; i++) { |
---|
| 323 | if ((scriptElements[i].type === "text/javascript") && (scriptElements[i].src)) { |
---|
| 324 | index = scriptElements[i].src.lastIndexOf("script/autoquest-htmlmonitor.js"); |
---|
| 325 | if (index > -1) { |
---|
| 326 | autoquestDestination = scriptElements[i].src.substring(0, index - 1); |
---|
| 327 | log("using destination " + autoquestDestination); |
---|
| 328 | } |
---|
| 329 | } |
---|
| 330 | } |
---|
| 331 | } |
---|
| 332 | |
---|
| 333 | /** |
---|
| 334 | * traverses the DOM-structure of the HTML-site and adds event handling attributes to each |
---|
[1020] | 335 | * relevant node. Furthermore returns a JSON representation of the node including the children |
---|
[858] | 336 | * |
---|
[869] | 337 | * @param node the node of the DOM structure that shall be adapted and whose children shall |
---|
| 338 | * be traversed |
---|
| 339 | * @param parentPath the path to the parent node of the provided node within the DOM-structure of |
---|
| 340 | * the HTML-site |
---|
[858] | 341 | */ |
---|
[1020] | 342 | function addEventHandlingAndGetJSONRepresentation(node, parentPath) { |
---|
[944] | 343 | var nodePath; |
---|
[858] | 344 | var i; |
---|
[1020] | 345 | var jsonRepresentation = null; |
---|
| 346 | var childRepresentation; |
---|
| 347 | var childRepresentations = null; |
---|
[858] | 348 | |
---|
| 349 | if (node.nodeType === Node.ELEMENT_NODE) { |
---|
[1020] | 350 | jsonRepresentation = "{\"tagName\":\"" + getTagName(node) + "\","; |
---|
[944] | 351 | |
---|
[1020] | 352 | if ((node.id) && (node.id !== "")) { |
---|
[1069] | 353 | jsonRepresentation += "\"htmlId\":\"" + node.id + "\""; |
---|
[1020] | 354 | } |
---|
| 355 | else { |
---|
| 356 | jsonRepresentation += "\"index\":\"" + getNodeIndex(node) + "\""; |
---|
| 357 | } |
---|
| 358 | |
---|
| 359 | addEventHandling(node, parentPath); |
---|
| 360 | |
---|
| 361 | if (node.childNodes.length > 0) { |
---|
| 362 | nodePath = getNodePath(node, parentPath); |
---|
| 363 | |
---|
| 364 | for (i = 0; i < node.childNodes.length; i++) { |
---|
| 365 | childRepresentation = |
---|
| 366 | addEventHandlingAndGetJSONRepresentation(node.childNodes[i], nodePath); |
---|
| 367 | |
---|
| 368 | if (childRepresentation) { |
---|
| 369 | if (!childRepresentations) { |
---|
| 370 | childRepresentations = childRepresentation; |
---|
[858] | 371 | } |
---|
| 372 | else { |
---|
[1020] | 373 | childRepresentations += "," + childRepresentation; |
---|
[858] | 374 | } |
---|
| 375 | } |
---|
| 376 | } |
---|
[1020] | 377 | |
---|
| 378 | if (childRepresentations) { |
---|
| 379 | jsonRepresentation += ",\"children\":[" + childRepresentations + "]"; |
---|
| 380 | } |
---|
[858] | 381 | } |
---|
[944] | 382 | |
---|
[1020] | 383 | jsonRepresentation += "}"; |
---|
| 384 | } |
---|
| 385 | |
---|
| 386 | return jsonRepresentation; |
---|
| 387 | } |
---|
| 388 | |
---|
| 389 | /** |
---|
[1022] | 390 | * adds event handling functionality to the provided node. Calls |
---|
| 391 | * {@link #addEventHandlingWithJQuery(node,parentPath)} or |
---|
| 392 | * {@link #addEventHandlingWithoutJQuery(node,parentPath)} depending on the fact if jQuery is |
---|
| 393 | * available and must therefore be used, or not. |
---|
| 394 | * |
---|
| 395 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
| 396 | * @param parentPath the path to the parent node of the provided node within the DOM-structure of |
---|
| 397 | * the HTML-site |
---|
[1020] | 398 | */ |
---|
| 399 | function addEventHandling(node, parentPath) { |
---|
| 400 | if (typeof jQuery === 'undefined') { |
---|
| 401 | addEventHandlingWithoutJQuery(node, parentPath); |
---|
| 402 | } |
---|
| 403 | else { |
---|
| 404 | addEventHandlingWithJQuery(node, parentPath); |
---|
| 405 | } |
---|
| 406 | } |
---|
| 407 | |
---|
| 408 | /** |
---|
[1022] | 409 | * adds event handling functionality to the provided node using onxxx attributes |
---|
| 410 | * |
---|
| 411 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
| 412 | * @param parentPath the path to the parent node of the provided node within the DOM-structure of |
---|
| 413 | * the HTML-site |
---|
[1020] | 414 | */ |
---|
| 415 | function addEventHandlingWithoutJQuery(node, parentPath) { |
---|
| 416 | var nodePath = getNodePath(node, parentPath); |
---|
| 417 | var tagName = getTagName(node); |
---|
| 418 | var i; |
---|
| 419 | var k; |
---|
| 420 | |
---|
| 421 | for (i = 0; i < autoquestActionConfig.length; i++) { |
---|
| 422 | if (tagName === autoquestActionConfig[i].tag.toLowerCase()) { |
---|
| 423 | for (k = 0; k < autoquestActionConfig[i].actions.length; k++) { |
---|
| 424 | adaptEventHandlingAttribute(node, nodePath, autoquestActionConfig[i].actions[k]); |
---|
| 425 | } |
---|
[944] | 426 | } |
---|
[858] | 427 | } |
---|
| 428 | } |
---|
| 429 | |
---|
| 430 | /** |
---|
[1022] | 431 | * adds event handling functionality to the provided node using jQuery attributes. If the node |
---|
| 432 | * already used onxxx attributes, these are extended instead of using jQuery. |
---|
| 433 | * |
---|
| 434 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
| 435 | * @param parentPath the path to the parent node of the provided node within the DOM-structure of |
---|
| 436 | * the HTML-site |
---|
[1020] | 437 | */ |
---|
| 438 | function addEventHandlingWithJQuery(node, parentPath) { |
---|
| 439 | var nodePath = getNodePath(node, parentPath); |
---|
| 440 | var tagName = getTagName(node); |
---|
| 441 | var action; |
---|
| 442 | var i; |
---|
| 443 | var k; |
---|
| 444 | |
---|
| 445 | for (i = 0; i < autoquestActionConfig.length; i++) { |
---|
| 446 | if (tagName === autoquestActionConfig[i].tag.toLowerCase()) { |
---|
| 447 | for (k = 0; k < autoquestActionConfig[i].actions.length; k++) { |
---|
| 448 | action = autoquestActionConfig[i].actions[k]; |
---|
| 449 | if (jQuery(node).attr(action)) { |
---|
| 450 | // if there is an event handling attribute although jquery is present |
---|
| 451 | // edit this attribute accordingly |
---|
| 452 | adaptEventHandlingAttribute(node, nodePath, action); |
---|
| 453 | } |
---|
| 454 | else { |
---|
[1073] | 455 | registerEventHandler(node, nodePath, action); |
---|
[1020] | 456 | } |
---|
| 457 | } |
---|
| 458 | } |
---|
| 459 | } |
---|
| 460 | } |
---|
| 461 | |
---|
| 462 | /** |
---|
[1022] | 463 | * adapts the event handling attributed provided by the action parameter so that it calls |
---|
[1073] | 464 | * the {@link #handleEvent(node, action, path, event)} function in the case the event occurs. |
---|
[1022] | 465 | * Either the method creates an appropriate onxxx attribute on the node if there is none, or it |
---|
| 466 | * adds a call to the function as first thing called by the onxxx attribute. |
---|
| 467 | * |
---|
| 468 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
[1073] | 469 | * @param nodePath the path to the node within the DOM-structure of the HTML-site |
---|
[1022] | 470 | * @param action the event for which event handling shall be enabled |
---|
[1020] | 471 | */ |
---|
| 472 | function adaptEventHandlingAttribute(node, nodePath, action) { |
---|
| 473 | var value = "handleEvent(this, '" + action + "', '" + nodePath + "', event);"; |
---|
| 474 | var oldValue; |
---|
| 475 | |
---|
| 476 | if (!node.getAttribute(action)) { |
---|
| 477 | node.setAttribute(action, value); |
---|
| 478 | } |
---|
| 479 | else { |
---|
| 480 | oldValue = node.getAttribute(action); |
---|
| 481 | if (oldValue.indexOf(value) < 0) { |
---|
| 482 | node.setAttribute(action, value + ' ' + oldValue); |
---|
| 483 | } |
---|
| 484 | } |
---|
| 485 | } |
---|
| 486 | |
---|
| 487 | /** |
---|
[1073] | 488 | * registers an event handler using jQuery for the provided action on the given object so that it |
---|
| 489 | * calls the {@link #handleJQueryEvent(event)} function in the case the event occurs. |
---|
| 490 | * |
---|
| 491 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
| 492 | * @param nodePath the path to the node within the DOM-structure of the HTML-site |
---|
| 493 | * @param action the event for which event handling shall be enabled |
---|
| 494 | */ |
---|
| 495 | function registerEventHandler(node, nodePath, action) { |
---|
| 496 | var parameters = { action : action, path : nodePath}; |
---|
[1247] | 497 | |
---|
| 498 | if ((action === "onscroll") && (node === document.body)) { |
---|
| 499 | node = window; |
---|
| 500 | } |
---|
| 501 | |
---|
[1073] | 502 | if (jQuery(node).on) { |
---|
| 503 | jQuery(node).on(action.substring(2), parameters, handleJQueryEvent); |
---|
| 504 | } |
---|
| 505 | else { |
---|
| 506 | jQuery(node).bind(action.substring(2), parameters, handleJQueryEvent); |
---|
| 507 | } |
---|
| 508 | } |
---|
| 509 | |
---|
| 510 | /** |
---|
| 511 | * adds default event handling functionality for receiving load, unload, and other document |
---|
| 512 | * relevant events. The registration for events is done depending on the availability of jQuery. |
---|
| 513 | * If jQuery is available and must therefore be used, then the registration is done on the window |
---|
| 514 | * object. Otherwise, the appropriate attributes of the document's body tag are changed |
---|
| 515 | */ |
---|
| 516 | function addDefaultEventHandling() { |
---|
| 517 | var body; |
---|
| 518 | |
---|
| 519 | if (typeof jQuery === 'undefined') { |
---|
| 520 | body = document.getElementsByTagName("body").item(0); |
---|
| 521 | adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onbeforeunload"); |
---|
| 522 | adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onload"); |
---|
| 523 | adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onunload"); |
---|
| 524 | //adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onerror"); |
---|
| 525 | } |
---|
| 526 | else { |
---|
| 527 | registerEventHandler(window, "/html[0]/body[0]", "onbeforeunload"); |
---|
| 528 | registerEventHandler(window, "/html[0]/body[0]", "onload"); |
---|
| 529 | registerEventHandler(window, "/html[0]/body[0]", "onunload"); |
---|
| 530 | //registerEventHandler(body, "/html[0]/body[0]", "onerror"); |
---|
| 531 | } |
---|
| 532 | } |
---|
| 533 | |
---|
| 534 | /** |
---|
[869] | 535 | * generates a path through the DOM-structure of the HTML-site depending on a node and the path |
---|
| 536 | * to its parent node. The result is the parent path plus a path element for the provided node. |
---|
[944] | 537 | * The first part of the path element generated for the node is the tag name returned by |
---|
| 538 | * {@link #getTagName(node)}. If the node has an id, it becomes the second part of the path |
---|
| 539 | * element. If the node does not have an id, the method calculates the index of the node within |
---|
| 540 | * all children of the same type within the parent node. This index becomes then the second part |
---|
| 541 | * of the path element generated for the node. |
---|
[858] | 542 | * |
---|
[869] | 543 | * @param node the node of the DOM structure for which the path shall be created |
---|
| 544 | * @param parentPath the path to the parent node of the provided node |
---|
| 545 | * |
---|
| 546 | * @returns a path in the DOM-structure of the HTML-site including the parent path an a path |
---|
| 547 | * element for the provided node |
---|
[858] | 548 | */ |
---|
| 549 | function getNodePath(node, parentPath) { |
---|
[1020] | 550 | var nodePath = parentPath + "/" + getTagName(node); |
---|
[858] | 551 | |
---|
| 552 | if ((node.id) && (node.id !== "")) { |
---|
[1082] | 553 | nodePath += "(htmlId=" + node.id + ")"; |
---|
[858] | 554 | } |
---|
| 555 | else { |
---|
[1020] | 556 | nodePath += "[" + getNodeIndex(node) + "]"; |
---|
[858] | 557 | } |
---|
| 558 | |
---|
| 559 | return nodePath; |
---|
| 560 | } |
---|
| 561 | |
---|
| 562 | /** |
---|
[1023] | 563 | * called to handle events caused by the jQuery event handling mechanism. Forwards the event to |
---|
| 564 | * {@link #handleEvent(node, eventName, nodePath, event)} |
---|
| 565 | * |
---|
| 566 | * @param the event to be handled |
---|
[1020] | 567 | */ |
---|
| 568 | function handleJQueryEvent(event) { |
---|
| 569 | handleEvent(this, event.data.action, event.data.path, event); |
---|
| 570 | } |
---|
| 571 | |
---|
| 572 | /** |
---|
[869] | 573 | * handles an event that happened on a node. This method is called by the event handling attributes |
---|
| 574 | * of the nodes. These attributes are generated by the |
---|
| 575 | * {@link #addEventHandlingAttributes(node,parentPath)} function. It creates a new Event object and |
---|
[944] | 576 | * adds it to the list of <code>autoquestRecordedEvents</code>. If this list achieves the maximum |
---|
[879] | 577 | * <code>autoquestPackageSize</code> the events in the list are sent to the server asynchronously |
---|
| 578 | * through calling {@link #sendRequest()}. |
---|
[858] | 579 | * |
---|
[944] | 580 | * @param node the node that fired the event |
---|
[869] | 581 | * @param eventName the name of the event, e.g. onscroll |
---|
| 582 | * @param nodePath the path to the node in the HTML DOM on which the event occurred |
---|
| 583 | * @param event the HTML event that occured |
---|
[858] | 584 | */ |
---|
[944] | 585 | function handleEvent(node, eventName, nodePath, event) { |
---|
| 586 | var eventType; |
---|
| 587 | var eventObj = null; |
---|
| 588 | var tagName; |
---|
[1244] | 589 | var unmonitored; |
---|
[944] | 590 | |
---|
[879] | 591 | if (!autoquestDestination) { |
---|
| 592 | // do nothing if we have no destination to send data to |
---|
| 593 | return; |
---|
| 594 | } |
---|
| 595 | |
---|
[944] | 596 | log("handling event " + eventName + " on " + node); |
---|
[858] | 597 | |
---|
[944] | 598 | eventType = eventName.toLowerCase(); |
---|
| 599 | |
---|
[1247] | 600 | // check, if the preceeding event is more concrete, i.e. the new event to be handled is only |
---|
| 601 | // a propagation through the DOM and needs, therefore, not be handled |
---|
[944] | 602 | if (autoquestRecordedEvents.length > 0) { |
---|
| 603 | eventObj = autoquestRecordedEvents[autoquestRecordedEvents.length - 1]; |
---|
| 604 | |
---|
| 605 | if ((eventObj.type === eventName) && (eventObj.nodePath.indexOf(nodePath) === 0)) { |
---|
| 606 | // the event is of the same type. |
---|
| 607 | if (eventObj.nodePath.length > nodePath.length) { |
---|
[1247] | 608 | // the new event is the same event as the previous one, but fired for the parent |
---|
| 609 | // GUI element of the previous event. This must not be handled. So ignore it |
---|
[944] | 610 | log("discarding event " + eventName + " on " + node + |
---|
| 611 | " as it is already handled by a child"); |
---|
| 612 | return; |
---|
| 613 | } |
---|
| 614 | else if (eventName !== "onscroll") { |
---|
| 615 | // we have the same event on the same element. If it is an onscroll, we should |
---|
| 616 | // reuse it. But it is not an onscroll. So we ignore the existing event. |
---|
| 617 | eventObj = null; |
---|
| 618 | } |
---|
| 619 | } |
---|
| 620 | else { |
---|
| 621 | // the event is not of an equal type as the previous one. So we will not reuse it |
---|
| 622 | eventObj = null; |
---|
| 623 | } |
---|
| 624 | } |
---|
[858] | 625 | |
---|
[944] | 626 | if (!eventObj) { |
---|
[1247] | 627 | // we can not reuse the previous event. So create a new event and add it to the list |
---|
[858] | 628 | eventObj = new Event(eventType, nodePath); |
---|
[944] | 629 | log("storing event " + eventName); |
---|
| 630 | autoquestRecordedEvents.push(eventObj); |
---|
[858] | 631 | } |
---|
[944] | 632 | |
---|
| 633 | // now add further event parameters |
---|
[858] | 634 | if ((eventType === "onclick") || (eventType === "ondblclick")) { |
---|
| 635 | eventObj.setClickCoordinates(getEventCoordinates(event)); |
---|
| 636 | } |
---|
| 637 | |
---|
[944] | 638 | tagName = getTagName(node); |
---|
| 639 | |
---|
[1247] | 640 | // ensure to not monitor details for GUI elements marked as unmonitored |
---|
[1244] | 641 | if (node.getAttribute && node.getAttribute("class")) { |
---|
| 642 | unmonitored = node.getAttribute("class").indexOf("autoquest-unmonitored") >= 0; |
---|
| 643 | } |
---|
| 644 | else { |
---|
| 645 | unmonitored = false; |
---|
| 646 | } |
---|
| 647 | |
---|
| 648 | if (!unmonitored && ("input_password" !== tagName)) { |
---|
[1247] | 649 | // add further parameters for GUI elements which are monitored and which are no password |
---|
| 650 | // fields |
---|
[944] | 651 | if ((eventType === "onkeypress") || |
---|
| 652 | (eventType === "onkeydown") || |
---|
| 653 | (eventType === "onkeyup")) |
---|
| 654 | { |
---|
| 655 | eventObj.setKey(event.keyCode); |
---|
| 656 | } |
---|
[1020] | 657 | else if (eventType === "onchange") { |
---|
[944] | 658 | if ((tagName.indexOf("input") === 0) || |
---|
| 659 | (tagName === "textarea") || |
---|
| 660 | (tagName === "keygen")) |
---|
| 661 | { |
---|
| 662 | eventObj.setSelectedValue(node.value); |
---|
| 663 | } |
---|
| 664 | else if (tagName === "select") { |
---|
| 665 | eventObj.setSelectedValue(node.options.item(node.options.selectedIndex)); |
---|
| 666 | } |
---|
| 667 | } |
---|
[858] | 668 | } |
---|
| 669 | |
---|
| 670 | if (eventType === "onscroll") { |
---|
[944] | 671 | eventObj.setScrollPosition(getScrollCoordinates(node)); |
---|
[858] | 672 | } |
---|
| 673 | |
---|
[1247] | 674 | // finally send the recorded data |
---|
[879] | 675 | if (autoquestRecordedEvents.length >= autoquestPackageSize) { |
---|
| 676 | log("initiating sending events"); |
---|
[875] | 677 | setTimeout(sendRequest, 100); |
---|
[858] | 678 | } |
---|
[999] | 679 | else if ((eventType === "onunload") || (eventType === "onbeforeunload")) { |
---|
[879] | 680 | log("initiating sending events"); |
---|
| 681 | sendRequest(); |
---|
| 682 | } |
---|
[858] | 683 | |
---|
| 684 | } |
---|
| 685 | |
---|
| 686 | /** |
---|
[944] | 687 | * determines a tag name of a node. If the node is an input element, the tag name includes the |
---|
| 688 | * type of element. Otherwise the method simply returns the tag name. |
---|
| 689 | * |
---|
| 690 | * @param node the node for which the name must be determined |
---|
| 691 | * |
---|
| 692 | * @return the name as described |
---|
| 693 | */ |
---|
| 694 | function getTagName(node) { |
---|
| 695 | var tagName = null; |
---|
| 696 | |
---|
| 697 | if (node.tagName) { |
---|
| 698 | tagName = node.tagName.toLowerCase(); |
---|
| 699 | if ("input" === tagName) { |
---|
| 700 | if (node.type && (node.type !== "")) { |
---|
| 701 | tagName += "_" + node.type; |
---|
| 702 | } |
---|
| 703 | else { |
---|
| 704 | tagName += "_text"; |
---|
| 705 | } |
---|
| 706 | } |
---|
| 707 | } |
---|
| 708 | |
---|
| 709 | return tagName; |
---|
| 710 | } |
---|
| 711 | |
---|
| 712 | /** |
---|
[1020] | 713 | * determines the index of a node considering all nodes of the parent having the same name. If the |
---|
| 714 | * node has no parent, the method returns index 0. |
---|
| 715 | * |
---|
| 716 | * @param node the node for which the index must be determined |
---|
| 717 | * |
---|
| 718 | * @return the index as described |
---|
| 719 | */ |
---|
| 720 | function getNodeIndex(node) { |
---|
| 721 | var i; |
---|
| 722 | var index = 0; |
---|
| 723 | |
---|
| 724 | if (node.parentNode) { |
---|
| 725 | for (i = 0; i < node.parentNode.childNodes.length; i++) { |
---|
| 726 | if (node.parentNode.childNodes[i].tagName === node.tagName) { |
---|
| 727 | // if === also returns true if the nodes are not identical but only equal, |
---|
| 728 | // this may fail. |
---|
| 729 | if (node.parentNode.childNodes[i] === node) { |
---|
| 730 | break; |
---|
| 731 | } |
---|
[1073] | 732 | index++; |
---|
[1020] | 733 | } |
---|
| 734 | } |
---|
| 735 | |
---|
| 736 | } |
---|
| 737 | |
---|
| 738 | return index; |
---|
| 739 | } |
---|
| 740 | |
---|
| 741 | /** |
---|
[869] | 742 | * sends the collected data to the server, named in the destination-variable. For this it generates |
---|
[879] | 743 | * a JSON formatted message and uses Ajax and the <code>autoquestDestination</code> to send it to |
---|
| 744 | * the server |
---|
[858] | 745 | */ |
---|
| 746 | function sendRequest() { |
---|
[1020] | 747 | var eventList = autoquestRecordedEvents; |
---|
[858] | 748 | var message; |
---|
| 749 | var clientId; |
---|
| 750 | var i = 0; |
---|
| 751 | var request; |
---|
| 752 | |
---|
[1020] | 753 | if (eventList.length > 1) { |
---|
[879] | 754 | log("creating message"); |
---|
[858] | 755 | |
---|
[944] | 756 | // put the last event into the new list to allow for checks for reoccurence of the same |
---|
| 757 | // event |
---|
| 758 | autoquestRecordedEvents = [ eventList.pop() ]; |
---|
| 759 | |
---|
[858] | 760 | message = "{\"message\":{\"clientInfos\":{"; |
---|
| 761 | |
---|
| 762 | log("reading client id"); |
---|
[881] | 763 | clientId = getClientId(); |
---|
[858] | 764 | if ((clientId) && (clientId !== "")) { |
---|
| 765 | message += "\"clientId\":\"" + clientId + "\","; |
---|
| 766 | } |
---|
| 767 | |
---|
| 768 | log("adding other infos"); |
---|
| 769 | message += "\"userAgent\":\"" + navigator.userAgent + "\","; |
---|
| 770 | message += "\"title\":\"" + document.title + "\","; |
---|
| 771 | message += "\"url\":\"" + document.URL + "\"},"; |
---|
| 772 | |
---|
[1020] | 773 | message += "\"guiModel\":" + autoquestGUIModel + ","; |
---|
[858] | 774 | |
---|
| 775 | message += "\"events\":["; |
---|
| 776 | |
---|
| 777 | for (i = 0; i < eventList.length; i++) { |
---|
| 778 | if (i > 0) { |
---|
| 779 | message += ","; |
---|
| 780 | } |
---|
| 781 | message += eventList[i].toJSON(); |
---|
| 782 | } |
---|
| 783 | |
---|
| 784 | message += "]}}"; |
---|
| 785 | |
---|
| 786 | request = null; |
---|
| 787 | |
---|
| 788 | // Mozilla |
---|
| 789 | if (window.XMLHttpRequest) { |
---|
| 790 | request = new XMLHttpRequest(); |
---|
| 791 | } |
---|
| 792 | // IE |
---|
| 793 | else if (window.ActiveXObject) { |
---|
| 794 | request = new ActiveXObject("Microsoft.XMLHTTP"); |
---|
| 795 | } |
---|
| 796 | |
---|
[881] | 797 | request.open("POST", autoquestDestination, false); |
---|
| 798 | request.setRequestHeader("Content-Type", "application/json"); |
---|
[858] | 799 | |
---|
| 800 | log("sending " + message); |
---|
| 801 | request.send(message); |
---|
| 802 | } |
---|
| 803 | } |
---|
| 804 | |
---|
| 805 | /** |
---|
[944] | 806 | * determines the scroll coordinates of the scrolled element |
---|
| 807 | * |
---|
| 808 | * @param node the element that was scrolled |
---|
| 809 | * |
---|
| 810 | * @returns the coordinates of the scrolling as an array with x and y coordinate |
---|
| 811 | */ |
---|
| 812 | function getScrollCoordinates(node) { |
---|
| 813 | if (node.scrollLeft || node.scrollTop) { |
---|
| 814 | return [node.scrollLeft, node.scrollTop]; |
---|
| 815 | } |
---|
| 816 | else if ((node === window) && window.pageYOffset) { |
---|
| 817 | return [window.pageXOffset, window.pageYOffset]; |
---|
| 818 | } |
---|
| 819 | else if ((node == document) || (node == document.body) || (node == document.documentElement)) { |
---|
| 820 | if (document.body && (document.body.scrollLeft || document.body.scrollTop)) { |
---|
| 821 | return [document.body.scrollLeft, document.body.scrollTop]; |
---|
| 822 | } |
---|
| 823 | else if (document.documentElement && |
---|
| 824 | (document.documentElement.scrollLeft || document.documentElement.scrollTop)) |
---|
| 825 | { |
---|
| 826 | return [document.documentElement.scrollLeft, document.documentElement.scrollTop]; |
---|
| 827 | } |
---|
| 828 | } |
---|
| 829 | |
---|
| 830 | return [-1, -1]; |
---|
| 831 | } |
---|
| 832 | |
---|
| 833 | /** |
---|
[869] | 834 | * determines the coordinates of an onclick or ondblclick event. If the coordinates to not come |
---|
| 835 | * with the provided event, they are determined based on the surrounding object |
---|
| 836 | * |
---|
| 837 | * @param event the event to extract the coordinates of |
---|
| 838 | * |
---|
| 839 | * @returns the coordinates of the event as an array with x and y coordinate |
---|
[858] | 840 | */ |
---|
| 841 | function getEventCoordinates(event) { |
---|
| 842 | if (event.layerX) { |
---|
| 843 | return [event.layerX, event.layerY]; |
---|
| 844 | } |
---|
| 845 | else if (event.offsetX) { |
---|
| 846 | return [event.offsetX, event.offsetY]; |
---|
| 847 | } |
---|
| 848 | |
---|
| 849 | var obj = event.target || event.srcElement; |
---|
| 850 | var objOffset = getPageOffset(obj); |
---|
| 851 | |
---|
| 852 | return [(event.clientX - objOffset[0]), (event.clientY - objOffset[1])]; |
---|
| 853 | } |
---|
| 854 | |
---|
| 855 | /** |
---|
| 856 | * determines the page offset of an object using the parent objects offset |
---|
| 857 | */ |
---|
| 858 | function getPageOffset(object) { |
---|
| 859 | var top = 0; |
---|
| 860 | var left = 0; |
---|
| 861 | var obj = object; |
---|
| 862 | |
---|
| 863 | while (obj.offsetParent) { |
---|
| 864 | left += obj.offsetLeft; |
---|
| 865 | top += obj.offsetTop; |
---|
| 866 | obj = obj.offsetParent; |
---|
| 867 | } |
---|
| 868 | |
---|
| 869 | return [left, top]; |
---|
| 870 | } |
---|
| 871 | |
---|
| 872 | /** |
---|
[881] | 873 | * generates a client id based on several information retrieved from the environment. The client |
---|
| 874 | * id is not always unique |
---|
[858] | 875 | * |
---|
[881] | 876 | * @returns the client id |
---|
[858] | 877 | */ |
---|
[881] | 878 | function getClientId() { |
---|
| 879 | var clientIdStr; |
---|
| 880 | var clientId; |
---|
| 881 | var i = 0; |
---|
[858] | 882 | |
---|
[881] | 883 | if (!autoquestClientId) { |
---|
| 884 | // create something like a more or less unique checksum. |
---|
| 885 | clientIdStr = |
---|
| 886 | navigator.appCodeName + navigator.appName + navigator.appVersion + |
---|
| 887 | navigator.cookieEnabled + navigator.language + navigator.platform + |
---|
| 888 | navigator.userAgent + navigator.javaEnabled() + window.location.protocol + |
---|
| 889 | window.location.host + new Date().getTimezoneOffset(); |
---|
[858] | 890 | |
---|
[881] | 891 | clientId = clientIdStr.length; |
---|
| 892 | |
---|
| 893 | for (i = 0; i < clientIdStr.length; i++) { |
---|
| 894 | clientId += clientIdStr.charCodeAt(i); |
---|
| 895 | } |
---|
[858] | 896 | |
---|
[881] | 897 | autoquestClientId = clientId; |
---|
[858] | 898 | } |
---|
| 899 | |
---|
[881] | 900 | return autoquestClientId; |
---|
[858] | 901 | } |
---|
| 902 | |
---|
| 903 | /** |
---|
[869] | 904 | * performs a simple logging by adding a specific div to the HTML |
---|
| 905 | * |
---|
| 906 | * @param text the text to be logged |
---|
[858] | 907 | */ |
---|
| 908 | function log(text) { |
---|
[879] | 909 | if (autoquestDoLog) { |
---|
[858] | 910 | var loggingInfo = document.getElementById("loggingInfoParagraph"); |
---|
| 911 | |
---|
| 912 | if (!loggingInfo) { |
---|
| 913 | var div = document.createElement("div"); |
---|
| 914 | div.setAttribute("style", "z-index:1000000; background-color:#afa; " + |
---|
[1020] | 915 | "border:1px black solid; position:absolute; top:10px; right:10px; " + |
---|
| 916 | "width:350px; height:auto; font-size:8pt; font-family:Helvetica"); |
---|
[858] | 917 | |
---|
| 918 | loggingInfo = document.createElement("div"); |
---|
| 919 | loggingInfo.id = "loggingInfoParagraph"; |
---|
| 920 | div.appendChild(loggingInfo); |
---|
| 921 | |
---|
| 922 | var body = document.getElementsByTagName("body")[0]; |
---|
| 923 | if (!body) { |
---|
| 924 | alert("could not enable logging"); |
---|
| 925 | } |
---|
| 926 | else { |
---|
| 927 | body.appendChild(div); |
---|
| 928 | } |
---|
| 929 | } |
---|
| 930 | |
---|
| 931 | loggingInfo.appendChild(document.createTextNode(text)); |
---|
| 932 | loggingInfo.appendChild(document.createElement("br")); |
---|
| 933 | } |
---|
| 934 | } |
---|
| 935 | |
---|
[869] | 936 | /** |
---|
| 937 | * this class represents a single event |
---|
| 938 | * |
---|
| 939 | * @param type the type of the event |
---|
| 940 | * @param nodePath the path through the HTML DOM to the event target |
---|
| 941 | */ |
---|
[858] | 942 | function Event(type, nodePath) { |
---|
| 943 | this.type = type; |
---|
| 944 | this.nodePath = nodePath; |
---|
| 945 | this.time = new Date().getTime(); |
---|
| 946 | |
---|
| 947 | this.setClickCoordinates = function(coordinates) { |
---|
| 948 | this.clickCoordinates = coordinates; |
---|
| 949 | }; |
---|
| 950 | |
---|
| 951 | this.setKey = function(key) { |
---|
| 952 | this.key = key; |
---|
| 953 | }; |
---|
| 954 | |
---|
[944] | 955 | this.setSelectedValue = function(value) { |
---|
[999] | 956 | this.selectedValue = encodeText(value); |
---|
[944] | 957 | }; |
---|
| 958 | |
---|
[858] | 959 | this.setScrollPosition = function(scrollPosition) { |
---|
[944] | 960 | this.scrollPosition = scrollPosition; |
---|
[858] | 961 | }; |
---|
| 962 | |
---|
| 963 | this.toJSON = function() { |
---|
| 964 | var eventInJSON = |
---|
| 965 | "{\"path\":\"" + this.nodePath + "\",\"time\":" + this.time + ",\"eventType\":\"" + |
---|
| 966 | this.type + "\""; |
---|
| 967 | |
---|
| 968 | if ((this.clickCoordinates) && (!isNaN(this.clickCoordinates[0]))) { |
---|
| 969 | eventInJSON += ",\"coordinates\":[" + this.clickCoordinates + "]"; |
---|
| 970 | } |
---|
| 971 | |
---|
| 972 | if (this.key) { |
---|
| 973 | eventInJSON += ",\"key\":" + this.key; |
---|
| 974 | } |
---|
| 975 | |
---|
[944] | 976 | if (this.selectedValue) { |
---|
| 977 | eventInJSON += ",\"selectedValue\":\"" + this.selectedValue + "\""; |
---|
[858] | 978 | } |
---|
[944] | 979 | |
---|
| 980 | if ("onscroll" === this.type) { |
---|
| 981 | eventInJSON += ",\"scrollPosition\":[" + this.scrollPosition + "]"; |
---|
| 982 | } |
---|
[858] | 983 | |
---|
| 984 | eventInJSON += "}"; |
---|
| 985 | |
---|
| 986 | return eventInJSON; |
---|
| 987 | }; |
---|
[999] | 988 | |
---|
| 989 | function encodeText(text) { |
---|
| 990 | return text.replace(/\\/g, "\\\\").replace(/\"/g, "\\\""); |
---|
| 991 | }; |
---|
[858] | 992 | } |
---|