108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
|
'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;
|
||
|
|
|
||
|
|
};
|