update code/example panels ('selected' option)

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

@@ -7,6 +7,7 @@ Ox.DocPanel <f> Documentation Panel
     (options, self) -> <f> Documentation Panel
     options <o> Options object
             collapsible <b|true> can be collabsed
+            element <e> Default content
             files <a|[]> files to parse for docs
             getModule <f> returns module for given item
             getSection <f> returns section for given item
@@ -21,12 +22,11 @@ Ox.DocPanel <f> Documentation Panel
 
 Ox.DocPanel = function(options, self) {
 
-    // FIXME: defaults should be falsy
-
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
-            collapsible: true,
+            collapsible: false,
+            element: '',
             files: [],
             getModule: function(item) {
                 return item.file.replace(self.options.path, '');
@@ -36,16 +36,19 @@ Ox.DocPanel = function(options, self) {
             },
             path: '',
             replace: [],
-            resizable: true,
+            resizable: false,
             resize: [128, 256, 384],
+            selected: '',
             size: 256
         })
         .options(options || {});
 
     self.$list = Ox.Element();
-    self.$page = Ox.Element();
+    self.$page = Ox.Element().addClass('OxDocument').append(self.options.element);
+    Ox.print('ELEMENT', self.options.element)
 
-    that.$element = Ox.SplitPanel({
+    that.setElement(
+        self.$panel = Ox.SplitPanel({
             elements: [
                 {
                     collapsible: self.options.collapsible,
@@ -59,10 +62,12 @@ Ox.DocPanel = function(options, self) {
                 }
             ],
             orientation: 'horizontal'
-    });
+        })
+    );
 
     loadList(function(docItems) {
         self.items = docItems;
+        self.options.selected && selectItem(self.options.selected);
         that.triggerEvent('load', {});
     });
 
@@ -129,10 +134,14 @@ Ox.DocPanel = function(options, self) {
             });
             self.$list = Ox.TreeList({
                     items: treeItems,
+                    selected: self.options.selected
+                        ? [self.options.selected] : '',
                     width: self.options.size - Ox.UI.SCROLLBAR_SIZE
                 })
                 .bindEvent({
-                    select: selectItem
+                    select: function(data) {
+                        selectItem(data.ids.length ? data.ids[0] : '')
+                    }
                 });
             // fixme
             /*
@@ -156,19 +165,18 @@ Ox.DocPanel = function(options, self) {
         return item;
     }
 
-    function selectItem(data) {
-        var selected;
-        if (data.ids.length) {
-            selected = data.ids[0];
-            if (selected[0] != '_') {
+    function selectItem(id) {
+        if (id) {
+            self.options.selected = id;
+            if (self.options.selected[0] != '_') {
+                self.$list.options({selected: [id]});
+                Ox.print('OVERWRITTING')
                 self.$page = Ox.DocPage({
-                    item: getItemByName(selected),
+                    item: getItemByName(self.options.selected),
                     replace: self.options.replace
                 });
                 that.$element.replaceElement(1, self.$page);
-                that.triggerEvent('select', {
-                    id: selected
-                });
+                that.triggerEvent('select', {id: self.options.selected});
             }
         }
     }
@@ -182,14 +190,13 @@ Ox.DocPanel = function(options, self) {
         }
         return ret;
     }
-    /*@
-    selectItem <f> select item
-        (id) -> <u>  select an item
-        id  <s> if of item to select
-    @*/
-    that.selectItem = function(id) {
-        self.$list.triggerEvent('select', {'ids': [id]});
+
+    self.setOption = function(key, value) {
+        if (key == 'selected') {
+            selectItem(value);
+        }
     };
+
     return that;
 
 };

source/Ox.UI/js/Code/Ox.ExamplePanel.js

@@ -10,6 +10,7 @@ Ox.ExamplePanel = function(options, self) {
             path: '',
             replaceCode: [],
             replaceComment: [],
+            selected: '',
             size: 256
         })
         .options(options || {})
@@ -49,17 +50,18 @@ Ox.ExamplePanel = function(options, self) {
                     }
                 ],
                 items: self.items,
-                selected: [self.options.selected],
+                max: 1,
+                selected: self.options.selected
+                    ? [self.options.selected] : [],
                 scrollbarVisible: true,
                 sort: ['+title']
             })
             .bindEvent({
                 select: function(data) {
-                    selectExample(data.ids[0] || '');
+                    selectItem(data.ids[0] || '');
                 }
             });
         self.$panel.replaceElement(0, self.$list);
-        selectExample(self.options.selected);
         that.triggerEvent('load', {});
     });
 
@@ -88,7 +90,7 @@ Ox.ExamplePanel = function(options, self) {
         });
     }
 
-    function selectExample(id) {
+    function selectItem(id) {
         var item;
         if (id) {
             item = Ox.getObjectById(self.items, id);
@@ -111,6 +113,13 @@ Ox.ExamplePanel = function(options, self) {
         that.triggerEvent('select', {id: id});
     }
 
+    self.setOption = function(key, value) {
+        if (key == 'selected') {
+            Ox.print('SETTING LIST SELECTED TO', [value])
+            self.$list.options({selected: [value]});
+        }
+    };
+
     return that;
 
 };