0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

Example Panel: use sections

Browse source
This commit is contained in:
rolux 2012-06-22 09:23:38 +02:00
parent 0200a2478b
commit b9a4ea2e42
1 changed files with 63 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
source/Ox.UI/js/Code/ExamplePanel.js
View file

@ -27,7 +27,7 @@ Ox.ExamplePanel = function(options, self) {
.options(options || {}) .options(options || {})
.update({ .update({
selected: function() { selected: function() {
self.$list.options({selected: [self.options.selected]}); selectItem(self.options.selected);
} }
}); });
@ -49,32 +49,35 @@ Ox.ExamplePanel = function(options, self) {
}) })
); );
loadList(function(items) { loadItems(function(items) {
var treeItems = [];
self.items = items; self.items = items;
self.$list = Ox.TextList({ items.forEach(function(item) {
columns: [ var sectionIndex = Ox.getIndexById(treeItems, item.section + '/');
{ if (sectionIndex == -1) {
id: 'id', treeItems.push({
unique: true id: item.section + '/',
}, items: [],
{ title: item.sectionTitle
id: 'title', });
operator: '+', sectionIndex = treeItems.length - 1;
title: 'Title', }
visible: true, treeItems[sectionIndex].items.push(item);
width: self.options.size - Ox.UI.SCROLLBAR_SIZE });
} self.$list = Ox.TreeList({
], expanded: true,
items: self.items, items: treeItems,
max: 1, selected: self.options.selected ? [self.options.selected] : [],
selected: self.options.selected width: self.options.size
? [self.options.selected] : [],
scrollbarVisible: true,
sort: ['+title']
}) })
.bindEvent({ .bindEvent({
select: function(data) { select: function(data) {
selectItem(data.ids[0] || ''); Ox.print('SELECT', data.ids[0])
if (!data.ids[0] || !Ox.endsWith(data.ids[0], '/')) {
selectItem(
data.ids[0] ? data.ids[0].split('/').pop() : ''
);
}
} }
}); });
self.$panel.replaceElement(0, self.$list); self.$panel.replaceElement(0, self.$list);
@ -82,17 +85,31 @@ Ox.ExamplePanel = function(options, self) {
that.triggerEvent('load', {}); that.triggerEvent('load', {});
}); });
function loadList(callback) { function getItemByName(name) {
var item = null;
Ox.forEach(self.items, function(v) {
if (v.id.split('/').pop() == name) {
item = v;
Ox.Break();
}
});
return item;
}
function loadItems(callback) {
var items = []; var items = [];
self.options.examples.forEach(function(example) { self.options.examples.forEach(function(example) {
var item = { var item = {
html: self.options.path + example + '/index.html', html: self.options.path + example + '/index.html',
id: example, id: example,
js: self.options.path + example + '/js/example.js' js: self.options.path + example + '/js/example.js',
section: example.split('/').shift()
}; };
Ox.get(item.html, function(html) { Ox.get(item.html, function(html) {
var title = html.match(/<title>(.+)<\/title>/); var match = html.match(/<title>(.+)<\/title>/);
item.title = title ? title[1] : 'Untitled' item.title = match ? match[1] : 'Untitled';
match = html.match(/<meta http-equiv="Keywords" content="(.+)"\/>/);
item.sectionTitle = match ? match[1] : 'Untitled';
Ox.get(item.js, function(js) { Ox.get(item.js, function(js) {
var references = js.match(self.options.references); var references = js.match(self.options.references);
item.references = references ? Ox.unique(references).sort(function(a, b) { item.references = references ? Ox.unique(references).sort(function(a, b) {
@ -108,26 +125,27 @@ Ox.ExamplePanel = function(options, self) {
} }
function selectItem(id) { function selectItem(id) {
var item = id ? Ox.getObjectById(self.items, id) : null var item = id ? getItemByName(id) : null;
Ox.print('SELECT ITEM', id, item)
if (item) { if (item) {
self.options.selected = id; self.options.selected = id;
self.$panel.replaceElement(1, self.$list.options({selected: [item.section + '/' + id]});
self.$page = Ox.ExamplePage({ self.$page = Ox.ExamplePage({
height: window.innerHeight, height: window.innerHeight,
html: item.html, html: item.html,
js: item.js, js: item.js,
references: item.references, references: item.references,
replaceCode: self.options.replaceCode, replaceCode: self.options.replaceCode,
replaceComment: self.options.replaceComment, replaceComment: self.options.replaceComment,
title: item.title, title: item.title,
width: window.innerWidth - self.options.size width: window.innerWidth - self.options.size
}) })
.bindEvent({ .bindEvent({
close: function() { close: function() {
selectItem(); selectItem();
} }
}) });
); self.$panel.replaceElement(1, self.$page);
} else { } else {
self.options.selected = ''; self.options.selected = '';
self.$list.options({selected: []}); self.$list.options({selected: []});