in doc panel, parse examples and references

source/Ox.UI/js/Code/DocPage.js

@@ -31,25 +31,11 @@ Ox.DocPage = function(options, self) {
         .css({float: 'left', height: '13px', paddingTop: '1px', margin: '4px'})
         .appendTo(self.$toolbar)
 
-    self.$examplesMenu = Ox.MenuButton({
+    if (self.options.item.references) {
-            items: [
-                {id: 'foo', title: 'Not yet...', disabled: true}
-            ],
-            title: 'Examples...',
-            width: 128
-        })
-        .css({float: 'right', margin: '4px 4px 4px 2px'})
-        .bindEvent({
-            click: function(data) {
-                that.triggerEvent('select', {id: data.id});
-            }
-        })
-        .appendTo(self.$toolbar);
-
         self.$referencesMenu = Ox.MenuButton({
-            items: [
+                items: self.options.item.references.map(function(reference) {
-                {id: 'foo', title: 'Not yet...', disabled: true}
+                    return {id: reference, title: reference};
-            ],
+                }),
                 title: 'References...',
                 width: 128
             })
@@ -60,6 +46,24 @@ Ox.DocPage = function(options, self) {
                 }
             })
             .appendTo(self.$toolbar);
+    }
+
+    if (self.options.item.examples) {
+        self.$examplesMenu = Ox.MenuButton({
+                items: self.options.item.examples.map(function(example) {
+                    return {id: example, title: example};
+                }),
+                title: 'Examples...',
+                width: 128
+            })
+            .css({float: 'right', margin: '4px 4px 4px 2px'})
+            .bindEvent({
+                click: function(data) {
+                    that.triggerEvent('select', {id: data.id});
+                }
+            })
+            .appendTo(self.$toolbar);
+    }
 
     self.$page = Ox.Container()
         .addClass('OxDocPage OxDocument');

source/Ox.UI/js/Code/DocPanel.js

@@ -11,6 +11,7 @@ Ox.DocPanel <f> Documentation Panel
             getSection <f> Returns section for given item
             items <a|[]> Array of doc items (alternative to files option)
             path <s|''> Path prefix
+            references <r|null> RegExp to find references
             replace <[[]]|[]> See Ox.SyntaxHighlighter
             resizable <b|true> If true, list is resizable
             resize <a|[128, 256, 384]> List resize positions
@@ -31,6 +32,8 @@ Ox.DocPanel = function(options, self) {
         .defaults({
             collapsible: false,
             element: '',
+            examples: [],
+            examplesPath: '',
             files: [],
             getModule: function(item) {
                 return item.file.replace(self.options.path, '');
@@ -40,6 +43,7 @@ Ox.DocPanel = function(options, self) {
             },
             items: [],
             path: '',
+            references: null,
             replace: [],
             resizable: false,
             resize: [128, 256, 384],
@@ -85,13 +89,51 @@ Ox.DocPanel = function(options, self) {
             return self.options.path + file;
         }), function(docItems) {
             self.options.items = docItems;
+            getReferences();
+            getExamples(function() {
                 renderList();
                 self.options.runTests && runTests();
                 that.triggerEvent('load', {items: docItems});
             });
+        });
     } else {
+        getReferences();
+        getExamples(function() {
             renderList();
             self.options.runTests && runTests();
+        });
+    }
+
+    function getExamples(callback) {
+        var i = 0;
+        if (self.options.examples.length) {
+            self.options.examples.forEach(function(example) {
+                var path = self.options.examplesPath + example;
+                Ox.get(path + '/index.html', function(html) {
+                    var match = html.match(/<title>(.+)<\/title>/),
+                        title = match ? match[1] : 'Untitled';
+                    Ox.get(path + '/js/example.js', function(js) {
+                        var references = js.match(self.options.references);
+                        references && Ox.unique(references).forEach(function(reference) {
+                            var item = getItemByName(reference);
+                            item.examples = (item.examples || []).concat(title);
+                        });
+                        if (++i == self.options.examples.length) {
+                            self.options.items.forEach(function(item) {
+                                item.examples && item.examples.sort(function(a, b) {
+                                    a = a.toLowerCase();
+                                    b = b.toLowerCase();
+                                    return a < b ? -1 : a > b ? 1 : 0;
+                                });
+                            });
+                            callback();
+                        }
+                    });
+                });
+            });
+        } else {
+            callback();
+        }
     }
 
     function getIcon(id, expanded) {
@@ -119,6 +161,25 @@ Ox.DocPanel = function(options, self) {
         return item;
     }
 
+    function getReferences() {
+        self.options.items.forEach(function(item, i) {
+            var references = item.source.map(function(token) {
+                return token.value;
+            }).join('').match(self.options.references);
+            if (references) {
+                self.options.items[i].references = Ox.unique(references)
+                    .filter(function(reference) {
+                        return reference != item.name;
+                    })
+                    .sort(function(a, b) {
+                        a = a.toLowerCase();
+                        b = b.toLowerCase();
+                        return a < b ? -1 : a > b ? 1 : 0;
+                    });
+            }
+        });
+    }
+
     function getTooltip(results) {
         return results
             ? results.passed + ' test'