forked from 0x2620/oxjs
add docco-style Ox.SourceViewer, Ox.ExamplePage and Ox.ExamplePanel, and a demo
This commit is contained in:
rolux
parent
7b7bedb65a
commit
ef0e161ab0
16 changed files with 224002 additions and 3 deletions
176
source/Ox.UI/js/Code/Ox.DocPage.js
Normal file
176
source/Ox.UI/js/Code/Ox.DocPage.js
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
'use strict';
|
||||
/*@
|
||||
Ox.DocPage <f> DocPage
|
||||
() -> <o> DocPage object
|
||||
(options) -> <o> DocPage object
|
||||
(options, self) -> <o> DocPage object
|
||||
options <o> Options object
|
||||
item <o> doc item
|
||||
self <o> Shared private variable
|
||||
@*/
|
||||
Ox.DocPage = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
item: {}
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxDocPage OxDocument')
|
||||
.css({
|
||||
overflow: 'auto'
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
function getItem(item, level, name) {
|
||||
Ox.Log('Core', 'getItem', item, level, name)
|
||||
var $elements = [$('<div>')
|
||||
.css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'})
|
||||
.html(
|
||||
'<code><b>' + (name || item.name) + '</b> '
|
||||
+ '<' + item.types.join('></code> or <code><') + '> </code>'
|
||||
+ (item['default'] ? '(default: <code>' + item['default'] + '</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({
|
||||
paddingTop: (level ? 0 : 8) + 'px',
|
||||
borderTopWidth: level ? 0 : '1px',
|
||||
marginTop: (level ? 0 : 8) + 'px',
|
||||
marginLeft: (level * 32) + 'px',
|
||||
})
|
||||
.html(Ox.parseHTML(item.description))
|
||||
);
|
||||
} else {
|
||||
$elements.push($('<div>')
|
||||
.css({
|
||||
paddingTop: (level ? 0 : 8) + 'px',
|
||||
borderTopWidth: level ? 0 : '1px',
|
||||
marginTop: (level ? 0 : 8) + 'px',
|
||||
marginLeft: (level * 32) + 'px',
|
||||
})
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: Ox.UI.getImageURL('symbolDown')})
|
||||
.css({
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
margin: '0 4px -1px 0'
|
||||
})
|
||||
.click(function() {
|
||||
var $this = $(this),
|
||||
isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolDown');
|
||||
$this.attr({
|
||||
src: isExpanded ?
|
||||
Ox.UI.getImageURL('symbolRight') :
|
||||
Ox.UI.getImageURL('symbolDown')
|
||||
});
|
||||
$('.' + 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 + 16) + 'px'})
|
||||
.html(
|
||||
'<code><b>> '
|
||||
+ Ox.encodeHTML(example.statement)
|
||||
.replace(/ /g, ' ')
|
||||
.replace(/\n/g, '<br/>\n ')
|
||||
+ '</b></code>'
|
||||
)
|
||||
);
|
||||
example.result && $elements.push($('<div>')
|
||||
.addClass(className)
|
||||
.css({marginLeft: (level * 32 + 16) + 'px'})
|
||||
.html(
|
||||
'<code>' + Ox.encodeHTML(example.result) + '</code>'
|
||||
)
|
||||
)
|
||||
});
|
||||
} else if (section == 'source') {
|
||||
// fixme: not the right place to fix path
|
||||
$elements.push($('<div>')
|
||||
.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({
|
||||
showLineNumbers: true,
|
||||
// fixme: silly
|
||||
source: item.source.map(function(token) {
|
||||
return token.source;
|
||||
}).join(''),
|
||||
offset: self.options.item.line
|
||||
})
|
||||
.addClass(className)
|
||||
.css({
|
||||
borderWidth: '1px',
|
||||
marginTop: '8px',
|
||||
})
|
||||
);
|
||||
} else {
|
||||
item[section].forEach(function(v) {
|
||||
var name = section == 'usage' ?
|
||||
item.name + v.name + ' </b></code>returns<code> <b>' : null;
|
||||
$elements = Ox.merge(
|
||||
$elements,
|
||||
Ox.map(getItem(v, level + 1, name), function($element) {
|
||||
return $element.addClass(className);
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return $elements;
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
192
source/Ox.UI/js/Code/Ox.DocPanel.js
Normal file
192
source/Ox.UI/js/Code/Ox.DocPanel.js
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.DocPanel <f> Documentation Panel
|
||||
() -> <f> Documentation Panel
|
||||
(options) -> <f> Documentation Panel
|
||||
(options, self) -> <f> Documentation Panel
|
||||
options <o> Options object
|
||||
collapsible <b|true> can be collabsed
|
||||
files <a|[]> files to parse for docs
|
||||
getModule <f> returns module for given item
|
||||
getSection <f> returns section for given item
|
||||
path <s|''> path prefix
|
||||
resizable <b|true> is resizable
|
||||
resize <a|[128, 256, 384]> resize positions
|
||||
size <s|256> default size
|
||||
self <o> shared private variable
|
||||
load <!> fired once all docs are loaded
|
||||
@*/
|
||||
|
||||
Ox.DocPanel = function(options, self) {
|
||||
|
||||
// FIXME: defaults should be falsy
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
collapsible: true,
|
||||
files: [],
|
||||
getModule: function(item) {
|
||||
return item.file.replace(self.options.path, '');
|
||||
},
|
||||
getSection: function(item) {
|
||||
return item.section;
|
||||
},
|
||||
path: '',
|
||||
resizable: true,
|
||||
resize: [128, 256, 384],
|
||||
size: 256
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
self.$list = Ox.Element();
|
||||
self.$page = Ox.Element();
|
||||
|
||||
that.$element = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: self.options.collapsible,
|
||||
element: self.$list,
|
||||
resizable: self.options.resizable,
|
||||
resize: self.options.resize,
|
||||
size: self.options.size
|
||||
},
|
||||
{
|
||||
element: self.$page
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
loadList(function(docItems) {
|
||||
self.items = docItems;
|
||||
that.triggerEvent('load', {});
|
||||
});
|
||||
|
||||
function loadList(callback) {
|
||||
|
||||
var counter = 0,
|
||||
docItems = [],
|
||||
length = self.options.files.length;
|
||||
|
||||
self.options.files.forEach(function(file) {
|
||||
Ox.doc(self.options.path + file, function(fileItems) {
|
||||
docItems = Ox.merge(docItems, fileItems);
|
||||
if (++counter == length) {
|
||||
makeTree(docItems);
|
||||
callback(docItems);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function makeTree(docItems) {
|
||||
var treeItems = [];
|
||||
docItems.forEach(function(docItem) {
|
||||
var moduleIndex, sectionIndex;
|
||||
docItem.module = self.options.getModule(docItem);
|
||||
moduleIndex = Ox.getIndexById(treeItems, '_' + docItem.module);
|
||||
if (moduleIndex == -1) {
|
||||
treeItems.push({
|
||||
id: '_' + docItem.module,
|
||||
items: [],
|
||||
title: docItem.module
|
||||
});
|
||||
moduleIndex = treeItems.length - 1;
|
||||
}
|
||||
docItem.section = self.options.getSection(docItem);
|
||||
if (docItem.section) {
|
||||
sectionIndex = Ox.getIndexById(
|
||||
treeItems[moduleIndex].items,
|
||||
'_' + docItem.module + '_' + docItem.section
|
||||
);
|
||||
if (sectionIndex == -1) {
|
||||
treeItems[moduleIndex].items.push({
|
||||
id: '_' + docItem.module + '_' + docItem.section,
|
||||
items: [],
|
||||
title: docItem.section
|
||||
});
|
||||
sectionIndex = treeItems[moduleIndex].items.length - 1;
|
||||
}
|
||||
}
|
||||
(
|
||||
docItem.section
|
||||
? treeItems[moduleIndex].items[sectionIndex]
|
||||
: treeItems[moduleIndex]
|
||||
).items.push({
|
||||
id: docItem.name,
|
||||
title: docItem.name
|
||||
});
|
||||
});
|
||||
treeItems.sort(sortByTitle);
|
||||
treeItems.forEach(function(item) {
|
||||
item.items.sort(sortByTitle);
|
||||
item.items.forEach(function(subitem) {
|
||||
subitem.items.sort(sortByTitle);
|
||||
});
|
||||
});
|
||||
self.$list = Ox.TreeList({
|
||||
items: treeItems,
|
||||
width: self.options.size - Ox.UI.SCROLLBAR_SIZE
|
||||
})
|
||||
.bindEvent({
|
||||
select: selectItem
|
||||
});
|
||||
// fixme
|
||||
/*
|
||||
var $foo = Ox.Container();
|
||||
self.$list.appendTo($foo);
|
||||
that.$element.replaceElement(0, $foo);
|
||||
*/
|
||||
that.$element.replaceElement(0, self.$list);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getItemByName(name) {
|
||||
var item = {};
|
||||
Ox.forEach(self.items, function(v) {
|
||||
if (v.name == name) {
|
||||
item = v;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return item;
|
||||
}
|
||||
|
||||
function selectItem(data) {
|
||||
var selected;
|
||||
if (data.ids.length) {
|
||||
selected = data.ids[0];
|
||||
if (selected[0] != '_') {
|
||||
self.$page = Ox.DocPage({
|
||||
item: getItemByName(selected)
|
||||
});
|
||||
that.$element.replaceElement(1, self.$page);
|
||||
that.triggerEvent('select', {
|
||||
id: selected
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function sortByTitle(a, b) {
|
||||
var ret = 0;
|
||||
if (a.title < b.title) {
|
||||
ret = -1;
|
||||
} else if (a.title > b.title) {
|
||||
ret = 1;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
/*@
|
||||
selectItem <f> select item
|
||||
(id) -> <u> select an item
|
||||
id <s> if of item to select
|
||||
@*/
|
||||
that.selectItem = function(id) {
|
||||
self.$list.triggerEvent('select', {'ids': [id]});
|
||||
};
|
||||
return that;
|
||||
|
||||
};
|
||||
137
source/Ox.UI/js/Code/Ox.ExamplePage.js
Normal file
137
source/Ox.UI/js/Code/Ox.ExamplePage.js
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
'use strict'
|
||||
|
||||
Ox.ExamplePage = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
html: '',
|
||||
js: '',
|
||||
replace: [],
|
||||
selected: 'source',
|
||||
title: ''
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
self.$toolbar = Ox.Bar({size: 24});
|
||||
|
||||
self.$title = Ox.Label({
|
||||
title: self.options.title
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.appendTo(self.$toolbar)
|
||||
|
||||
self.$reloadButton = Ox.Button({
|
||||
disabled: self.options.selected == 'source',
|
||||
title: 'redo',
|
||||
tooltip: 'Reload',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right', margin: '4px 4px 4px 2px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
self.$frame.attr({src: self.options.html});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$tabs = Ox.ButtonGroup({
|
||||
buttons: [
|
||||
{
|
||||
id: 'source',
|
||||
title: 'View Source'
|
||||
},
|
||||
{
|
||||
id: 'live',
|
||||
title: 'View Live'
|
||||
}
|
||||
],
|
||||
selectable: true,
|
||||
value: self.options.selected
|
||||
})
|
||||
.css({float: 'right', margin: '4px 2px 4px 4px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
self.options.selected = data.value;
|
||||
self.$reloadButton.options({disabled: data.value == 'source'});
|
||||
self.$content.animate({
|
||||
marginLeft: data.value == 'source'
|
||||
? 0 : -self.options.width + 'px'
|
||||
}, 250, function() {
|
||||
if (data.value == 'live' && !self.$frame.attr('src')) {
|
||||
self.$frame.attr({src: self.options.html});
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$viewer = Ox.SourceViewer({
|
||||
file: self.options.js,
|
||||
replace: self.options.replace
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: self.options.width + 'px',
|
||||
height: self.options.height - 24 + 'px'
|
||||
});
|
||||
self.$frame = Ox.Element('<iframe>')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: self.options.width + 'px',
|
||||
top: 0,
|
||||
border: 0
|
||||
})
|
||||
.attr({
|
||||
width: self.options.width,
|
||||
height: self.options.height
|
||||
});
|
||||
self.$content = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
width: self.options.width * 2 + 'px'
|
||||
})
|
||||
.append(self.$viewer)
|
||||
.append(self.$frame)
|
||||
self.$container = Ox.Element()
|
||||
.append(self.$content)
|
||||
|
||||
that.setElement(
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: self.$toolbar, size: 24},
|
||||
{element: self.$container}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
);
|
||||
|
||||
Ox.$window.bind({
|
||||
resize: function() {
|
||||
setSize();
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(setSize, 100);
|
||||
|
||||
function setSize() {
|
||||
self.options.width = that.width();
|
||||
self.options.height = that.height();
|
||||
self.$content.css({
|
||||
width: self.options.width * 2 + 'px',
|
||||
})
|
||||
self.$viewer.css({
|
||||
width: self.options.width + 'px',
|
||||
height: self.options.height - 24 + 'px'
|
||||
})
|
||||
self.$frame.attr({
|
||||
width: self.options.width,
|
||||
height: self.options.height - 24
|
||||
});
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
108
source/Ox.UI/js/Code/Ox.ExamplePanel.js
Normal file
108
source/Ox.UI/js/Code/Ox.ExamplePanel.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
'use strict';
|
||||
|
||||
Ox.ExamplePanel = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
collapsibe: false,
|
||||
examples: [],
|
||||
path: '',
|
||||
replace: [],
|
||||
resizable: false,
|
||||
resize: [],
|
||||
size: 256,
|
||||
})
|
||||
.options(options || {})
|
||||
|
||||
self.$list = Ox.Element();
|
||||
self.$page = Ox.Element();
|
||||
|
||||
that.setElement(
|
||||
self.$panel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: self.options.collapsible,
|
||||
element: self.$list,
|
||||
resizable: self.options.resizable,
|
||||
resize: self.options.resize,
|
||||
size: self.options.size
|
||||
},
|
||||
{
|
||||
element: self.$page
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
);
|
||||
|
||||
loadList(function(items) {
|
||||
self.items = items;
|
||||
self.$list = Ox.TextList({
|
||||
columns: [
|
||||
{
|
||||
id: 'id',
|
||||
unique: true
|
||||
},
|
||||
{
|
||||
id: 'title',
|
||||
operator: '+',
|
||||
title: 'Title',
|
||||
visible: true,
|
||||
width: self.options.size - Ox.UI.SCROLLBAR_SIZE
|
||||
}
|
||||
],
|
||||
items: self.items,
|
||||
scrollbarVisible: true,
|
||||
sort: ['+title']
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
var item;
|
||||
if (data.ids.length) {
|
||||
item = Ox.getObjectById(self.items, data.ids[0]);
|
||||
self.$panel.replaceElement(1,
|
||||
self.$page = Ox.ExamplePage({
|
||||
height: window.innerHeight,
|
||||
html: item.html,
|
||||
js: item.js,
|
||||
replace: self.options.replace,
|
||||
title: item.title,
|
||||
width: window.innerWidth - self.options.size
|
||||
})
|
||||
)
|
||||
} else {
|
||||
self.$page.empty()
|
||||
}
|
||||
}
|
||||
});
|
||||
self.$panel.replaceElement(0, self.$list);
|
||||
that.triggerEvent('load', {});
|
||||
});
|
||||
|
||||
function loadList(callback) {
|
||||
var items = [];
|
||||
self.options.examples.forEach(function(example) {
|
||||
var file = self.options.path + example + '/index.html';
|
||||
Ox.get(file, function(html) {
|
||||
var keywords = html.match(/<meta name="keywords" content="(.+)"/),
|
||||
title = html.match(/<title>(.+)<\/title>/);
|
||||
items.push({
|
||||
html: file,
|
||||
id: example,
|
||||
js: self.options.path + example + '/js/example.js',
|
||||
keywords: keywords ? keywords[1].split(', ') : [],
|
||||
title: title ? title[1] : 'Untitled'
|
||||
});
|
||||
items.length == self.options.examples.length && callback(items);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function parseExample() {
|
||||
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
77
source/Ox.UI/js/Code/Ox.SourceViewer.js
Normal file
77
source/Ox.UI/js/Code/Ox.SourceViewer.js
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
'use strict';
|
||||
|
||||
Ox.SourceViewer = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Container({}, self)
|
||||
.defaults({
|
||||
file: '',
|
||||
replace: []
|
||||
})
|
||||
.options(options)
|
||||
.addClass('OxSourceViewer');
|
||||
|
||||
self.replace = Ox.merge(
|
||||
[[
|
||||
// removes indentation inside <pre> tags
|
||||
/<pre>([\s\S]+)<\/pre>/g,
|
||||
function(pre, text) {
|
||||
var lines = trim(text).split('\n'),
|
||||
indent = Ox.min(lines.map(function(line) {
|
||||
var match = line.match(/^\s+/);
|
||||
return match ? match[0].length : 0;
|
||||
}));
|
||||
return '<pre>' + lines.map(function(line) {
|
||||
return line.substr(indent);
|
||||
}).join('\n') + '</pre>';
|
||||
}
|
||||
]],
|
||||
self.options.replace
|
||||
);
|
||||
Ox.print('RE', self.replace)
|
||||
|
||||
self.$table = $('<table>').appendTo(that.$content);
|
||||
|
||||
Ox.get(self.options.file, function(source) {
|
||||
var sections = [{comment: '', code: ''}];
|
||||
Ox.tokenize(source).forEach(function(token, i) {
|
||||
var text = source.substr(token.offset, token.length),
|
||||
type = token.type == 'comment' ? 'comment' : 'code';
|
||||
if (type == 'comment') {
|
||||
i && sections.push({comment: '', code: ''});
|
||||
text = /^\/\*/.test(text)
|
||||
? Ox.sub(text, 2, -2)
|
||||
: Ox.sub(text, 2);
|
||||
self.replace.forEach(function(replace) {
|
||||
text = text.replace(replace[0], replace[1]);
|
||||
});
|
||||
}
|
||||
Ox.last(sections)[type] += text;
|
||||
});
|
||||
sections.forEach(function(section) {
|
||||
var $section = $('<tr>'),
|
||||
$comment = $('<td>')
|
||||
.addClass('OxComment')
|
||||
.html(trim(section.comment)),
|
||||
$code = $('<td>')
|
||||
.addClass('OxCode')
|
||||
.append(
|
||||
Ox.SyntaxHighlighter({
|
||||
source: trim(section.code)
|
||||
})
|
||||
)
|
||||
$section
|
||||
.append($comment)
|
||||
.append($code)
|
||||
.appendTo(self.$table);
|
||||
});
|
||||
});
|
||||
|
||||
function trim(str) {
|
||||
// removes leading or trailing empty line
|
||||
return str.replace(/^\s*\n/, '').replace(/\n\s*$/, '');
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
134
source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
Normal file
134
source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.SyntaxHighlighter <function> Syntax Highlighter
|
||||
(options[, self]) -> <o> Syntax Highlighter
|
||||
options <o> Options
|
||||
lineLength <n|0> If larger than zero, show edge of page
|
||||
offset <n|1> First line number
|
||||
showLinebreaks <b|false> If true, show linebreaks
|
||||
showLineNumbers <b|false> If true, show line numbers
|
||||
showWhitespace <b|false> If true, show whitespace
|
||||
showTabs <b|false> If true, show tabs
|
||||
source <s|''> JavaScript source
|
||||
stripComments <b|false> If true, strip comments
|
||||
tabSize <n|4> Number of spaces per tab
|
||||
self <o> Shared private variable
|
||||
@*/
|
||||
|
||||
Ox.SyntaxHighlighter = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
lineLength: 0,
|
||||
offset: 1,
|
||||
showLinebreaks: false,
|
||||
showLineNumbers: false,
|
||||
showTabs: false,
|
||||
showWhitespace: false,
|
||||
source: '',
|
||||
stripComments: false,
|
||||
tabSize: 4,
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxSyntaxHighlighter');
|
||||
|
||||
renderSource();
|
||||
|
||||
function renderSource() {
|
||||
var $lineNumbers, $line, $source, width,
|
||||
lines, source = '', tokens,
|
||||
linebreak = (
|
||||
self.options.showLinebreaks
|
||||
? '<span class="OxLinebreak">\u21A9</span>' : ''
|
||||
) + '<br/>',
|
||||
tab = (
|
||||
self.options.showTabs ?
|
||||
'<span class="OxTab">\u2192</span>' : ''
|
||||
) + Ox.repeat(' ', self.options.tabSize - self.options.showTabs),
|
||||
whitespace = self.options.showWhitespace ? '\u00B7' : ' ';
|
||||
self.options.source = self.options.source
|
||||
.replace(/\r\n/g, '\n')
|
||||
.replace(/\r/g, '\n');
|
||||
tokens = Ox.tokenize(self.options.source);
|
||||
tokens.forEach(function(token, i) {
|
||||
var classNames,
|
||||
substr = self.options.source.substr(token.offset, token.length);
|
||||
if (
|
||||
!(self.options.stripComments && token.type == 'comment')
|
||||
) {
|
||||
classNames = 'Ox' + Ox.toTitleCase(token.type);
|
||||
if (self.options.showWhitespace && token.type == 'whitespace') {
|
||||
if (isAfterLinebreak() && hasIrregularSpaces()) {
|
||||
classNames += ' OxLeading';
|
||||
} else if (isBeforeLinebreak()) {
|
||||
classNames += ' OxTrailing';
|
||||
}
|
||||
}
|
||||
source += '<span class="' + classNames + '">' +
|
||||
Ox.encodeHTML(substr)
|
||||
.replace(/ /g, whitespace)
|
||||
.replace(/\t/g, tab)
|
||||
.replace(/\n/g, linebreak) + '</span>';
|
||||
}
|
||||
function isAfterLinebreak() {
|
||||
return i == 0 ||
|
||||
tokens[i - 1].type == 'linebreak';
|
||||
}
|
||||
function isBeforeLinebreak() {
|
||||
return i == tokens.length - 1 ||
|
||||
tokens[i + 1].type == 'linebreak';
|
||||
}
|
||||
function hasIrregularSpaces() {
|
||||
return substr.split('').reduce(function(prev, curr) {
|
||||
return prev + (curr == ' ' ? 1 : 0);
|
||||
}, 0) % self.options.tabSize;
|
||||
}
|
||||
});
|
||||
lines = source.split('<br/>');
|
||||
that.empty();
|
||||
if (self.options.showLineNumbers) {
|
||||
$lineNumbers = Ox.Element()
|
||||
.addClass('OxLineNumbers')
|
||||
.html(
|
||||
Ox.range(lines.length).map(function(line) {
|
||||
return (line + self.options.offset);
|
||||
}).join('<br/>')
|
||||
)
|
||||
.appendTo(that);
|
||||
}
|
||||
$source = Ox.Element()
|
||||
.addClass('OxSourceCode')
|
||||
.html(source)
|
||||
.appendTo(that);
|
||||
if (self.options.lineLength) {
|
||||
$line = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: '-1000px'
|
||||
})
|
||||
.html(Ox.repeat(' ', self.options.lineLength))
|
||||
.appendTo(that);
|
||||
width = $line.width() + 4; // add padding
|
||||
$line.remove();
|
||||
['moz', 'webkit'].forEach(function(browser) {
|
||||
$source.css({
|
||||
background: '-' + browser +
|
||||
'-linear-gradient(left, rgb(255, 255, 255) ' +
|
||||
width + 'px, rgb(192, 192, 192) ' + width +
|
||||
'px, rgb(255, 255, 255) ' + (width + 1) + 'px)'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
renderSource();
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue