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

prototype of a documentation page

Browse source
This commit is contained in:
rolux 2011-05-06 19:40:26 +02:00
commit b1d171282c
8 changed files with 476 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

146
source/Ox.UI/js/Core/Ox.DocPage.js Normal file
View file

@ -0,0 +1,146 @@
Ox.DocPage = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
doc: ''
})
.options(options || {})
.addClass('OxText')
.css({
width: '640px'
});
$('body').css('overflowY', 'auto')
that.append($('<h1>').append('<code>' + self.options.doc.name + '</code>'));
getItem(self.options.doc, 0, '').forEach(function($element) {
that.append($element);
})
function getItem(item, level) {
var $elements = [$('<div>')
.css({paddingLeft: ((level * 32) + 'px')})
.html(
'<code><b>' + item.name + '</b> ' +
'&lt;' + item.types.join('&gt;</code> or <code>&lt;') + '&gt; </code>' +
Ox.parseHTML(item.summary)
)
];
[
'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')})
.html(item.description)
);
} else {
$elements.push($('<div>')
.css({paddingLeft: ((level * 32 + 16) + 'px')})
.append(
$('<img>')
.attr({src: Ox.UI.getImagePath('symbolDown.svg')})
.css({
width: '12px',
height: '12px',
margin: '0 4px -1px 0'
})
.click(function() {
var $this = $(this),
isExpanded = $this.attr('src') == Ox.UI.getImagePath('symbolDown.svg');
$this.attr({
src: isExpanded ?
Ox.UI.getImagePath('symbolRight.svg') :
Ox.UI.getImagePath('symbolDown.svg')
});
$('.' + 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 + 32) + 'px')})
.html(
'<code><b>&gt;</b>&nbsp;' +
//Ox.encodeHTML(example.statement)
example.statement
.replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br/>\n&nbsp;&nbsp;') +
'</code>'
)
);
example.result && $elements.push($('<div>')
.addClass(className)
.css({marginLeft: ((level * 32 + 32) + 'px')})
.html(
'<code>' + Ox.parseHTML(example.result) + '</code>'
)
)
});
} else if (section == 'source') {
var html = '';
var flag = false;
item.source.forEach(function(token) {
if (token.type != 'linebreak' && token.type != 'whitespace') {
flag = true;
}
if (flag) {
html += '<span class="Ox' + Ox.toTitleCase(token.type) + '">' +
Ox.encodeHTML(token.source)
.replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br/>') +
'</span>';
}
});
$elements.push($('<div>')
.addClass('OxSourceCode ' + className)
.css({background: 'rgb(255, 255, 255)', padding: '4px'})
.css({marginLeft: ((level * 32 + 32) + 'px')})
.html('<code>' + html + '</code>')
);
} else {
item[section].forEach(function(v) {
if (section == 'usage') {
v.name = item.name + v.name + ' </b></code>returns<code> <b>';
}
$elements = Ox.merge(
$elements,
Ox.map(getItem(v, level + 1), function($element) {
return $element.addClass(className);
})
);
});
}
}
}
})
return $elements;
}
return that;
};