oxjs/source/Ox.UI/js/Code/Ox.DocPage.js

222 lines
8.9 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 08:24:46 +00:00
/*@
Ox.DocPage <f> DocPage
() -> <o> DocPage object
(options) -> <o> DocPage object
(options, self) -> <o> DocPage object
options <o> Options object
2011-05-16 10:49:48 +00:00
item <o> doc item
replace <[[]]|[]> See Ox.SyntaxHighlighter
2011-05-16 08:24:46 +00:00
self <o> Shared private variable
@*/
2011-05-06 17:40:26 +00:00
Ox.DocPage = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
item: {},
replace: []
2011-05-06 17:40:26 +00:00
})
.options(options || {})
.css({
overflow: 'auto'
2011-05-06 17:40:26 +00:00
});
2012-04-05 15:31:32 +00:00
self.$toolbar = Ox.Bar({size: 24});
self.$title = Ox.Label({
style: 'square',
title: 'Documentation: ' + self.options.item.name
})
.css({float: 'left', margin: '4px'})
.appendTo(self.$toolbar)
self.$examplesMenu = Ox.MenuButton({
items: [
{id: 'foo', title: 'Not yet...', disabled: true}
],
title: 'Examples...',
width: 128
})
.css({float: 'right', margin: '4px 4px 4px 2px'})
.bindEvent({
click: function(data) {
that.triggerEvent('select', {id: data.id});
}
})
.appendTo(self.$toolbar);
self.$referencesMenu = Ox.MenuButton({
items: [
{id: 'foo', title: 'Not yet...', disabled: true}
],
title: 'References...',
width: 128
})
.css({float: 'right', margin: '4px 2px 4px 2px'})
.bindEvent({
click: function(data) {
that.triggerEvent('select', {id: data.id});
}
})
.appendTo(self.$toolbar);
self.$page = Ox.Container()
.addClass('OxDocPage OxDocument');
that.setElement(
Ox.SplitPanel({
elements: [
{element: self.$toolbar, size: 24},
{element: self.$page}
],
orientation: 'vertical'
})
)
2011-05-06 17:40:26 +00:00
getItem(self.options.item, 0).forEach(function($element) {
2012-04-05 15:31:32 +00:00
self.$page.append($element);
});
2011-05-06 17:40:26 +00:00
function getItem(item, level, name) {
2011-11-04 15:54:28 +00:00
Ox.Log('Core', 'getItem', item, level, name)
2011-05-06 17:40:26 +00:00
var $elements = [$('<div>')
.css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'})
2011-05-06 17:40:26 +00:00
.html(
2011-11-03 15:42:41 +00:00
'<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)
2011-05-06 17:40:26 +00:00
)
];
[
'description', 'usage', 'arguments', 'properties',
'events', 'examples', 'source'
2011-05-06 17:40:26 +00:00
].forEach(function(section) {
var className = 'OxLine' + Ox.uid();
if (item[section]) {
if (section == 'description') {
$elements.push($('<div>')
.css({
paddingTop: (level ? 0 : 8) + 'px',
2011-05-11 12:46:28 +00:00
borderTopWidth: level ? 0 : '1px',
marginTop: (level ? 0 : 8) + 'px',
marginLeft: (level * 32) + 'px',
})
.html(Ox.parseHTML(item.description))
2011-05-06 17:40:26 +00:00
);
} else {
$elements.push($('<div>')
.css({
paddingTop: (level ? 0 : 8) + 'px',
2011-05-11 12:46:28 +00:00
borderTopWidth: level ? 0 : '1px',
marginTop: (level ? 0 : 8) + 'px',
marginLeft: (level * 32) + 'px',
})
2011-05-06 17:40:26 +00:00
.append(
$('<img>')
2011-08-09 17:00:39 +00:00
.attr({src: Ox.UI.getImageURL('symbolDown')})
2011-05-06 17:40:26 +00:00
.css({
width: '12px',
height: '12px',
margin: '0 4px -1px 0'
})
.click(function() {
var $this = $(this),
2011-08-09 17:00:39 +00:00
isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolDown');
2011-05-06 17:40:26 +00:00
$this.attr({
src: isExpanded ?
2011-08-09 17:00:39 +00:00
Ox.UI.getImageURL('symbolRight') :
Ox.UI.getImageURL('symbolDown')
2011-05-06 17:40:26 +00:00
});
$('.' + className).each(function() {
var $this = $(this);
$this[isExpanded ? 'addClass' : 'removeClass'](className + 'Hidden');
if (isExpanded) {
$this.hide();
} else {
var hidden = false;
Ox.forEach(this.className.split(' '), function(v) {
if (/Hidden$/.test(v)) {
hidden = true;
return false;
}
});
if (!hidden) {
$this.show()
}
}
});
})
)
.append('<b>' + Ox.toTitleCase(section) + '</b>')
);
if (section == 'examples') {
item.examples.forEach(function(example) {
$elements.push($('<div>')
.addClass(className)
.css({marginLeft: (level * 32 + 16) + 'px'})
2011-05-06 17:40:26 +00:00
.html(
2011-11-03 15:42:41 +00:00
'<code><b>&gt;&nbsp;'
+ Ox.encodeHTML(example.statement)
.replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br/>\n&nbsp;&nbsp;')
+ '</b></code>'
2011-05-06 17:40:26 +00:00
)
);
example.result && $elements.push($('<div>')
.addClass(className)
.css({marginLeft: (level * 32 + 16) + 'px'})
2011-05-06 17:40:26 +00:00
.html(
'<code>' + Ox.encodeHTML(example.result) + '</code>'
2011-11-03 15:42:41 +00:00
)
2011-05-06 17:40:26 +00:00
)
});
} else if (section == 'source') {
// fixme: not the right place to fix path
2011-05-06 17:40:26 +00:00
$elements.push($('<div>')
.addClass(className)
.css({marginLeft: 16 + 'px'})
.html(
2011-11-03 15:42:41 +00:00
'<code><b>' + self.options.item.file.replace(Ox.PATH, '')
2012-04-07 14:41:35 +00:00
+ '</b>:' + self.options.item.line + '</code>'
)
);
$elements.push(
Ox.SyntaxHighlighter({
replace: self.options.replace,
showLineNumbers: true,
// fixme: silly
source: item.source.map(function(token) {
return token.source;
}).join(''),
offset: self.options.item.line
})
.addClass(className)
.css({
2011-05-11 12:46:28 +00:00
borderWidth: '1px',
marginTop: '8px',
})
2011-05-06 17:40:26 +00:00
);
} else {
item[section].forEach(function(v) {
var name = section == 'usage' ?
item.name + v.name + ' </b></code>returns<code> <b>' : null;
2011-05-06 17:40:26 +00:00
$elements = Ox.merge(
$elements,
Ox.map(getItem(v, level + 1, name), function($element) {
2011-05-06 17:40:26 +00:00
return $element.addClass(className);
})
);
});
}
}
}
2012-01-17 17:38:16 +00:00
});
2011-05-06 17:40:26 +00:00
return $elements;
}
return that;
2011-05-16 08:24:46 +00:00
};