forked from 0x2620/oxjs
make SyntaxHighlighter and SourceViewer more useful by allowing replacements; remove index.json and source/Ox/png; plus some other small and/or cosmetic changes
This commit is contained in:
rolux
parent
24eb4bdc64
commit
03f4f77ce6
16 changed files with 213 additions and 230 deletions
|
|
@ -7,7 +7,8 @@ Ox.ExamplePage = function(options, self) {
|
|||
.defaults({
|
||||
html: '',
|
||||
js: '',
|
||||
replace: [],
|
||||
replaceCode: [],
|
||||
replaceComment: [],
|
||||
selected: 'source',
|
||||
title: ''
|
||||
})
|
||||
|
|
@ -89,7 +90,8 @@ Ox.ExamplePage = function(options, self) {
|
|||
|
||||
self.$viewer = Ox.SourceViewer({
|
||||
file: self.options.js,
|
||||
replace: self.options.replace
|
||||
replaceCode: self.options.replaceCode,
|
||||
replaceComment: self.options.replaceComment
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ Ox.ExamplePanel = function(options, self) {
|
|||
examples: [],
|
||||
keywords: null,
|
||||
path: '',
|
||||
replace: [],
|
||||
replaceCode: [],
|
||||
replaceComment: [],
|
||||
size: 256
|
||||
})
|
||||
.options(options || {})
|
||||
|
|
@ -97,7 +98,8 @@ Ox.ExamplePanel = function(options, self) {
|
|||
html: item.html,
|
||||
js: item.js,
|
||||
keywords: item.keywords,
|
||||
replace: self.options.replace,
|
||||
replaceCode: self.options.replaceCode,
|
||||
replaceComment: self.options.replaceComment,
|
||||
title: item.title,
|
||||
width: window.innerWidth - self.options.size
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,14 +6,15 @@ Ox.SourceViewer = function(options, self) {
|
|||
var that = Ox.Container({}, self)
|
||||
.defaults({
|
||||
file: '',
|
||||
replace: []
|
||||
replaceCode: [],
|
||||
replaceComment: [],
|
||||
})
|
||||
.options(options)
|
||||
.addClass('OxSourceViewer');
|
||||
|
||||
self.replace = Ox.merge(
|
||||
[[
|
||||
// removes indentation inside <pre> tags
|
||||
self.options.replaceComment.unshift(
|
||||
// removes indentation inside <pre> tags
|
||||
[
|
||||
/<pre>([\s\S]+)<\/pre>/g,
|
||||
function(pre, text) {
|
||||
var lines = trim(text).split('\n'),
|
||||
|
|
@ -25,10 +26,8 @@ Ox.SourceViewer = function(options, self) {
|
|||
return line.substr(indent);
|
||||
}).join('\n') + '</pre>';
|
||||
}
|
||||
]],
|
||||
self.options.replace
|
||||
]
|
||||
);
|
||||
Ox.print('RE', self.replace)
|
||||
|
||||
self.$table = $('<table>').appendTo(that.$content);
|
||||
|
||||
|
|
@ -42,28 +41,28 @@ Ox.SourceViewer = function(options, self) {
|
|||
text = /^\/\*/.test(text)
|
||||
? Ox.sub(text, 2, -2)
|
||||
: Ox.sub(text, 2);
|
||||
self.replace.forEach(function(replace) {
|
||||
self.options.replaceComment.forEach(function(replace) {
|
||||
text = text.replace(replace[0], replace[1]);
|
||||
});
|
||||
}
|
||||
Ox.last(sections)[type] += text;
|
||||
});
|
||||
sections.forEach(function(section) {
|
||||
var $section = $('<tr>'),
|
||||
var $section = $('<tr>')
|
||||
.appendTo(self.$table),
|
||||
$comment = $('<td>')
|
||||
.addClass('OxComment')
|
||||
.html(trim(section.comment)),
|
||||
.addClass('OxComment OxSerif')
|
||||
.html(trim(section.comment))
|
||||
.appendTo($section),
|
||||
$code = $('<td>')
|
||||
.addClass('OxCode')
|
||||
.append(
|
||||
Ox.SyntaxHighlighter({
|
||||
replace: self.options.replaceCode,
|
||||
source: trim(section.code)
|
||||
})
|
||||
)
|
||||
$section
|
||||
.append($comment)
|
||||
.append($code)
|
||||
.appendTo(self.$table);
|
||||
.appendTo($section);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ Ox.SyntaxHighlighter <function> Syntax Highlighter
|
|||
options <o> Options
|
||||
lineLength <n|0> If larger than zero, show edge of page
|
||||
offset <n|1> First line number
|
||||
replace <[[]]|[]> Array of replacements
|
||||
Each array element is an array of two arguments to be passed to the
|
||||
replace function, like [str, str], [regexp, str] or [regexp, fn]
|
||||
showLinebreaks <b|false> If true, show linebreaks
|
||||
showLineNumbers <b|false> If true, show line numbers
|
||||
showWhitespace <b|false> If true, show whitespace
|
||||
|
|
@ -25,6 +28,7 @@ Ox.SyntaxHighlighter = function(options, self) {
|
|||
.defaults({
|
||||
lineLength: 0,
|
||||
offset: 1,
|
||||
replace: [],
|
||||
showLinebreaks: false,
|
||||
showLineNumbers: false,
|
||||
showTabs: false,
|
||||
|
|
@ -100,6 +104,11 @@ Ox.SyntaxHighlighter = function(options, self) {
|
|||
)
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
self.options.replace.forEach(function(replace) {
|
||||
source = source.replace(replace[0], replace[1])
|
||||
});
|
||||
|
||||
$source = Ox.Element()
|
||||
.addClass('OxSourceCode')
|
||||
.html(source)
|
||||
|
|
@ -125,6 +134,22 @@ Ox.SyntaxHighlighter = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
$('.foobar > span').css({
|
||||
textDecoration: 'underline'
|
||||
})
|
||||
$('.foobar').css({
|
||||
//background: 'rgb(255, 255, 128)',
|
||||
borderRadius: '2px',
|
||||
cursor: 'pointer'
|
||||
}).bind({
|
||||
click: function() {
|
||||
window.location.hash = 'documentation/' + $(this).attr('title');
|
||||
}
|
||||
})
|
||||
|
||||
}, 1000)
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
renderSource();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ Ox.Label = function(options, self) {
|
|||
)
|
||||
.css(Ox.extend(self.options.width == 'auto' ? {} : {
|
||||
width: self.options.width - (
|
||||
self.options.style == 'rounded' ? 14 : 6
|
||||
self.options.style == 'rounded' ? 14 : 8
|
||||
) + 'px'
|
||||
}, {
|
||||
textAlign: self.options.textAlign
|
||||
|
|
@ -43,7 +43,11 @@ Ox.Label = function(options, self) {
|
|||
if (key == 'title') {
|
||||
that.html(value);
|
||||
} else if (key == 'width') {
|
||||
that.css({width: self.options.width - 14 + 'px'});
|
||||
that.css({
|
||||
width: self.options.width - (
|
||||
self.options.style == 'rounded' ? 14 : 8
|
||||
) + 'px'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue