Changeset 1020 for trunk


Ignore:
Timestamp:
12/14/12 15:11:07 (12 years ago)
Author:
pharms
Message:
  • included logging of GUI structure
  • added support for web applications using jQuery
File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/autoquest-htmlmonitor/src/main/js/autoquest-htmlmonitor.js

    r999 r1020  
    197197    { "tag": "video", "actions": [ "onplaying", 
    198198                                   "onpause", 
    199                                    "ontimeupdate" ] }, 
     199                                   "ontimeupdate" ] } 
    200200    //{ "tag": "wbr", "actions": [  ] }, 
    201201]; 
     
    218218 
    219219/** 
     220 * stores the structure of the GUI of the current page 
     221 */ 
     222var autoquestGUIModel; 
     223 
     224/** 
    220225 * stores events, which were recorded but not sent to the server yet 
    221226 */ 
     
    242247        log("adding event handling attributes"); 
    243248        determineDestination(); 
    244         addEventHandlingAttributes(document.documentElement, ""); 
     249        autoquestGUIModel = addEventHandlingAndGetJSONRepresentation(document.documentElement, ""); 
    245250         
    246251        if (document.readyState !== "complete") { 
     
    281286/** 
    282287 * traverses the DOM-structure of the HTML-site and adds event handling attributes to each 
    283  * relevant node 
     288 * relevant node. Furthermore returns a JSON representation of the node including the children 
    284289 *  
    285290 * @param node       the node of the DOM structure that shall be adapted and whose children shall 
     
    288293 *                   the HTML-site 
    289294 */ 
    290 function addEventHandlingAttributes(node, parentPath) { 
     295function addEventHandlingAndGetJSONRepresentation(node, parentPath) { 
    291296    var nodePath; 
    292297    var i; 
    293     var k; 
    294     var value; 
     298    var jsonRepresentation = null; 
     299    var childRepresentation; 
     300    var childRepresentations = null; 
    295301     
    296302    if (node.nodeType === Node.ELEMENT_NODE) { 
    297         nodePath = getNodePath(node, parentPath); 
    298          
    299         for (i = 0; i < autoquestActionConfig.length; i++) { 
    300             if (getTagName(node) === autoquestActionConfig[i].tag.toLowerCase()) { 
    301                 for (k = 0; k < autoquestActionConfig[i].actions.length; k++) { 
    302                     value = "handleEvent(this, '" + 
    303                                          autoquestActionConfig[i].actions[k] + "', '" + 
    304                                          nodePath + "', event);"; 
    305  
    306                     if (!node.getAttribute(autoquestActionConfig[i].actions[k])) { 
    307                         node.setAttribute(autoquestActionConfig[i].actions[k], value); 
     303        jsonRepresentation = "{\"tagName\":\"" + getTagName(node) + "\","; 
     304         
     305        if ((node.id) && (node.id !== "")) { 
     306            jsonRepresentation += "\"id\":\"" + node.id + "\""; 
     307        } 
     308        else { 
     309            jsonRepresentation += "\"index\":\"" + getNodeIndex(node) + "\""; 
     310        } 
     311         
     312        addEventHandling(node, parentPath); 
     313         
     314        if (node.childNodes.length > 0) { 
     315            nodePath = getNodePath(node, parentPath); 
     316             
     317            for (i = 0; i < node.childNodes.length; i++) { 
     318                childRepresentation = 
     319                    addEventHandlingAndGetJSONRepresentation(node.childNodes[i], nodePath); 
     320                 
     321                if (childRepresentation) { 
     322                    if (!childRepresentations) { 
     323                        childRepresentations = childRepresentation; 
    308324                    } 
    309325                    else { 
    310                         var oldValue = node.getAttribute(autoquestActionConfig[i].actions[k]); 
    311                         if (oldValue.indexOf(value) < 0) { 
    312                             node.setAttribute(autoquestActionConfig[i].actions[k], 
    313                                               value + ' ' + oldValue); 
    314                         } 
     326                        childRepresentations += "," + childRepresentation; 
    315327                    } 
    316328                } 
    317329            } 
    318         } 
    319          
    320         for (i = 0; i < node.childNodes.length; i++) { 
    321             addEventHandlingAttributes(node.childNodes[i], nodePath); 
     330 
     331            if (childRepresentations) { 
     332                jsonRepresentation += ",\"children\":[" + childRepresentations + "]"; 
     333            } 
     334        } 
     335         
     336        jsonRepresentation += "}"; 
     337    } 
     338     
     339    return jsonRepresentation; 
     340} 
     341 
     342/** 
     343 * TODO comment 
     344 */ 
     345function addEventHandling(node, parentPath) { 
     346    if (typeof jQuery === 'undefined') { 
     347        addEventHandlingWithoutJQuery(node, parentPath); 
     348    } 
     349    else { 
     350        addEventHandlingWithJQuery(node, parentPath); 
     351    } 
     352} 
     353 
     354/** 
     355 * TODO comment 
     356 */ 
     357function addEventHandlingWithoutJQuery(node, parentPath) { 
     358    var nodePath = getNodePath(node, parentPath); 
     359    var tagName = getTagName(node); 
     360    var i; 
     361    var k; 
     362     
     363    for (i = 0; i < autoquestActionConfig.length; i++) { 
     364        if (tagName === autoquestActionConfig[i].tag.toLowerCase()) { 
     365            for (k = 0; k < autoquestActionConfig[i].actions.length; k++) { 
     366                adaptEventHandlingAttribute(node, nodePath, autoquestActionConfig[i].actions[k]); 
     367            } 
     368        } 
     369    } 
     370} 
     371 
     372/** 
     373 * TODO comment 
     374 */ 
     375function addEventHandlingWithJQuery(node, parentPath) { 
     376    var nodePath = getNodePath(node, parentPath); 
     377    var tagName = getTagName(node); 
     378    var action; 
     379    var parameters; 
     380    var i; 
     381    var k; 
     382     
     383    for (i = 0; i < autoquestActionConfig.length; i++) { 
     384        if (tagName === autoquestActionConfig[i].tag.toLowerCase()) { 
     385            for (k = 0; k < autoquestActionConfig[i].actions.length; k++) { 
     386                action = autoquestActionConfig[i].actions[k]; 
     387                if (jQuery(node).attr(action)) { 
     388                    // if there is an event handling attribute although jquery is present 
     389                    // edit this attribute accordingly 
     390                    adaptEventHandlingAttribute(node, nodePath, action); 
     391                } 
     392                else { 
     393                    parameters = { action : action, path : nodePath}; 
     394                    if (jQuery(node).on) { 
     395                        jQuery(node).on(action.substring(2), parameters, handleJQueryEvent); 
     396                    } 
     397                    else { 
     398                        jQuery(node).bind(action.substring(2), parameters, handleJQueryEvent); 
     399                    } 
     400                } 
     401            } 
     402        } 
     403    } 
     404} 
     405 
     406/** 
     407 * TODO comment 
     408 */ 
     409function adaptEventHandlingAttribute(node, nodePath, action) { 
     410    var value = "handleEvent(this, '" + action + "', '" + nodePath + "', event);"; 
     411    var oldValue; 
     412     
     413    if (!node.getAttribute(action)) { 
     414        node.setAttribute(action, value); 
     415    } 
     416    else { 
     417        oldValue = node.getAttribute(action); 
     418        if (oldValue.indexOf(value) < 0) { 
     419            node.setAttribute(action, value + ' ' + oldValue); 
    322420        } 
    323421    } 
     
    340438 */ 
    341439function getNodePath(node, parentPath) { 
    342     var nodePath = parentPath + "/"; 
    343     var index = -1; 
    344     var i = 0; 
    345      
    346     nodePath += getTagName(node); 
     440    var nodePath = parentPath + "/" + getTagName(node); 
    347441     
    348442    if ((node.id) && (node.id !== "")) { 
     
    350444    } 
    351445    else { 
    352         if (node.parentNode) { 
    353             for (i = 0; i < node.parentNode.childNodes.length; i++) { 
    354                 if (node.parentNode.childNodes[i].tagName === node.tagName) { 
    355                     index++; 
    356                     // if === also returns true if the nodes are not identical but only equal, 
    357                     // this may fail. 
    358                     if (node.parentNode.childNodes[i] === node) { 
    359                         break; 
    360                     } 
    361                 } 
    362             } 
    363              
    364         } 
    365         else { 
    366             index = 0; 
    367         } 
    368          
    369         nodePath += "[" + index + "]"; 
     446        nodePath += "[" + getNodeIndex(node) + "]"; 
    370447    } 
    371448     
    372449    return nodePath; 
     450} 
     451 
     452/** 
     453 * TODO comment 
     454 */ 
     455function handleJQueryEvent(event) { 
     456    handleEvent(this, event.data.action, event.data.path, event); 
    373457} 
    374458 
     
    446530            eventObj.setKey(event.keyCode); 
    447531        } 
    448         else if (eventType == "onchange") { 
     532        else if (eventType === "onchange") { 
    449533            if ((tagName.indexOf("input") === 0) || 
    450534                (tagName === "textarea") || 
     
    501585     
    502586/** 
     587 * determines the index of a node considering all nodes of the parent having the same name. If the 
     588 * node has no parent, the method returns index 0. 
     589 *  
     590 * @param node the node for which the index must be determined 
     591 *  
     592 * @return the index as described 
     593 */ 
     594function getNodeIndex(node) { 
     595    var i; 
     596    var index = 0; 
     597     
     598    if (node.parentNode) { 
     599        for (i = 0; i < node.parentNode.childNodes.length; i++) { 
     600            if (node.parentNode.childNodes[i].tagName === node.tagName) { 
     601                index++; 
     602                // if === also returns true if the nodes are not identical but only equal, 
     603                // this may fail. 
     604                if (node.parentNode.childNodes[i] === node) { 
     605                    break; 
     606                } 
     607            } 
     608        } 
     609         
     610    } 
     611 
     612    return index; 
     613} 
     614     
     615/** 
    503616 * sends the collected data to the server, named in the destination-variable. For this it generates 
    504617 * a JSON formatted message and uses Ajax and the <code>autoquestDestination</code> to send it to 
     
    506619 */ 
    507620function sendRequest() { 
    508     var eventList; 
     621    var eventList = autoquestRecordedEvents; 
    509622    var message; 
    510623    var clientId; 
     
    512625    var request; 
    513626     
    514     if (autoquestRecordedEvents.length > 0) { 
     627    if (eventList.length > 1) { 
    515628        log("creating message"); 
    516         eventList = autoquestRecordedEvents; 
    517629         
    518630        // put the last event into the new list to allow for checks for reoccurence of the same 
     
    533645        message += "\"url\":\"" + document.URL + "\"},"; 
    534646         
     647        message += "\"guiModel\":" + autoquestGUIModel + ","; 
    535648         
    536649        message += "\"events\":["; 
     
    674787            var div = document.createElement("div"); 
    675788            div.setAttribute("style", "z-index:1000000; background-color:#afa; " + 
    676                              "border:1px black solid; position:absolute; " + 
    677                              "top:10px; right:10px; width:350px; height:auto"); 
     789                             "border:1px black solid; position:absolute; top:10px; right:10px; " + 
     790                             "width:350px; height:auto; font-size:8pt; font-family:Helvetica"); 
    678791             
    679792            loggingInfo = document.createElement("div"); 
     
    752865    }; 
    753866}  
    754  
Note: See TracChangeset for help on using the changeset viewer.