240 lines
9.8 KiB
JavaScript
240 lines
9.8 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.DocPage <f> DocPage
|
|
([options[, self]]) -> <o:Ox.SplitPanel> DocPage object
|
|
options <o> Options object
|
|
item <o> doc item
|
|
replace <[[]]|[]> See Ox.SyntaxHighlighter
|
|
self <o> Shared private variable
|
|
@*/
|
|
Ox.DocPage = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
item: {},
|
|
replace: []
|
|
})
|
|
.options(options || {})
|
|
.css({
|
|
overflow: 'auto'
|
|
});
|
|
|
|
self.$toolbar = Ox.Bar({size: 24});
|
|
|
|
self.$title = Ox.Label({
|
|
style: 'square',
|
|
title: self.options.item.name
|
|
})
|
|
.addClass('OxMonospace')
|
|
.css({float: 'left', height: '13px', paddingTop: '1px', 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'
|
|
})
|
|
)
|
|
|
|
getItem(self.options.item, 0).forEach(function($element) {
|
|
self.$page.append($element);
|
|
});
|
|
|
|
function getItem(item, level, name) {
|
|
Ox.Log('Core', 'getItem', item, level, name)
|
|
var $elements = [
|
|
$('<div>')
|
|
.css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'})
|
|
.html(
|
|
'<code><b>' + (name || item.name) + '</b> '
|
|
+ '<' + item.types.join('></code> or <code><') + '> </code>'
|
|
+ (item['class'] ? '(class: <code>' + item['class'] + '</code>) ' : '')
|
|
+ (item['default'] ? '(default: <code>' + item['default'] + '</code>) ' : '')
|
|
+ Ox.sanitizeHTML(item.summary)
|
|
)
|
|
],
|
|
sections = ['description'].concat(
|
|
item.order || ['returns', 'arguments', 'properties']
|
|
).concat(['events', 'tests', 'source']),
|
|
index = sections.indexOf('properties') + 1 || 1;
|
|
if (item.inherited) {
|
|
Array.prototype.splice.apply(sections, [index, 0].concat(
|
|
item.inherited.map(function(v, i) {
|
|
var section = 'Properties inherited from <code>'
|
|
+ v.name + '</code>';
|
|
item[section] = v.properties;
|
|
return section;
|
|
})
|
|
));
|
|
}
|
|
sections.forEach(function(section) {
|
|
var className = 'OxLine' + Ox.uid();
|
|
if (item[section]) {
|
|
if (section == 'description') {
|
|
$elements.push($('<div>')
|
|
.css({
|
|
paddingTop: (level ? 0 : 8) + 'px',
|
|
borderTopWidth: level ? 0 : '1px',
|
|
marginTop: (level ? 0 : 8) + 'px',
|
|
marginLeft: (level * 32) + 'px'
|
|
})
|
|
.html(Ox.sanitizeHTML(item.description))
|
|
);
|
|
} else {
|
|
$elements.push($('<div>')
|
|
.css({
|
|
paddingTop: (level ? 0 : 8) + 'px',
|
|
borderTopWidth: level ? 0 : '1px',
|
|
marginTop: (level ? 0 : 8) + 'px',
|
|
marginLeft: (level * 32) + 'px'
|
|
})
|
|
.append(
|
|
$('<img>')
|
|
.attr({src: Ox.UI.getImageURL('symbolDown')})
|
|
.css({
|
|
width: '12px',
|
|
height: '12px',
|
|
margin: '0 4px -1px 0'
|
|
})
|
|
.click(function() {
|
|
var $this = $(this),
|
|
isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolDown');
|
|
$this.attr({
|
|
src: isExpanded ?
|
|
Ox.UI.getImageURL('symbolRight') :
|
|
Ox.UI.getImageURL('symbolDown')
|
|
});
|
|
$('.' + 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;
|
|
Ox.Break();
|
|
}
|
|
});
|
|
if (!hidden) {
|
|
$this.show()
|
|
}
|
|
}
|
|
});
|
|
})
|
|
)
|
|
.append('<span class="OxSection">' + (
|
|
Ox.startsWith(section, 'Properties') ? section
|
|
: Ox.toTitleCase(
|
|
section == 'returns' ? 'usage'
|
|
: section == 'tests' ? 'examples'
|
|
: section
|
|
)
|
|
) + '</span>')
|
|
);
|
|
if (section == 'tests') {
|
|
item.tests.forEach(function(test) {
|
|
$elements.push($('<div>')
|
|
.addClass(className)
|
|
.css({marginLeft: (level * 32 + 16) + 'px'})
|
|
.html(
|
|
'<code><b>> '
|
|
+ Ox.encodeHTMLEntities(test.statement)
|
|
.replace(/ /g, ' ')
|
|
.replace(/\n/g, '<br/>\n ')
|
|
+ '</b></code>'
|
|
)
|
|
);
|
|
test.expected && $elements.push($('<div>')
|
|
.addClass(className)
|
|
.css({marginLeft: (level * 32 + 16) + 'px'})
|
|
.html(
|
|
'<code>' + Ox.encodeHTMLEntities(test.expected) + '</code>'
|
|
)
|
|
)
|
|
});
|
|
} else if (section == 'source') {
|
|
// fixme: not the right place to fix path
|
|
$elements.push($('<div>')
|
|
.addClass(className)
|
|
.css({marginLeft: 16 + 'px'})
|
|
.html(
|
|
'<code><b>'
|
|
+ self.options.item.file.replace(Ox.PATH, '')
|
|
+ '</b>:' + self.options.item.line + '</code>'
|
|
)
|
|
);
|
|
$elements.push(
|
|
Ox.SyntaxHighlighter({
|
|
replace: self.options.replace,
|
|
showLineNumbers: true,
|
|
source: item.source,
|
|
offset: self.options.item.line
|
|
})
|
|
.addClass(className)
|
|
.css({
|
|
borderWidth: '1px',
|
|
marginTop: '8px'
|
|
})
|
|
);
|
|
} else {
|
|
item[section].forEach(function(v) {
|
|
var name = section == 'returns' ?
|
|
item.name + v.signature
|
|
+ ' </b></code>returns<code> <b>'
|
|
+ (v.name || '') : null;
|
|
$elements = $elements.concat(
|
|
Ox.map(getItem(v, level + 1, name), function($element) {
|
|
return $element.addClass(className);
|
|
})
|
|
);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return $elements;
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|