init
This commit is contained in:
shuhongfan
171
03-资料/产品相关文档/快递员端/快递员/plugins/debug/debug.js
Normal file
171
03-资料/产品相关文档/快递员端/快递员/plugins/debug/debug.js
Normal file
@@ -0,0 +1,171 @@
|
||||
// use this to isolate the scope
|
||||
(function () {
|
||||
|
||||
if(!$axure.document.configuration.showConsole) { return; }
|
||||
|
||||
$(document).ready(function () {
|
||||
$axure.player.createPluginHost({
|
||||
id: 'debugHost',
|
||||
context: 'inspect',
|
||||
title: 'Console',
|
||||
gid: 3
|
||||
});
|
||||
|
||||
generateDebug();
|
||||
|
||||
$('#variablesClearLink').click(clearvars_click);
|
||||
$('#traceClear').click(cleartrace_click);
|
||||
$('#traceToggle').click(stoptrace_click);
|
||||
$('#traceStart').click(starttrace_click);
|
||||
$('#traceClear').hide();
|
||||
$('#traceToggle').hide();
|
||||
|
||||
$('#closeConsole').click(close);
|
||||
|
||||
var currentStack= [];
|
||||
var finishedStack = [];
|
||||
|
||||
$axure.messageCenter.addMessageListener(function (message, data) {
|
||||
if(message == 'axCompositeEventMessage') {
|
||||
for(var i = 0; i < data.length; i++) {
|
||||
processMessages(data[i].message, data[i].data);
|
||||
}
|
||||
} else processMessages(message, data);
|
||||
});
|
||||
|
||||
var processMessages = function(message, data) {
|
||||
if(message == 'globalVariableValues') {
|
||||
$('#variablesDiv').empty();
|
||||
for(var key in data) {
|
||||
var value = data[key] == '' ? '(blank)' : data[key];
|
||||
$('#variablesDiv').append('<div class="variableList"><div class="variableName">' + key + '</div><div class="variableValue">' + value + '</div></div>');
|
||||
}
|
||||
} else if(message == 'axEvent') {
|
||||
var addToStack = "<div class='axEventBlock'>";
|
||||
addToStack += "<div class='axEventContainer'>";
|
||||
addToStack += " <div class='axTime'>" + new Date().toLocaleTimeString() + "</div>";
|
||||
addToStack += " <div class='axEvent'>" + data.event.description + ": </div>";
|
||||
addToStack += " <div class='axLabel'>" + data.label + " (" + data.type + ")</div>";
|
||||
addToStack += "</div>";
|
||||
|
||||
currentStack.push(addToStack);
|
||||
} else if (message == 'axEventComplete') {
|
||||
currentStack[currentStack.length - 1] += "</div>";
|
||||
finishedStack.push(currentStack.pop());
|
||||
if(currentStack.length == 0) {
|
||||
$('#traceEmptyState').hide();
|
||||
$('#traceClear').show();
|
||||
$('#traceToggle').show();
|
||||
|
||||
for(var i = finishedStack.length - 1; i >= 0; i--) {
|
||||
if($('#traceDiv').children().length > 99) $('#traceDiv').children().last().remove();
|
||||
$('#traceDiv').prepend(finishedStack[i]);
|
||||
}
|
||||
finishedStack = [];
|
||||
}
|
||||
} else if (message == 'axCase') {
|
||||
//var addToStack = "<div class='axCaseContainer' style='background-color: #" + data.color + "'>";
|
||||
var addToStack = "<div class='axCaseContainer'>";
|
||||
addToStack += " <div class='axCaseItem'>" + data.item + "</div>";
|
||||
if (data.description) { addToStack += " <div class='axCaseDescription' title='" + data.description + "'>" + data.description + "</div>" };
|
||||
addToStack += "</div>";
|
||||
|
||||
currentStack[currentStack.length - 1] += addToStack;
|
||||
} else if (message == 'axAction') {
|
||||
var addToStack = "<div class='axActionContainer'>";
|
||||
addToStack += " <div class='axActionItem'>" + data.name + "</div>";
|
||||
//addToStack += " <div class='axActionItem'>" + data.item + "</div>";
|
||||
//if (data.description) { addToStack += " <div class='axActionDescription' title='" + data.description + "'>" + data.description + "</div>" };
|
||||
addToStack += "</div>";
|
||||
|
||||
currentStack[currentStack.length - 1] += addToStack;
|
||||
} else if (message == 'axInfo') {
|
||||
var addToStack = "<div class='axInfoContainer'>";
|
||||
addToStack += " <div class='axInfoItem'>" + data.item + "</div>";
|
||||
if (data.description) { addToStack += " <div class='axInfoDescription' title='" + data.longDescription + "'>" + data.description + "</div>" };
|
||||
addToStack += "</div>";
|
||||
|
||||
currentStack[currentStack.length - 1] += addToStack;
|
||||
}
|
||||
}
|
||||
|
||||
// bind to the page load
|
||||
$axure.page.bind('load.debug', function () {
|
||||
var traceStr = $axure.player.getHashStringVar(TRACE_VAR_NAME);
|
||||
if (traceStr.length > 0) $axure.messageCenter.setState("isTracing", true);
|
||||
else $axure.messageCenter.setState("isTracing", false);
|
||||
$axure.messageCenter.postMessage('getGlobalVariables', '');
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
function clearvars_click(event) {
|
||||
$axure.messageCenter.postMessage('resetGlobalVariables', '');
|
||||
}
|
||||
|
||||
function close() {
|
||||
$axure.player.pluginClose("debugHost");
|
||||
}
|
||||
|
||||
function cleartrace_click(event) {
|
||||
$('#traceDiv').html('');
|
||||
}
|
||||
|
||||
function starttrace_click(event) {
|
||||
$axure.messageCenter.setState("isTracing", true);
|
||||
//$('#traceDiv').html('');
|
||||
$('#traceEmptyState').hide();
|
||||
$('#traceClear').show();
|
||||
$('#traceToggle').text('Stop Trace');
|
||||
$('#traceToggle').off("click");
|
||||
$('#traceToggle').click(stoptrace_click);
|
||||
$('#traceToggle').show();
|
||||
console.log("starting trace");
|
||||
$axure.player.setVarInCurrentUrlHash(TRACE_VAR_NAME, 1);
|
||||
}
|
||||
|
||||
function stoptrace_click(event) {
|
||||
$axure.messageCenter.setState("isTracing", false);
|
||||
$('#traceDiv').prepend('<div class="tracePausedNotification">Trace Paused<div>');
|
||||
$('#traceToggle').text('Restart Trace');
|
||||
$('#traceToggle').off("click");
|
||||
$('#traceToggle').click(starttrace_click);
|
||||
console.log("stopping trace");
|
||||
$axure.player.deleteVarFromCurrentUrlHash(TRACE_VAR_NAME);
|
||||
}
|
||||
});
|
||||
|
||||
function generateDebug() {
|
||||
var pageNotesUi = "<div id='debugHeader'>";
|
||||
pageNotesUi += "<div id='debugToolbar'>";
|
||||
pageNotesUi += "<div id='consoleTitle' class='pluginNameHeader'>Console</div>";
|
||||
|
||||
pageNotesUi += "</div>";
|
||||
pageNotesUi += "</div>";
|
||||
|
||||
pageNotesUi += "<div id='variablesContainer' style='max-height:300px; overflow-y:auto'>";
|
||||
pageNotesUi += "<div id='variablesTitle' class='sectionTitle'>Variables</div>";
|
||||
pageNotesUi += "<a id='variablesClearLink' class='traceOption'>Reset Variables</a>";
|
||||
pageNotesUi += "<div id='variablesDiv'></div></div>";
|
||||
pageNotesUi += "<div id='traceContainer'>";
|
||||
|
||||
pageNotesUi += "<div id='traceHeader'>";
|
||||
pageNotesUi += "<span class='sectionTitle'>Trace</span><a id='traceClear' class='traceOption'>Clear Trace</a><a id='traceToggle' class='traceOption'>Stop Trace</a>";
|
||||
pageNotesUi += "</div>";
|
||||
pageNotesUi += "</div>";
|
||||
pageNotesUi += "<div id='debugScrollContainer'>";
|
||||
pageNotesUi += "<div id='debugContainer'>";
|
||||
|
||||
|
||||
pageNotesUi += "<div id='traceEmptyState'>";
|
||||
pageNotesUi += "<div class='startInstructions'>Click the button below to start recording interactions as you click through the prototype.</div>";
|
||||
pageNotesUi += "<div id='traceStart' class='startButton'>Start Trace</div>";
|
||||
pageNotesUi += "</div>";
|
||||
pageNotesUi += "<div id='traceDiv'></div></div>";
|
||||
pageNotesUi += "</div></div>";
|
||||
|
||||
$('#debugHost').html(pageNotesUi);
|
||||
$('#traceEmptyState').show();
|
||||
}
|
||||
|
||||
})();
|
||||
265
03-资料/产品相关文档/快递员端/快递员/plugins/debug/styles/debug.css
Normal file
265
03-资料/产品相关文档/快递员端/快递员/plugins/debug/styles/debug.css
Normal file
@@ -0,0 +1,265 @@
|
||||
#debugHost {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 13px;
|
||||
color: #4a4a4a;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#debugHostBtn {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
#debugHostBtn a {
|
||||
background: url('images/console_panel_on.svg') no-repeat center center, linear-gradient(transparent, transparent);
|
||||
}
|
||||
|
||||
#debugHostBtn a.selected, #debugHostBtn a.selected:hover {
|
||||
background: url('images/console_panel_off.svg') no-repeat center center, linear-gradient(transparent, transparent);
|
||||
}
|
||||
|
||||
#debugToolbar {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#variablesClearLink {
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#variablesClearLink:hover {
|
||||
color: #0a6cd6;
|
||||
}
|
||||
|
||||
#traceClearLink {
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#traceClearLink:hover {
|
||||
color: #0a6cd6;
|
||||
}
|
||||
|
||||
#debugScrollContainer
|
||||
{
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#debugContainer {
|
||||
padding: 10px 0px 10px 0px;
|
||||
}
|
||||
|
||||
#consoleTitle {
|
||||
clear: right;
|
||||
margin: 12px 0px;
|
||||
}
|
||||
|
||||
.variableName
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.variableDiv
|
||||
{
|
||||
margin-bottom: 20px;
|
||||
line-height: 16px;
|
||||
|
||||
}
|
||||
|
||||
#variablesDiv
|
||||
{
|
||||
clear: right;
|
||||
}
|
||||
|
||||
#variablesContainer {
|
||||
border-bottom: solid 1px #e7e7e7;
|
||||
padding: 0px 10px 12px 10px;
|
||||
}
|
||||
|
||||
#traceContainer {
|
||||
margin-bottom: 5px;
|
||||
padding: 15px 10px 0px 10px;
|
||||
}
|
||||
|
||||
#variablesTitle {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 11px;
|
||||
color: #2c2c2c;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.debugToolbarButton
|
||||
{
|
||||
font-size: 1em;
|
||||
color: #069;
|
||||
}
|
||||
|
||||
.axEventBlock {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 5px 0px 5px 0px;
|
||||
line-height: 21px;
|
||||
border-bottom: solid 5px #e7e7e7;
|
||||
}
|
||||
|
||||
.axEventContainer {
|
||||
background-color: #e7e7e7;
|
||||
padding: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
.axTime {
|
||||
margin: 0px 0px 0px 5px;
|
||||
font-size: 10px;
|
||||
color: #575757;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.axLabel {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.axEvent {
|
||||
margin: 0px 0px 2px 0px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.axCaseContainer, .axActionContainer, .axInfoContainer {
|
||||
justify-content: space-between;
|
||||
padding: 0px 10px 0px 10px;
|
||||
}
|
||||
.axCaseContainer {
|
||||
border-top: solid 2px #e7e7e7;
|
||||
/*background-color: #47b6b5;*/
|
||||
background-color: #e7e7e7;
|
||||
/*color: #ffffff;*/
|
||||
}
|
||||
.axActionContainer {
|
||||
border-top: solid 3px #e7e7e7;
|
||||
}
|
||||
.axInfoContainer {
|
||||
border-top: solid 1px #e7e7e7;
|
||||
}
|
||||
|
||||
.axCaseItem, .axActionItem, .axInfoItem {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.axCaseItem {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.axActionItem {
|
||||
font-weight: bold;
|
||||
}
|
||||
.axInfoItem {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.axCaseDescription {
|
||||
flex: 5 0 33%;
|
||||
margin-left: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
/*.axActionDescription, .axInfoDescription {
|
||||
flex: 5 0 33%;
|
||||
margin-left: 10px;
|
||||
text-align: right;
|
||||
}*/
|
||||
.axCaseDescription, .axActionDescription {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.axInfoDescription, .axActionDescription {
|
||||
color: #8c8c8c;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.variableName {
|
||||
width: 55%;
|
||||
line-height: 0.92;
|
||||
text-align: left;
|
||||
color: #0891b3;
|
||||
display: inline-block;
|
||||
word-wrap: break-word;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.variableValue {
|
||||
width: 45%;
|
||||
line-height: 0.92;
|
||||
text-align: right;
|
||||
color: #373d48;
|
||||
display: inline-block;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.traceEvent {
|
||||
border-bottom: solid 1px #e7e7e7;
|
||||
}
|
||||
|
||||
.tracePausedNotification {
|
||||
height: 25px;
|
||||
/*background-color: #e7e7e7;*/
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
margin: 5px 10px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
#traceEmptyState.emptyStateContainer {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.variableList{
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.traceOption {
|
||||
margin-left: 11px;
|
||||
height: 16px;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
line-height: 1.45;
|
||||
text-align: right;
|
||||
color: #8c8c8c;
|
||||
text-decoration: underline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.startInstructions {
|
||||
margin: auto;
|
||||
width: 179px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.startButton {
|
||||
margin: auto;
|
||||
margin-top: 10px;
|
||||
width: 181px;
|
||||
height: 24px;
|
||||
border-radius: 2px;
|
||||
border: solid 1px #008fe0;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
color: #008fe0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.debugLinksContainer {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="#008DCB" fill-rule="evenodd" d="M14 2.5l-2 1V2H2v12h12v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.5zm-2.981 3.702c.78-1.06 1.407-1.803 1.882-2.23.475-.428.938-.641 1.389-.641.54 0 .913.184 1.118.553.11.192.164.424.164.698 0 .28-.113.536-.339.769a1.1 1.1 0 0 1-.82.348c-.198 0-.422-.075-.672-.225-.25-.15-.439-.226-.569-.226-.253 0-.494.13-.723.39-.229.26-.623.81-1.184 1.65l.195 1.026c.102.526.188.959.256 1.297.069.338.144.651.226.938.11.397.219.684.328.862.11.177.27.266.482.266.191 0 .424-.14.697-.42.15-.15.38-.427.687-.83l.43.297a8.113 8.113 0 0 1-1.409 1.733c-.578.546-1.143.82-1.697.82-.465 0-.848-.192-1.148-.574-.171-.205-.322-.486-.452-.841a11.32 11.32 0 0 1-.282-.98 24.82 24.82 0 0 0-.23-.866l-.144.246c-.677 1.162-1.172 1.918-1.487 2.266-.471.52-1.018.78-1.64.78-.356 0-.665-.122-.928-.364a1.172 1.172 0 0 1-.395-.898c0-.294.097-.565.292-.815.195-.25.467-.374.815-.374.212 0 .474.075.785.226.31.15.514.225.61.225.212 0 .395-.094.548-.282.154-.188.457-.654.908-1.4l.41-.676c-.068-.287-.142-.64-.22-1.056-.079-.417-.16-.845-.241-1.282l-.164-.872c-.117-.629-.301-1.042-.554-1.24-.144-.117-.38-.175-.708-.175a14.992 14.992 0 0 0-.636.051v-.564c.616-.075 1.29-.17 2.026-.287a52.738 52.738 0 0 0 1.471-.246c.205.274.374.605.508.995.133.39.234.803.302 1.24l.113.688z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="#6D6D6D" fill-rule="evenodd" d="M14 2.5l-2 1V2H2v12h12v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.5zm-2.981 3.702c.78-1.06 1.407-1.803 1.882-2.23.475-.428.938-.641 1.389-.641.54 0 .913.184 1.118.553.11.192.164.424.164.698 0 .28-.113.536-.339.769a1.1 1.1 0 0 1-.82.348c-.198 0-.422-.075-.672-.225-.25-.15-.439-.226-.569-.226-.253 0-.494.13-.723.39-.229.26-.623.81-1.184 1.65l.195 1.026c.102.526.188.959.256 1.297.069.338.144.651.226.938.11.397.219.684.328.862.11.177.27.266.482.266.191 0 .424-.14.697-.42.15-.15.38-.427.687-.83l.43.297a8.113 8.113 0 0 1-1.409 1.733c-.578.546-1.143.82-1.697.82-.465 0-.848-.192-1.148-.574-.171-.205-.322-.486-.452-.841a11.32 11.32 0 0 1-.282-.98 24.82 24.82 0 0 0-.23-.866l-.144.246c-.677 1.162-1.172 1.918-1.487 2.266-.471.52-1.018.78-1.64.78-.356 0-.665-.122-.928-.364a1.172 1.172 0 0 1-.395-.898c0-.294.097-.565.292-.815.195-.25.467-.374.815-.374.212 0 .474.075.785.226.31.15.514.225.61.225.212 0 .395-.094.548-.282.154-.188.457-.654.908-1.4l.41-.676c-.068-.287-.142-.64-.22-1.056-.079-.417-.16-.845-.241-1.282l-.164-.872c-.117-.629-.301-1.042-.554-1.24-.144-.117-.38-.175-.708-.175a14.992 14.992 0 0 0-.636.051v-.564c.616-.075 1.29-.17 2.026-.287a52.738 52.738 0 0 0 1.471-.246c.205.274.374.605.508.995.133.39.234.803.302 1.24l.113.688z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user