page_notes.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. // use this to isolate the scope
  2. (function () {
  3. if(!$axure.document.configuration.showPageNotes && !$axure.document.configuration.showAnnotationsSidebar) { return; }
  4. $(window.document).ready(function () {
  5. $axure.player.createPluginHost({
  6. id: 'pageNotesHost',
  7. context: 'interface',
  8. title: 'NOTES',
  9. gid: 2
  10. });
  11. generatePageNotes();
  12. $(document).on('ContainerHeightChange', function () {
  13. updateContainerHeight();
  14. });
  15. $('#footnotesButton').click(footnotes_click).addClass('sitemapToolbarButtonSelected');
  16. $('#notesNextButton').click(notesNext_click);
  17. $('#notesPreviousButton').click(notesPrevious_click);
  18. // bind to the page load
  19. $axure.page.bind('load.page_notes', function () {
  20. var hasNotes = false;
  21. $('#pageNotesContent').html("");
  22. if($axure.document.configuration.showPageNotes) {
  23. //populate the notes
  24. var notes = $axure.page.notes;
  25. if(notes) {
  26. var showNames = $axure.document.configuration.showPageNoteNames;
  27. for(var noteName in notes) {
  28. var pageNoteUi = "<div class='pageNoteContainer'>";
  29. if(showNames) {
  30. pageNoteUi += "<div class='pageNoteName'>" + noteName + "</div>";
  31. }
  32. pageNoteUi += "<div class='pageNote'>" + linkify(notes[noteName]) + "</div>";
  33. pageNoteUi += "</div>";
  34. pageNoteUi += "<div class='dottedDivider'></div>";
  35. $('#pageNotesContent').append(pageNoteUi);
  36. hasNotes = true;
  37. }
  38. }
  39. }
  40. if($axure.document.configuration.showAnnotationsSidebar) {
  41. var widgetNotes = $axure.page.widgetNotes;
  42. if(widgetNotes) {
  43. for(var i = 0; i < widgetNotes.length; i++) {
  44. var widgetNote = widgetNotes[i];
  45. var widgetNoteUi = "<div class='widgetNoteContainer' data-id='" + widgetNote["id"] + "'>";
  46. widgetNoteUi += "<div class='widgetNoteFootnote'></div>";
  47. widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
  48. for(var widgetNoteName in widgetNote) {
  49. if(widgetNoteName != "label" && widgetNoteName != "id") {
  50. widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
  51. widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
  52. widgetNoteUi += "<div class='nondottedDivider'></div>";
  53. }
  54. }
  55. widgetNoteUi += "</div>";
  56. widgetNoteUi += "<div class='nondottedDivider'></div>";
  57. $('#pageNotesContent').append(widgetNoteUi);
  58. hasNotes = true;
  59. }
  60. $('.widgetNoteContainer').children(':last-child').remove();
  61. $('.widgetNoteFootnote').append("<div class='annnoteline'></div><div class='annnoteline'></div><div class='annnoteline'></div>");
  62. $('.widgetNoteContainer').click(function () {
  63. var wasSelected = $(this).hasClass('widgetNoteContainerSelected');
  64. $('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
  65. if(!wasSelected) $(this).addClass('widgetNoteContainerSelected');
  66. $axure.messageCenter.postMessage('toggleSelectWidgetNote', this.getAttribute('data-id'));
  67. });
  68. }
  69. }
  70. if(hasNotes) $('#pageNotesEmptyState').hide();
  71. else $('#pageNotesEmptyState').show();
  72. //If footnotes enabled for this prototype...
  73. if($axure.document.configuration.showAnnotations == true) {
  74. //If the fn var is defined and set to 0, hide footnotes
  75. //else if hide-footnotes button selected, hide them
  76. var fnVal = getHashStringVar(FOOTNOTES_VAR_NAME);
  77. if(fnVal.length > 0 && fnVal == 0) {
  78. $('#footnotesButton').removeClass('sitemapToolbarButtonSelected');
  79. $axure.messageCenter.postMessage('annotationToggle', false);
  80. } else if(!$('#footnotesButton').is('.sitemapToolbarButtonSelected')) {
  81. //If the footnotes button isn't selected, hide them on this loaded page
  82. $axure.messageCenter.postMessage('annotationToggle', false);
  83. }
  84. }
  85. return false;
  86. });
  87. function linkify(text) {
  88. var urlRegex = /(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  89. return text.replace(urlRegex, function(url, b, c) {
  90. var url2 = (c == 'www.') ? 'http://' + url : url;
  91. return '<a href="' + url2 + '" target="_blank" class="noteLink">' + url + '</a>';
  92. });
  93. }
  94. });
  95. function updateContainerHeight() {
  96. $('#pageNotesScrollContainer').height($('#pageNotesHost').height() - $('#pageNotesHeader').outerHeight());
  97. }
  98. $(document).on('sidebarCollapse', function (event, data) {
  99. clearSelection();
  100. });
  101. $(document).on('pluginShown', function (event, data) {
  102. if(data != 2) {
  103. clearSelection();
  104. }
  105. });
  106. function clearSelection() {
  107. $('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
  108. $axure.messageCenter.postMessage('toggleSelectWidgetNote', '');
  109. }
  110. function footnotes_click(event) {
  111. if($('#footnotesButton').is('.sitemapToolbarButtonSelected')) {
  112. $('#footnotesButton').removeClass('sitemapToolbarButtonSelected');
  113. $axure.messageCenter.postMessage('annotationToggle', false);
  114. //Add 'fn' hash string var so that footnotes stay hidden across reloads
  115. setVarInCurrentUrlHash(FOOTNOTES_VAR_NAME, 0);
  116. } else {
  117. $('#footnotesButton').addClass('sitemapToolbarButtonSelected');
  118. $axure.messageCenter.postMessage('annotationToggle', true);
  119. //Delete 'fn' hash string var if it exists since default is visible
  120. deleteVarFromCurrentUrlHash(FOOTNOTES_VAR_NAME);
  121. }
  122. }
  123. function notesNext_click(event) {
  124. openNextPage();
  125. }
  126. function notesPrevious_click(event) {
  127. openPreviousPage();
  128. }
  129. function generatePageNotes() {
  130. var pageNotesUi = "<div id='pageNotesHeader'' class='sitemapHeader'>";
  131. pageNotesUi += "<div id='pageNotesToolbar' class='sitemapToolbar'>";
  132. pageNotesUi += "<div class='pluginNameHeader'>NOTES</div>";
  133. pageNotesUi += "<div class='pageNameHeader'></div>";
  134. pageNotesUi += "<div class='pageButtonHeader'>";
  135. pageNotesUi += "<a id='notesPreviousButton' title='Previous Page' class='sitemapToolbarButton prevPageButton'></a>";
  136. pageNotesUi += "<a id='notesNextButton' title='Next Page' class='sitemapToolbarButton nextPageButton'></a>";
  137. if($axure.document.configuration.showAnnotations == true) {
  138. pageNotesUi += "<a id='footnotesButton' title='Toggle Footnotes' class='sitemapToolbarButton'></a>";
  139. }
  140. pageNotesUi += "</div>";
  141. pageNotesUi += "</div>";
  142. pageNotesUi += "</div>";
  143. pageNotesUi += "<div id='pageNotesScrollContainer'>";
  144. pageNotesUi += "<div id='pageNotesContainer'>";
  145. 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>";
  146. pageNotesUi += "<span id='pageNotesContent'></span>";
  147. pageNotesUi += "</div></div>";
  148. $('#pageNotesHost').html(pageNotesUi);
  149. updateContainerHeight();
  150. if(!$axure.document.configuration.showAnnotations) {
  151. $('#pageNotesHost .pageNameHeader').css('padding-right', '55px');
  152. }
  153. }
  154. })();