0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki 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
parent 16dce2e517
commit 698d57abb0
11 changed files with 1610 additions and 1179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
demos/doc/deleteme.html
View file

@ -1,18 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script>
var element = document.createElement('script');
element.src = '../../build/Ox.UI/js/Map/Ox.Map.js';
element.type = 'text/javascript';
document.head.appendChild(element);
</script>
<script>
Ox.documentReady(function() {
Ox.print(Ox.Map)
})
</script>
</head>
<body></body>
<html>

13
demos/doc/js/doc.js
View file

@ -3,19 +3,26 @@ Ox.load('UI', {
theme: 'classic' theme: 'classic'
}, function() { }, function() {
Ox.Theme('classic'); Ox.Theme('classic');
Ox.doc('../../build/Ox.js', function(items) {
items.forEach(function(item) {
Ox.DocPage({doc: item}).appendTo(Ox.UI.$body);
});
});
return;
Ox.get('../../build/Ox.js', function(source) { Ox.get('../../build/Ox.js', function(source) {
var doc = Ox.doc(source); var doc = Ox.doc(source);
doc.forEach(function(item) { doc.forEach(function(item) {
Ox.DocPage({doc: item}).appendTo(Ox.UI.$body); Ox.DocPage({doc: item}).appendTo(Ox.UI.$body);
}); });
/* // /*
Ox.get('../../build/Ox.UI/js/Map/Ox.Map.js', function(source) { Ox.get('../../build/Ox.UI/js/Map/Ox.Map.js', function(source) {
var doc = Ox.doc(source); var doc = Ox.doc(source);
doc.forEach(function(item) { doc.forEach(function(item) {
Ox.DocPage({doc: item}).appendTo(Ox.UI.$body); Ox.DocPage({doc: item}).appendTo(Ox.UI.$body);
}); });
Ox.print('TEST', Ox.test(source))
}); });
*/ // */
Ox.print('TEST', Ox.test(source))
}); });
}); });

10
demos/doc2/index.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<title>OxJS Doc Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script type="text/javascript" src="js/doc.js"></script>
</head>
<body></body>
</html>

19
demos/doc2/js/doc.js Normal file
View file

@ -0,0 +1,19 @@
Ox.load('UI', {
debug: true,
theme: 'classic'
}, function() {
Ox.Theme('classic');
Ox.DocPanel({
files: ['Ox.js', 'Ox.UI/js/Map/Ox.Map.js'],
getModule: function(item) {
var file = item.file.replace(Ox.PATH, '');
return file == 'Ox.js' ? 'Ox' : file.split('/')[0];
},
getSection: function(item) {
var file = item.file.replace(Ox.PATH, '');
return item.section || file.split('/')[2];
},
path: Ox.PATH
})
.appendTo(Ox.UI.$body);
});

2
source/Ox.Geo/Ox.Geo.js
View file

@ -1,6 +1,6 @@
Ox.load.Geo = function(options, callback) { Ox.load.Geo = function(options, callback) {
Ox.loadJSON(Ox.PATH + 'Ox.Geo/Ox.Geo.json', function(data) { Ox.getJSON(Ox.PATH + 'Ox.Geo/json/Ox.Geo.json', function(data) {
Ox.COUNTRIES = data; Ox.COUNTRIES = data;

5
source/Ox.UI/Ox.UI.js
View file

@ -41,6 +41,8 @@ Ox.load.UI = function(options, callback) {
}); });
Ox.documentReady(function() { Ox.documentReady(function() {
Ox.element('body')
.addClass('OxTheme' + Ox.toTitleCase(options.theme || 'classic'));
options.showScreen && showScreen(); options.showScreen && showScreen();
}); });
@ -48,8 +50,7 @@ Ox.load.UI = function(options, callback) {
function showScreen() { function showScreen() {
var body = Ox.element('body') var body = Ox.element('body'),
.addClass('OxTheme' + Ox.toTitleCase(options.theme)),
css = { css = {
position: 'absolute', position: 'absolute',
left: 0, left: 0,

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

@ -3,30 +3,29 @@ Ox.DocPage = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
doc: '' item: {}
}) })
.options(options || {}) .options(options || {})
.addClass('OxText') .addClass('OxText')
.css({ .css({
width: '640px',
height: '400px',
overflow: 'auto' 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); that.append($element);
}) });
function getItem(item, level) { function getItem(item, level, name) {
var $elements = [$('<div>') var $elements = [$('<div>')
.css({paddingLeft: ((level * 32) + 'px')}) .css({paddingLeft: ((level * 32) + 'px')})
.html( .html(
'<code><b>' + item.name + '</b> ' + '<code><b>' + (name || item.name) + '</b> ' +
'&lt;' + item.types.join('&gt;</code> or <code>&lt;') + '&gt; </code>' + '&lt;' + item.types.join('&gt;</code> or <code>&lt;') + '&gt; </code>' +
(item.default ? 'default: <code>' + item.default + ' </code>' : '') +
Ox.parseHTML(item.summary) Ox.parseHTML(item.summary)
) )
]; ];
@ -89,7 +88,6 @@ Ox.DocPage = function(options, self) {
.html( .html(
'<code><b>&gt;&nbsp;' + '<code><b>&gt;&nbsp;' +
Ox.encodeHTML(example.statement) Ox.encodeHTML(example.statement)
//example.statement
.replace(/ /g, '&nbsp;') .replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br/>\n&nbsp;&nbsp;') + .replace(/\n/g, '<br/>\n&nbsp;&nbsp;') +
'</b></code>' '</b></code>'
@ -120,12 +118,11 @@ Ox.DocPage = function(options, self) {
); );
} else { } else {
item[section].forEach(function(v) { item[section].forEach(function(v) {
if (section == 'usage') { var name = section == 'usage' ?
v.name = item.name + v.name + ' </b></code>returns<code> <b>'; item.name + v.name + ' </b></code>returns<code> <b>' : null;
}
$elements = Ox.merge( $elements = Ox.merge(
$elements, $elements,
Ox.map(getItem(v, level + 1), function($element) { Ox.map(getItem(v, level + 1, name), function($element) {
return $element.addClass(className); 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; return false;
} }
}); });
Ox.print('getTheme', theme)
return 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) { function toggleItem(item, expanded) {
var $img, $item, pos; var $img, pos;
item.expanded = expanded; item.expanded = expanded;
$.each(that.$element.find('.OxItem'), function(i, v) { $.each(that.$element.find('.OxItem'), function(i, v) {
var $item = $(v); var $item = $(v);
@ -166,12 +166,23 @@ Ox.TreeList = function(options, self) {
return false; 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({ $img.attr({
src: Ox.UI.getImagePath( src: Ox.UI.getImagePath(
'symbol' + (item.expanded ? 'Down' : 'Right') + '.svg' '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 ? item.expanded ?
that.$element.addItems(pos + 1, parseItems(item.items, item.level + 1)) : that.$element.addItems(pos + 1, parseItems(item.items, item.level + 1)) :
that.$element.removeItems(pos + 1, parseItems(item.items, item.level + 1).length); that.$element.removeItems(pos + 1, parseItems(item.items, item.level + 1).length);

2549
source/Ox.js
View file

File diff suppressed because it is too large Load diff