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

add docco-style Ox.SourceViewer, Ox.ExamplePage and Ox.ExamplePanel, and a demo

Browse source
This commit is contained in:
rolux 2012-04-04 16:59:58 +02:00
commit ef0e161ab0
16 changed files with 224002 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

31
source/Ox.UI/css/Ox.UI.css
View file

@ -1899,6 +1899,35 @@ Scrollbars
border-radius: 6px;
}
/*
================================================================================
SourceViewer
================================================================================
*/
.OxSourceViewer table {
border-collapse: collapse;
}
.OxSourceViewer td {
vertical-align: top;
}
.OxSourceViewer .OxComment {
padding: 4px 8px 4px 8px;
border-right-width: 1px;
border-right-style: solid;
font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
line-height: 16px;
//white-space: pre;
-moz-user-select: text;
-webkit-user-select: text;
}
.OxSourceViewer .OxComment pre {
font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
line-height: 16px;
margin: 0;
}
/*
================================================================================
SyntaxHightlighter
@ -1909,7 +1938,7 @@ SyntaxHightlighter
display: table-cell;
padding: 4px;
font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
//line-height: 14px;
line-height: 16px;
}
.OxSyntaxHighlighter > .OxLineNumbers {
text-align: right;

0
source/Ox.UI/js/Core/Ox.DocPage.js → source/Ox.UI/js/Code/Ox.DocPage.js
View file

6
source/Ox.UI/js/Core/Ox.DocPanel.js → source/Ox.UI/js/Code/Ox.DocPanel.js
View file

@ -20,6 +20,8 @@ Ox.DocPanel <f> Documentation Panel
Ox.DocPanel = function(options, self) {
// FIXME: defaults should be falsy
self = self || {};
var that = Ox.Element({}, self)
.defaults({
@ -65,8 +67,8 @@ Ox.DocPanel = function(options, self) {
function loadList(callback) {
var counter = 0,
length = self.options.files.length,
docItems = [];
docItems = [],
length = self.options.files.length;
self.options.files.forEach(function(file) {
Ox.doc(self.options.path + file, function(fileItems) {

137
source/Ox.UI/js/Code/Ox.ExamplePage.js Normal file
View 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
View 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
View 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;
};

0
source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js → source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
View file

13
source/Ox.UI/themes/classic/css/classic.css
View file

@ -642,6 +642,19 @@ Scrollbars
background: rgb(208, 208, 208);
}
/*
================================================================================
SourceViewer
================================================================================
*/
.OxThemeClassic .OxSourceViewer .OxComment {
border-color: rgb(208, 208, 208);
}
.OxThemeClassic .OxSourceViewer .OxCode {
background-color: rgb(255, 255, 255);
}
/*
================================================================================
SyntaxHighlighter

13
source/Ox.UI/themes/modern/css/modern.css
View file

@ -628,6 +628,19 @@ Scrollbars
background: rgb(64, 64, 64);
}
/*
================================================================================
SourceViewer
================================================================================
*/
.OxThemeModern .OxSourceViewer .OxComment {
border-color: rgb(48, 48, 48);
}
.OxThemeModern .OxSourceViewer .OxCode {
background-color: rgb(0, 0, 0);
}
/*
================================================================================
SyntaxHighlighter