产品原型
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

562 lines
25 KiB

4 years ago
  1. var currentNodeUrl = '';
  2. var allNodeUrls = [];
  3. var openNextPage = $axure.player.openNextPage = function () {
  4. var index = allNodeUrls.indexOf(currentNodeUrl) + 1;
  5. if(index >= allNodeUrls.length) return;
  6. var nextNodeUrl = allNodeUrls[index];
  7. currentNodeUrl = nextNodeUrl;
  8. $('.sitemapPageLink[nodeUrl="' + nextNodeUrl + '"]').parent().mousedown();
  9. };
  10. var openPreviousPage = $axure.player.openPreviousPage = function () {
  11. var index = allNodeUrls.indexOf(currentNodeUrl) - 1;
  12. if(index < 0) return;
  13. var nextNodeUrl = allNodeUrls[index];
  14. currentNodeUrl = nextNodeUrl;
  15. $('.sitemapPageLink[nodeUrl="' + nextNodeUrl + '"]').parent().mousedown();
  16. };
  17. // use this to isolate the scope
  18. (function() {
  19. var SHOW_HIDE_ANIMATION_DURATION = 0;
  20. var HIGHLIGHT_INTERACTIVE_VAR_NAME = 'hi';
  21. var currentPageLoc = '';
  22. var currentPlayerLoc = '';
  23. var currentPageHashString = '';
  24. $(window.document).ready(function() {
  25. $axure.player.createPluginHost({
  26. id: 'sitemapHost',
  27. context: 'project',
  28. title: 'Project Pages',
  29. gid: 1,
  30. });
  31. $(window.document).bind('keyup', function (e) {
  32. if (e.target.localName == "textarea" || e.target.localName == "input" || event.target.isContentEditable) return;
  33. switch(e.which) {
  34. case 188:
  35. openPreviousPage();
  36. break;
  37. case 190:
  38. openNextPage();
  39. break;
  40. default: return; // exit this handler for other keys
  41. }
  42. });
  43. generateSitemap();
  44. var pageCount = $('.sitemapPageLink').length;
  45. $('.leftArrow').click(openPreviousPage);
  46. $('.rightArrow').click(openNextPage);
  47. $('.sitemapPlusMinusLink').click(collapse_click);
  48. $('.sitemapPageLink').parent().mousedown(node_click);
  49. $('#interfaceAdaptiveViewsListContainer').hide();
  50. $('#projectOptionsShowHotspots').click(showHotspots_click);
  51. $('#searchIcon').click(searchBoxClose_click);
  52. $('#searchDiv').click(searchBoxExpand_click);
  53. $('#searchBox').keyup(search_input_keyup);
  54. // bind to the page load
  55. $axure.page.bind('load.sitemap', function() {
  56. currentPageLoc = $axure.page.location.split("#")[0];
  57. var decodedPageLoc = decodeURI(currentPageLoc);
  58. currentNodeUrl = decodedPageLoc.substr(decodedPageLoc.lastIndexOf('/') ? decodedPageLoc.lastIndexOf('/') + 1 : 0);
  59. currentPlayerLoc = $(location).attr('href').split("#")[0].split("?")[0];
  60. currentPageHashString = '#p=' + currentNodeUrl.substr(0, currentNodeUrl.lastIndexOf('.'));
  61. $axure.player.setVarInCurrentUrlHash(PAGE_ID_NAME, $axure.player.getPageIdByUrl(currentNodeUrl));
  62. $axure.player.setVarInCurrentUrlHash(PAGE_URL_NAME, currentNodeUrl.substring(0, currentNodeUrl.lastIndexOf('.html')));
  63. $('#sitemapTreeContainer').find('.sitemapHighlight').removeClass('sitemapHighlight');
  64. var $currentNode = $('.sitemapPageLink[nodeUrl="' + currentNodeUrl + '"]');
  65. $currentNode.parent().parent().addClass('sitemapHighlight');
  66. var pageName = $axure.page.pageName;
  67. $('.pageNameHeader').html(pageName);
  68. if ($currentNode.length > 0 && pageCount > 1) {
  69. var currentNode = $currentNode[0];
  70. var currentNum = $('.sitemapPageLink').index(currentNode) + 1;
  71. $('.pageCountHeader').html('(' + currentNum + ' of ' + pageCount + ')');
  72. } else $('.pageCountHeader').html('');
  73. //If highlight var is present and set to 1 or else if
  74. //sitemap highlight button is selected then highlight interactive elements
  75. var hiVal = $axure.player.getHashStringVar(HIGHLIGHT_INTERACTIVE_VAR_NAME);
  76. if(hiVal.length > 0 && hiVal == 1) {
  77. $('#showHotspotsOption').find('.overflowOptionCheckbox').addClass('selected');
  78. if ($('#projectOptionsHotspotsCheckbox').length > 0) $('#projectOptionsHotspotsCheckbox').addClass('selected');
  79. $axure.messageCenter.postMessage('highlightInteractive', true);
  80. } else if ($('#showHotspotsOption').find('.overflowOptionCheckbox').hasClass('selected')) {
  81. $axure.messageCenter.postMessage('highlightInteractive', true);
  82. }
  83. generateAdaptiveViews(false);
  84. if (MOBILE_DEVICE) generateAdaptiveViews(true);
  85. $axure.player.suspendRefreshViewPort = true;
  86. //Set the current view if it is defined in the hash string
  87. //If the view is invalid, set it to 'auto' in the string
  88. //ELSE set the view based on the currently selected view in the toolbar menu
  89. var viewStr = $axure.player.getHashStringVar(ADAPTIVE_VIEW_VAR_NAME);
  90. if(viewStr.length > 0) {
  91. var $view = $('.adaptiveViewOption[val="' + viewStr + '"]');
  92. if($view.length > 0) $view.click();
  93. else $('.adaptiveViewOption[val="auto"]').click();
  94. } else if($('.selectedRadioButton').length > 0) {
  95. var $viewOption = $('.selectedRadioButton').parents('.adaptiveViewOption');
  96. $viewOption.click();
  97. }
  98. updateAdaptiveViewHeader();
  99. function setDefaultScaleForDevice() {
  100. if(MOBILE_DEVICE && $axure.player.isMobileMode()) {
  101. $('.projectOptionsScaleRow[val="0"]').click();
  102. } else {
  103. $('.vpScaleOption[val="0"]').click();
  104. }
  105. }
  106. var scaleStr = $axure.player.getHashStringVar(SCALE_VAR_NAME);
  107. if(scaleStr.length > 0) {
  108. var $scale = $('.vpScaleOption[val="' + scaleStr + '"]');
  109. if($scale.length > 0) $scale.click();
  110. else setDefaultScaleForDevice();
  111. } else {
  112. setDefaultScaleForDevice();
  113. }
  114. var rotateStr = $axure.player.getHashStringVar(ROT_VAR_NAME);
  115. if(rotateStr.length > 0) {
  116. $('#vpRotate').prop('checked', true);
  117. }
  118. $axure.player.suspendRefreshViewPort = false;
  119. if (!$axure.player.isViewOverridden()) $axure.messageCenter.postMessage('setAdaptiveViewForSize', { 'width': $('#mainPanel').width(), 'height': $('#mainPanel').height() });
  120. $axure.player.refreshViewPort();
  121. $axure.messageCenter.postMessage('finishInit');
  122. showMainPanel();
  123. return false;
  124. });
  125. var $vpContainer = $('#interfaceScaleListContainer');
  126. var scaleOptions = '<div class="vpScaleOption" val="0"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Default Scale</div>';
  127. scaleOptions += '<div class="vpScaleOption" val="1"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to Width</div>';
  128. scaleOptions += '<div class="vpScaleOption" val="2"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to Fit</div>';
  129. $(scaleOptions).appendTo($vpContainer);
  130. $('#overflowMenuContainer').append('<div id="showHotspotsOption" class="showOption" style="order: 1"><div class="overflowOptionCheckbox"></div>Show Hotspots</div>');
  131. $('#overflowMenuContainer').append($vpContainer);
  132. $vpContainer.show();
  133. $('#showHotspotsOption').click(showHotspots_click);
  134. $('.vpScaleOption').click(vpScaleOption_click);
  135. $('.vpScaleOption').mouseup(function (event) {
  136. event.stopPropagation();
  137. });
  138. if (MOBILE_DEVICE) {
  139. var scaleOptions = '<div class="projectOptionsScaleRow" val="1"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to fit width</div>';
  140. scaleOptions += '<div class="projectOptionsScaleRow" val="0"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Original size (100%)</div>';
  141. scaleOptions += '<div class="projectOptionsScaleRow" val="2" style="border-bottom: solid 1px #c7c7c7"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Fit all to screen</div>';
  142. $(scaleOptions).appendTo($('#projectOptionsScaleContainer'));
  143. $('.projectOptionsScaleRow').click(vpScaleOption_click);
  144. }
  145. $('#searchBox').focusin(function() {
  146. if($(this).is('.searchBoxHint')) {
  147. $(this).val('');
  148. $(this).removeClass('searchBoxHint');
  149. }
  150. }).focusout(function() {
  151. if($(this).val() == '') {
  152. $(this).addClass('searchBoxHint');
  153. }
  154. });
  155. $('#searchBox').focusout();
  156. });
  157. var _formatViewDimension = function(dim) {
  158. if(dim == 0) return 'any';
  159. if(dim.toString().includes('.')) return dim.toFixed(2);
  160. return dim;
  161. };
  162. function generateAdaptiveViews(forProjectOptions) {
  163. var $container = forProjectOptions ? $('#projectOptionsAdaptiveViewsContainer') : $('#interfaceAdaptiveViewsListContainer');
  164. var $viewSelect = forProjectOptions ? $('#projectOptionsViewSelect') : $('#viewSelect');
  165. var adaptiveViewOptionClass = forProjectOptions ? 'projectOptionsAdaptiveViewRow' : 'adaptiveViewOption';
  166. var currentViewClass = forProjectOptions ? '' : 'currentAdaptiveView';
  167. $container.empty();
  168. $viewSelect.empty();
  169. //Fill out adaptive view container with prototype's defined adaptive views, as well as the default, and Auto
  170. var viewsList = '<div class="' + adaptiveViewOptionClass + '" val="auto"><div class="adapViewRadioButton selectedRadioButton"><div class="selectedRadioButtonFill"></div></div>Adaptive</div>';
  171. var viewSelect = '<option value="auto">Adaptive</option>';
  172. if (typeof $axure.page.defaultAdaptiveView.name != 'undefined') {
  173. //If the name is a blank string, make the view name the width if non-zero, else 'any'
  174. var defaultView = $axure.page.defaultAdaptiveView;
  175. var defaultViewName = defaultView.name;
  176. var widthString = _formatViewDimension(defaultView.size.width);
  177. var heightString = _formatViewDimension(defaultView.size.height);
  178. var viewString = defaultViewName + ' (' + widthString + ' x ' + heightString + ')';
  179. viewsList += '<div class="' + adaptiveViewOptionClass + ' ' + currentViewClass + '" val="default"data-dim="' + defaultView.size.width + 'x' + defaultView.size.height + '">' +
  180. '<div class="adapViewRadioButton"><div class="selectedRadioButtonFill"></div></div>' + viewString + '</div>';
  181. viewSelect += '<option value="default">' + viewString + '</option>';
  182. }
  183. var useViews = $axure.document.configuration.useViews;
  184. var hasViews = false;
  185. if(useViews) {
  186. for(var viewIndex = 0; viewIndex < $axure.page.adaptiveViews.length; viewIndex++) {
  187. var currView = $axure.page.adaptiveViews[viewIndex];
  188. var widthString = _formatViewDimension(currView.size.width);
  189. var heightString = _formatViewDimension(currView.size.height);
  190. var viewString = currView.name + ' (' + widthString + ' x ' + heightString + ')';
  191. viewsList += '<div class="' + adaptiveViewOptionClass +
  192. ((forProjectOptions && (viewIndex == $axure.page.adaptiveViews.length - 1)) ? '" style="border-bottom: solid 1px #c7c7c7; margin-bottom: 15px;' : '') +
  193. '" val="' +
  194. currView.id +
  195. '" data-dim="' +
  196. currView.size.width +
  197. 'x' +
  198. currView.size.height +
  199. '"><div class="adapViewRadioButton"><div class="selectedRadioButtonFill"></div></div>' +
  200. viewString +
  201. '</div>';
  202. viewSelect += '<option value="' + currView.id + '">' + viewString + '</option>';
  203. hasViews = true;
  204. }
  205. }
  206. $container.append(viewsList);
  207. $viewSelect.append(viewSelect);
  208. if (!hasViews) {
  209. if (forProjectOptions) {
  210. $('#projectOptionsAdaptiveViewsHeader').hide();
  211. $('#projectOptionsAdaptiveViewsContainer').hide();
  212. } else $('#interfaceAdaptiveViewsContainer').hide();
  213. } else {
  214. if (forProjectOptions) {
  215. $('#projectOptionsAdaptiveViewsHeader').show();
  216. $('#projectOptionsAdaptiveViewsContainer').show();
  217. } else $('#interfaceAdaptiveViewsContainer').show();
  218. }
  219. $(('.' + adaptiveViewOptionClass)).click(adaptiveViewOption_click);
  220. if (!forProjectOptions) {
  221. $(('.' + adaptiveViewOptionClass)).mouseup(function (event) {
  222. event.stopPropagation();
  223. });
  224. }
  225. }
  226. function collapse_click(event) {
  227. if($(this).children('.sitemapPlus').length > 0) {
  228. expand_click($(this));
  229. } else {
  230. $(this)
  231. .children('.sitemapMinus').removeClass('sitemapMinus').addClass('sitemapPlus').end()
  232. .closest('li').children('ul').hide(SHOW_HIDE_ANIMATION_DURATION);
  233. }
  234. event.stopPropagation();
  235. }
  236. function expand_click($this) {
  237. $this
  238. .children('.sitemapPlus').removeClass('sitemapPlus').addClass('sitemapMinus').end()
  239. .closest('li').children('ul').show(SHOW_HIDE_ANIMATION_DURATION);
  240. }
  241. function searchBoxExpand_click(event) {
  242. if (!$('#searchIcon').hasClass('sitemapToolbarButtonSelected')) {
  243. $('#searchIcon').addClass('sitemapToolbarButtonSelected')
  244. $('#searchBox').width(0);
  245. $('#searchBox').show();
  246. $('#searchBox').animate({ width: '95%' }, { duration: 200, complete: function () { $('#searchBox').focus(); } });
  247. }
  248. }
  249. function searchBoxClose_click(event) {
  250. if ($('#searchIcon').hasClass('sitemapToolbarButtonSelected')) {
  251. $('#searchBox').animate({ width: '0%' }, { duration: 200,
  252. complete: function () {
  253. $('#searchBox').hide();
  254. $('#searchIcon').removeClass('sitemapToolbarButtonSelected')
  255. }});
  256. $('#searchBox').val('');
  257. $('#searchBox').keyup();
  258. }
  259. }
  260. function node_click(event) {
  261. hideMainPanel();
  262. $('#sitemapTreeContainer').find('.sitemapHighlight').removeClass('sitemapHighlight');
  263. $(this).parent().addClass('sitemapHighlight');
  264. $axure.page.navigate($(this).children('.sitemapPageLink')[0].getAttribute('nodeUrl'), true);
  265. }
  266. function hideMainPanel() {
  267. $('#mainPanel').css('opacity', '0');
  268. $('#clippingBounds').css('opacity', '0');
  269. }
  270. function showMainPanel() {
  271. $('#mainPanel').animate({ opacity: 1 }, 10);
  272. $('#clippingBounds').animate({ opacity: 1 }, 10);
  273. }
  274. $axure.messageCenter.addMessageListener(function(message, data) {
  275. if(message == 'adaptiveViewChange') {
  276. $('.adaptiveViewOption').removeClass('currentAdaptiveView');
  277. if(data.viewId) {$('.adaptiveViewOption[val="' + data.viewId + '"]').addClass('currentAdaptiveView');}
  278. else $('.adaptiveViewOption[val="default"]').addClass('currentAdaptiveView');
  279. //when we set adaptive view through user event, we want to update the checkmark on sitemap
  280. if(data.forceSwitchTo) {
  281. $('.adapViewRadioButton').find('.selectedRadioButtonFill').hide();
  282. $('.adapViewRadioButton').removeClass('selectedRadioButton');
  283. $('div[val="' + data.forceSwitchTo + '"]').find('.adapViewRadioButton').addClass('selectedRadioButton');
  284. $('div[val="' + data.forceSwitchTo + '"]').find('.selectedRadioButtonFill').show();
  285. }
  286. updateAdaptiveViewHeader();
  287. $axure.player.refreshViewPort();
  288. } else if(message == 'previousPage') {
  289. openPreviousPage();
  290. } else if(message == 'nextPage') {
  291. openNextPage();
  292. }
  293. });
  294. $axure.player.toggleHotspots = function (val) {
  295. var overflowMenuCheckbox = $('#showHotspotsOption').find('.overflowOptionCheckbox');
  296. if ($(overflowMenuCheckbox).hasClass('selected')) {
  297. if (!val) $('#showHotspotsOption').click();
  298. } else {
  299. if (val) $('#showHotspotsOption').click();
  300. }
  301. }
  302. function showHotspots_click(event) {
  303. var overflowMenuCheckbox = $('#showHotspotsOption').find('.overflowOptionCheckbox');
  304. var projOptionsCheckbox = $('#projectOptionsHotspotsCheckbox');
  305. if ($(overflowMenuCheckbox).hasClass('selected')) {
  306. overflowMenuCheckbox.removeClass('selected');
  307. if (projOptionsCheckbox.length > 0 ) projOptionsCheckbox.removeClass('selected');
  308. $axure.messageCenter.postMessage('highlightInteractive', false);
  309. //Delete 'hi' hash string var if it exists since default is unselected
  310. $axure.player.deleteVarFromCurrentUrlHash(HIGHLIGHT_INTERACTIVE_VAR_NAME);
  311. } else {
  312. overflowMenuCheckbox.addClass('selected');
  313. if (projOptionsCheckbox.length > 0) projOptionsCheckbox.addClass('selected');
  314. $axure.messageCenter.postMessage('highlightInteractive', true);
  315. //Add 'hi' hash string var so that stay highlighted across reloads
  316. $axure.player.setVarInCurrentUrlHash(HIGHLIGHT_INTERACTIVE_VAR_NAME, 1);
  317. }
  318. }
  319. function adaptiveViewOption_click(event) {
  320. var currVal = $(this).attr('val');
  321. $('.adaptiveViewOption').removeClass('currentAdaptiveView');
  322. if(currVal) {$('.adaptiveViewOption[val="' + currVal + '"]').addClass('currentAdaptiveView');}
  323. else $('.adaptiveViewOption[val="default"]').addClass('currentAdaptiveView');
  324. $('.adapViewRadioButton').find('.selectedRadioButtonFill').hide();
  325. $('.adapViewRadioButton').removeClass('selectedRadioButton');
  326. $('div[val="' + currVal + '"]').find('.adapViewRadioButton').addClass('selectedRadioButton');
  327. $('div[val="' + currVal + '"]').find('.selectedRadioButtonFill').show();
  328. selectAdaptiveView(currVal);
  329. $axure.player.closePopup();
  330. updateAdaptiveViewHeader();
  331. }
  332. var selectAdaptiveView = $axure.player.selectAdaptiveView = function(currVal) {
  333. if (currVal == 'auto') {
  334. $axure.messageCenter.postMessage('setAdaptiveViewForSize', { 'width': $('#mainPanel').width(), 'height': $('#mainPanel').height() });
  335. $axure.player.deleteVarFromCurrentUrlHash(ADAPTIVE_VIEW_VAR_NAME);
  336. } else {
  337. currentPageLoc = $axure.page.location.split("#")[0];
  338. var decodedPageLoc = decodeURI(currentPageLoc);
  339. var nodeUrl = decodedPageLoc.substr(decodedPageLoc.lastIndexOf('/')
  340. ? decodedPageLoc.lastIndexOf('/') + 1
  341. : 0);
  342. var adaptiveData = {
  343. src: nodeUrl
  344. };
  345. adaptiveData.view = currVal;
  346. $axure.messageCenter.postMessage('switchAdaptiveView', adaptiveData);
  347. $axure.player.setVarInCurrentUrlHash(ADAPTIVE_VIEW_VAR_NAME, currVal);
  348. }
  349. }
  350. $axure.player.updateAdaptiveViewHeader = updateAdaptiveViewHeader = function () {
  351. var hasDefinedDim = true;
  352. var dimensionlessViewStr = '(any x any)';
  353. var viewString = $('.adaptiveViewOption.currentAdaptiveView').text();
  354. if (viewString != null && viewString.indexOf(dimensionlessViewStr) >= 0) hasDefinedDim = false;
  355. if (!hasDefinedDim) {
  356. var viewName = viewString.substring(0, viewString.lastIndexOf(' ('));
  357. var widthString = $('#mainPanelContainer').width();
  358. viewString = viewName + ' (' + widthString + ' x any)';
  359. }
  360. $('.adaptiveViewHeader').html(viewString);
  361. }
  362. $axure.player.selectScaleOption = function (scaleVal) {
  363. var $scale = $('.vpScaleOption[val="' + scaleVal + '"]');
  364. if ($scale.length > 0) $scale.click();
  365. }
  366. function vpScaleOption_click(event) {
  367. var scaleCheckDiv = $(this).find('.scaleRadioButton');
  368. var scaleVal = $(this).attr('val');
  369. if (scaleCheckDiv.hasClass('selectedRadioButton')) return false;
  370. var $selectedScaleOption = $('.vpScaleOption[val="' + scaleVal + '"], .projectOptionsScaleRow[val="' + scaleVal + '"]');
  371. var $allScaleOptions = $('.vpScaleOption, .projectOptionsScaleRow');
  372. $allScaleOptions.find('.scaleRadioButton').removeClass('selectedRadioButton');
  373. $allScaleOptions.find('.selectedRadioButtonFill').hide();
  374. $selectedScaleOption.find('.scaleRadioButton').addClass('selectedRadioButton');
  375. $selectedScaleOption.find('.selectedRadioButtonFill').show();
  376. if (scaleVal == '0') {
  377. $axure.player.deleteVarFromCurrentUrlHash(SCALE_VAR_NAME);
  378. } else if (typeof scaleVal !== 'undefined') {
  379. $axure.player.setVarInCurrentUrlHash(SCALE_VAR_NAME, scaleVal);
  380. }
  381. $axure.player.refreshViewPort();
  382. }
  383. function search_input_keyup(event) {
  384. var searchVal = $(this).val().toLowerCase();
  385. //If empty search field, show all nodes, else grey+hide all nodes and
  386. //ungrey+unhide all matching nodes, as well as unhide their parent nodes
  387. if(searchVal == '') {
  388. $('.sitemapPageName').removeClass('sitemapGreyedName');
  389. $('.sitemapNode').show();
  390. } else {
  391. $('.sitemapNode').hide();
  392. $('.sitemapPageName').addClass('sitemapGreyedName').each(function() {
  393. var nodeName = $(this).text().toLowerCase();
  394. if(nodeName.indexOf(searchVal) != -1) {
  395. $(this).removeClass('sitemapGreyedName').parents('.sitemapNode:first').show().parents('.sitemapExpandableNode').show();
  396. }
  397. });
  398. }
  399. }
  400. function generateSitemap() {
  401. var treeUl = "<div id='sitemapHeader'' class='sitemapHeader'>";
  402. treeUl += "<div id='sitemapToolbar' class='sitemapToolbar'>";
  403. treeUl += '<div id="searchDiv"><span id="searchIcon" class="sitemapToolbarButton"></span><input id="searchBox" type="text"/></div>';
  404. treeUl += "<div class='leftArrow sitemapToolbarButton'></div>";
  405. treeUl += "<div class='rightArrow sitemapToolbarButton'></div>";
  406. treeUl += "</div>";
  407. treeUl += "</div>";
  408. ///////////////////
  409. var sitemapTitle = $axure.player.getProjectName();
  410. if (!sitemapTitle) sitemapTitle = "Pages";
  411. treeUl += "<div class='sitemapPluginNameHeader pluginNameHeader'>" + sitemapTitle + "</div>";
  412. treeUl += "<div id='sitemapTreeContainer'>";
  413. treeUl += "<ul class='sitemapTree' style='clear:both;'>";
  414. var rootNodes = $axure.document.sitemap.rootNodes;
  415. for(var i = 0; i < rootNodes.length; i++) {
  416. treeUl += generateNode(rootNodes[i], 0);
  417. }
  418. treeUl += "</ul></div>";
  419. if (!MOBILE_DEVICE) {
  420. treeUl += "<div id='changePageInstructions' class='pageSwapInstructions'>Use ";
  421. treeUl += '<span class="backKeys"></span>';
  422. treeUl += " and ";
  423. treeUl += '<span class="forwardKeys"></span>';
  424. treeUl += " keys<br>to move between pages";
  425. treeUl += "</div>";
  426. }
  427. $('#sitemapHost').html(treeUl);
  428. }
  429. function generateNode(node, level) {
  430. var hasChildren = (node.children && node.children.length > 0);
  431. var margin, returnVal;
  432. if(hasChildren) {
  433. margin = (9 + level * 17);
  434. returnVal = "<li class='sitemapNode sitemapExpandableNode'><div><div class='sitemapPageLinkContainer' style='margin-left:" + margin + "px'><a class='sitemapPlusMinusLink'><span class='sitemapMinus'></span></a>";
  435. } else {
  436. margin = (19 + level * 17);
  437. returnVal = "<li class='sitemapNode sitemapLeafNode'><div><div class='sitemapPageLinkContainer' style='margin-left:" + margin + "px'>";
  438. }
  439. var isFolder = node.type == "Folder";
  440. if(!isFolder) {
  441. returnVal += "<a class='sitemapPageLink' nodeUrl='" + node.url + "'>";
  442. allNodeUrls.push(node.url);
  443. }
  444. returnVal += "<span class='sitemapPageIcon";
  445. if(node.type == "Flow"){ returnVal += " sitemapFlowIcon";}
  446. if(isFolder) { returnVal += " sitemapFolderIcon"; }
  447. returnVal += "'></span><span class='sitemapPageName'>";
  448. returnVal += $('<div/>').text(node.pageName).html();
  449. returnVal += "</span>";
  450. if(!isFolder) returnVal += "</a>";
  451. returnVal += "</div></div>";
  452. if(hasChildren) {
  453. returnVal += "<ul>";
  454. for(var i = 0; i < node.children.length; i++) {
  455. var child = node.children[i];
  456. returnVal += generateNode(child, level + 1);
  457. }
  458. returnVal += "</ul>";
  459. }
  460. returnVal += "</li>";
  461. return returnVal;
  462. }
  463. })();