ExamplePanel/ExamplePage: add mode/selected option ('source' or 'live')

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

@@ -5,6 +5,8 @@ Ox.ExamplePage <f> Example Page
     options <o> Options
     self <o> Shared private variable
     ([options[, self]]) -> <o:Ox.SplitPanel> Example Page
+        change <!> Change event 
+        close <!> Close event
 @*/
 
 Ox.ExamplePage = function(options, self) {
@@ -20,7 +22,12 @@ Ox.ExamplePage = function(options, self) {
             selected: 'source',
             title: ''
         })
-        .options(options || {});
+        .options(options || {})
+        .update({
+            selected: function() {
+                self.$tabs.options({value: self.options.selected});
+            }
+        });
 
     self.$toolbar = Ox.Bar({size: 24});
 
@@ -116,37 +123,21 @@ Ox.ExamplePage = function(options, self) {
                 self.$reloadButton.options({disabled: disabled});
                 self.$openButton.options({disabled: disabled});
                 self.$content.animate({
-                    marginLeft: data.value == 'source'
+                    marginLeft: self.options.selected == 'source'
                         ? 0 : -self.options.width + 'px'
                 }, 250, function() {
-                    if (data.value == 'live' && !self.$frame.attr('src')) {
+                    if (
+                        self.options.selected == 'live'
+                        && !self.$frame.attr('src')
+                    ) {
                         self.$frame.attr({src: self.options.html});
                     }
                 });
+                that.triggerEvent('change', data);
             }
         })
         .appendTo(self.$toolbar);
 
-    /*
-    self.$referencesMenu = Ox.MenuButton({
-            items: self.options.references.map(function(reference) {
-                return {id: reference, title: reference};
-            }),
-            //title: 'Documentation',
-            //width: 128
-            title: 'select',
-            tooltip: 'References',
-            type: 'image'
-        })
-        .css({float: 'right', margin: '4px 2px 4px 2px'})
-        .bindEvent({
-            click: function(data) {
-                that.triggerEvent('doc', {id: data.id});
-            }
-        })
-        .appendTo(self.$toolbar);
-    */
-
     self.$viewer = Ox.SourceViewer({
             file: self.options.js,
             replaceCode: self.options.replaceCode,
@@ -173,7 +164,9 @@ Ox.ExamplePage = function(options, self) {
     self.$content = Ox.Element()
         .css({
             position: 'absolute',
-            width: self.options.width * 2 + 'px'
+            width: self.options.width * 2 + 'px',
+            marginLeft: self.options.selected == 'source'
+                ? 0 : -self.options.width + 'px'
         })
         .append(self.$viewer)
         .append(self.$frame);
@@ -202,7 +195,12 @@ Ox.ExamplePage = function(options, self) {
         }
     });
 
-    setTimeout(setSize, 100);
+    setTimeout(function() {
+        setSize();
+        if (self.options.selected == 'live') {
+            self.$frame.attr({src: self.options.html});
+        }
+    }, 100);
 
     function setSize() {
         self.options.width = that.width();

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

@@ -5,8 +5,10 @@ Ox.ExamplePanel <f> Example Panel
     options <o> Options
     self <o> Shared private variable
     ([options[, self]]) -> <o:Ox.SplitPanel> Example Panel
-        load <!> load
+        change <!> Change event
-        select <!> select
+            value <s> 'source' or 'live'
+        load <!> Load event
+        select <!> Select event
             id <s> selected example
 @*/
 
@@ -17,6 +19,7 @@ Ox.ExamplePanel = function(options, self) {
         .defaults({
             element: '',
             examples: [],
+            mode: 'source',
             path: '',
             references: null,
             replaceCode: [],
@@ -26,7 +29,15 @@ Ox.ExamplePanel = function(options, self) {
         })
         .options(options || {})
         .update({
+            mode: function() {
+                Ox.print('mode handler', self.options.selected)
+                if (self.options.selected) {
+                    self.$page.options({selected: self.options.mode});
+                }
+            },
             selected: function() {
+                Ox.print('selected handler');
+                self.options.mode = 'source';
                 selectItem(self.options.selected);
             }
         });
@@ -74,6 +85,7 @@ Ox.ExamplePanel = function(options, self) {
             .bindEvent({
                 select: function(data) {
                     if (!data.ids[0] || !Ox.endsWith(data.ids[0], '/')) {
+                        self.options.mode = 'source';
                         selectItem(
                             data.ids[0] ? data.ids[0].split('/').pop() : ''
                         );
@@ -82,7 +94,7 @@ Ox.ExamplePanel = function(options, self) {
             });
         self.$panel.replaceElement(0, self.$list);
         selectItem(self.options.selected);
-        that.triggerEvent('load', {});
+        that.triggerEvent('load', {items: self.items});
     });
 
     function getItemByName(name) {
@@ -127,7 +139,8 @@ Ox.ExamplePanel = function(options, self) {
     }
 
     function selectItem(id) {
-        var item = id ? getItemByName(id) : null;
+        var item = id ? getItemByName(id) : null,
+            selected = self.options.selected;
         if (item) {
             self.options.selected = id;
             self.$list.options({selected: [item.section + '/' + id]});
@@ -138,10 +151,14 @@ Ox.ExamplePanel = function(options, self) {
                     references: item.references,
                     replaceCode: self.options.replaceCode,
                     replaceComment: self.options.replaceComment,
+                    selected: self.options.mode,
                     title: item.title,
                     width: window.innerWidth - self.options.size
                 })
                 .bindEvent({
+                    change: function(data) {
+                        that.triggerEvent('change', data);
+                    },
                     close: function() {
                         selectItem();
                     }
@@ -152,8 +169,10 @@ Ox.ExamplePanel = function(options, self) {
             self.$list.options({selected: []});
             self.$page.empty().append(self.options.element);
         }
+        if (self.options.selected != selected) {
             that.triggerEvent('select', {id: self.options.selected});
         }
+    }
 
     function sortById(a, b) {
         return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;