132 lines
4 KiB
JavaScript
132 lines
4 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.ExamplePanel <f:Ox.Element> Example Panel
|
|
(options[, self]) -> <o> Example Panel
|
|
options <o> Options
|
|
self <o> Shared private variable
|
|
@*/
|
|
|
|
Ox.ExamplePanel = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
element: '',
|
|
examples: [],
|
|
keywords: null,
|
|
path: '',
|
|
replaceCode: [],
|
|
replaceComment: [],
|
|
selected: '',
|
|
size: 256
|
|
})
|
|
.options(options || {})
|
|
.update({
|
|
selected: function() {
|
|
self.$list.options({selected: [self.options.selected]});
|
|
}
|
|
});
|
|
|
|
self.$list = Ox.Element();
|
|
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);
|
|
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 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);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
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,
|
|
keywords: item.keywords,
|
|
replaceCode: self.options.replaceCode,
|
|
replaceComment: self.options.replaceComment,
|
|
title: item.title,
|
|
width: window.innerWidth - self.options.size
|
|
})
|
|
);
|
|
} else {
|
|
self.$page.empty().append(self.options.element);
|
|
}
|
|
self.options.selected = id;
|
|
that.triggerEvent('select', {id: id});
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|