http://www.efojs.com/elefunfunt/plugins/page_notes/page_notes.js

1// use this to isolate the scope
2(function () {
3    if(!$axure.document.configuration.showPageNotes && !$axure.document.configuration.showAnnotationsSidebar) { return; }
4
5    $(window.document).ready(function () {
6        $axure.player.createPluginHost({
7            id: 'pageNotesHost',
8            context: 'interface',
9            title: 'NOTES',
10            gid: 2
11        });
12
13        generatePageNotes();
14
15        $(document).on('ContainerHeightChange', function () {
16            updateContainerHeight();
17        });
18
19        $('#footnotesButton').click(footnotes_click).addClass('sitemapToolbarButtonSelected');
20        $('#notesNextButton').click(notesNext_click);
21        $('#notesPreviousButton').click(notesPrevious_click);
22
23        // bind to the page load
24        $axure.page.bind('load.page_notes', function () {
25
26            var hasNotes = false;
27
28            $('#pageNotesContent').html("");
29
30            if($axure.document.configuration.showPageNotes) {
31                //populate the notes
32                var notes = $axure.page.notes;
33                if(notes) {
34                    var showNames = $axure.document.configuration.showPageNoteNames;
35
36                    for(var noteName in notes) {
37                        var pageNoteUi = "<div class='pageNoteContainer'>";
38                        if(showNames) {
39                            pageNoteUi += "<div class='pageNoteName'>" + noteName + "</div>";
40                        }
41                        pageNoteUi += "<div class='pageNote'>" + linkify(notes[noteName]) + "</div>";
42                        pageNoteUi += "</div>";
43                        pageNoteUi += "<div class='dottedDivider'></div>";
44                        $('#pageNotesContent').append(pageNoteUi);
45
46                        hasNotes = true;
47                    }
48                }
49            }
50
51            if($axure.document.configuration.showAnnotationsSidebar) {
52                var widgetNotes = $axure.page.widgetNotes;
53                if(widgetNotes) {
54                    for(var i = 0; i < widgetNotes.length; i++) {
55                        var widgetNote = widgetNotes[i];
56                        var widgetNoteUi = "<div class='widgetNoteContainer' data-id='" + widgetNote["id"] + "'>";
57                        widgetNoteUi += "<div class='widgetNoteFootnote'></div>";
58                        widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
59
60                        for(var widgetNoteName in widgetNote) {
61                            if(widgetNoteName != "label" && widgetNoteName != "id") {
62                                widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
63                                widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
64                                widgetNoteUi += "<div class='nondottedDivider'></div>";
65                            }
66                        }
67                        widgetNoteUi += "</div>";
68                        widgetNoteUi += "<div class='nondottedDivider'></div>";
69                        $('#pageNotesContent').append(widgetNoteUi);
70                        hasNotes = true;
71                    }
72                    $('.widgetNoteContainer').children(':last-child').remove();
73                    $('.widgetNoteFootnote').append("<div class='annnoteline'></div><div class='annnoteline'></div><div class='annnoteline'></div>");
74                    $('.widgetNoteContainer').click(function () {
75                        var wasSelected = $(this).hasClass('widgetNoteContainerSelected');
76                        $('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
77                        if(!wasSelected) $(this).addClass('widgetNoteContainerSelected');
78                        $axure.messageCenter.postMessage('toggleSelectWidgetNote', this.getAttribute('data-id'));
79                    });
80                }
81            }
82
83            if(hasNotes) $('#pageNotesEmptyState').hide();
84            else $('#pageNotesEmptyState').show();
85
86            //If footnotes enabled for this prototype...
87            if($axure.document.configuration.showAnnotations == true) {
88                //If the fn var is defined and set to 0, hide footnotes
89                //else if hide-footnotes button selected, hide them
90                var fnVal = getHashStringVar(FOOTNOTES_VAR_NAME);
91                if(fnVal.length > 0 && fnVal == 0) {
92                    $('#footnotesButton').removeClass('sitemapToolbarButtonSelected');
93                    $axure.messageCenter.postMessage('annotationToggle', false);
94                } else if(!$('#footnotesButton').is('.sitemapToolbarButtonSelected')) {
95                    //If the footnotes button isn't selected, hide them on this loaded page
96                    $axure.messageCenter.postMessage('annotationToggle', false);
97                }
98            }
99
100            
101            return false;
102        });
103
104        function linkify(text) {
105            var urlRegex = /(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
106            return text.replace(urlRegex, function(url, b, c) {
107                var url2 = (c == 'www.') ? 'http://' + url : url;
108                return '<a href="' + url2 + '" target="_blank" class="noteLink">' + url + '</a>';
109            });
110        }
111    });

112
113    function updateContainerHeight() {
114        $('#pageNotesScrollContainer').height($('#pageNotesHost').height() - $('#pageNotesHeader').outerHeight());
115    }
116
117    $(document).on('sidebarCollapse', function (event, data) {
118        clearSelection();
119    });
120
121    $(document).on('pluginShown', function (event, data) {
122        if(data != 2) {
123            clearSelection();
124        }
125    });
126
127    function clearSelection() {
128        $('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
129        $axure.messageCenter.postMessage('toggleSelectWidgetNote', '');
130    }
131
132    function footnotes_click(event) {
133        if($('#footnotesButton').is('.sitemapToolbarButtonSelected')) {
134            $('#footnotesButton').removeClass('sitemapToolbarButtonSelected');
135            $axure.messageCenter.postMessage('annotationToggle', false);
136            //Add 'fn' hash string var so that footnotes stay hidden across reloads
137            setVarInCurrentUrlHash(FOOTNOTES_VAR_NAME, 0);
138        } else {
139            $('#footnotesButton').addClass('sitemapToolbarButtonSelected');
140            $axure.messageCenter.postMessage('annotationToggle', true);
141            //Delete 'fn' hash string var if it exists since default is visible
142            deleteVarFromCurrentUrlHash(FOOTNOTES_VAR_NAME);
143        }
144    }
145
146    function notesNext_click(event) {
147        openNextPage();
148    }
149
150    function notesPrevious_click(event) {
151        openPreviousPage();
152    }
153
154    function generatePageNotes() {
155        var pageNotesUi = "<div id='pageNotesHeader'' class='sitemapHeader'>";
156
157        pageNotesUi += "<div id='pageNotesToolbar' class='sitemapToolbar'>";
158        pageNotesUi += "<div class='pluginNameHeader'>NOTES</div>";
159        pageNotesUi += "<div class='pageNameHeader'></div>";
160
161        pageNotesUi += "<div class='pageButtonHeader'>";
162
163        pageNotesUi += "<a id='notesPreviousButton' title='Previous Page' class='sitemapToolbarButton prevPageButton'></a>";
164        pageNotesUi += "<a id='notesNextButton' title='Next Page' class='sitemapToolbarButton nextPageButton'></a>";
165        
166        if($axure.document.configuration.showAnnotations == true) {
167            pageNotesUi += "<a id='footnotesButton' title='Toggle Footnotes' class='sitemapToolbarButton'></a>";
168        }
169
170        pageNotesUi += "</div>";
171        pageNotesUi += "</div>";
172        pageNotesUi += "</div>";
173
174
175        pageNotesUi += "<div id='pageNotesScrollContainer'>";
176        pageNotesUi += "<div id='pageNotesContainer'>";
177        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>";
178        pageNotesUi += "<span id='pageNotesContent'></span>";
179        pageNotesUi += "</div></div>";
180
181        $('#pageNotesHost').html(pageNotesUi);
182        updateContainerHeight();
183
184        if(!$axure.document.configuration.showAnnotations) {
185            $('#pageNotesHost .pageNameHeader').css('padding-right', '55px');
186        }
187    }
188
189})();