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

this is the future...

This commit is contained in:
rolux 2012-04-05 17:28:40 +02:00
parent 3c010a6f99
commit 5d088a38b4
4 changed files with 567 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
index.css Normal file
View File

@ -0,0 +1,59 @@
body {
margin: 0;
}
body.OxThemeClassic {
background-color: rgb(240, 240, 240);
}
body.OxThemeModern {
background-color: rgb(16, 16, 16);
}
div {
font-family: Lucida Grande, Segoe UI, DejaVu Sans, Arial;
font-size: 11px;
}
.OxThemeClassic div {
color: rgb(16, 16, 16);
}
.OxThemeModern div {
color: rgb(240, 240, 240);
}
.line {
width: 384px;
font-size: 12px;
font-weight: bold;
}
.link {
font-size: 12px;
cursor: pointer;
}
.link:hover {
text-decoration: underline;
}
.link.selected {
font-weight: bold;
text-decoration: underline;
cursor: default;
}
.logo {
width: 256px;
height: 128px;
cursor: pointer;
}
.sections {
width: 512px;
}
.themes {
width: 80px;
}
.ui {
position: absolute;
text-align: center;
}

11
index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<title>OxJS - A JavaScript Library for Web Applications</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="index.css"/>
<script type="text/javascript" src="dev/Ox.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body></body>
</html>

352
index.js Normal file
View File

@ -0,0 +1,352 @@
Ox.load(function() {
var app = {
$ui: {},
data: {},
fn: {
animate: function(callback) {
var css = app.fn.getCSS(),
home = !app.fn.url();
home && app.$ui.logo.attr({
src: app.fn.getLogoURL()
})
Ox.forEach(app.fn.getCSS(), function(css, element) {
app.$ui[element].animate(
css,
1000,
element == 'logo' ? function() {
!home && app.$ui.logo.attr({
src: app.fn.getLogoURL()
});
callback();
} : void 0
);
});
},
getCSS: function() {
return app.fn.url() ? {
panel: {
opacity: 1
},
line: {
top: '26px',
left: '4px',
width: '32px',
fontSize: '1px',
opacity: 0
},
logo: {
top: '8px',
left: '8px',
width: '32px',
height: '16px'
},
sections: {
top: '8px',
left: app.window.center - 256 + 'px'
},
themes: {
top: '8px',
right: '8px'
}
} : {
panel: {
opacity: 0
},
line: {
top: app.window.middle + 12 + 'px',
left: app.window.center - 192 + 'px',
width: '384px',
fontSize: '12px',
opacity: 1
},
logo: {
left: app.window.center - 128 + 'px',
top: app.window.middle - 128 + 'px',
width: '256px',
height: '128px'
},
sections: {
top: app.window.middle + 36 + 'px',
left: app.window.center - 256 + 'px'
},
themes: {
top: app.window.middle + 60 + 'px',
right: app.window.center - 40 + 'px'
}
}
},
getIconURL: function() {
return 'source/Ox.UI/themes/' + app.user('theme')
+ '/png/icon16.png';
},
getLogoURL: function() {
return 'source/Ox.UI/themes/' + app.user('theme')
+ '/png/logo' + (app.fn.url() ? 16 : 128) + '.png'
},
getLogoCSS: function() {
return {
boxShadow: '0 0 1px ' + (
app.user('theme') == 'classic'
? 'rgb(0, 0, 0)'
: 'rgb(255, 255, 255)'
)
};
},
hashchange: function() {
var url = app.fn.url(),
section = url.split('/')[0];
app.fn[!url || !app.url ? 'animate' : 'void'](function() {
if (section && section != app.url.split('/')[0] && !app.foo) {
app.fn.setSection(section);
}
app.url = url;
});
},
load: function() {
var $window = Ox.$(window);
app.fn.setTheme(app.user('theme') || 'classic');
!app.user('url') && app.user({url: 'about'});
app.fn.render();
Ox.getJSON('index.json', function(data) {
app.data = data;
});
$window.bind({
hashchange: app.fn.hashchange,
resize: app.fn.resize
});
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);
},
render: function() {
var $body = (Ox.UI ? $ : Ox.$)('body').empty();
Ox.forEach(app.fn.getCSS(), function(css, element) {
app.$ui[element] = app.ui[element]().css(
Ox.extend(css, element == 'logo' ? app.fn.getLogoCSS() : {})
).appendTo($body);
});
},
resize: function() {
app.window = app.fn.window();
Ox.forEach(app.fn.getCSS(), function(css, element) {
app.$ui[element].css(css);
});
},
setSection: function(section) {
app.$ui.panel.replaceElement(1, app.ui[section]());
},
setTheme: function(theme) {
app.user({theme: theme});
(Ox.$('#icon') || Ox.$('<link>').attr({
id: 'icon',
rel: 'shortcut icon',
type: 'image/png'
}).appendTo(Ox.$('head'))).attr({
href: app.fn.getIconURL()
});
app.$ui.logo && app.$ui.logo.attr({
src: app.fn.getLogoURL()
}).css(app.fn.getLogoCSS());
Ox.Theme ? Ox.Theme(theme) : Ox.$('body').addClass(
'OxTheme' + Ox.toTitleCase(theme)
);
},
url: function() {
var len = arguments.length, ret;
if (len == 0) {
ret = window.location.hash.substr(1);
} else {
if (len == 2) {
app.foo = true;
}
window.location.hash = '#' + arguments[0];
if (len == 2) {
app.foo = false;
}
ret = app;
}
return ret;
},
void: function(callback) {
callback();
},
window: function() {
return {
center: Math.floor(window.innerWidth / 2),
height: window.innerHeight,
middle: Math.floor(window.innerHeight / 2),
width: window.innerWidth
};
}
},
ui: {
about: function() {
return Ox.Element();
},
contact: function() {
return Ox.Element();
},
development: function() {
return Ox.Element();
},
documentation: function() {
return Ox.DocPanel({
files: app.data.documentation,
getModule: function(item) {
var file = item.file.replace(/^dev\//, '');
return file.split('/')[0];
},
getSection: function(item) {
var file = item.file.replace(/^dev\//, '');
return item.section || file.split('/')[2].split('.')[0];
},
path: 'dev/'
});
},
download: function() {
return Ox.Element()
.html('<code>bzr branch http://code.0x2620.org/oxjs</code>');
},
examples: function() {
return Ox.ExamplePanel({
examples: app.data.examples,
keywords: /\b(Ox\.[\w]+)\b/g,
path: 'examples/',
replace: [[/\b(Ox[\.\w]+)\b/g, '<b>$1</b>']],
selected: ''
})
.bindEvent({
select: function(data) {
app.fn.url(
'examples' + (data.id ? '/' + data.id : '')
)
}
});
},
line: function() {
return (Ox.UI ? $ : Ox.$)('<div>')
.addClass('ui line')
.css({
top: app.window.middle + 12 + 'px',
left: app.window.center - 192 + 'px',
})
.html('A JavaScript Library for Web Applications')
},
logo: function() {
return (Ox.UI ? $ : Ox.$)('<img>')
.addClass('ui logo')
.attr({
src: app.fn.getLogoURL()
})
.bind({
click: function() {
app.fn.url(app.fn.url() ? '' : app.user('url'));
}
});
},
panel: function() {
return Ox.UI
? Ox.SplitPanel({
elements: [
{
element: Ox.Bar({size: 32}),
size: 32
},
{
element: Ox.Element()
}
],
orientation: 'vertical'
})
.css({opacity: 0})
: Ox.$('<div>')
},
readme: function() {
return Ox.Element();
},
sections: function() {
var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui sections');
[
'about', 'readme', 'examples', 'documentation',
'download', 'development', 'contact'
].forEach(function(section, i) {
i && $element.append(Ox.$('<span>').html(' | '));
Ox.$('<span>')
.addClass('link' + (
app.user('section') == section ? ' selected' : ''
))
.html(Ox.toTitleCase(section))
.bind({
click: function() {
app.$ui.sections.children().removeClass('selected');
$(this).addClass('selected');
app.fn.url(section);
}
})
.appendTo($element);
});
return $element;
},
themes: function() {
var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui themes');
['classic', 'modern'].forEach(function(theme, i) {
i && $element.append(Ox.$('<span>').html(' | '));
Ox.$('<span>')
.addClass('link' + (
app.user('theme') == theme ? ' selected' : ''
))
.html(theme == 'classic' ? 'Light' : 'Dark')
.bind({
click: function() {
app.$ui.themes.children().removeClass('selected');
$(this).addClass('selected');
app.fn.setTheme(theme)
}
})
.appendTo($element);
});
return $element;
}
},
user: Ox.localStorage('OxJS'),
};
app.url = app.fn.url();
app.window = app.fn.window();
app.fn.load();
});

145
index.json Normal file
View File

@ -0,0 +1,145 @@
{
"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"
]
}