产品原型
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.

473 lines
21 KiB

4 years ago
  1. // use this to isolate the scope
  2. (function () {
  3. // No notes shown specified by generation config
  4. if (!$axure.document.configuration.showPageNotes && !$axure.document.configuration.showAnnotationsSidebar && !$axure.document.configuration.showAnnotations) { return; }
  5. $(window.document).ready(function () {
  6. // Load right panel for Page Notes
  7. if ($axure.document.configuration.showPageNotes || $axure.document.configuration.showAnnotationsSidebar) {
  8. $axure.player.createPluginHost({
  9. id: 'pageNotesHost',
  10. context: 'inspect',
  11. title: 'Documentation',
  12. gid: 2,
  13. });
  14. }
  15. // Load footnotes on widgets
  16. if ($axure.document.configuration.showAnnotations) {
  17. $('#overflowMenuContainer').prepend('<div id="showNotesOption" class="showOption" style="order: 3"><div class="overflowOptionCheckbox"></div>Show Note Markers</div>');
  18. }
  19. createNotesOverlay();
  20. generatePageNotes();
  21. if ($axure.player.isMobileMode()) {
  22. $('#showNotesOption').hide();
  23. } else {
  24. $('#showNotesOption').click(footnotes_click);
  25. $('#showNotesOption').find('.overflowOptionCheckbox').addClass('selected');
  26. }
  27. function populateNotes(pageForNotes) {
  28. var hasNotes = false;
  29. if ($axure.document.configuration.showPageNotes) {
  30. var pageNoteUi = '';
  31. function populatePageNotes(pageOrMaster) {
  32. //populate the page notes
  33. var notes = pageOrMaster.notes;
  34. if (notes && !$.isEmptyObject(notes)) {
  35. pageNoteUi += "<div class='notesPageNameHeader'>" + pageOrMaster.pageName + "</div>";
  36. var showNames = $axure.document.configuration.showPageNoteNames;
  37. for(var noteName in notes) {
  38. pageNoteUi += "<div class='pageNoteContainer'>";
  39. if(showNames) {
  40. pageNoteUi += "<div class='pageNoteName'>" + noteName + "</div>";
  41. }
  42. pageNoteUi += "<div class='pageNote'>" + linkify(notes[noteName]) + "</div>";
  43. pageNoteUi += "</div>";
  44. //$('#pageNotesContent').append(pageNoteUi);
  45. hasNotes = true;
  46. }
  47. }
  48. }
  49. populatePageNotes(pageForNotes);
  50. if (pageForNotes.masterNotes) {
  51. for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
  52. populatePageNotes(pageForNotes.masterNotes[i]);
  53. }
  54. }
  55. if (pageNoteUi.length > 0) {
  56. pageNoteUi += "<div class='lineDivider'></div>";
  57. var pageNotesHeader = "<div id='pageNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Page Notes</div>";
  58. $('#pageNotesContent').append(pageNotesHeader + pageNoteUi);
  59. }
  60. }
  61. if ($axure.document.configuration.showAnnotationsSidebar) {
  62. var widgetNoteUi = '';
  63. //var widgetNotes = pageForNotes.widgetNotes;
  64. function populateWidgetNotes(widgetNotes){
  65. if (widgetNotes) {
  66. for (var i = 0; i < widgetNotes.length; i++) {
  67. var widgetNote = widgetNotes[i];
  68. widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
  69. widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
  70. widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
  71. for (var widgetNoteName in widgetNote) {
  72. if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
  73. widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
  74. widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
  75. //widgetNoteUi += "<div class='nondottedDivider'></div>";
  76. }
  77. }
  78. widgetNoteUi += "</div>";
  79. //widgetNoteUi += "<div class='nondottedDivider'></div>";
  80. //$('#pageNotesContent').append(widgetNoteUi);
  81. hasNotes = true;
  82. }
  83. }
  84. }
  85. populateWidgetNotes(pageForNotes.widgetNotes);
  86. if (pageForNotes.masterNotes) {
  87. for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
  88. populateWidgetNotes(pageForNotes.masterNotes[i].widgetNotes);
  89. }
  90. }
  91. if (widgetNoteUi.length > 0) {
  92. var widgetNotesHeader = "<div id='widgetNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Widget Notes</div>";
  93. $('#pageNotesContent').append(widgetNotesHeader + widgetNoteUi);
  94. //$('.widgetNoteContainer').children(':last-child').remove();
  95. //$('.widgetNoteFootnote').append("<div class='annnoteline'></div><div class='annnoteline'></div><div class='annnoteline'></div>");
  96. $('.widgetNoteContainer').click(function () {
  97. var wasSelected = $(this).hasClass('widgetNoteContainerSelected');
  98. $('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
  99. if (!wasSelected) $(this).addClass('widgetNoteContainerSelected');
  100. var dimStr = $('.currentAdaptiveView').attr('data-dim');
  101. var h = dimStr ? dimStr.split('x')[1] : '0';
  102. var $leftPanel = $('.leftPanel:visible');
  103. var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
  104. var $rightPanel = $('.rightPanel:visible');
  105. var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
  106. var viewDimensions = {
  107. h: h != '0' ? h : '',
  108. scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
  109. height: $('.rightPanel').height(),
  110. panelWidthOffset: leftPanelOffset + rightPanelOffset
  111. };
  112. $axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: this.getAttribute('data-id'), value: !wasSelected, view: viewDimensions});
  113. });
  114. }
  115. //if (pageForNotes.masterNotes) {
  116. // for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
  117. // var master = pageForNotes.masterNotes[i];
  118. // hasNotes = populateNotes(master) || hasNotes;
  119. // }
  120. //}
  121. }
  122. return hasNotes;
  123. }
  124. // bind to the page load
  125. $axure.page.bind('load.page_notes', function () {
  126. closeAllDialogs();
  127. var hasNotes = false;
  128. $('#pageNotesContent').html("");
  129. hasNotes = populateNotes($axure.page);
  130. if(hasNotes) $('#pageNotesEmptyState').hide();
  131. else $('#pageNotesEmptyState').show();
  132. //If footnotes enabled for this prototype...
  133. if ($axure.player.isMobileMode()) {
  134. $axure.messageCenter.postMessage('annotationToggle', false);
  135. } else if($axure.document.configuration.showAnnotations == true) {
  136. //If the fn var is defined and set to 0, hide footnotes
  137. //else if hide-footnotes button selected, hide them
  138. var fnVal = $axure.player.getHashStringVar(FOOTNOTES_VAR_NAME);
  139. if(fnVal.length > 0 && fnVal == 0) {
  140. $('#showNotesOption').find('.overflowOptionCheckbox').removeClass('selected');
  141. $axure.messageCenter.postMessage('annotationToggle', false);
  142. } else if(!$('#showNotesOption').find('.overflowOptionCheckbox').hasClass('selected')) {
  143. //If the footnotes button isn't selected, hide them on this loaded page
  144. $axure.messageCenter.postMessage('annotationToggle', false);
  145. }
  146. }
  147. // Get multiple click call if not removing beforehand
  148. $('#notesOverlay').off('click');
  149. $('#notesOverlay').on('click', '.closeNotesDialog', function () {
  150. var ownerId = $(this).attr("data-ownerid");
  151. _toggleAnnDialog(ownerId);
  152. });
  153. $axure.player.updatePlugins();
  154. return false;
  155. });
  156. $axure.messageCenter.addMessageListener(function (message, data) {
  157. //var messageData = { id: elementId, x: event.pageX, y: event.pageY }
  158. if (message == 'toggleAnnDialog') {
  159. _toggleAnnDialog(data.id, data.x, data.y, data.page);
  160. }
  161. });
  162. });
  163. function linkify(text) {
  164. var urlRegex = /(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  165. return text.replace(urlRegex, function (url, b, c) {
  166. var url2 = (c == 'www.') ? 'http://' + url : url;
  167. return '<a href="' + url2 + '" target="_blank" class="noteLink">' + url + '</a>';
  168. });
  169. }
  170. function getWidgetNotesHtml(ownerId, page) {
  171. var pageForNotes = page || $axure.page;
  172. var widgetNoteUi = '';
  173. widgetNoteUi += "<div data-ownerid='" + ownerId + "' class='closeNotesDialog'></div>";
  174. widgetNoteUi += "<div class='notesDialogScroll'>";
  175. function getNotesForPage(widgetNotes) {
  176. for (var i = 0; i < widgetNotes.length; i++) {
  177. var widgetNote = widgetNotes[i];
  178. if (widgetNote["ownerId"] == ownerId) {
  179. widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
  180. widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
  181. widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
  182. for (var widgetNoteName in widgetNote) {
  183. if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
  184. widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
  185. widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
  186. }
  187. }
  188. widgetNoteUi += "</div>";
  189. }
  190. }
  191. }
  192. getNotesForPage(pageForNotes.widgetNotes);
  193. if (pageForNotes.masterNotes) {
  194. for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
  195. getNotesForPage(pageForNotes.masterNotes[i].widgetNotes);
  196. }
  197. }
  198. widgetNoteUi += "</div>";
  199. widgetNoteUi += "<div class='resizeNotesDialog'></div>";
  200. return widgetNoteUi;
  201. }
  202. var maxZIndex = 1;
  203. var dialogs = {};
  204. var _toggleAnnDialog = function (id, srcLeft, srcTop, page) {
  205. if(dialogs[id]) {
  206. var $dialog = dialogs[id];
  207. // reset the dialog
  208. dialogs[id] = undefined;
  209. $dialog.find('.notesDialogScroll').getNiceScroll().remove();
  210. $dialog.remove();
  211. return;
  212. }
  213. var bufferH = 10;
  214. var bufferV = 10;
  215. var blnLeft = false;
  216. var blnAbove = false;
  217. var mfPos = $('#mainPanelContainer').position();
  218. var viewablePanelLeftMargin = parseInt($('#mainPanelContainer').css('margin-left'));
  219. var sourceTop = srcTop + mfPos.top;
  220. var sourceLeft = srcLeft + viewablePanelLeftMargin;
  221. var width = 300;
  222. var height = 300;
  223. if(sourceLeft > width + bufferH) {
  224. blnLeft = true;
  225. }
  226. if(sourceTop > height + bufferV) {
  227. blnAbove = true;
  228. }
  229. var top = 0;
  230. var left = 0;
  231. if(blnAbove) top = sourceTop - height - 20;
  232. else top = sourceTop + 10;
  233. if(blnLeft) left = sourceLeft - width - 4;
  234. else left = sourceLeft - 6;
  235. //need to set the zindex
  236. maxZIndex = maxZIndex + 1;
  237. var $dialog = $('<div class="notesDialog"></div>')
  238. .appendTo('#notesOverlay')
  239. .html(getWidgetNotesHtml(id, page));
  240. $dialog.css({ 'left': left, 'top': top, 'z-index': maxZIndex });
  241. $dialog.find('.notesDialogScroll').niceScroll({ cursorcolor: "#8c8c8c", cursorborder: "0px solid #fff" });
  242. $dialog.find('.notesDialogScroll').on($axure.eventNames.mouseDownName, function(event) {
  243. event.stopPropagation();
  244. });
  245. $dialog.find('.closeNotesDialog').on($axure.eventNames.mouseDownName, function (event) {
  246. event.stopPropagation();
  247. });
  248. $dialog.on($axure.eventNames.mouseDownName, startDialogMove);
  249. var startMouseX;
  250. var startMouseY;
  251. var startDialogX;
  252. var startDialogY;
  253. function startDialogMove() {
  254. startMouseX = window.event.pageX;
  255. startMouseY = window.event.pageY;
  256. var position = $dialog.position();
  257. startDialogX = position.left;
  258. startDialogY = position.top;
  259. $dialog.addClass('active');
  260. $('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
  261. $(document).bind($axure.eventNames.mouseMoveName, doDialogMove).bind($axure.eventNames.mouseUpName, endDialogMove);
  262. $dialog.find('.notesDialogScroll').getNiceScroll().hide();
  263. }
  264. function doDialogMove() {
  265. var currentX = window.event.pageX;
  266. var currentY = window.event.pageY;
  267. $dialog.css({ 'left': startDialogX + currentX - startMouseX, 'top': startDialogY + currentY - startMouseY });
  268. }
  269. function endDialogMove() {
  270. $('div.splitterMask').remove();
  271. $dialog.removeClass('active');
  272. $(document).unbind($axure.eventNames.mouseMoveName, doDialogMove).unbind($axure.eventNames.mouseUpName, endDialogMove);
  273. $dialog.find('.notesDialogScroll').getNiceScroll().resize();
  274. $dialog.find('.notesDialogScroll').getNiceScroll().show();
  275. }
  276. $dialog.find('.resizeNotesDialog').on($axure.eventNames.mouseDownName, startDialogResize);
  277. var startDialogW;
  278. var startDialogH;
  279. function startDialogResize() {
  280. event.stopPropagation();
  281. startMouseX = window.event.pageX;
  282. startMouseY = window.event.pageY;
  283. startDialogW = Number($dialog.css('width').replace('px',''));
  284. startDialogH = Number($dialog.css('height').replace('px', ''));
  285. $dialog.addClass('active');
  286. $('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
  287. $(document).bind($axure.eventNames.mouseMoveName, doDialogResize).bind($axure.eventNames.mouseUpName, endDialogResize);
  288. $dialog.find('.notesDialogScroll').getNiceScroll().hide();
  289. }
  290. function doDialogResize() {
  291. var currentX = window.event.pageX;
  292. var currentY = window.event.pageY;
  293. var newWidth = Math.max(200, startDialogW + currentX - startMouseX);
  294. var newHeight = Math.max(200, startDialogH + currentY - startMouseY);
  295. $dialog.css({ 'width': newWidth, 'height': newHeight });
  296. }
  297. function endDialogResize() {
  298. $('div.splitterMask').remove();
  299. $dialog.removeClass('active');
  300. $(document).unbind($axure.eventNames.mouseMoveName, doDialogResize).unbind($axure.eventNames.mouseUpName, endDialogResize);
  301. $dialog.find('.notesDialogScroll').getNiceScroll().resize();
  302. $dialog.find('.notesDialogScroll').getNiceScroll().show();
  303. }
  304. dialogs[id] = $dialog;
  305. // scroll ... just for IE
  306. //window.scrollTo(scrollX, scrollY);
  307. };
  308. $(document).on('sidebarCollapse', function (event, data) {
  309. clearSelection();
  310. });
  311. $(document).on('pluginShown', function (event, data) {
  312. if(data != 2) {
  313. clearSelection();
  314. }
  315. });
  316. function clearSelection() {
  317. var selectedNote = $('#pageNotesContainer').find('.widgetNoteContainerSelected');
  318. if(selectedNote.length > 0) {
  319. selectedNote.removeClass('widgetNoteContainerSelected');
  320. //var dimStr = $('.currentAdaptiveView').attr('data-dim');
  321. //var h = dimStr ? dimStr.split('x')[1] : '0';
  322. //var $leftPanel = $('.leftPanel:visible');
  323. //var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
  324. //var $rightPanel = $('.rightPanel:visible');
  325. //var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
  326. //var viewDimensions = {
  327. // h: h != '0' ? h : '',
  328. // scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
  329. // scrollLeft: $('#clipFrameScroll').scrollLeft(),
  330. // scrollTop: $('#clipFrameScroll').scrollTop(),
  331. // height: $('.rightPanel').height(),
  332. // panelWidthOffset: leftPanelOffset + rightPanelOffset
  333. //};
  334. //$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false, view: viewDimensions });
  335. $axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false });
  336. //$axure.messageCenter.postMessage('toggleSelectWidgetNote', '');
  337. }
  338. }
  339. function closeAllDialogs() {
  340. for (var id in dialogs) {
  341. var $dialog = dialogs[id];
  342. if ($dialog !== undefined) _toggleAnnDialog(id);
  343. }
  344. }
  345. $axure.player.toggleFootnotes = function(val) {
  346. var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
  347. if (scaleCheckDiv.hasClass('selected')) {
  348. if (!val) $('#showNotesOption').click();
  349. } else {
  350. if (val) $('#showNotesOption').click();
  351. }
  352. }
  353. function footnotes_click(event) {
  354. var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
  355. if (scaleCheckDiv.hasClass('selected')) {
  356. closeAllDialogs();
  357. scaleCheckDiv.removeClass('selected');
  358. $axure.messageCenter.postMessage('annotationToggle', false);
  359. //Add 'fn' hash string var so that footnotes stay hidden across reloads
  360. $axure.player.setVarInCurrentUrlHash(FOOTNOTES_VAR_NAME, 0);
  361. } else {
  362. scaleCheckDiv.addClass('selected');
  363. $axure.messageCenter.postMessage('annotationToggle', true);
  364. //Delete 'fn' hash string var if it exists since default is visible
  365. $axure.player.deleteVarFromCurrentUrlHash(FOOTNOTES_VAR_NAME);
  366. }
  367. }
  368. function createNotesOverlay() {
  369. var $targetPanel = $('#clippingBounds');
  370. if (!$('#notesOverlay').length) {
  371. var notesOverlay = document.createElement('div');
  372. notesOverlay.setAttribute('id', 'notesOverlay');
  373. $targetPanel.prepend(notesOverlay);
  374. $(notesOverlay).append('&nbsp;');
  375. }
  376. }
  377. function generatePageNotes() {
  378. var pageNotesUi = "<div id='pageNotesHeader'>";
  379. pageNotesUi += "<div id='pageNotesToolbar' style='height: 12px;'>";
  380. pageNotesUi += "</div>";
  381. pageNotesUi += "</div>";
  382. pageNotesUi += "<div id='pageNotesScrollContainer'>";
  383. pageNotesUi += "<div id='pageNotesContainer'>";
  384. pageNotesUi += "<div id='pageNotesEmptyState' class='emptyStateContainer'><div class='emptyStateTitle'>No notes for this page.</div><div class='emptyStateContent'>Notes added in Axure RP will appear here.</div><div class='dottedDivider'></div></div>";
  385. pageNotesUi += "<span id='pageNotesContent'></span>";
  386. pageNotesUi += "</div></div>";
  387. $('#pageNotesHost').html(pageNotesUi);
  388. if(!$axure.document.configuration.showAnnotations) {
  389. $('#pageNotesHost .pageNameHeader').css('padding-right', '55px');
  390. }
  391. }
  392. })();