init

03-资料/产品相关文档/快递员端/快递员/plugins/recordplay/recordplay.js

@@ -0,0 +1,479 @@
+// use this to isolate the scope
+(function() {
+
+        if(!$axure.document.configuration.showRecordPlay) { return; }
+
+    $(window.document).ready(function() {
+        $axure.player.createPluginHost({
+            id: 'recordPlayHost',
+            context: 'interface',
+            title: 'Recording'
+        });
+        _generateRecordPlay();
+
+        $('#recordButton').click(_recordClick);
+        $('#playButton').click(_playClick);
+        $('#stopButton').click(_stopClick);
+        $('#deleteButton').click(_deleteClick);
+
+        // bind to the page load
+
+        $axure.page.bind('load.page_notes', function() {
+            
+            $.ajax({
+                type: "POST",
+                url: '/RecordController/ListRecordings',
+                success: function(response) {
+
+                    $('#recordNameHeader').html("");
+                    $('#recordPlayContent').html("");
+                    //populate the notes 
+                    
+                    axRecordingList = [];
+
+                    if(!eventList) {
+                        recordingIndex = 0;
+                        eventList = [];
+                        recordingStartTime = 0;
+                        bulkEventElement = "";
+                        lastBulkEvent = {};
+                    }
+
+                    for(var idx in response.recordingList) {
+                        getOneRecording(response.recordingList[idx]);
+                    }
+
+                    return false;
+                },
+                //                dataType: 'json'
+            });
+        });
+    });
+    
+    var nameMatcher = new RegExp("^axRecording[0-9]{4}$", "i");
+    var indexMatcher = new RegExp("[0-9]{4}$", "i");
+
+    var convertFromJson = function(oneRecording) {
+        
+        if(nameMatcher.exec(oneRecording.recordingName)) {
+            var myArray = indexMatcher.exec(oneRecording.recordingName);
+            var currIdx = parseInt(myArray);
+            if(recordingIndex < currIdx) {
+                recordingIndex = currIdx;
+            }
+        }
+        
+
+        for(var idx in oneRecording.eventList) {
+            var thisEvent = oneRecording.eventList[idx];
+                thisEvent.eventInfo = {};
+                            thisEvent.eventInfo.srcElement = thisEvent.elementID;
+                // TODO: check that this is correct.
+
+            if(isBulkMouse(thisEvent.eventType)) {
+                thisEvent.eventInfo.mousePositions = [];
+                thisEvent.eventInfo.mousePositions = thisEvent.mousePositions;
+                thisEvent.timeStamp = thisEvent.mousePositions[0].timeStamp;
+            }
+            if(isSingleMouse(thisEvent.eventType)) {
+                thisEvent.eventInfo.cursor = {};
+                thisEvent.eventInfo.cursor = thisEvent.cursor;
+                
+            }
+            if(thisEvent.eventType === 'OnDrag') {
+                thisEvent.eventInfo.dragInfo = {};
+                thisEvent.eventInfo.dragInfo = thisEvent.dragInfo;
+                thisEvent.timeStamp = thisEvent.dragInfo.startTime;
+            }
+
+        }
+        return oneRecording;
+    };
+
+    var getOneRecording = function(recordingItem) {
+        $.ajax({
+                type: "POST",
+                url: '/RecordController/GetRecording',
+                data: { 'recordingId': recordingItem.recordingId },
+            success: function(response) {
+                        axRecordingList[axRecordingList.length] = convertFromJson(response);
+                        var axRecordingContainer = $('#recordingContainer').find('li').filter('.recordingRootNode');
+                        axRecordingContainer.append(_formAxRecordingBranch(response));
+                        _attachEventTriggers(response);     
+            },                //                dataType: 'json'
+        });
+
+    };
+    
+    var axRecordingList;
+    var eventList;
+    var recordingIndex;
+    var recordingStartTime;
+    var recordingId;
+    var recordingName;
+
+
+    var leadingZeros = function(number, digits) { // because this thing doesn't have string.format (or does it?)
+        var recurseLeadingZeros = function(number, digitsLeft) {
+            if(digitsLeft > 0) {
+                return recurseLeadingZeros("0" + number, digitsLeft - 1);
+            } else {
+                return number;
+            }
+        };
+        return recurseLeadingZeros(number, digits - String(number).length);
+    };
+    
+
+    var generateRecordingName = function() {
+        return "axRecording" + leadingZeros(recordingIndex, 4);
+    };
+
+    var isSingleMouse = function(eventType) {
+        return (eventType === 'OnClick' ||
+            eventType === 'OnMouseUp' ||
+            eventType === 'OnMouseDown' ||
+            eventType === 'OnMouseOver' ||
+            eventType === 'OnKeyUp' ||
+            eventType === 'OnSelectedChange' ||
+            eventType === 'OnSelect' ||
+            eventType === 'OnUnselect' ||
+            eventType === 'OnTextChange' ||
+            eventType === 'OnMouseOut');
+    };
+
+    var isBulkMouse = function(eventType) {
+        return (eventType === 'OnMouseHover' ||
+            eventType === 'OnMouseMove');
+    };
+
+    var bulkEventElement;
+    var lastBulkEvent;
+
+
+    $axure.messageCenter.addMessageListener(function(message, eventData) {
+        var lastEvent, lastBulkData;
+        
+        if(message === 'logEvent') {
+            
+            if(bulkEventElement !== eventData.elementID) {
+                lastBulkEvent = {};
+                bulkEventElement = eventData.elementID;
+            }
+            
+            if(isBulkMouse(eventData.eventType)) {
+                lastEvent = lastBulkEvent[eventData.eventType];
+
+                if(lastEvent) {
+                    // this is the second or third or whatever onmousemove in a row
+                    lastBulkData = lastEvent.eventInfo.mousePositions;
+                    lastBulkData[lastBulkData.length] = {
+                        cursor: eventData.eventInfo.cursor,
+                        timeStamp: eventData.timeStamp
+                    };
+                } else {
+
+                    eventData.eventInfo.mousePositions = [];
+                    eventData.eventInfo.mousePositions[0] = {
+                        cursor: eventData.eventInfo.cursor,
+                        timeStamp: eventData.timeStamp
+                    };
+                    eventList[eventList.length] = eventData;
+                    lastBulkEvent[eventData.eventType] = eventData;
+                }
+            } else {
+                var z = true;
+            }
+            
+            if(isSingleMouse(eventData.eventType) ) {
+                eventList[eventList.length] = eventData;
+                lastBulkEvent = {};
+                bulkEventElement = eventData.elementID;
+            }
+
+            if(eventData.eventType === 'OnDrag') {
+
+                lastEvent = lastBulkEvent[eventData.eventType];
+                
+                if (lastEvent) {
+                    // this is the second or third or whatever onmousemove in a row
+                    lastBulkData = lastEvent.eventInfo.mousePositions;
+                    lastBulkData[lastBulkData.length] = {
+                        dragInfo: eventData.eventInfo.dragInfo,
+                        timeStamp: eventData.timeStamp
+                    };
+                } else {
+                    eventData.eventInfo.mousePositions = [];
+                    eventData.eventInfo.mousePositions[0] = {
+                        dragInfo: eventData.eventInfo.dragInfo,
+                        timeStamp: eventData.timeStamp
+                    };
+                    eventList[eventList.length] = eventData;
+                    lastBulkEvent[eventData.eventType] = eventData;
+                }
+            }
+//            if(eventData.eventType === 'OnKeyUp') {
+//                transmissionFields.eventInfo = eventData.eventInfo;
+//                $.ajax({
+//                    type: "POST",
+//                    url: '/RecordController/LogMouseClick',
+//                    data: transmissionFields,
+//                });
+//            }            
+        }
+
+    });
+    
+    
+    var _recordClick = function(event) {
+        $('#recordButton').addClass('recordPlayButtonSelected');
+        recordingIndex++;
+        //        $axure.recording.startRecord();
+
+        recordingStartTime = new Date().getTime();
+
+        $.ajax({
+            type: "POST",
+            url: '/RecordController/CreateRecording',
+            data: {
+                'recordingName': generateRecordingName(),
+                timeStamp: recordingStartTime
+            },
+            success: function(response) {
+                recordingId = response.recordingId;
+                recordingName = response.recordingName;
+        $axure.messageCenter.postMessage('startRecording', {'recordingId' : recordingId, 'recordingName': recordingName});
+            },
+            //                dataType: 'json'
+        });
+        
+    };
+
+    var _playClick = function(event) {
+        $('#playButton').addClass('recordPlayButtonSelected');
+    };
+
+    var _stopClick = function(event) {
+        var axRecording, axObjectDictionary, axRecordingContainer, transmissionFields;
+        $('#sitemapLinksContainer').toggle();
+        if($('#recordButton').is('.recordPlayButtonSelected')) {
+            $('#recordButton').removeClass('recordPlayButtonSelected');
+            //            $axure.recording.stopRecord();
+
+            axRecording = {
+                'recordingId' : recordingId,
+                'recordingName': recordingName,
+                'eventList': eventList
+            };
+            
+            axRecordingList[axRecordingList.length] = axRecording;
+            axRecordingContainer = $('#recordingContainer').find('li').filter('.recordingRootNode');
+            axRecordingContainer.append(_formAxRecordingBranch(axRecording));
+            _attachEventTriggers(axRecording);
+
+            lastBulkEvent = {};
+
+            var recordingStepList = [];
+
+            for(var eventListIdx in eventList) {
+                var eventListItem = eventList[eventListIdx];
+
+                if(eventListItem.eventType === 'OnDrag') {
+                    var lastDrag = eventListItem.eventInfo.mousePositions[eventListItem.eventInfo.mousePositions.length - 1].dragInfo;
+                    eventListItem.eventInfo.dragInfo.currentX = lastDrag.currentX;
+                    eventListItem.eventInfo.dragInfo.currentY = lastDrag.currentY;
+                    eventListItem.eventInfo.dragInfo.currentTime = lastDrag.currentTime;
+                    eventListItem.eventInfo.dragInfo.xDelta = eventListItem.eventInfo.dragInfo.currentX - eventListItem.eventInfo.dragInfo.lastX;
+                    eventListItem.eventInfo.dragInfo.yDelta = eventListItem.eventInfo.dragInfo.currentY - eventListItem.eventInfo.dragInfo.lastY;
+                    transmissionFields = {};
+                    transmissionFields = tackItOn(transmissionFields, eventListItem, ['eventType', 'elementID', 'path']);
+                    transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['dragInfo']);
+                    transmissionFields.recordingId = recordingId;
+                }
+
+                if(isSingleMouse(eventListItem.eventType)) {
+                    transmissionFields = {};
+                    transmissionFields = tackItOn(transmissionFields, eventListItem, ['timeStamp', 'eventType', 'elementID', 'path']);
+                    transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['cursor']);
+                    transmissionFields.recordingId = recordingId;
+                }
+
+                if(isBulkMouse(eventListItem.eventType)) {
+                    transmissionFields = {};
+                    transmissionFields = tackItOn(transmissionFields, eventListItem, ['eventType', 'elementID', 'path']);
+                    transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['mousePositions']);
+                    transmissionFields.recordingId = recordingId;
+                }
+                recordingStepList[recordingStepList.length] = transmissionFields;
+            }
+
+            eventList = [];
+            $axure.messageCenter.postMessage('stopRecording', axObjectDictionary);
+
+            var jsonText = {
+                'recordingName': recordingName,
+                'recordingId': recordingId,
+                recordingStart: new Date().getTime(),
+                recordingEnd: recordingStartTime,
+                'eventList': recordingStepList
+            };
+
+            $.ajax({
+                type: "POST",
+                url: '/RecordController/StopRecording',
+                data: { 'jsonText': JSON.stringify(jsonText) }
+                
+            });
+
+        }
+
+        if($('#playButton').is('.recordPlayButtonSelected')) {
+            $('#playButton').removeClass('recordPlayButtonSelected');
+        }
+    };
+    
+    var _deleteClick = function(event) {
+        $.ajax({
+                type: "POST",
+                url: '/RecordController/DeleteRecordings',
+            success: function(response) {
+                var x = true;
+            },                //                dataType: 'json'
+        });
+    };
+
+    var tackItOn = function(destination, source, fields) {
+
+        for(var idx in fields) {
+            destination[fields[idx]] = source[fields[idx]];
+        }
+        return destination;
+    };
+
+    var makeFirstLetterLower = function(eventName) {
+        return eventName.substr(0, 1).toLowerCase() + eventName.substr(1);
+    };
+
+    var _attachEventTriggers = function(axRecording) {
+        for(var eventIdx in axRecording.eventList) {
+            var eventObject = axRecording.eventList[eventIdx];
+            var eventID = axRecording['recordingId'] + '_' + eventObject.timeStamp;
+            currentEvent = eventID;
+            $('#' + eventID).click(_triggerEvent(axRecording['recordingId'], eventObject.timeStamp));
+            //            $('#' + eventID).click(event.trigger);
+        }
+    };
+
+    var _formAxRecordingBranch = function(axRecording) {
+        var eventObject, eventID, RDOID;
+        var recordPlayUi = '<ul class="recordingTree">';
+        recordPlayUi += "<li class='recordingNode recordingExpandableNode'>";
+        recordPlayUi += '<div class="recordingContainer" style="margin-left:15px">';
+        recordPlayUi += '<a class="recordingPlusMinusLink"><span class="recordingMinus"></span></a>';
+        recordPlayUi += '<a class="recordingPageLink" nodeurl="home.html">';
+        recordPlayUi += '<span class="recordingPageIcon"></span>';
+        recordPlayUi += '<span class="recordingPageName">' + axRecording['recordingName'] + '</span>';
+        recordPlayUi += '</a>';
+
+        recordPlayUi += '<ul>';
+
+        for(eventID in axRecording.eventList) {
+
+            eventObject = axRecording.eventList[eventID];
+
+            recordPlayUi += '<li class="recordingNode recordingLeafNode">';
+            recordPlayUi += '<div class="recordingEventContainer" style="margin-left:44px">';
+            var eventID = axRecording['recordingId'] + '_' + eventObject.timeStamp;
+            recordPlayUi += '<a id="' + eventID + '" class="sitemapPageLink">';
+            recordPlayUi += 'Event ID: ' + eventID + '<br/>';
+
+            recordPlayUi += '<span class="sitemapPageIcon"></span>';
+            recordPlayUi += '<span class="sitemapPageName">';
+
+            recordPlayUi += 'elementID: ' + eventObject.elementID + '<br/>';
+            recordPlayUi += 'eventType: ' + eventObject.eventType + '<br/>';
+//            recordPlayUi += 'cursor: ' + eventObject.eventInfo.cursor.x + ',' + eventObject.eventInfo.cursor.y + '<br/>';
+
+            for(RDOID in eventObject.path) {
+                recordPlayUi += '/' + eventObject.path[RDOID];
+            }
+            recordPlayUi += '<br/>';
+            recordPlayUi += '</span>';
+            recordPlayUi += '</a>';
+            recordPlayUi += '</div>';
+            recordPlayUi += '</li>';
+        }
+
+        recordPlayUi += '</ul>';
+
+        recordPlayUi += '</div>';
+
+        recordPlayUi += "</li>";
+        recordPlayUi += "</ul>";
+
+        return recordPlayUi;
+    };
+
+    var currentEvent = '';
+
+    var _triggerEvent = function(axRecording, timeStamp) {
+        //            $axure.messageCenter.postMessage('triggerEvent', false);
+
+
+        for(var axRecordingIdx in axRecordingList) {
+            if(axRecordingList[axRecordingIdx].recordingId === axRecording) {
+                for(var eventIdx in axRecordingList[axRecordingIdx].eventList) {
+                    if(axRecordingList[axRecordingIdx].eventList[eventIdx].timeStamp === timeStamp) {
+
+                        var thisEvent = axRecordingList[axRecordingIdx].eventList[eventIdx];
+                        //                            thisEvent.trigger();
+
+                        var thisEventInfo, lowerEventType;
+                        lowerEventType = thisEvent.eventType.toLowerCase();
+                        if(lowerEventType === 'onclick' || lowerEventType === 'onmousein') {
+                            thisEventInfo = {};
+                            thisEventInfo = tackItOn(thisEventInfo, thisEvent.eventInfo, ['cursor', 'timeStamp', 'srcElement']);
+                            if(thisEvent.eventInfo.inputType) {
+                                thisEventInfo = tackItOn(thisEventInfo, thisEvent.eventInfo, ['inputType', 'inputValue']);
+                            }
+                        } else {
+                            thisEventInfo = thisEvent.eventInfo;
+                        }
+
+                        var thisParameters = {
+                            'element': thisEvent.elementID,
+                            'eventInfo': thisEventInfo,
+                            //                            'axEventObject': thisEvent.eventObject,
+                            'eventType': thisEvent.eventType
+                        };
+
+                        return function() {
+                            $axure.messageCenter.postMessage('playEvent', thisParameters);
+                        };
+
+                    }
+                }
+            }
+        }
+    };
+
+    var _generateRecordPlay = function() {
+        var recordPlayUi = "<div id='recordPlayContainer'>";
+
+        recordPlayUi += "<div id='recordPlayToolbar'>";
+
+        recordPlayUi += "<div style='height:30px;'>";
+
+        recordPlayUi += "<a id='recordButton' title='Start a Recording' class='recordPlayButton'></a>";
+        recordPlayUi += "<a id='playButton' title='Play Back a Recording' class='recordPlayButton'></a>";
+        recordPlayUi += "<a id='stopButton' title='Stop' class='recordPlayButton'></a>";
+        recordPlayUi += "<a id='deleteButton' title='Delete All Recordings' class='recordPlayButton'></a>";
+        recordPlayUi += "</div>";
+
+        recordPlayUi += "<div id='recordingContainer'><li class='recordingNode recordingRootNode'></li></div>";
+        recordPlayUi += "</div>";
+
+        $('#recordPlayHost').html(recordPlayUi);
+    };
+
+})();   

03-资料/产品相关文档/快递员端/快递员/plugins/recordplay/styles/recordplay.css

@@ -0,0 +1,90 @@
+#recordPlayHost {
+    font-size: 12px;
+    color:#333;
+    height: 100%;
+}
+
+
+#recordPlayContainer 
+{
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    padding: 10px 10px 10px 10px;
+}
+
+#recordPlayToolbar 
+{
+	margin: 5px 5px 5px 5px;
+    height: 22px;
+}
+
+#recordPlayToolbar .recordPlayButton
+{
+    float: left;
+    width: 22px;
+    height: 22px;
+    border: 1px solid transparent;
+}
+
+#recordPlayToolbar .recordPlayButton:hover
+{
+    border: 1px solid rgb(0,157,217);
+    background-color : rgb(166,221,242);
+}
+
+#recordPlayToolbar .recordPlayButton:active
+{
+    border: 1px solid rgb(0,157,217);
+    background-color : rgb(204,235,248);
+}
+
+#recordPlayToolbar .recordPlayButtonSelected {
+    border: 1px solid rgb(0,157,217);
+    background-color : rgb(204,235,248);    
+}
+
+/* removed images */
+/*#recordButton {
+    background: url('../../sitemap/styles/images/233_hyperlink_16.png') no-repeat center center;
+}
+
+#playButton {
+    background: url('../../sitemap/styles/images/225_responsive_16.png') no-repeat center center;
+}
+
+#stopButton {
+    background: url('../../sitemap/styles/images/228_togglenotes_16.png') no-repeat center center;
+}
+
+#deleteButton {
+    background: url('../../sitemap/styles/images/231_event_16.png') no-repeat center center;
+}*/
+
+#recordNameHeader
+{
+    /* yeah??*/
+	font-size: 13px;
+	font-weight: bold;
+	height: 23px;
+	white-space: nowrap;
+}
+
+#recordPlayContent 
+{
+    /* yeah??*/
+	overflow: visible;
+}
+
+.recordPlayName 
+{
+	font-size: 12px;
+	margin-bottom: 5px;
+	text-decoration: underline;
+	white-space: nowrap;
+}
+
+.recordPlay 
+{
+	margin-bottom: 10px;
+}