sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

add documentation browser (Ox.DocPanel, demo, more documentation)

Browse source
This commit is contained in:
rolux 2011-05-07 17:56:29 +02:00
commit 698d57abb0
11 changed files with 1610 additions and 1179 deletions
Download patch file Download diff file Expand all files Collapse all files

25
source/Ox.UI/js/Core/Ox.DocPage.js
View file

@ -3,30 +3,29 @@ Ox.DocPage = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
doc: ''
item: {}
})
.options(options || {})
.addClass('OxText')
.css({
width: '640px',
height: '400px',
overflow: 'auto'
});
$('body').css('overflowY', 'scroll')
Ox.print('-------------------item', self.options.item)
that.append($('<h1>').append('<code>' + self.options.doc.name + '</code>'));
that.append($('<h1>').append('<code>' + self.options.item.name + '</code>'));
getItem(self.options.doc, 0, '').forEach(function($element) {
getItem(self.options.item, 0).forEach(function($element) {
that.append($element);
})
});
function getItem(item, level) {
function getItem(item, level, name) {
var $elements = [$('<div>')
.css({paddingLeft: ((level * 32) + 'px')})
.html(
'<code><b>' + item.name + '</b> ' +
'<code><b>' + (name || item.name) + '</b> ' +
'&lt;' + item.types.join('&gt;</code> or <code>&lt;') + '&gt; </code>' +
(item.default ? 'default: <code>' + item.default + ' </code>' : '') +
Ox.parseHTML(item.summary)
)
];
@ -89,7 +88,6 @@ Ox.DocPage = function(options, self) {
.html(
'<code><b>&gt;&nbsp;' +
Ox.encodeHTML(example.statement)
//example.statement
.replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br/>\n&nbsp;&nbsp;') +
'</b></code>'
@ -120,12 +118,11 @@ Ox.DocPage = function(options, self) {
);
} else {
item[section].forEach(function(v) {
if (section == 'usage') {
v.name = item.name + v.name + ' </b></code>returns<code> <b>';
}
var name = section == 'usage' ?
item.name + v.name + ' </b></code>returns<code> <b>' : null;
$elements = Ox.merge(
$elements,
Ox.map(getItem(v, level + 1), function($element) {
Ox.map(getItem(v, level + 1, name), function($element) {
return $element.addClass(className);
})
);

132
source/Ox.UI/js/Core/Ox.DocPanel.js Normal file
View file

@ -0,0 +1,132 @@
/*@
Ox.DocPanel <f> Documentation Panel
@*/
Ox.DocPanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
collapsible: true,
files: [],
getModule: function(item) {
return item.file.replace(self.options.path, '');
},
getSection: function(item) {
return item.section;
},
path: '',
resizable: true,
resize: [128, 256, 384],
size: 256
})
.options(options || {});
self.$list = Ox.Element();
self.$page = Ox.Element();
that.$element = 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(docItems) {
self.items = docItems;
});
function loadList(callback) {
var counter = 0,
length = self.options.files.length;
docItems = [];
self.options.files.forEach(function(file) {
Ox.doc(self.options.path + file, function(fileItems) {
docItems = Ox.merge(docItems, fileItems);
if (++counter == length) {
makeTree(docItems);
callback(docItems);
}
});
});
function makeTree(docItems) {
var treeItems = [];
docItems.forEach(function(docItem) {
var moduleIndex, sectionIndex;
docItem.module = self.options.getModule(docItem);
moduleIndex = Ox.getPositionById(treeItems, '_' + docItem.module);
if (moduleIndex == -1) {
treeItems.push({
id: '_' + docItem.module,
items: [],
title: docItem.module
});
moduleIndex = treeItems.length - 1;
}
docItem.section = self.options.getSection(docItem);
if (docItem.section) {
sectionIndex = Ox.getPositionById(
treeItems[moduleIndex].items, '_' + docItem.section
);
if (sectionIndex == -1) {
treeItems[moduleIndex].items.push({
id: '_' + docItem.section,
items: [],
title: docItem.section
});
sectionIndex = treeItems[moduleIndex].items.length - 1;
}
}
(
docItem.section ?
treeItems[moduleIndex].items[sectionIndex] :
treeItems[moduleIndex]
).items.push({
id: docItem.name,
title: docItem.name
});
});
self.$list = Ox.TreeList({
items: treeItems,
width: self.options.width
})
.bindEvent({
select: selectItem
});
that.$element.replaceElement(0, self.$list);
}
}
function getItemByName(name) {
var item = {};
Ox.forEach(self.items, function(v) {
if (v.name == name) {
item = v;
return false;
}
});
return item;
}
function selectItem(data) {
var selected = data.ids[0];
if (selected[0] != '_') {
self.$page = Ox.DocPage({
item: getItemByName(selected)
});
that.$element.replaceElement(1, self.$page);
}
}
return that;
};

1
source/Ox.UI/js/Core/Ox.Theme.js
View file

@ -22,7 +22,6 @@ Ox.Theme = function(theme) {
return false;
}
});
Ox.print('getTheme', theme)
return theme;
}

15
source/Ox.UI/js/List/Ox.TreeList.js
View file

@ -156,7 +156,7 @@ Ox.TreeList = function(options, self) {
}
function toggleItem(item, expanded) {
var $img, $item, pos;
var $img, pos;
item.expanded = expanded;
$.each(that.$element.find('.OxItem'), function(i, v) {
var $item = $(v);
@ -166,12 +166,23 @@ Ox.TreeList = function(options, self) {
return false;
}
});
Ox.print('i.e', item.expanded)
Ox.print('i.e', item.expanded, $img, $img.attr('src'));
// FIXME: why does this not work??
///*
$img.attr({
src: Ox.UI.getImagePath(
'symbol' + (item.expanded ? 'Down' : 'Right') + '.svg'
)
});
//*/
/*
Ox.print($img.attr('src'))
$img.attr({
src: $img.attr('src') == Ox.UI.getImagePath('symbolDown.svg') ?
Ox.UI.getImagePath('symbolRight.svg') :
Ox.UI.getImagePath('symbolDown.svg')
});
*/
item.expanded ?
that.$element.addItems(pos + 1, parseItems(item.items, item.level + 1)) :
that.$element.removeItems(pos + 1, parseItems(item.items, item.level + 1).length);