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

142 lines
4.3 KiB
JavaScript
Raw Normal View History

'use strict';
2012-05-21 10:38:18 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.ExamplePanel <f> Example Panel
([options[, self]]) -> <o:Ox.SplitPanel> Example Panel
2012-06-17 22:38:26 +00:00
load <!> load
select <!> select
id <s> selected example
2012-05-21 10:38:18 +00:00
options <o> Options
self <o> Shared private variable
@*/
Ox.ExamplePanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
2012-04-09 08:42:00 +00:00
element: '',
examples: [],
path: '',
references: null,
replaceCode: [],
replaceComment: [],
selected: '',
size: 256
})
.options(options || {})
2012-05-28 19:35:41 +00:00
.update({
selected: function() {
self.$list.options({selected: [self.options.selected]});
}
});
self.$list = Ox.Element();
2012-04-16 07:13:22 +00:00
self.$page = Ox.Element();
that.setElement(
self.$panel = Ox.SplitPanel({
elements: [
{
element: self.$list,
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,
max: 1,
selected: self.options.selected
? [self.options.selected] : [],
scrollbarVisible: true,
sort: ['+title']
})
.bindEvent({
select: function(data) {
selectItem(data.ids[0] || '');
}
});
self.$panel.replaceElement(0, self.$list);
2012-04-16 07:13:22 +00:00
selectItem(self.options.selected);
that.triggerEvent('load', {});
});
function loadList(callback) {
var items = [];
self.options.examples.forEach(function(example) {
var item = {
html: self.options.path + example + '/index.html',
id: example,
js: self.options.path + example + '/js/example.js'
};
Ox.get(item.html, function(html) {
var title = html.match(/<title>(.+)<\/title>/);
item.title = title ? title[1] : 'Untitled'
Ox.get(item.js, function(js) {
var references = js.match(self.options.references);
item.references = references ? Ox.unique(references).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);
});
});
});
}
function selectItem(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,
references: item.references,
replaceCode: self.options.replaceCode,
replaceComment: self.options.replaceComment,
title: item.title,
width: window.innerWidth - self.options.size
})
.bindEvent({
close: function() {
selectItem();
}
})
);
} else {
self.$list.options({selected: []});
2012-04-16 07:13:22 +00:00
self.$page.empty().append(self.options.element);
}
self.options.selected = id;
that.triggerEvent('select', {id: id});
}
return that;
2012-05-21 10:38:18 +00:00
};