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.ExamplePanel.js
+++ b/source/Ox.UI/js/Code/Ox.ExamplePanel.js
@ -0,0 +1,108 @@
+'use strict';
+
+Ox.ExamplePanel = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            collapsibe: false,
+            examples: [],
+            path: '',
+            replace: [],
+            resizable: false,
+            resize: [],
+            size: 256,
+        })
+        .options(options || {})
+
+    self.$list = Ox.Element();
+    self.$page = Ox.Element();
+
+    that.setElement(
+        self.$panel = Ox.SplitPanel({
+            elements: [
+                {
+                    collapsible: self.options.collapsible,
+                    element: self.$list,
+                    resizable: self.options.resizable,
+                    resize: self.options.resize,
+                    size: self.options.size
+                },
+                {
+                    element: self.$page
+                }
+            ],
+            orientation: 'horizontal'
+        })
+    );
+
+    loadList(function(items) {
+        self.items = items;
+        self.$list = Ox.TextList({
+                columns: [
+                    {
+                        id: 'id',
+                        unique: true
+                    },
+                    {
+                        id: 'title',
+                        operator: '+',
+                        title: 'Title',
+                        visible: true,
+                        width: self.options.size - Ox.UI.SCROLLBAR_SIZE
+                    }
+                ],
+                items: self.items,
+                scrollbarVisible: true,
+                sort: ['+title']
+            })
+            .bindEvent({
+                select: function(data) {
+                    var item;
+                    if (data.ids.length) {
+                        item = Ox.getObjectById(self.items, data.ids[0]);
+                        self.$panel.replaceElement(1,
+                            self.$page = Ox.ExamplePage({
+                                height: window.innerHeight,
+                                html: item.html,
+                                js: item.js,
+                                replace: self.options.replace,
+                                title: item.title,
+                                width: window.innerWidth - self.options.size
+                            })
+                        )
+                    } else {
+                        self.$page.empty()
+                    }
+                }
+            });
+        self.$panel.replaceElement(0, self.$list);
+        that.triggerEvent('load', {});
+    });
+
+    function loadList(callback) {
+        var items = [];
+        self.options.examples.forEach(function(example) {
+            var file = self.options.path + example + '/index.html';
+            Ox.get(file, function(html) {
+                var keywords = html.match(/<meta name="keywords" content="(.+)"/),
+                    title = html.match(/<title>(.+)<\/title>/);
+                items.push({
+                    html: file,
+                    id: example,
+                    js: self.options.path + example + '/js/example.js',
+                    keywords: keywords ? keywords[1].split(', ') : [],
+                    title: title ? title[1] : 'Untitled'
+                });
+                items.length == self.options.examples.length && callback(items);
+            });
+        });
+    }
+
+    function parseExample() {
+        
+    }
+
+    return that;
+
+};