')
+ .addClass('OxSerif page')
+ .html(html)
+ .appendTo($element);
+ });
+ return $element;
+ },
+ panel: function() {
+ return Ox.TabPanel({
+ content: function(id) {
+ return app.ui[id] ? app.ui[id]() : app.ui.page(id);
+ },
+ size: 32,
+ tabs: [
+ {id: 'about', title: 'About'},
+ {id: 'readme', title: 'Readme'},
+ {id: 'examples', title: 'Examples'},
+ {id: 'doc', title: 'Documentation'},
+ {id: 'downloads', title: 'Downloads'},
+ {id: 'dev', title: 'Development'},
+ {id: 'contact', title: 'Contact'}
+ ]
+ })
+ .bindEvent({
+ change: function(data) {
+ app.url.push(data.selected);
+ }
+ });
+ },
+ readme: function() {
+ return Ox.Element();
+ },
+ screen: function() {
+ return Ox.$('
').addClass('screen animate');
+ },
+ switch: function() {
+ return Ox.ButtonGroup({
+ buttons: [
+ {id: 'classic', title: 'Light'},
+ {id: 'modern', title: 'Dark'}
+ ],
+ selectable: true,
+ value: app.user('theme')
+ })
+ .addClass('switch animate')
+ .bindEvent({
+ change: function(data) {
+ app.setTheme(data.value);
+ }
+ });
+ }
+ },
+ url: {
+ get: function() {
+ return window.location.hash.substr(1);
+ },
+ push: function(url) {
+ history.pushState({}, '', '#' + url);
+ url && app.user({url: url});
+ return app;
+ },
+ set: function() {
+ window.location.hash = '#' + arguments[0];
+ return app;
+ }
+ },
+ urlchange: function() {
+ var url = app.url.get(),
+ section = url.split('/')[0];
+ url && app.user({url: url});
+ Ox.print(
+ 'url', url,
+ 'section', section,
+ 'prev', app.previousURL,
+ 'sect', app.previousURL.split('/')[0],
+ 'user url', app.user('url')
+ );
+ if (section != app.previousURL.split('/')[0]) {
+ app.$ui.panel.select(section);
+ }
+ app[!url || !app.previousURL ? 'animate' : 'void'](function() {
+ app.previousURL = url;
+ });
+ },
+ user: Ox.localStorage('OxJS'),
+ void: function(callback) {
+ callback();
+ }
+ };
+
+ app.init();
+ window.oxjs = app;
+
+});
+
+
+/*
Ox.load(function() {
var app = {
@@ -6,34 +433,16 @@ Ox.load(function() {
data: {},
+ hash: '',
+
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
+ return app.fn.hash() ? {
+ screen: {
+ opacity: 0
},
- line: {
+ label: {
top: '26px',
left: '4px',
width: '32px',
@@ -46,23 +455,23 @@ Ox.load(function() {
width: '32px',
height: '16px'
},
- sections: {
+ menu: {
top: '8px',
- left: app.window.center - 256 + 'px'
+ width: '512px'
},
- themes: {
+ switch: {
top: '8px',
right: '8px'
}
} : {
- panel: {
- opacity: 0
+ screen: {
+ opacity: 1
},
- line: {
+ label: {
top: app.window.middle + 16 + 'px',
- left: app.window.center - 192 + 'px',
- width: '384px',
- fontSize: '12px',
+ left: app.window.center - 128 + 'px',
+ width: '240px',
+ fontSize: '11px',
opacity: 1
},
logo: {
@@ -71,13 +480,13 @@ Ox.load(function() {
width: '256px',
height: '128px'
},
- sections: {
+ menu: {
top: app.window.middle + 48 + 'px',
- left: app.window.center - 256 + 'px'
+ left: Math.ceil(app.window.center - app.menuWidth / 2) + 'px',
},
- themes: {
+ switch: {
top: app.window.middle + 80 + 'px',
- right: app.window.center - 40 + 'px'
+ right: Math.floor(app.window.center - app.switchWidth / 2) + 'px'
}
}
},
@@ -89,7 +498,7 @@ Ox.load(function() {
getLogoURL: function() {
return 'source/Ox.UI/themes/' + app.user('theme')
- + '/png/logo' + (app.fn.url() ? 16 : 128) + '.png'
+ + '/png/logo' + (app.fn.hash() ? 16 : 128) + '.png'
},
getLogoCSS: function() {
@@ -102,40 +511,104 @@ Ox.load(function() {
};
},
+ hash: function() {
+ var len = arguments.length, ret;
+ if (len == 0) {
+ ret = window.location.hash.substr(1);
+ } else {
+ window.location.hash = '#' + arguments[0];
+ ret = app;
+ }
+ return ret;
+ },
+
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) {
+ return;
+ var hash = app.fn.hash(),
+ section = hash.split('/')[0];
+ app.fn[!hash || !app.hash ? 'animate' : 'void'](function() {
+ if (section != app.hash.split('/')[0]) {
app.fn.setSection(section);
}
- app.url = url;
+ hash && app.user({hash: hash});
+ app.hash = hash;
});
},
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({
+ app.fn.setTheme(app.user('theme') || 'classic')
+ app.window = app.fn.window();
+ var theme = app.user('theme') || 'classic',
+ $body = Ox.$('body'),
+ $screen = Ox.$('
')
+ .addClass('loading screen');
+ $icon = Ox.$('![]()
')
+ .addClass('loading icon')
+ .attr({
+ src: 'build/Ox.UI/themes/'
+ + theme + '/svg/symbolLoadingAnimated.svg'
+ })
+ .css({
+ top: app.window.middle + 40 + 'px'
+ })
+ .appendTo($screen);
+ $logo = Ox.$('![]()
')
+ .addClass('loading logo')
+ .attr({
+ src: 'build/Ox.UI/themes/'
+ + theme + '/png/logo128.png'
+ })
+ .css({
+ left: app.window.center - 128 + 'px',
+ top: app.window.middle - 128 + 'px'
+ })
+ .bind({
+ load: function() {
+ $screen.appendTo($body);
+ $logo.appendTo($body);
+ }
+ })
+ Ox.$(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: {theme: app.user('theme')}}, app.fn.render);
- },
+ setTimeout(function() {
+ Ox.getJSON('index.json', function(data) {
+ app.data = data;
+ Ox.load({UI: {theme: theme}}, function() {
+ app.$ui.panel = app.ui.panel().appendTo(Ox.$body);
+ app.$ui.panel.find('.OxButtonGroup').css({opacity: 0});
- 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);
- });
+ !app.user('hash') && app.user({hash: 'about'});
+ app.fn.hashchange();
+ app.$ui.screen = $('.screen');
+ app.$ui.logo = $('.logo')
+ .bind({
+ click: function() {
+ app.fn.hash(
+ app.fn.hash() ? '' : app.user('hash')
+ );
+ app.fn.animate();
+ }
+ });
+ $('.icon').animate({opacity: 0}, 1000, function() {
+ $('.icon').remove();
+ });
+ ['label', 'menu', 'switch'].forEach(function(element) {
+ app.$ui[element] = app.ui[element]()
+ .appendTo(Ox.$body);
+ });
+ app.menuWidth = app.$ui.menu.width();
+ app.switchWidth = app.$ui.switch.width();
+ css = app.fn.getCSS();
+ ['label', 'menu', 'switch'].forEach(function(element) {
+ app.$ui[element]
+ .css(Ox.extend(css[element], {opacity: 0}))
+ .animate({opacity: 1}, 1000);
+ });
+ });
+ });
+ }, 2500);
},
resize: function() {
@@ -168,23 +641,6 @@ Ox.load(function() {
);
},
- 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();
},
@@ -223,158 +679,15 @@ Ox.load(function() {
},
- ui: {
- doc: 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/',
- replace: [app.re.code],
- });
- },
- examples: function() {
- return Ox.ExamplePanel({
- examples: app.data.examples,
- keywords: /\b(Ox\.[\w]+)\b/g,
- path: 'examples/',
- replaceCode: [app.re.code],
- replaceComment: [app.re.comment],
- selected: ''
- })
- .bindEvent({
- select: function(data) {
- app.fn.url(
- 'examples' + (data.id ? '/' + data.id : '')
- )
- }
- });
- },
-
- line: function() {
- return (Ox.UI ? $ : Ox.$)('
')
- .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.$)('![]()
')
- .addClass('ui logo')
- .attr({
- src: app.fn.getLogoURL()
- })
- .bind({
- click: function() {
- app.fn.url(app.fn.url() ? '' : app.user('url'));
- }
- });
- },
-
- page: function(page) {
- var $element = Ox.Container();
- Ox.get('readme/html/_' + page + '.html', function(html) {
- $('
')
- .addClass('OxSerif page')
- .html(html)
- .appendTo($element);
- });
- return $element;
- },
-
- panel: function() {
- return Ox.UI
- ? Ox.SplitPanel({
- elements: [
- {
- element: Ox.Bar({size: 32}),
- size: 32
- },
- {
- element: Ox.Element()
- }
- ],
- orientation: 'vertical'
- })
- .css({opacity: 0})
- : Ox.$('
').append(
- Ox.$('
').addClass('bar').css({
- width: '100%',
- height: '32px'
- })
- );
- },
-
- readme: function() {
- return Ox.Element();
- },
-
- sections: function() {
- var $element = (Ox.UI ? $ : Ox.$)('
').addClass('ui sections');
- [
- 'about', 'readme', 'examples', 'doc',
- 'downloads', 'dev', 'contact'
- ].forEach(function(section, i) {
- Ox.$('')
- .addClass('button' + (
- app.user('section') == section ? ' selected' : ''
- ))
- .html(Ox.toTitleCase(
- section == 'doc' ? 'documentation'
- : section == 'dev' ? 'development'
- : 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.$)('
').addClass('ui themes');
- ['classic', 'modern'].forEach(function(theme, i) {
- Ox.$('')
- .addClass('button' + (
- 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'),
+ user: Ox.localStorage('OxJS')
};
- app.url = app.fn.url();
- app.window = app.fn.window();
app.fn.load();
-});
\ No newline at end of file
+ window.oxjs = app; // so that you can play with it in the console
+
+});
+*/
\ No newline at end of file