474 lines
21 KiB
JavaScript
474 lines
21 KiB
JavaScript
// 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');
|
|
}
|
|
}
|
|
|
|
})();
|