0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

make SyntaxHighlighter and SourceViewer more useful by allowing replacements; remove index.json and source/Ox/png; plus some other small and/or cosmetic changes

Browse source
This commit is contained in:
rolux 2012-04-06 14:10:21 +02:00
parent 24eb4bdc64
commit 03f4f77ce6
16 changed files with 213 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
examples/cities/js/example.js
View file

@ -153,8 +153,9 @@ Ox.load({UI: {showScreen: true}, Geo: {}}, function() {
*/ */
id: 'id', id: 'id',
operator: '+', operator: '+',
title: 'Id', title: 'ID',
unique: true unique: true,
width: 80
}, },
{ {
/* /*

89
index.css
View file

@ -19,41 +19,96 @@ div {
color: rgb(240, 240, 240); color: rgb(240, 240, 240);
} }
.OxThemeClassic .bar {
.line { background-image: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
width: 384px; background-image: -o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
font-size: 12px; background-image: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
font-weight: bold; }
.OxThemeModern .bar {
background-image: -moz-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32));
background-image: -o-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32));
background-image: -webkit-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32));
} }
.link { .button {
font-size: 12px; padding: 0 4px 0 4px;
border-radius: 4px;
margin: 0 3px 0 3px;
cursor: pointer; cursor: pointer;
} }
.link:hover { .button.selected {
cursor: default;
}
.button:hover {
box-shadow: 0 0 1px rgb(0, 0, 0);
}
.OxThemeClassic .button:hover {
//background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 1px rgba(0, 0, 0, 1);
}
.OxThemeClassic .button.selected {
background-color: rgb(255, 255, 255);
box-shadow: 0 0 1px rgb(0, 0, 0);
}
.OxThemeModern .button:hover {
//background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 1px rgba(255, 255, 255, 1);
}
.OxThemeModern .button.selected {
background-color: rgb(0, 0, 0);
box-shadow: 0 0 1px rgb(255, 255, 255);
}
.doclink {
text-decoration: underline; text-decoration: underline;
} }
.link.selected { .OxComment .doclink {
font-size: 12px;
}
.line {
font-weight: bold; font-weight: bold;
text-decoration: underline;
cursor: default;
} }
.logo { .logo {
width: 256px;
height: 128px;
cursor: pointer; cursor: pointer;
} }
.sections { .page {
width: 512px; width: 512px;
padding: 32px;
margin: 16px auto 16px auto;
border-width: 1px;
border-style: solid;
border-radius: 8px;
font-size: 14px;
line-height: 20px;
} }
.page blockquote {
.themes { margin-left: 28px;
width: 80px; }
.page code, .page pre {
font-size: 12px;
}
.page h1 {
font-size: 18px;
line-height: 24px;
}
.page h2 {
font-size: 16px;
line-height: 22px;
}
.OxThemeClassic .page {
border-color: rgb(208, 208, 208);
background: rgb(255, 255, 255);
}
.OxThemeModern .page {
border-color: rgb(48, 48, 48);
background: rgb(255, 255, 255);
} }
.ui { .ui {
position: absolute; position: absolute;
font-size: 12px;
text-align: center; text-align: center;
} }

82
index.js
View file

@ -59,7 +59,7 @@ Ox.load(function() {
opacity: 0 opacity: 0
}, },
line: { line: {
top: app.window.middle + 12 + 'px', top: app.window.middle + 16 + 'px',
left: app.window.center - 192 + 'px', left: app.window.center - 192 + 'px',
width: '384px', width: '384px',
fontSize: '12px', fontSize: '12px',
@ -72,11 +72,11 @@ Ox.load(function() {
height: '128px' height: '128px'
}, },
sections: { sections: {
top: app.window.middle + 36 + 'px', top: app.window.middle + 48 + 'px',
left: app.window.center - 256 + 'px' left: app.window.center - 256 + 'px'
}, },
themes: { themes: {
top: app.window.middle + 60 + 'px', top: app.window.middle + 80 + 'px',
right: app.window.center - 40 + 'px' right: app.window.center - 40 + 'px'
} }
} }
@ -126,7 +126,7 @@ Ox.load(function() {
resize: app.fn.resize resize: app.fn.resize
}); });
window.oxjs = app; // so that you can play with it in the console window.oxjs = app; // so that you can play with it in the console
Ox.load({UI: {debug: true, theme: app.user('theme')}}, app.fn.render); Ox.load({UI: {theme: app.user('theme')}}, app.fn.render);
}, },
render: function() { render: function() {
@ -146,7 +146,9 @@ Ox.load(function() {
}, },
setSection: function(section) { setSection: function(section) {
app.$ui.panel.replaceElement(1, app.ui[section]()); app.$ui.panel.replaceElement(1, app.ui[section]
? app.ui[section]() : app.ui.page(section)
);
}, },
setTheme: function(theme) { setTheme: function(theme) {
@ -198,20 +200,23 @@ Ox.load(function() {
}, },
re: {
code: new RegExp(
'<span class="OxIdentifier">Ox</span>'
+ '(<span class="OxOperator">\.</span>'
+ '<span class="OxIdentifier">UI</span>)?'
+ '<span class="OxOperator">\.</span>'
+ '<span class="OxIdentifier">([\\$\\w]+)<\/span>',
'g'
),
comment: /\b(Ox\.\w+)\b/g
},
ui: { ui: {
about: function() {
return Ox.Element();
},
contact: function() {
return Ox.Element();
},
development: function() {
return Ox.Element();
},
documentation: function() { documentation: function() {
return Ox.DocPanel({ return Ox.DocPanel({
files: app.data.documentation, files: app.data.documentation,
@ -227,17 +232,22 @@ Ox.load(function() {
}); });
}, },
download: function() {
return Ox.Element()
.html('<code>bzr branch http://code.0x2620.org/oxjs</code>');
},
examples: function() { examples: function() {
return Ox.ExamplePanel({ return Ox.ExamplePanel({
examples: app.data.examples, examples: app.data.examples,
keywords: /\b(Ox\.[\w]+)\b/g, keywords: /\b(Ox\.[\w]+)\b/g,
path: 'examples/', path: 'examples/',
replace: [[/\b(Ox[\.\w]+)\b/g, '<b>$1</b>']], replaceCode: [[
app.re.code,
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({
@ -272,6 +282,17 @@ Ox.load(function() {
}); });
}, },
page: function(page) {
var $element = Ox.Container();
Ox.get('readme/html/_' + page + '.html', function(html) {
$('<div>')
.addClass('OxSerif page')
.html(html)
.appendTo($element);
});
return $element;
},
panel: function() { panel: function() {
return Ox.UI return Ox.UI
? Ox.SplitPanel({ ? Ox.SplitPanel({
@ -287,7 +308,12 @@ Ox.load(function() {
orientation: 'vertical' orientation: 'vertical'
}) })
.css({opacity: 0}) .css({opacity: 0})
: Ox.$('<div>') : Ox.$('<div>').append(
Ox.$('<div>').addClass('bar').css({
width: '100%',
height: '32px'
})
);
}, },
readme: function() { readme: function() {
@ -298,11 +324,10 @@ Ox.load(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', 'documentation',
'download', 'development', 'contact' 'downloads', 'development', 'contact'
].forEach(function(section, i) { ].forEach(function(section, i) {
i && $element.append(Ox.$('<span>').html(' | '));
Ox.$('<span>') Ox.$('<span>')
.addClass('link' + ( .addClass('button' + (
app.user('section') == section ? ' selected' : '' app.user('section') == section ? ' selected' : ''
)) ))
.html(Ox.toTitleCase(section)) .html(Ox.toTitleCase(section))
@ -321,9 +346,8 @@ Ox.load(function() {
themes: function() { themes: function() {
var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui themes'); var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui themes');
['classic', 'modern'].forEach(function(theme, i) { ['classic', 'modern'].forEach(function(theme, i) {
i && $element.append(Ox.$('<span>').html(' | '));
Ox.$('<span>') Ox.$('<span>')
.addClass('link' + ( .addClass('button' + (
app.user('theme') == theme ? ' selected' : '' app.user('theme') == theme ? ' selected' : ''
)) ))
.html(theme == 'classic' ? 'Light' : 'Dark') .html(theme == 'classic' ? 'Light' : 'Dark')

145
index.json
View file

@ -1,145 +0,0 @@
{
"documentation": [
"Ox/js/Array.js",
"Ox/js/Collection.js",
"Ox/js/Color.js",
"Ox/js/Constants.js",
"Ox/js/Core.js",
"Ox/js/DOM.js",
"Ox/js/Date.js",
"Ox/js/Encoding.js",
"Ox/js/Fallback.js",
"Ox/js/Format.js",
"Ox/js/Function.js",
"Ox/js/Geo.js",
"Ox/js/HTML.js",
"Ox/js/Hash.js",
"Ox/js/JavaScript.js",
"Ox/js/Math.js",
"Ox/js/Object.js",
"Ox/js/RegExp.js",
"Ox/js/Request.js",
"Ox/js/String.js",
"Ox/js/Type.js",
"Ox.Geo/Ox.Geo.js",
"Ox.Image/Ox.Image.js",
"Ox.UI/jquery/jquery.mousewheel.js",
"Ox.UI/js/Bar/Ox.Bar.js",
"Ox.UI/js/Bar/Ox.Progressbar.js",
"Ox.UI/js/Bar/Ox.Resizebar.js",
"Ox.UI/js/Bar/Ox.Tabbar.js",
"Ox.UI/js/Bar/Ox.Toolbar.js",
"Ox.UI/js/Calendar/Ox.Calendar.js",
"Ox.UI/js/Calendar/Ox.CalendarDate.js",
"Ox.UI/js/Calendar/Ox.ListCalendar.js",
"Ox.UI/js/Code/Ox.DocPage.js",
"Ox.UI/js/Code/Ox.DocPanel.js",
"Ox.UI/js/Code/Ox.ExamplePage.js",
"Ox.UI/js/Code/Ox.ExamplePanel.js",
"Ox.UI/js/Code/Ox.SourceViewer.js",
"Ox.UI/js/Code/Ox.SyntaxHighlighter.js",
"Ox.UI/js/Core/Ox.API.js",
"Ox.UI/js/Core/Ox.App.js",
"Ox.UI/js/Core/Ox.Clipboard.js",
"Ox.UI/js/Core/Ox.Container.js",
"Ox.UI/js/Core/Ox.Element.js",
"Ox.UI/js/Core/Ox.Event.js",
"Ox.UI/js/Core/Ox.Focus.js",
"Ox.UI/js/Core/Ox.GarbageCollection.js",
"Ox.UI/js/Core/Ox.History.js",
"Ox.UI/js/Core/Ox.JQueryElement.js",
"Ox.UI/js/Core/Ox.Keyboard.js",
"Ox.UI/js/Core/Ox.LoadingIcon.js",
"Ox.UI/js/Core/Ox.Progressbar.js",
"Ox.UI/js/Core/Ox.Request.js",
"Ox.UI/js/Core/Ox.Theme.js",
"Ox.UI/js/Core/Ox.URL.js",
"Ox.UI/js/Form/Ox.ArrayEditable.js",
"Ox.UI/js/Form/Ox.ArrayInput.js",
"Ox.UI/js/Form/Ox.Button.js",
"Ox.UI/js/Form/Ox.ButtonGroup.js",
"Ox.UI/js/Form/Ox.Checkbox.js",
"Ox.UI/js/Form/Ox.CheckboxGroup.js",
"Ox.UI/js/Form/Ox.ColorInput.js",
"Ox.UI/js/Form/Ox.ColorPicker.js",
"Ox.UI/js/Form/Ox.DateInput.js",
"Ox.UI/js/Form/Ox.DateTimeInput.js",
"Ox.UI/js/Form/Ox.Editable.js",
"Ox.UI/js/Form/Ox.FileButton.js",
"Ox.UI/js/Form/Ox.FileInput.js",
"Ox.UI/js/Form/Ox.Filter.js",
"Ox.UI/js/Form/Ox.Form.js",
"Ox.UI/js/Form/Ox.FormElementGroup.js",
"Ox.UI/js/Form/Ox.FormItem.js",
"Ox.UI/js/Form/Ox.FormPanel.js",
"Ox.UI/js/Form/Ox.Input.js",
"Ox.UI/js/Form/Ox.InputGroup.js",
"Ox.UI/js/Form/Ox.InsertHTMLDialog.js",
"Ox.UI/js/Form/Ox.Label.js",
"Ox.UI/js/Form/Ox.ObjectArrayInput.js",
"Ox.UI/js/Form/Ox.ObjectInput.js",
"Ox.UI/js/Form/Ox.OptionGroup.js",
"Ox.UI/js/Form/Ox.Picker.js",
"Ox.UI/js/Form/Ox.PlaceInput.js",
"Ox.UI/js/Form/Ox.PlacePicker.js",
"Ox.UI/js/Form/Ox.Range.js",
"Ox.UI/js/Form/Ox.Select.js",
"Ox.UI/js/Form/Ox.SelectInput.js",
"Ox.UI/js/Form/Ox.Spreadsheet.js",
"Ox.UI/js/Form/Ox.TimeInput.js",
"Ox.UI/js/List/Ox.Chart.js",
"Ox.UI/js/List/Ox.IconItem.js",
"Ox.UI/js/List/Ox.IconList.js",
"Ox.UI/js/List/Ox.InfoList.js",
"Ox.UI/js/List/Ox.List.js",
"Ox.UI/js/List/Ox.ListItem.js",
"Ox.UI/js/List/Ox.ListPage.js",
"Ox.UI/js/List/Ox.TextList.js",
"Ox.UI/js/List/Ox.TreeList.js",
"Ox.UI/js/Map/Ox.ListMap.js",
"Ox.UI/js/Map/Ox.Map.js",
"Ox.UI/js/Map/Ox.MapImage.js",
"Ox.UI/js/Map/Ox.MapMarker.js",
"Ox.UI/js/Map/Ox.MapMarkerImage.js",
"Ox.UI/js/Map/Ox.MapPlace.js",
"Ox.UI/js/Map/Ox.MapRectangle.js",
"Ox.UI/js/Map/Ox.MapRectangleMarker.js",
"Ox.UI/js/Menu/Ox.MainMenu.js",
"Ox.UI/js/Menu/Ox.Menu.js",
"Ox.UI/js/Menu/Ox.MenuButton.js",
"Ox.UI/js/Menu/Ox.MenuItem.js",
"Ox.UI/js/Panel/Ox.CollapsePanel.js",
"Ox.UI/js/Panel/Ox.Panel.js",
"Ox.UI/js/Panel/Ox.SplitPanel.js",
"Ox.UI/js/Panel/Ox.TabPanel.js",
"Ox.UI/js/Test/Ox.TestElement.js",
"Ox.UI/js/Test/Ox.TestWidget.js",
"Ox.UI/js/Video/Ox.AnnotationFolder.js",
"Ox.UI/js/Video/Ox.AnnotationPanel.js",
"Ox.UI/js/Video/Ox.BlockVideoTimeline.js",
"Ox.UI/js/Video/Ox.LargeVideoTimeline.js",
"Ox.UI/js/Video/Ox.SmallVideoTimeline.js",
"Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js",
"Ox.UI/js/Video/Ox.VideoEditor.js",
"Ox.UI/js/Video/Ox.VideoEditorPlayer.js",
"Ox.UI/js/Video/Ox.VideoElement.js",
"Ox.UI/js/Video/Ox.VideoPanel.js",
"Ox.UI/js/Video/Ox.VideoPlayer.js",
"Ox.UI/js/Video/Ox.VideoPreview.js",
"Ox.UI/js/Video/Ox.VideoTimelinePlayer.js",
"Ox.UI/js/Window/Ox.Dialog.js",
"Ox.UI/js/Window/Ox.Dialog_.js",
"Ox.UI/js/Window/Ox.Layer.js",
"Ox.UI/js/Window/Ox.Tooltip.js",
"Ox.Unicode/Ox.Unicode.js"
],
"examples": [
"cities",
"countries",
"list_of_countries"
],
"readme": [
"test1",
"test2"
]
}

1
readme/js/readme.js
View file

@ -74,7 +74,6 @@ Ox.load('UI', function() {
} }
function renderList() { function renderList() {
Ox.print('?', items)
$ui.list = Ox.TextList({ $ui.list = Ox.TextList({
columns: [ columns: [
{ {

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

@ -24,21 +24,24 @@ body {
-o-user-select: none; -o-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
} }
code, pre {
font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace;
}
div { div {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-o-user-select: none; -o-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
} }
div, input, textarea { div, input, textarea {
font-family: Lucida Grande, Segoe UI, DejaVu Sans, Arial; font-family: Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
font-size: 11px; font-size: 11px;
} }
h1,h2,h3,h4,h5,h6 { h1, h2, h3, h4, h5, h6 {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
} }
h2,h3,h4,h5,h6 { h2, h3, h4, h5, h6 {
font-size: 14px; font-size: 14px;
} }
img { img {
@ -63,6 +66,17 @@ td {
padding: 0; padding: 0;
vertical-align: top; vertical-align: top;
} }
.OxSerif {
font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif;
}
.OxSansSerif {
font-family: Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
}
.OxMonospace {
font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace;
}
.OxSelectable { .OxSelectable {
-moz-user-select: text; -moz-user-select: text;
-o-user-select: text; -o-user-select: text;
@ -461,9 +475,6 @@ Document
-o-user-select: text; -o-user-select: text;
-webkit-user-select: text; -webkit-user-select: text;
} }
.OxDocument code {
font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
}
.OxDocument h1 { .OxDocument h1 {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
@ -875,8 +886,8 @@ OxLabel
white-space: nowrap; white-space: nowrap;
} }
.OxLabel.OxSquare { .OxLabel.OxSquare {
padding: 0 2px 0 2px; padding: 0 3px 0 3px;
border-radius: 0; border-radius: 4px;
} }
/* /*
@ -1915,16 +1926,16 @@ SourceViewer
padding: 4px 8px 4px 8px; padding: 4px 8px 4px 8px;
border-right-width: 1px; border-right-width: 1px;
border-right-style: solid; border-right-style: solid;
font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console; font-size: 14px;
line-height: 16px; line-height: 20px;
//white-space: pre;
-moz-user-select: text; -moz-user-select: text;
-webkit-user-select: text; -webkit-user-select: text;
} }
.OxSourceViewer .OxComment pre { .OxSourceViewer .OxComment pre {
font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console; font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console, monospace;
font-size: 11px;
line-height: 16px; line-height: 16px;
margin: 0; margin: 4px 0 4px 0;
} }
@ -1937,7 +1948,7 @@ SyntaxHightlighter
.OxSyntaxHighlighter > div { .OxSyntaxHighlighter > div {
display: table-cell; display: table-cell;
padding: 4px; padding: 4px;
font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console; font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace;
line-height: 16px; line-height: 16px;
} }
.OxSyntaxHighlighter > .OxLineNumbers { .OxSyntaxHighlighter > .OxLineNumbers {

6
source/Ox.UI/js/Code/Ox.ExamplePage.js
View file

@ -7,7 +7,8 @@ Ox.ExamplePage = function(options, self) {
.defaults({ .defaults({
html: '', html: '',
js: '', js: '',
replace: [], replaceCode: [],
replaceComment: [],
selected: 'source', selected: 'source',
title: '' title: ''
}) })
@ -89,7 +90,8 @@ Ox.ExamplePage = function(options, self) {
self.$viewer = Ox.SourceViewer({ self.$viewer = Ox.SourceViewer({
file: self.options.js, file: self.options.js,
replace: self.options.replace replaceCode: self.options.replaceCode,
replaceComment: self.options.replaceComment
}) })
.css({ .css({
position: 'absolute', position: 'absolute',

6
source/Ox.UI/js/Code/Ox.ExamplePanel.js
View file

@ -8,7 +8,8 @@ Ox.ExamplePanel = function(options, self) {
examples: [], examples: [],
keywords: null, keywords: null,
path: '', path: '',
replace: [], replaceCode: [],
replaceComment: [],
size: 256 size: 256
}) })
.options(options || {}) .options(options || {})
@ -97,7 +98,8 @@ Ox.ExamplePanel = function(options, self) {
html: item.html, html: item.html,
js: item.js, js: item.js,
keywords: item.keywords, keywords: item.keywords,
replace: self.options.replace, replaceCode: self.options.replaceCode,
replaceComment: self.options.replaceComment,
title: item.title, title: item.title,
width: window.innerWidth - self.options.size width: window.innerWidth - self.options.size
}) })

29
source/Ox.UI/js/Code/Ox.SourceViewer.js
View file

@ -6,14 +6,15 @@ Ox.SourceViewer = function(options, self) {
var that = Ox.Container({}, self) var that = Ox.Container({}, self)
.defaults({ .defaults({
file: '', file: '',
replace: [] replaceCode: [],
replaceComment: [],
}) })
.options(options) .options(options)
.addClass('OxSourceViewer'); .addClass('OxSourceViewer');
self.replace = Ox.merge( self.options.replaceComment.unshift(
[[ // removes indentation inside <pre> tags
// removes indentation inside <pre> tags [
/<pre>([\s\S]+)<\/pre>/g, /<pre>([\s\S]+)<\/pre>/g,
function(pre, text) { function(pre, text) {
var lines = trim(text).split('\n'), var lines = trim(text).split('\n'),
@ -25,10 +26,8 @@ Ox.SourceViewer = function(options, self) {
return line.substr(indent); return line.substr(indent);
}).join('\n') + '</pre>'; }).join('\n') + '</pre>';
} }
]], ]
self.options.replace
); );
Ox.print('RE', self.replace)
self.$table = $('<table>').appendTo(that.$content); self.$table = $('<table>').appendTo(that.$content);
@ -42,28 +41,28 @@ Ox.SourceViewer = function(options, self) {
text = /^\/\*/.test(text) text = /^\/\*/.test(text)
? Ox.sub(text, 2, -2) ? Ox.sub(text, 2, -2)
: Ox.sub(text, 2); : Ox.sub(text, 2);
self.replace.forEach(function(replace) { self.options.replaceComment.forEach(function(replace) {
text = text.replace(replace[0], replace[1]); text = text.replace(replace[0], replace[1]);
}); });
} }
Ox.last(sections)[type] += text; Ox.last(sections)[type] += text;
}); });
sections.forEach(function(section) { sections.forEach(function(section) {
var $section = $('<tr>'), var $section = $('<tr>')
.appendTo(self.$table),
$comment = $('<td>') $comment = $('<td>')
.addClass('OxComment') .addClass('OxComment OxSerif')
.html(trim(section.comment)), .html(trim(section.comment))
.appendTo($section),
$code = $('<td>') $code = $('<td>')
.addClass('OxCode') .addClass('OxCode')
.append( .append(
Ox.SyntaxHighlighter({ Ox.SyntaxHighlighter({
replace: self.options.replaceCode,
source: trim(section.code) source: trim(section.code)
}) })
) )
$section .appendTo($section);
.append($comment)
.append($code)
.appendTo(self.$table);
}); });
}); });

25
source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
View file

@ -8,6 +8,9 @@ Ox.SyntaxHighlighter <function> Syntax Highlighter
options <o> Options options <o> Options
lineLength <n|0> If larger than zero, show edge of page lineLength <n|0> If larger than zero, show edge of page
offset <n|1> First line number 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 showLinebreaks <b|false> If true, show linebreaks
showLineNumbers <b|false> If true, show line numbers showLineNumbers <b|false> If true, show line numbers
showWhitespace <b|false> If true, show whitespace showWhitespace <b|false> If true, show whitespace
@ -25,6 +28,7 @@ Ox.SyntaxHighlighter = function(options, self) {
.defaults({ .defaults({
lineLength: 0, lineLength: 0,
offset: 1, offset: 1,
replace: [],
showLinebreaks: false, showLinebreaks: false,
showLineNumbers: false, showLineNumbers: false,
showTabs: false, showTabs: false,
@ -100,6 +104,11 @@ Ox.SyntaxHighlighter = function(options, self) {
) )
.appendTo(that); .appendTo(that);
} }
self.options.replace.forEach(function(replace) {
source = source.replace(replace[0], replace[1])
});
$source = Ox.Element() $source = Ox.Element()
.addClass('OxSourceCode') .addClass('OxSourceCode')
.html(source) .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) { self.setOption = function(key, value) {
renderSource(); renderSource();
}; };

8
source/Ox.UI/js/Form/Ox.Label.js
View file

@ -32,7 +32,7 @@ Ox.Label = function(options, self) {
) )
.css(Ox.extend(self.options.width == 'auto' ? {} : { .css(Ox.extend(self.options.width == 'auto' ? {} : {
width: self.options.width - ( width: self.options.width - (
self.options.style == 'rounded' ? 14 : 6 self.options.style == 'rounded' ? 14 : 8
) + 'px' ) + 'px'
}, { }, {
textAlign: self.options.textAlign textAlign: self.options.textAlign
@ -43,7 +43,11 @@ Ox.Label = function(options, self) {
if (key == 'title') { if (key == 'title') {
that.html(value); that.html(value);
} else if (key == 'width') { } 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'
});
} }
}; };

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

@ -314,6 +314,9 @@ Forms
color: rgb(192, 64, 64); color: rgb(192, 64, 64);
} }
.OxThemeClassic .OxLabel.OxSquare {
background: rgb(240, 240, 240);
}
.OxThemeClassic .OxLabel.OxDisabled { .OxThemeClassic .OxLabel.OxDisabled {
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
} }

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

@ -256,7 +256,7 @@ Forms
color: rgb(192, 192, 192); color: rgb(192, 192, 192);
} }
.OxThemeModern .OxInputLabel { .OxThemeModern .OxInput\ {
color: rgb(192, 192, 192); color: rgb(192, 192, 192);
} }
.OxThemeModern .OxButton, .OxThemeModern .OxButton,
@ -305,6 +305,9 @@ Forms
color: rgb(255, 64, 64); color: rgb(255, 64, 64);
} }
.OxThemeModern .OxLabel.OxSquare {
background: rgb(16, 16, 16);
}
.OxThemeModern .OxLabel.OxDisabled { .OxThemeModern .OxLabel.OxDisabled {
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
} }

BIN
source/Ox/png/OxJS16.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 301 B

BIN
source/Ox/png/OxJS256.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 860 B

BIN
source/Ox/png/OxJS64.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 455 B