debug.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. // use this to isolate the scope
  2. (function () {
  3. if(!$axure.document.configuration.showConsole) { return; }
  4. $(document).ready(function () {
  5. $axure.player.createPluginHost({
  6. id: 'debugHost',
  7. context: 'interface',
  8. title: 'CONSOLE',
  9. gid: 3
  10. });
  11. generateDebug();
  12. $('#variablesClearLink').click(clearvars_click);
  13. $('#traceClearLink').click(cleartrace_click);
  14. $(document).on('ContainerHeightChange', function () {
  15. updateContainerHeight();
  16. });
  17. //$('#traceContainer').hide();
  18. //$('#debugTraceLink').click(function () {
  19. // $('#variablesContainer').hide();
  20. // $('#traceContainer').show();
  21. //});
  22. //$('#debugVariablesLink').click(function () {
  23. // $('#variablesContainer').show();
  24. // $('#traceContainer').hide();
  25. //});
  26. var currentStack= [];
  27. var finishedStack = [];
  28. $axure.messageCenter.addMessageListener(function (message, data) {
  29. if(message == 'globalVariableValues') {
  30. //If variables container isn't visible, then ignore
  31. //if(!$('#variablesContainer').is(":visible")) {
  32. // return;
  33. //}
  34. $('#variablesDiv').empty();
  35. for(var key in data) {
  36. var value = data[key] == '' ? '(blank)' : data[key];
  37. $('#variablesDiv').append('<div class="variableDiv"><span class="variableName">' + key + '</span><br/>' + value + '</div>');
  38. }
  39. } if(message == 'setGlobalVar') {
  40. //$('#variablesContainer').html("");
  41. //for (var variable in $axure.globalVariableProvider.getDefinedVariables) {
  42. // $('#variablesContainer').append("<div class='varName'>" + variable + "</div>");
  43. // $('#variablesContainer').append("<div class='varVal'>" + $axure.globalVariableProvider.getVariableValue(variable) + "</div>");
  44. //}
  45. } else if(message == 'axEvent') {
  46. var addToStack = "<div class='axEventBlock'>";
  47. addToStack += "<div class='axTime'>" + new Date().toLocaleTimeString() + "</div>";
  48. addToStack += "<div class='axLabel'>" + data.label + " (" + data.type + ")</div>";
  49. addToStack += "<div class='axEvent'>" + data.event.description + "</div>";
  50. currentStack.push(addToStack);
  51. } else if (message == 'axEventComplete') {
  52. currentStack[currentStack.length - 1] += "</div>";
  53. finishedStack.push(currentStack.pop());
  54. if(currentStack.length == 0) {
  55. $('#traceClearLinkContainer').show();
  56. $('#traceEmptyState').hide();
  57. $('.lastAxEvent').removeClass('lastAxEvent');
  58. for(var i = finishedStack.length - 1; i >= 0; i--) {
  59. if($('#traceDiv').children().length > 99) $('#traceDiv').children().last().remove();
  60. $('#traceDiv').prepend(finishedStack[i]);
  61. if(i == finishedStack.length - 1) $('#traceDiv').children().first().addClass('lastAxEvent');
  62. }
  63. finishedStack = [];
  64. }
  65. } else if (message == 'axCase') {
  66. currentStack[currentStack.length - 1] += "<div class='axCase'>" + data.description + "</div>";
  67. } else if (message == 'axAction') {
  68. currentStack[currentStack.length - 1] += "<div class='axAction'>" + data.description + "</div>";
  69. }
  70. });
  71. // bind to the page load
  72. $axure.page.bind('load.debug', function () {
  73. $axure.messageCenter.postMessage('getGlobalVariables', '');
  74. return false;
  75. });
  76. function clearvars_click(event) {
  77. $axure.messageCenter.postMessage('resetGlobalVariables', '');
  78. }
  79. function cleartrace_click(event) {
  80. $('#traceDiv').html('');
  81. $('#traceClearLinkContainer').hide();
  82. $('#traceEmptyState').show();
  83. }
  84. });
  85. function updateContainerHeight() {
  86. $('#debugScrollContainer').height($('#debugHost').height() - $('#debugHeader').outerHeight());
  87. }
  88. function generateDebug() {
  89. var pageNotesUi = "<div id='debugHeader'' class='sitemapHeader'>";
  90. pageNotesUi += "<div id='debugToolbar' class='sitemapToolbar'>";
  91. pageNotesUi += "<div class='pluginNameHeader'>CONSOLE</div>";
  92. pageNotesUi += "<div class='pageNameHeader'></div>";
  93. //pageNotesUi += "<div class='pageButtonHeader'>";
  94. //pageNotesUi += "<a id='previousPageButton' title='Previous Page' class='sitemapToolbarButton'></a>";
  95. //pageNotesUi += "<a id='nextPageButton' title='Next Page' class='sitemapToolbarButton'></a>";
  96. //pageNotesUi += "<a id='variablesClearLink' title='Reset Variables' class='sitemapToolbarButton'></a>";
  97. //pageNotesUi += "</div>";
  98. pageNotesUi += "</div>";
  99. pageNotesUi += "</div>";
  100. //var pageNotesUi = "<div id='debugToolbar'><a id='debugVariablesLink' class='debugToolbarButton'>Variables</a> | <a id='debugTraceLink' class='debugToolbarButton'>Trace</a></div>";
  101. pageNotesUi += "<div id='debugScrollContainer'>";
  102. pageNotesUi += "<div id='debugContainer'>";
  103. pageNotesUi += "<div id='variablesContainer'>";
  104. pageNotesUi += "<div id='variablesClearLinkContainer' class='debugLinksContainer'><a id='variablesClearLink' title='Reset Variables'>Reset Variables</a></div>";
  105. pageNotesUi += "<div id='variablesDiv'></div></div>";
  106. pageNotesUi += "<div class='dottedDivider'></div>";
  107. pageNotesUi += "<div id='traceContainer'>";
  108. pageNotesUi += "<div id='traceClearLinkContainer' class='debugLinksContainer'><a id='traceClearLink' title='Clear Trace'>Clear Trace</a></div>";
  109. pageNotesUi += "<div id='traceEmptyState' class='emptyStateContainer'><div class='emptyStateTitle'>No interactions in the trace.</div><div class='emptyStateContent'>Triggered interactions will appear here.</div><div class='dottedDivider'></div></div>";
  110. pageNotesUi += "<div id='traceDiv'></div></div>";
  111. pageNotesUi += "</div></div>";
  112. $('#debugHost').html(pageNotesUi);
  113. updateContainerHeight();
  114. $('#traceClearLinkContainer').hide();
  115. $('#traceEmptyState').show();
  116. }
  117. })();