add docco-style Ox.SourceViewer, Ox.ExamplePage and Ox.ExamplePanel, and a demo

2012-04-04 16:59:58 +02:00 · 2012-04-04 16:59:58 +02:00 · ef0e161ab0
commit ef0e161ab0
parent 7b7bedb65a
16 changed files with 224002 additions and 3 deletions
--- a/source/Ox.UI/js/Code/Ox.ExamplePage.js
+++ b/source/Ox.UI/js/Code/Ox.ExamplePage.js
@ -0,0 +1,137 @@
+'use strict'
+
+Ox.ExamplePage = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            html: '',
+            js: '',
+            replace: [],
+            selected: 'source',
+            title: ''
+        })
+        .options(options || {});
+
+    self.$toolbar = Ox.Bar({size: 24});
+
+    self.$title = Ox.Label({
+            title: self.options.title
+        })
+        .css({float: 'left', margin: '4px'})
+        .appendTo(self.$toolbar)
+
+    self.$reloadButton = Ox.Button({
+            disabled: self.options.selected == 'source',
+            title: 'redo',
+            tooltip: 'Reload',
+            type: 'image'
+        })
+        .css({float: 'right', margin: '4px 4px 4px 2px'})
+        .bindEvent({
+            click: function() {
+                self.$frame.attr({src: self.options.html});
+            }
+        })
+        .appendTo(self.$toolbar);
+
+    self.$tabs = Ox.ButtonGroup({
+            buttons: [
+                {
+                    id: 'source',
+                    title: 'View Source'
+                },
+                {
+                    id: 'live',
+                    title: 'View Live'
+                }
+            ],
+            selectable: true,
+            value: self.options.selected
+        })
+        .css({float: 'right', margin: '4px 2px 4px 4px'})
+        .bindEvent({
+            change: function(data) {
+                self.options.selected = data.value;
+                self.$reloadButton.options({disabled: data.value == 'source'});
+                self.$content.animate({
+                    marginLeft: data.value == 'source'
+                        ? 0 : -self.options.width + 'px'
+                }, 250, function() {
+                    if (data.value == 'live' && !self.$frame.attr('src')) {
+                        self.$frame.attr({src: self.options.html});
+                    }
+                });
+            }
+        })
+        .appendTo(self.$toolbar);
+
+    self.$viewer = Ox.SourceViewer({
+            file: self.options.js,
+            replace: self.options.replace
+        })
+        .css({
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: self.options.width + 'px',
+            height: self.options.height - 24 + 'px'
+        });
+    self.$frame = Ox.Element('<iframe>')
+        .css({
+            position: 'absolute',
+            left: self.options.width + 'px',
+            top: 0,
+            border: 0
+        })
+        .attr({
+            width: self.options.width,
+            height: self.options.height
+        });
+    self.$content = Ox.Element()
+        .css({
+            position: 'absolute',
+            width: self.options.width * 2 + 'px'
+        })
+        .append(self.$viewer)
+        .append(self.$frame)
+    self.$container = Ox.Element()
+        .append(self.$content)
+
+    that.setElement(
+        Ox.SplitPanel({
+            elements: [
+                {element: self.$toolbar, size: 24},
+                {element: self.$container}
+            ],
+            orientation: 'vertical'
+        })
+    );
+
+    Ox.$window.bind({
+        resize: function() {
+            setSize();
+        }
+    });
+
+    setTimeout(setSize, 100);
+
+    function setSize() {
+        self.options.width = that.width();
+        self.options.height = that.height();
+        self.$content.css({
+            width: self.options.width * 2 + 'px',
+        })
+        self.$viewer.css({
+            width: self.options.width + 'px',
+            height: self.options.height - 24 + 'px'
+        })
+        self.$frame.attr({
+            width: self.options.width,
+            height: self.options.height - 24
+        });
+    }
+
+    return that;
+
+};