From fb8dd98b8ab4c49112853c94ee1ea3730547ea45 Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 4 Apr 2012 18:26:17 +0200 Subject: [PATCH] make it possible to parse keywords from documented source --- demos/examplepanel/index.html | 17 ++++-- examples/cities/index.html | 1 - source/Ox.UI/js/Code/Ox.ExamplePage.js | 24 +++++++- source/Ox.UI/js/Code/Ox.ExamplePanel.js | 76 +++++++++++++------------ source/Ox.UI/js/Form/Ox.ButtonGroup.js | 6 +- 5 files changed, 78 insertions(+), 46 deletions(-) diff --git a/demos/examplepanel/index.html b/demos/examplepanel/index.html index 34503e80..c771e91a 100644 --- a/demos/examplepanel/index.html +++ b/demos/examplepanel/index.html @@ -8,11 +8,18 @@ Ox.load('UI', function() { ///* Ox.ExamplePanel({ - examples: ['cities'], - path: Ox.PATH + '../examples/', - replace: [[/\b(Ox[\.\w]+)\b/g, '$1']] - }) - .appendTo(Ox.$body); + examples: ['cities'], + keywords: /\b(Ox\.[\w]+)\b/g, + path: Ox.PATH + '../examples/', + replace: [[/\b(Ox[\.\w]+)\b/g, '$1']], + selected: window.location.hash.substr(1) + }) + .bindEvent({ + select: function(data) { + window.location.hash = data.id; + } + }) + .appendTo(Ox.$body); //*/ /* Ox.ExamplePage({ diff --git a/examples/cities/index.html b/examples/cities/index.html index ad17ef6b..e3988d3d 100644 --- a/examples/cities/index.html +++ b/examples/cities/index.html @@ -3,7 +3,6 @@ Cities - diff --git a/source/Ox.UI/js/Code/Ox.ExamplePage.js b/source/Ox.UI/js/Code/Ox.ExamplePage.js index e37a1031..23dd776e 100644 --- a/source/Ox.UI/js/Code/Ox.ExamplePage.js +++ b/source/Ox.UI/js/Code/Ox.ExamplePage.js @@ -27,7 +27,7 @@ Ox.ExamplePage = function(options, self) { tooltip: 'Reload', type: 'image' }) - .css({float: 'right', margin: '4px 4px 4px 2px'}) + .css({float: 'right', margin: '4px 2px 4px 2px'}) .bindEvent({ click: function() { self.$frame.attr({src: self.options.html}); @@ -39,11 +39,13 @@ Ox.ExamplePage = function(options, self) { buttons: [ { id: 'source', - title: 'View Source' + title: 'View Source', + width: 80 }, { id: 'live', - title: 'View Live' + title: 'View Live', + width: 80 } ], selectable: true, @@ -66,6 +68,22 @@ Ox.ExamplePage = function(options, self) { }) .appendTo(self.$toolbar); + self.$keywordMenu = Ox.MenuButton({ + items: self.options.keywords.map(function(keyword) { + return {id: keyword, title: keyword}; + }), + title: 'select', + tooltip: 'Documentation', + type: 'image' + }) + .css({float: 'right', margin: '4px 2px 4px 2px'}) + .bindEvent({ + click: function(data) { + that.triggerEvent('select', {id: data.id}); + } + }) + .appendTo(self.$toolbar); + self.$viewer = Ox.SourceViewer({ file: self.options.js, replace: self.options.replace diff --git a/source/Ox.UI/js/Code/Ox.ExamplePanel.js b/source/Ox.UI/js/Code/Ox.ExamplePanel.js index 73bcc684..0be8bb10 100644 --- a/source/Ox.UI/js/Code/Ox.ExamplePanel.js +++ b/source/Ox.UI/js/Code/Ox.ExamplePanel.js @@ -5,13 +5,11 @@ Ox.ExamplePanel = function(options, self) { self = self || {}; var that = Ox.Element({}, self) .defaults({ - collapsibe: false, examples: [], + keywords: null, path: '', replace: [], - resizable: false, - resize: [], - size: 256, + size: 256 }) .options(options || {}) @@ -22,10 +20,7 @@ Ox.ExamplePanel = function(options, self) { self.$panel = Ox.SplitPanel({ elements: [ { - collapsible: self.options.collapsible, element: self.$list, - resizable: self.options.resizable, - resize: self.options.resize, size: self.options.size }, { @@ -53,54 +48,65 @@ Ox.ExamplePanel = function(options, self) { } ], items: self.items, + selected: [self.options.selected], 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() - } + selectExample(data.ids[0] || ''); } }); self.$panel.replaceElement(0, self.$list); + selectExample(self.options.selected); 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(/(.+)<\/title>/); - items.push({ - html: file, + var item = { + html: self.options.path + example + '/index.html', id: example, - js: self.options.path + example + '/js/example.js', - keywords: keywords ? keywords[1].split(', ') : [], - title: title ? title[1] : 'Untitled' + js: self.options.path + example + '/js/example.js' + }; + Ox.get(item.html, function(html) { + var title = html.match(/(.+)<\/title>/); + item.title = title ? title[1] : 'Untitled' + Ox.get(item.js, function(js) { + var keywords = js.match(self.options.keywords); + item.keywords = keywords ? Ox.unique(keywords).sort(function(a, b) { + a = a.toLowerCase(); + b = b.toLowerCase(); + return a < b ? -1 : a > b ? 1 : 0; + }) : []; + items.push(item); + items.length == self.options.examples.length && callback(items); }); - items.length == self.options.examples.length && callback(items); }); }); } - function parseExample() { - + function selectExample(id) { + var item; + if (id) { + item = Ox.getObjectById(self.items, id); + self.$panel.replaceElement(1, + self.$page = Ox.ExamplePage({ + height: window.innerHeight, + html: item.html, + js: item.js, + keywords: item.keywords, + replace: self.options.replace, + title: item.title, + width: window.innerWidth - self.options.size - 1 + }) + ); + } else { + self.$page.empty() + } + self.options.selected = id; + that.triggerEvent('select', {id: id}); } return that; diff --git a/source/Ox.UI/js/Form/Ox.ButtonGroup.js b/source/Ox.UI/js/Form/Ox.ButtonGroup.js index 8c9bc129..6ebaf3c7 100644 --- a/source/Ox.UI/js/Form/Ox.ButtonGroup.js +++ b/source/Ox.UI/js/Form/Ox.ButtonGroup.js @@ -38,6 +38,7 @@ Ox.ButtonGroup = function(options, self) { id: button.id || button, title: button.title || button, tooltip: button.tooltip, + width: button.width }, self.options.selectable ? { selected: Ox.toArray(self.options.value).indexOf(button.id || button) > -1 } : {}); @@ -56,7 +57,7 @@ Ox.ButtonGroup = function(options, self) { self.$buttons = []; self.options.buttons.forEach(function(button, pos) { - var id = self.options.id + Ox.toTitleCase(button.id) + var id = self.options.id + Ox.toTitleCase(button.id); self.$buttons[pos] = Ox.Button({ disabled: button.disabled, group: true, @@ -67,7 +68,8 @@ Ox.ButtonGroup = function(options, self) { title: button.title, tooltip: button.tooltip, type: self.options.type, - value: button.selected + value: button.selected, + width: button.width }) .bindEvent('change', function() { self.options.selectable && toggleButton(pos);