allow for replacement function in DocPanel and DocPage

This commit is contained in:
rolux 2012-04-06 14:24:17 +02:00
parent 3134b55456
commit e9f6751748
3 changed files with 38 additions and 28 deletions

View file

@ -202,7 +202,8 @@ Ox.load(function() {
re: { re: {
code: new RegExp( code: [
new RegExp(
'<span class="OxIdentifier">Ox</span>' '<span class="OxIdentifier">Ox</span>'
+ '(<span class="OxOperator">\.</span>' + '(<span class="OxOperator">\.</span>'
+ '<span class="OxIdentifier">UI</span>)?' + '<span class="OxIdentifier">UI</span>)?'
@ -210,14 +211,21 @@ Ox.load(function() {
+ '<span class="OxIdentifier">([\\$\\w]+)<\/span>', + '<span class="OxIdentifier">([\\$\\w]+)<\/span>',
'g' 'g'
), ),
function (str) {
comment: /\b(Ox\.\w+)\b/g return '<a href="#doc/' + Ox.stripTags(str)
+ '" class="doclink">' + str + '</a>';
}
],
comment: [
/\b(Ox\.\w+)\b/g,
'<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
]
}, },
ui: { ui: {
documentation: function() { doc: function() {
return Ox.DocPanel({ return Ox.DocPanel({
files: app.data.documentation, files: app.data.documentation,
getModule: function(item) { getModule: function(item) {
@ -228,7 +236,8 @@ Ox.load(function() {
var file = item.file.replace(/^dev\//, ''); var file = item.file.replace(/^dev\//, '');
return item.section || file.split('/')[2].split('.')[0]; return item.section || file.split('/')[2].split('.')[0];
}, },
path: 'dev/' path: 'dev/',
replace: [app.re.code],
}); });
}, },
@ -237,17 +246,8 @@ Ox.load(function() {
examples: app.data.examples, examples: app.data.examples,
keywords: /\b(Ox\.[\w]+)\b/g, keywords: /\b(Ox\.[\w]+)\b/g,
path: 'examples/', path: 'examples/',
replaceCode: [[ replaceCode: [app.re.code],
app.re.code, replaceComment: [app.re.comment],
function (str) {
return '<a href="#doc/' + Ox.stripTags(str)
+ '" class="doclink">' + str + '</a>';
}
]],
replaceComment: [[
app.re.comment,
'<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
]],
selected: '' selected: ''
}) })
.bindEvent({ .bindEvent({
@ -323,14 +323,18 @@ Ox.load(function() {
sections: function() { sections: function() {
var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui sections'); var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui sections');
[ [
'about', 'readme', 'examples', 'documentation', 'about', 'readme', 'examples', 'doc',
'downloads', 'development', 'contact' 'downloads', 'dev', 'contact'
].forEach(function(section, i) { ].forEach(function(section, i) {
Ox.$('<span>') Ox.$('<span>')
.addClass('button' + ( .addClass('button' + (
app.user('section') == section ? ' selected' : '' app.user('section') == section ? ' selected' : ''
)) ))
.html(Ox.toTitleCase(section)) .html(Ox.toTitleCase(
section == 'doc' ? 'documentation'
: section == 'dev' ? 'development'
: section
))
.bind({ .bind({
click: function() { click: function() {
app.$ui.sections.children().removeClass('selected'); app.$ui.sections.children().removeClass('selected');

View file

@ -6,6 +6,7 @@ Ox.DocPage <f> DocPage
(options, self) -> <o> DocPage object (options, self) -> <o> DocPage object
options <o> Options object options <o> Options object
item <o> doc item item <o> doc item
replace <[[]]|[]> See Ox.SyntaxHighlighter
self <o> Shared private variable self <o> Shared private variable
@*/ @*/
Ox.DocPage = function(options, self) { Ox.DocPage = function(options, self) {
@ -13,7 +14,8 @@ Ox.DocPage = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
item: {} item: {},
replace: []
}) })
.options(options || {}) .options(options || {})
.css({ .css({
@ -182,6 +184,7 @@ Ox.DocPage = function(options, self) {
); );
$elements.push( $elements.push(
Ox.SyntaxHighlighter({ Ox.SyntaxHighlighter({
replace: self.options.replace,
showLineNumbers: true, showLineNumbers: true,
// fixme: silly // fixme: silly
source: item.source.map(function(token) { source: item.source.map(function(token) {

View file

@ -11,6 +11,7 @@ Ox.DocPanel <f> Documentation Panel
getModule <f> returns module for given item getModule <f> returns module for given item
getSection <f> returns section for given item getSection <f> returns section for given item
path <s|''> path prefix path <s|''> path prefix
replace <[[]]|[]> See Ox.SyntaxHighlighter
resizable <b|true> is resizable resizable <b|true> is resizable
resize <a|[128, 256, 384]> resize positions resize <a|[128, 256, 384]> resize positions
size <s|256> default size size <s|256> default size
@ -34,6 +35,7 @@ Ox.DocPanel = function(options, self) {
return item.section; return item.section;
}, },
path: '', path: '',
replace: [],
resizable: true, resizable: true,
resize: [128, 256, 384], resize: [128, 256, 384],
size: 256 size: 256
@ -160,7 +162,8 @@ Ox.DocPanel = function(options, self) {
selected = data.ids[0]; selected = data.ids[0];
if (selected[0] != '_') { if (selected[0] != '_') {
self.$page = Ox.DocPage({ self.$page = Ox.DocPage({
item: getItemByName(selected) item: getItemByName(selected),
replace: self.options.replace
}); });
that.$element.replaceElement(1, self.$page); that.$element.replaceElement(1, self.$page);
that.triggerEvent('select', { that.triggerEvent('select', {