make doc page examples menu work

index.js

@@ -367,8 +367,8 @@ Ox.load(function() {
                                 width: window.innerWidth - 640 + 'px'
                             })
                             .html(app.html.documentation),
-                        examples: app.data.examples,
+                        examples: app.data.docItems ? void 0 : app.data.examples,
-                        examplesPath: 'examples/',
+                        examplesPath: app.data.docItems ? void 0 : 'examples/',
                         files: app.data.docItems ? void 0 : app.data.documentation,
                         getModule: function(item) {
                             var file = item.file.replace(/^dev\//, '');
@@ -386,6 +386,12 @@ Ox.load(function() {
                         showTests: true
                     })
                     .bindEvent({
+                        example: function(data) {
+                            app.url.set({
+                                page: 'examples',
+                                item: {examples: data.id}
+                            });
+                        },
                         select: function(data) {
                             app.user.item.doc = data.id;
                             app.db(app.user);
@@ -634,7 +640,7 @@ Ox.load(function() {
                 app.$ui.panel.select(app.user.page);
             }
             if (url.item) {
-                app.$ui[url.page].options({selected: url.item});
+                app.$ui[url.page] && app.$ui[url.page].options({selected: url.item});
             }
             if (!app.user.page || !app.user.previousPage) {
                 app.animate();

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

@@ -31,35 +31,16 @@ Ox.DocPage = function(options, self) {
         .css({float: 'left', height: '13px', paddingTop: '1px', margin: '4px'})
         .appendTo(self.$toolbar)
 
-    if (self.options.item.references) {
-        self.$referencesMenu = Ox.MenuButton({
-                items: self.options.item.references.map(function(reference) {
-                    return {id: reference, title: reference};
-                }),
-                title: 'References...',
-                width: 128
-            })
-            .css({float: 'right', margin: '4px 2px 4px 2px'})
-            .bindEvent({
-                click: function(data) {
-                    that.triggerEvent('select', {id: data.id});
-                }
-            })
-            .appendTo(self.$toolbar);
-    }
-
     if (self.options.item.examples) {
         self.$examplesMenu = Ox.MenuButton({
-                items: self.options.item.examples.map(function(example) {
+                items: self.options.item.examples,
-                    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});
+                    that.triggerEvent('example', {id: data.id});
                 }
             })
             .appendTo(self.$toolbar);

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

@@ -73,8 +73,8 @@ Ox.DocPanel = function(options, self) {
     self.$list = Ox.Element();
     self.$sidebar = Ox.SplitPanel({
         elements: [
-            {element: self.$toolbar, size: 24},
+            {element: Ox.Element(), size: 24},
-            {element: self.$list}
+            {element: Ox.Element()}
         ],
         orientation: 'vertical'
     });
@@ -104,7 +104,6 @@ Ox.DocPanel = function(options, self) {
             return self.options.path + file;
         }), function(docItems) {
             self.options.items = docItems;
-            getReferences();
             getExamples(function() {
                 renderList();
                 self.options.runTests && runTests();
@@ -112,7 +111,6 @@ Ox.DocPanel = function(options, self) {
             });
         });
     } else {
-        getReferences();
         getExamples(function() {
             renderList();
             self.options.runTests && runTests();
@@ -121,7 +119,7 @@ Ox.DocPanel = function(options, self) {
 
     function getExamples(callback) {
         var i = 0;
-        if (self.options.examples.length) {
+        if (self.options.examples && self.options.examples.length) {
             self.options.examples.forEach(function(example) {
                 var path = self.options.examplesPath + example;
                 Ox.get(path + '/index.html', function(html) {
@@ -131,13 +129,13 @@ Ox.DocPanel = function(options, self) {
                         var references = js.match(self.options.references);
                         references && Ox.unique(references).forEach(function(reference) {
                             var item = getItemByName(reference);
-                            item.examples = (item.examples || []).concat(title);
+                            item.examples = (item.examples || []).concat({id: example, title: title});
                         });
                         if (++i == self.options.examples.length) {
                             self.options.items.forEach(function(item) {
                                 item.examples && item.examples.sort(function(a, b) {
-                                    a = a.toLowerCase();
+                                    a = a.title.toLowerCase();
-                                    b = b.toLowerCase();
+                                    b = b.title.toLowerCase();
                                     return a < b ? -1 : a > b ? 1 : 0;
                                 });
                             });
@@ -176,25 +174,6 @@ 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'
@@ -280,7 +259,9 @@ Ox.DocPanel = function(options, self) {
                     selectItem(data.ids.length ? data.ids[0] : '')
                 }
             });
-        self.$sidebar.replaceElement(1, self.$list);
+        self.$sidebar
+            .replaceElement(0, self.$toolbar)
+            .replaceElement(1, self.$list);
         selectItem(self.options.selected);
     }
 
@@ -330,9 +311,17 @@ Ox.DocPanel = function(options, self) {
                 }
                 self.$list.options({selected: [self.options.selected]});
                 self.$page = Ox.DocPage({
-                    item: item,
+                        item: item,
-                    replace: self.options.replace
+                        replace: self.options.replace
-                });
+                    })
+                    .bindEvent({
+                        example: function(data) {
+                            that.triggerEvent('example', data);
+                        },
+                        select: function(data) {
+                            selectItem(data.id);
+                        }
+                    });
                 that.$element.replaceElement(1, self.$page);
                 that.triggerEvent('select', {id: name});
             }

source/Ox.UI/js/Code/ExamplePage.js

@@ -114,6 +114,7 @@ Ox.ExamplePage = function(options, self) {
         })
         .appendTo(self.$toolbar);
 
+    /*
     self.$referencesMenu = Ox.MenuButton({
             items: self.options.references.map(function(reference) {
                 return {id: reference, title: reference};
@@ -127,10 +128,11 @@ Ox.ExamplePage = function(options, self) {
         .css({float: 'right', margin: '4px 2px 4px 2px'})
         .bindEvent({
             click: function(data) {
-                that.triggerEvent('select', {id: data.id});
+                that.triggerEvent('doc', {id: data.id});
             }
         })
         .appendTo(self.$toolbar);
+    */
 
     self.$viewer = Ox.SourceViewer({
             file: self.options.js,