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

286 lines
12 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
2011-05-16 08:24:46 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.DocPage <f> DocPage
2011-05-16 08:24:46 +00:00
options <o> Options object
2011-05-16 10:49:48 +00:00
item <o> doc item
replace <[[]]|[]> See Ox.SyntaxHighlighter
stripComments <b|false> If true, strip comments in source code
2011-05-16 08:24:46 +00:00
self <o> Shared private variable
([options[, self]]) -> <o:Ox.SplitPanel> DocPage object
example <!> Fires when an example was selected
id <s> Id of the selected example
2011-05-16 08:24:46 +00:00
@*/
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.$homeButton = Ox.Button({
title: 'home',
2013-05-09 13:03:33 +00:00
tooltip: Ox._('Home'),
type: 'image'
})
.css({float: 'left', margin: '4px 2px 4px 4px'})
.bindEvent({
click: function() {
that.triggerEvent('close');
}
})
.appendTo(self.$toolbar);
2012-04-05 15:31:32 +00:00
self.$title = Ox.Label({
style: 'square',
2012-04-15 18:15:14 +00:00
title: self.options.item.name
2012-04-05 15:31:32 +00:00
})
2012-04-15 18:15:14 +00:00
.addClass('OxMonospace')
2012-06-14 10:35:28 +00:00
.css({
float: 'left',
height: '13px',
paddingTop: '1px',
borderRadius: '4px',
margin: '4px 2px 4px 2px'
2012-06-14 10:35:28 +00:00
})
2012-04-05 15:31:32 +00:00
.appendTo(self.$toolbar)
if (self.options.item.examples) {
self.$examplesMenu = Ox.MenuButton({
2012-06-12 14:26:55 +00:00
items: self.options.item.examples,
2013-05-09 13:03:33 +00:00
title: Ox._('Examples...'),
})
.css({float: 'right', margin: '4px 4px 4px 2px'})
.bindEvent({
click: function(data) {
2012-06-12 14:26:55 +00:00
that.triggerEvent('example', {id: data.id});
}
})
.appendTo(self.$toolbar);
}
2012-04-05 15:31:32 +00:00
self.$page = Ox.Container().addClass('OxDocPage OxDocument OxSelectable');
2012-04-05 15:31:32 +00:00
that.setElement(
Ox.SplitPanel({
elements: [
{element: self.$toolbar, size: 24},
{element: self.$page}
],
orientation: 'vertical'
})
.addClass('OxDocPage')
2012-04-05 15:31:32 +00:00
)
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) {
Ox.Log('Core', 'getItem', item, level, name);
2012-06-02 09:21:16 +00:00
var $elements = [
$('<div>')
.css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'})
.html(
'<code><b>' + (name || item.name) + '</b> '
+ '&lt;' + item.types.join('&gt;</code> or <code>&lt;') + '&gt; </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']),
2012-06-02 12:10:59 +00:00
index = {
events: sections.indexOf('events') + 1 + (
item.inheritedproperties ? item.inheritedproperties.length : 0
),
properties: sections.indexOf('properties') + 1 || 1
};
['properties', 'events'].forEach(function(key) {
var key_ = 'inherited' + key;
if (item[key_]) {
Array.prototype.splice.apply(sections, [index[key], 0].concat(
item[key_].map(function(v, i) {
var section = key + ' inherited from <code>'
+ v.name + '</code>';
item[section] = v[key];
return section;
})
));
}
});
2012-06-02 09:21:16 +00:00
sections.forEach(function(section) {
var className = 'OxLine' + Ox.uid(),
isExpanded = !Ox.contains(section, 'inherited');
2011-05-06 17:40:26 +00:00
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',
2012-05-26 15:48:19 +00:00
marginLeft: (level * 32) + 'px'
})
.html(Ox.sanitizeHTML(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',
2012-05-26 15:48:19 +00:00
marginLeft: (level * 32) + 'px'
})
2011-05-06 17:40:26 +00:00
.append(
$('<img>')
.attr({
src: isExpanded
? Ox.UI.getImageURL('symbolDown')
: Ox.UI.getImageURL('symbolRight')
})
2011-05-06 17:40:26 +00:00
.css({
width: '12px',
height: '12px',
margin: '0 4px -1px 0'
})
.click(function() {
var $this = $(this),
isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolRight');
2011-05-06 17:40:26 +00:00
$this.attr({
src: isExpanded
? Ox.UI.getImageURL('symbolDown')
: Ox.UI.getImageURL('symbolRight')
2011-05-06 17:40:26 +00:00
});
$('.' + className).each(function() {
var $this = $(this), isHidden = false;
$this[isExpanded ? 'removeClass' : 'addClass'](className + 'Hidden');
2011-05-06 17:40:26 +00:00
if (isExpanded) {
Ox.forEach(this.className.split(' '), function(v) {
if (/Hidden$/.test(v)) {
isHidden = true;
2012-07-05 08:58:08 +00:00
return false; // break
2011-05-06 17:40:26 +00:00
}
});
!isHidden && $this.show();
} else {
$this.hide();
2011-05-06 17:40:26 +00:00
}
});
})
)
2012-06-02 09:21:16 +00:00
.append('<span class="OxSection">' + (
2012-06-02 12:10:59 +00:00
Ox.contains(section, 'inherited')
? section[0].toUpperCase() + section.slice(1)
: Ox.toTitleCase(
section == 'returns' ? 'usage' : section
2012-06-02 12:10:59 +00:00
)
) + '</span>')
2011-05-06 17:40:26 +00:00
);
if (section == 'tests') {
item.tests.forEach(function(test) {
2012-06-12 13:30:58 +00:00
var isAsync = test.expected && /(.+Ox\.test\()/.test(test.statement);
2012-06-12 11:16:06 +00:00
$elements.push(
$('<div>')
.addClass(className)
.css({marginLeft: (level * 32 + 16) + 'px'})
.html(
'<code><b>&gt;&nbsp;'
+ Ox.encodeHTMLEntities(test.statement)
.replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br>\n&nbsp;&nbsp;')
2012-06-12 13:30:58 +00:00
+ '</b>'
+ (
test.passed === false && isAsync
? ' <span class="OxFailed"> // actual: '
+ Ox.encodeHTMLEntities(test.actual)
2012-06-12 11:16:06 +00:00
+ '</span>'
: ''
2012-06-12 13:30:58 +00:00
)
+ '</code>'
2012-06-12 11:16:06 +00:00
)
2011-05-06 17:40:26 +00:00
);
2012-06-12 13:30:58 +00:00
if (test.expected) {
$elements.push(
$('<div>')
.addClass(className)
.css({marginLeft: (level * 32 + 16) + 'px'})
.html(
'<code>'
+ Ox.encodeHTMLEntities(
test.passed === false && !isAsync
? test.actual : test.expected
)
2012-06-12 13:30:58 +00:00
+ (
test.passed === false && !isAsync
? ' <span class="OxFailed"> // expected: '
+ Ox.encodeHTMLEntities(test.expected)
+ '</span>'
: ''
)
+ '</code>'
)
);
}
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(
'<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: !self.options.stripComments,
source: item.source,
stripComments: self.options.stripComments,
offset: self.options.item.line
})
.addClass(className)
.css({
2011-05-11 12:46:28 +00:00
borderWidth: '1px',
2012-05-26 15:48:19 +00:00
marginTop: '8px'
})
2011-05-06 17:40:26 +00:00
);
} else {
item[section].forEach(function(v) {
2012-05-29 22:28:14 +00:00
var name = section == 'returns' ?
item.name + v.signature
+ ' </b></code>returns<code> <b>'
+ (v.name || '') : null;
2012-05-24 07:45:33 +00:00
$elements = $elements.concat(
Ox.map(getItem(v, level + 1, name), function($element) {
$element.addClass(className);
if (!isExpanded) {
$element.addClass(className + 'Hidden').hide();
}
return $element;
2011-05-06 17:40:26 +00:00
})
);
});
}
}
}
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
};