diff options
Diffstat (limited to 'plugins/page_notes/page_notes.js')
| -rw-r--r-- | plugins/page_notes/page_notes.js | 474 |
1 files changed, 474 insertions, 0 deletions
diff --git a/plugins/page_notes/page_notes.js b/plugins/page_notes/page_notes.js new file mode 100644 index 0000000..ea924a8 --- /dev/null +++ b/plugins/page_notes/page_notes.js @@ -0,0 +1,474 @@ +// use this to isolate the scope
+(function () {
+ // No notes shown specified by generation config
+ if (!$axure.document.configuration.showPageNotes && !$axure.document.configuration.showAnnotationsSidebar && !$axure.document.configuration.showAnnotations) { return; }
+
+ $(window.document).ready(function () {
+ // Load right panel for Page Notes
+ if ($axure.document.configuration.showPageNotes || $axure.document.configuration.showAnnotationsSidebar) {
+ $axure.player.createPluginHost({
+ id: 'pageNotesHost',
+ context: 'inspect',
+ title: 'Documentation',
+ gid: 2,
+ });
+ }
+
+ // Load footnotes on widgets
+ if ($axure.document.configuration.showAnnotations) {
+ $('#overflowMenuContainer').prepend('<div id="showNotesOption" class="showOption" style="order: 3"><div class="overflowOptionCheckbox"></div>Show Note Markers</div>');
+ }
+
+ createNotesOverlay();
+ generatePageNotes();
+
+ if ($axure.player.isMobileMode()) {
+ $('#showNotesOption').hide();
+ } else {
+ $('#showNotesOption').click(footnotes_click);
+ $('#showNotesOption').find('.overflowOptionCheckbox').addClass('selected');
+ }
+
+ function populateNotes(pageForNotes) {
+ var hasNotes = false;
+ if ($axure.document.configuration.showPageNotes) {
+ var pageNoteUi = '';
+
+ function populatePageNotes(pageOrMaster) {
+ //populate the page notes
+ var notes = pageOrMaster.notes;
+ if (notes && !$.isEmptyObject(notes)) {
+ pageNoteUi += "<div class='notesPageNameHeader'>" + pageOrMaster.pageName + "</div>";
+
+ var showNames = $axure.document.configuration.showPageNoteNames;
+ for(var noteName in notes) {
+ pageNoteUi += "<div class='pageNoteContainer'>";
+ if(showNames) {
+ pageNoteUi += "<div class='pageNoteName'>" + noteName + "</div>";
+ }
+ pageNoteUi += "<div class='pageNote'>" + linkify(notes[noteName]) + "</div>";
+ pageNoteUi += "</div>";
+ //$('#pageNotesContent').append(pageNoteUi);
+
+ hasNotes = true;
+ }
+ }
+ }
+
+ populatePageNotes(pageForNotes);
+ if (pageForNotes.masterNotes) {
+ for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+ populatePageNotes(pageForNotes.masterNotes[i]);
+ }
+ }
+
+ if (pageNoteUi.length > 0) {
+ pageNoteUi += "<div class='lineDivider'></div>";
+ var pageNotesHeader = "<div id='pageNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Page Notes</div>";
+ $('#pageNotesContent').append(pageNotesHeader + pageNoteUi);
+ }
+ }
+
+ if ($axure.document.configuration.showAnnotationsSidebar) {
+ var widgetNoteUi = '';
+ //var widgetNotes = pageForNotes.widgetNotes;
+ function populateWidgetNotes(widgetNotes){
+ if (widgetNotes) {
+ for (var i = 0; i < widgetNotes.length; i++) {
+ var widgetNote = widgetNotes[i];
+ widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
+ widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
+ widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
+
+ for (var widgetNoteName in widgetNote) {
+ if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
+ widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
+ widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
+ //widgetNoteUi += "<div class='nondottedDivider'></div>";
+ }
+ }
+ widgetNoteUi += "</div>";
+ //widgetNoteUi += "<div class='nondottedDivider'></div>";
+ //$('#pageNotesContent').append(widgetNoteUi);
+ hasNotes = true;
+ }
+ }
+ }
+
+ populateWidgetNotes(pageForNotes.widgetNotes);
+ if (pageForNotes.masterNotes) {
+ for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+ populateWidgetNotes(pageForNotes.masterNotes[i].widgetNotes);
+ }
+ }
+
+ if (widgetNoteUi.length > 0) {
+ var widgetNotesHeader = "<div id='widgetNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Widget Notes</div>";
+ $('#pageNotesContent').append(widgetNotesHeader + widgetNoteUi);
+
+ //$('.widgetNoteContainer').children(':last-child').remove();
+ //$('.widgetNoteFootnote').append("<div class='annnoteline'></div><div class='annnoteline'></div><div class='annnoteline'></div>");
+ $('.widgetNoteContainer').click(function () {
+ var wasSelected = $(this).hasClass('widgetNoteContainerSelected');
+ $('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
+ if (!wasSelected) $(this).addClass('widgetNoteContainerSelected');
+
+ var dimStr = $('.currentAdaptiveView').attr('data-dim');
+ var h = dimStr ? dimStr.split('x')[1] : '0';
+ var $leftPanel = $('.leftPanel:visible');
+ var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
+ var $rightPanel = $('.rightPanel:visible');
+ var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
+ var viewDimensions = {
+ h: h != '0' ? h : '',
+ scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
+ height: $('.rightPanel').height(),
+ panelWidthOffset: leftPanelOffset + rightPanelOffset
+ };
+ $axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: this.getAttribute('data-id'), value: !wasSelected, view: viewDimensions});
+ });
+ }
+
+
+ //if (pageForNotes.masterNotes) {
+ // for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+ // var master = pageForNotes.masterNotes[i];
+ // hasNotes = populateNotes(master) || hasNotes;
+ // }
+ //}
+ }
+
+ return hasNotes;
+ }
+
+ // bind to the page load
+ $axure.page.bind('load.page_notes', function () {
+ closeAllDialogs();
+
+ var hasNotes = false;
+
+ $('#pageNotesContent').html("");
+ hasNotes = populateNotes($axure.page);
+
+ if(hasNotes) $('#pageNotesEmptyState').hide();
+ else $('#pageNotesEmptyState').show();
+
+ //If footnotes enabled for this prototype...
+ if ($axure.player.isMobileMode()) {
+ $axure.messageCenter.postMessage('annotationToggle', false);
+ } else if($axure.document.configuration.showAnnotations == true) {
+ //If the fn var is defined and set to 0, hide footnotes
+ //else if hide-footnotes button selected, hide them
+ var fnVal = $axure.player.getHashStringVar(FOOTNOTES_VAR_NAME);
+ if(fnVal.length > 0 && fnVal == 0) {
+ $('#showNotesOption').find('.overflowOptionCheckbox').removeClass('selected');
+ $axure.messageCenter.postMessage('annotationToggle', false);
+ } else if(!$('#showNotesOption').find('.overflowOptionCheckbox').hasClass('selected')) {
+ //If the footnotes button isn't selected, hide them on this loaded page
+ $axure.messageCenter.postMessage('annotationToggle', false);
+ }
+ }
+
+ // Get multiple click call if not removing beforehand
+ $('#notesOverlay').off('click');
+ $('#notesOverlay').on('click', '.closeNotesDialog', function () {
+ var ownerId = $(this).attr("data-ownerid");
+ _toggleAnnDialog(ownerId);
+ });
+
+ $axure.player.updatePlugins();
+ return false;
+ });
+
+ $axure.messageCenter.addMessageListener(function (message, data) {
+ //var messageData = { id: elementId, x: event.pageX, y: event.pageY }
+ if (message == 'toggleAnnDialog') {
+ _toggleAnnDialog(data.id, data.x, data.y, data.page);
+ }
+ });
+
+ });
+
+ function linkify(text) {
+ var urlRegex = /(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
+ return text.replace(urlRegex, function (url, b, c) {
+ var url2 = (c == 'www.') ? 'http://' + url : url;
+ return '<a href="' + url2 + '" target="_blank" class="noteLink">' + url + '</a>';
+ });
+ }
+
+ function getWidgetNotesHtml(ownerId, page) {
+ var pageForNotes = page || $axure.page;
+ var widgetNoteUi = '';
+
+ widgetNoteUi += "<div data-ownerid='" + ownerId + "' class='closeNotesDialog'></div>";
+ widgetNoteUi += "<div class='notesDialogScroll'>";
+
+ function getNotesForPage(widgetNotes) {
+ for (var i = 0; i < widgetNotes.length; i++) {
+ var widgetNote = widgetNotes[i];
+ if (widgetNote["ownerId"] == ownerId) {
+ widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
+ widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
+ widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
+
+ for (var widgetNoteName in widgetNote) {
+ if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
+ widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
+ widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
+ }
+ }
+ widgetNoteUi += "</div>";
+ }
+ }
+ }
+
+ getNotesForPage(pageForNotes.widgetNotes);
+ if (pageForNotes.masterNotes) {
+ for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
+ getNotesForPage(pageForNotes.masterNotes[i].widgetNotes);
+ }
+ }
+
+ widgetNoteUi += "</div>";
+ widgetNoteUi += "<div class='resizeNotesDialog'></div>";
+
+ return widgetNoteUi;
+ }
+
+ var maxZIndex = 1;
+ var dialogs = {};
+ var _toggleAnnDialog = function (id, srcLeft, srcTop, page) {
+
+ if(dialogs[id]) {
+ var $dialog = dialogs[id];
+ // reset the dialog
+ dialogs[id] = undefined;
+ $dialog.find('.notesDialogScroll').getNiceScroll().remove();
+ $dialog.remove();
+ return;
+ }
+
+ var bufferH = 10;
+ var bufferV = 10;
+ var blnLeft = false;
+ var blnAbove = false;
+ var mfPos = $('#mainPanelContainer').position();
+ var viewablePanelLeftMargin = parseInt($('#mainPanelContainer').css('margin-left'));
+
+ var sourceTop = srcTop + mfPos.top;
+ var sourceLeft = srcLeft + viewablePanelLeftMargin;
+
+ var width = 300;
+ var height = 300;
+
+ if(sourceLeft > width + bufferH) {
+ blnLeft = true;
+ }
+ if(sourceTop > height + bufferV) {
+ blnAbove = true;
+ }
+
+ var top = 0;
+ var left = 0;
+ if(blnAbove) top = sourceTop - height - 20;
+ else top = sourceTop + 10;
+ if(blnLeft) left = sourceLeft - width - 4;
+ else left = sourceLeft - 6;
+
+ //need to set the zindex
+ maxZIndex = maxZIndex + 1;
+
+ var $dialog = $('<div class="notesDialog"></div>')
+ .appendTo('#notesOverlay')
+ .html(getWidgetNotesHtml(id, page));
+
+ $dialog.css({ 'left': left, 'top': top, 'z-index': maxZIndex });
+
+ $dialog.find('.notesDialogScroll').niceScroll({ cursorcolor: "#8c8c8c", cursorborder: "0px solid #fff" });
+
+ $dialog.find('.notesDialogScroll').on($axure.eventNames.mouseDownName, function(event) {
+ event.stopPropagation();
+ });
+
+ $dialog.find('.closeNotesDialog').on($axure.eventNames.mouseDownName, function (event) {
+ event.stopPropagation();
+ });
+
+ $dialog.on($axure.eventNames.mouseDownName, startDialogMove);
+ var startMouseX;
+ var startMouseY;
+ var startDialogX;
+ var startDialogY;
+ function startDialogMove() {
+ startMouseX = window.event.pageX;
+ startMouseY = window.event.pageY;
+ var position = $dialog.position();
+ startDialogX = position.left;
+ startDialogY = position.top;
+
+ $dialog.addClass('active');
+ $('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
+ $(document).bind($axure.eventNames.mouseMoveName, doDialogMove).bind($axure.eventNames.mouseUpName, endDialogMove);
+
+ $dialog.find('.notesDialogScroll').getNiceScroll().hide();
+ }
+
+ function doDialogMove() {
+ var currentX = window.event.pageX;
+ var currentY = window.event.pageY;
+ $dialog.css({ 'left': startDialogX + currentX - startMouseX, 'top': startDialogY + currentY - startMouseY });
+ }
+
+ function endDialogMove() {
+ $('div.splitterMask').remove();
+ $dialog.removeClass('active');
+ $(document).unbind($axure.eventNames.mouseMoveName, doDialogMove).unbind($axure.eventNames.mouseUpName, endDialogMove);
+
+ $dialog.find('.notesDialogScroll').getNiceScroll().resize();
+ $dialog.find('.notesDialogScroll').getNiceScroll().show();
+ }
+
+ $dialog.find('.resizeNotesDialog').on($axure.eventNames.mouseDownName, startDialogResize);
+
+ var startDialogW;
+ var startDialogH;
+ function startDialogResize() {
+ event.stopPropagation();
+
+ startMouseX = window.event.pageX;
+ startMouseY = window.event.pageY;
+ startDialogW = Number($dialog.css('width').replace('px',''));
+ startDialogH = Number($dialog.css('height').replace('px', ''));
+
+ $dialog.addClass('active');
+ $('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
+ $(document).bind($axure.eventNames.mouseMoveName, doDialogResize).bind($axure.eventNames.mouseUpName, endDialogResize);
+
+ $dialog.find('.notesDialogScroll').getNiceScroll().hide();
+ }
+
+ function doDialogResize() {
+ var currentX = window.event.pageX;
+ var currentY = window.event.pageY;
+ var newWidth = Math.max(200, startDialogW + currentX - startMouseX);
+ var newHeight = Math.max(200, startDialogH + currentY - startMouseY);
+ $dialog.css({ 'width': newWidth, 'height': newHeight });
+ }
+
+ function endDialogResize() {
+ $('div.splitterMask').remove();
+ $dialog.removeClass('active');
+ $(document).unbind($axure.eventNames.mouseMoveName, doDialogResize).unbind($axure.eventNames.mouseUpName, endDialogResize);
+
+ $dialog.find('.notesDialogScroll').getNiceScroll().resize();
+ $dialog.find('.notesDialogScroll').getNiceScroll().show();
+ }
+
+ dialogs[id] = $dialog;
+
+ // scroll ... just for IE
+ //window.scrollTo(scrollX, scrollY);
+ };
+
+ $(document).on('sidebarCollapse', function (event, data) {
+ clearSelection();
+ });
+
+ $(document).on('pluginShown', function (event, data) {
+ if(data != 2) {
+ clearSelection();
+ }
+ });
+
+ function clearSelection() {
+ var selectedNote = $('#pageNotesContainer').find('.widgetNoteContainerSelected');
+ if(selectedNote.length > 0) {
+ selectedNote.removeClass('widgetNoteContainerSelected');
+ //var dimStr = $('.currentAdaptiveView').attr('data-dim');
+ //var h = dimStr ? dimStr.split('x')[1] : '0';
+ //var $leftPanel = $('.leftPanel:visible');
+ //var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
+ //var $rightPanel = $('.rightPanel:visible');
+ //var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
+ //var viewDimensions = {
+ // h: h != '0' ? h : '',
+ // scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
+ // scrollLeft: $('#clipFrameScroll').scrollLeft(),
+ // scrollTop: $('#clipFrameScroll').scrollTop(),
+ // height: $('.rightPanel').height(),
+ // panelWidthOffset: leftPanelOffset + rightPanelOffset
+ //};
+ //$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false, view: viewDimensions });
+ $axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false });
+ //$axure.messageCenter.postMessage('toggleSelectWidgetNote', '');
+ }
+ }
+
+ function closeAllDialogs() {
+ for (var id in dialogs) {
+ var $dialog = dialogs[id];
+ if ($dialog !== undefined) _toggleAnnDialog(id);
+ }
+ }
+
+ $axure.player.toggleFootnotes = function(val) {
+ var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
+ if (scaleCheckDiv.hasClass('selected')) {
+ if (!val) $('#showNotesOption').click();
+ } else {
+ if (val) $('#showNotesOption').click();
+ }
+ }
+
+ function footnotes_click(event) {
+ var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
+ if (scaleCheckDiv.hasClass('selected')) {
+ closeAllDialogs();
+
+ scaleCheckDiv.removeClass('selected');
+ $axure.messageCenter.postMessage('annotationToggle', false);
+ //Add 'fn' hash string var so that footnotes stay hidden across reloads
+ $axure.player.setVarInCurrentUrlHash(FOOTNOTES_VAR_NAME, 0);
+ } else {
+ scaleCheckDiv.addClass('selected');
+ $axure.messageCenter.postMessage('annotationToggle', true);
+ //Delete 'fn' hash string var if it exists since default is visible
+ $axure.player.deleteVarFromCurrentUrlHash(FOOTNOTES_VAR_NAME);
+ }
+ }
+
+ function createNotesOverlay() {
+ var $targetPanel = $('#clippingBounds');
+
+ if (!$('#notesOverlay').length) {
+ var notesOverlay = document.createElement('div');
+ notesOverlay.setAttribute('id', 'notesOverlay');
+
+ $targetPanel.prepend(notesOverlay);
+ $(notesOverlay).append(' ');
+ }
+ }
+
+ function generatePageNotes() {
+ var pageNotesUi = "<div id='pageNotesHeader'>";
+
+ pageNotesUi += "<div id='pageNotesToolbar' style='height: 12px;'>";
+ pageNotesUi += "</div>";
+ pageNotesUi += "</div>";
+
+
+ pageNotesUi += "<div id='pageNotesScrollContainer'>";
+ pageNotesUi += "<div id='pageNotesContainer'>";
+ 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>";
+ pageNotesUi += "<span id='pageNotesContent'></span>";
+ pageNotesUi += "</div></div>";
+
+ $('#pageNotesHost').html(pageNotesUi);
+
+ if(!$axure.document.configuration.showAnnotations) {
+ $('#pageNotesHost .pageNameHeader').css('padding-right', '55px');
+ }
+ }
+
+})();
\ No newline at end of file |