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);