oxjs/demos/syntax/js/syntax.js

69 lines
2.1 KiB
JavaScript
Raw Normal View History

Ox.load('UI', {
debug: true,
theme: 'classic'
}, function() {
var $button = Ox.Button({
title: 'Run',
width: 256
})
.css({
marginTop: '256px'
})
.click(function() {
$syntaxHighlighter.options({
source: $textarea.value()
});
}),
$options = Ox.Element()
.append(
Ox.FormElementGroup({
elements: [
'showLineNumbers', 'showPage', 'showLinebreaks', 'showTabs', 'showWhitespace', 'stripComments'
].map(function(v, i) {
return Ox.Checkbox({
overlap: 'right',
title: Ox.toDashes(v).split('-').map(function(v) {
return Ox.toTitleCase(v);
}).join(' '),
width: 144
}).bindEvent({
change: function(event) {
v == 'showPage' ?
$syntaxHighlighter.options({lineLength: event.checked ? 80 : 0}) :
$syntaxHighlighter.options(v, event.checked);
}
})
})
})
),
$syntaxHighlighter = Ox.SyntaxHighlighter(),
$textarea = Ox.Input({
height: 256,
type: 'textarea',
width: 256
})
.css({
fontFamily: 'Menlo, Monaco, Courier, Courier New'
});
Ox.SplitPanel({
elements: [
{
element: Ox.Element()
.append($textarea)
.append($button),
resizable: true,
resize: [128, 256, 384],
size: 256
},
{
element: Ox.Container()
.append($options)
.append($syntaxHighlighter)
}
],
orientation: 'horizontal'
}).appendTo(Ox.UI.$body)
});