diff --git a/index.css b/index.css index 58c03f92..a88042b7 100644 --- a/index.css +++ b/index.css @@ -100,19 +100,10 @@ body.OxThemeModern, } .OxThemeClassic .page { - background: rgb(255, 255, 255); + background-color: rgb(255, 255, 255); } .OxThemeModern .page { - background: rgb(0, 0, 0); -} - -.OxThemeClassic .logo, -.OxThemeClassic .page { - box-shadow: 0 0 1px rgb(0, 0, 0) -} -.OxThemeModern .logo, -.OxThemeModern .page { - box-shadow: 0 0 1px rgb(255, 255, 255) + background-color: rgb(0, 0, 0); } .OxThemeClassic .readme .item.selected { @@ -121,3 +112,15 @@ body.OxThemeModern, .OxThemeModern .readme .item.selected { background: rgb(32, 32, 32); } + +.OxThemeClassic .logo, +.OxThemeClassic .page, +.OxThemeClassic .readme .OxSyntaxHighlighter { + box-shadow: 0 0 1px rgb(0, 0, 0) +} +.OxThemeModern .logo, +.OxThemeModern .page, +.OxThemeModern .readme .OxSyntaxHighlighter { + box-shadow: 0 0 1px rgb(255, 255, 255) +} + diff --git a/index.js b/index.js index 33d9d515..66f143b2 100644 --- a/index.js +++ b/index.js @@ -2,8 +2,9 @@ Ox.load(function() { var app = { $ui: {}, - animate: function() { + animate: function(callback) { var home = !app.url.get(); + app.state.animating = true; if (home) { app.$ui.logo.attr({ src: app.getSRC('logo') @@ -11,10 +12,10 @@ Ox.load(function() { app.$ui.screen.show(); app.$ui.label.show(); app.$ui.menu.options({value: ''}).show(); - app.$ui.panel.find('.OxButtonGroup').css({opacity: 0}); } else { app.$ui.menu.options({value: app.user('url').split('/')[0]}); } + app.$ui.panel.find('.OxButtonGroup').css({opacity: 0}); [ 'screen', 'logo', 'label', 'menu', 'switch' ].forEach(function(element) { @@ -31,12 +32,14 @@ Ox.load(function() { app.$ui.label.hide(); app.$ui.menu.hide().options({value: ''}); } + app.state.animating = false; + callback(); } : void 0 ); }); }, data: { - sections: [ + pages: [ {id: 'about', title: 'About'}, {id: 'readme', title: 'Readme'}, {id: 'examples', title: 'Examples'}, @@ -55,19 +58,21 @@ Ox.load(function() { top: middle + 16 + 'px', left: center - 128 + 'px', width: '240px', + height: '14px', fontSize: '11px', opacity: 1 } : { top: '26px', left: '4px', width: '32px', + height: '4px', fontSize: '1px', opacity: 0 } } else if (element == 'loading') { css.top = middle + 40 + 'px' } else if (element == 'logo') { - css = home || !app.loaded ? { + css = home || !app.state.loaded ? { left: center - 128 + 'px', top: middle - 128 + 'px', width: '256px', @@ -115,11 +120,12 @@ Ox.load(function() { src = 'source/Ox.UI/themes/' + theme + '/svg/symbolLoadingAnimated.svg' } else if (element == 'logo') { - src = 'source/Ox.UI/themes/' + theme - + '/png/logo' + (home || !app.loaded ? 128 : 16) + '.png' + src = 'source/Ox.UI/themes/' + theme + '/png/logo' + + (home || !app.state.loaded ? 128 : 16) + '.png' } return src; }, + history: {}, init: function() { app.loadScreen(function() { app.loadData(function() { @@ -135,7 +141,7 @@ Ox.load(function() { app.user({url: 'about'}); } app.$ui.panel = app.ui.panel() - .select(app.user('url')) + .select(app.url.parse(app.user('url')).page) .appendTo(Ox.$body); // jqueryfy so that we can animate ['screen', 'logo', 'loading'].forEach(function(element) { @@ -160,9 +166,7 @@ Ox.load(function() { app.$ui.logo .css({cursor: 'pointer'}) .bind({ - click: function() { - app.url.set(app.url.get() ? '' : app.user('url')); - } + click: app.toggle }); ['label', 'menu', 'switch'].forEach(function(element) { app.$ui[element] = app.ui[element]() @@ -175,9 +179,8 @@ Ox.load(function() { } else { ['label', 'menu', 'switch'].forEach(function(element) { app.$ui[element] = app.ui[element]().appendTo(Ox.$body); - app.$ui[element].css(app.getCSS(element)); + app.$ui[element].css(app.getCSS(element)).hide(); }); - app.$ui.menu.hide(); app.$ui.screen.animate({opacity: 0}, 500, function() { app.$ui.screen.hide(); }); @@ -189,17 +192,18 @@ Ox.load(function() { app.$ui.logo .css({cursor: 'pointer'}) .bind({ - click: function() { - app.url.set(app.url.get() ? '' : app.user('url')); - } + click: app.toggle }); }); + app.$ui.switch.css({opacity: 0}).show().animate({ + opacity: 1 + }, 500); }); } Ox.$window.bind({ hashchange: app.urlchange }); - app.loaded = true; + app.state.loaded = true; }, loadData: function(callback) { Ox.getJSON('index.json', function(data) { @@ -207,7 +211,6 @@ Ox.load(function() { callback(); }); }, - loaded: false, loadScreen: function(callback) { app.setTheme(app.user('theme') || 'classic'); app.$ui.screen = app.ui.screen(); @@ -226,7 +229,6 @@ Ox.load(function() { resize: app.resize }); }, - previousURL: '', re: { code: [ new RegExp( @@ -281,6 +283,15 @@ Ox.load(function() { : Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme) ); }, + state: { + animating: false, + loaded: false + }, + toggle: function() { + !app.state.animating && app.url.set( + app.url.get() ? '' : app.user('url') + ); + }, ui: { doc: function() { return Ox.DocPanel({ @@ -308,7 +319,7 @@ Ox.load(function() { }) .bindEvent({ select: function(data) { - app.url.push( + app.url.set( 'examples' + (data.id ? '/' + data.id : '') ) } @@ -321,10 +332,8 @@ Ox.load(function() { width: 256 }) .addClass('label animate') - .bindEvent({ - anyclick: function() { - app.url.set(app.url.get() ? '' : app.user('url')); - } + .bind({ + click: app.toggle }); }, loading: function() { @@ -341,7 +350,7 @@ Ox.load(function() { }, menu: function() { return Ox.ButtonGroup({ - buttons: app.data.sections, + buttons: app.data.pages, min: 0, selectable: true, }) @@ -365,41 +374,42 @@ Ox.load(function() { panel: function() { return Ox.TabPanel({ content: function(id) { - return app.ui[id] ? app.ui[id]() : app.ui.page(id); + return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id); }, size: 32, - tabs: app.data.sections + tabs: app.data.pages }) .bindEvent({ change: function(data) { - app.url.push(data.selected); + app.state.loaded && app.url.set(data.selected); } }); }, readme: function() { var $list = Ox.Container().css({overflowY: 'scroll'}), $text = Ox.Container().addClass('OxSerif text'), - $panel = Ox.SplitPanel({ + self = {}, + that = Ox.SplitPanel({ elements: [ {element: $list, size: 256}, {element: $text} ], orientation: 'horizontal' - }) + }, self) .addClass('readme'); app.data.readme.forEach(function(item, i) { var $item = $('