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

better layout for documentation pages, use syntax highlighter

Browse source
This commit is contained in:
rolux 2011-05-07 23:07:53 +02:00
commit a1ed6a44c5
7 changed files with 121 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,12 +11,14 @@ Ox.DocPage = function(options, self) {
overflow: 'auto'
});
that.append($('<h1>')
.css({
marginTop: 0,
WebkitMarginBefore: 0
})
.append('<code>' + self.options.item.name + '</code>'));
that.append(
$('<h1>')
.css({
marginTop: 0,
WebkitMarginBefore: 0
})
.html('<code>' + self.options.item.name + '</code>')
);
getItem(self.options.item, 0).forEach(function($element) {
that.append($element);
@ -24,7 +26,7 @@ Ox.DocPage = function(options, self) {
function getItem(item, level, name) {
var $elements = [$('<div>')
.css({paddingLeft: ((level * 32) + 'px')})
.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>' +
@ -33,18 +35,24 @@ Ox.DocPage = function(options, self) {
)
];
[
'description', 'usage', 'arguments', 'properties', 'events', 'examples', 'source'
'description', 'usage', 'arguments', 'properties',
'events', 'examples', 'source'
].forEach(function(section) {
var className = 'OxLine' + Ox.uid();
if (item[section]) {
if (section == 'description') {
$elements.push($('<div>')
.css({paddingLeft: ((level * 32 + 16) + 'px')})
.css({paddingLeft: (level * 32) + 'px'})
.html(item.description)
);
} else {
$elements.push($('<div>')
.css({paddingLeft: ((level * 32 + 16) + 'px')})
.css({
paddingTop: (level ? 0 : 8) + 'px',
borderTop: level ? '': '1px solid rgb(192, 192, 192)',
marginTop: (level ? 0 : 8) + 'px',
marginLeft: (level * 32) + 'px',
})
.append(
$('<img>')
.attr({src: Ox.UI.getImagePath('symbolDown.svg')})
@ -87,7 +95,7 @@ Ox.DocPage = function(options, self) {
item.examples.forEach(function(example) {
$elements.push($('<div>')
.addClass(className)
.css({marginLeft: ((level * 32 + 32) + 'px')})
.css({marginLeft: (level * 32 + 16) + 'px'})
.html(
'<code><b>&gt;&nbsp;' +
Ox.encodeHTML(example.statement)
@ -98,26 +106,35 @@ Ox.DocPage = function(options, self) {
);
example.result && $elements.push($('<div>')
.addClass(className)
.css({marginLeft: ((level * 32 + 32) + 'px')})
.css({marginLeft: (level * 32 + 16) + 'px'})
.html(
'<code>' + Ox.parseHTML(example.result) + '</code>'
)
)
});
} else if (section == 'source') {
var html = '';
item.source.forEach(function(token) {
html += '<span class="Ox' + Ox.toTitleCase(token.type) + '">' +
Ox.encodeHTML(token.source)
.replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br/>') +
'</span>';
});
// fixme: not the right place to fix path
$elements.push($('<div>')
.addClass('OxSourceCode ' + className)
.css({background: 'rgb(255, 255, 255)', padding: '4px'})
.css({marginLeft: ((level * 32 + 32) + 'px')})
.html('<code>' + html + '</code>')
.addClass(className)
.css({marginLeft: 16 + 'px'})
.html(
'<code><b>' + self.options.item.file.replace(Ox.PATH, '') +
'</b> line ' + self.options.item.line + '</code>'
)
);
$elements.push(
Ox.SyntaxHighlighter({
// fixme: silly
source: item.source.map(function(token) {
return token.source;
}).join(''),
offset: self.options.item.line
})
.addClass(className)
.css({
border: '1px solid rgb(192, 192, 192)',
marginTop: '8px',
})
);
} else {
item[section].forEach(function(v) {