From 706af769a813d38aab438a37c1bbe4d74b0917d6 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 8 Apr 2012 14:48:07 +0200 Subject: [PATCH] updating index.js --- index.css | 25 ++++---- index.js | 166 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 101 insertions(+), 90 deletions(-) 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 = $('
') .addClass('item') + .attr({id: 'readme_' + item.id}) .css({ width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px' }) .bind({ click: function(e) { - var $this = $(this); - if (!$this.is('.selected')) { - selectItem(item.id, $this); + if (!$(this).is('.selected')) { + selectItem(item.id); } else if (e.metaKey) { - selectItem(null, $this); + selectItem(); } } }) @@ -413,34 +423,30 @@ Ox.load(function() { .html(Ox.formatDate(item.date, '%B %e, %Y', true)) .appendTo($item); }); - function selectItem(id, $element) { + selectItem(self.options.selected); + function selectItem(id) { $('.readme .item.selected').removeClass('selected'); - if (id) { - $element.addClass('selected'); - Ox.get('readme/html/' + id + '.html', function(html) { - $text.html(html); - $text.find('.code').each(function() { - var $this = $(this); - $this.replaceWith( - Ox.SyntaxHighlighter({ - source: $this.text() - }) - .attr({id: $this.attr('id')}) - /* - .css({ - border: '1px solid rgb(192, 192, 192)' - }) - */ - ); - }); + id && $('#readme_' + id).addClass('selected'); + Ox.get('readme/html/' + (id || '_readme') + '.html', function(html) { + $text.html(html); + $text.find('.code').each(function() { + var $this = $(this); + $this.replaceWith( + Ox.SyntaxHighlighter({ + source: $this.text() + }) + .attr({id: $this.attr('id')}) + ); }); - app.url.push('readme/' + id); - } else { - $text.empty(); - app.url.push('readme'); + }); + app.url.set('readme' + (id ? '/' + id : '')); + } + self.setOption = function(key, value) { + if (key == 'selected') { + selectItem(value); } } - return $panel; + return that; }, screen: function() { return Ox.$('
').addClass('screen animate'); @@ -476,38 +482,40 @@ Ox.load(function() { get: function() { return window.location.hash.substr(1); }, - push: function(url) { - history.pushState({}, '', '#' + url); - url && app.user({url: url}); - return app; + parse: function(url) { + var split = ( + url === void 0 ? app.url.get() : url + ).split('/'); + return {page: split[0], item: split[1] || ''}; }, - set: function() { - window.location.hash = '#' + arguments[0]; + set: function(url) { + window.location.hash = '#' + url; return app; } }, urlchange: function() { var url = app.url.get(), - section = url.split('/')[0]; + current = app.url.parse(url); 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); + Ox.print(JSON.stringify({ + 'current': current, + 'history': app.history, + 'user.url': app.user('url') + }, null, ' ')); + if (current.page != app.history.page) { + app.$ui.panel.select(current.page); } - app[!url || !app.previousURL ? 'animate' : 'void'](function() { - app.previousURL = url; + if (Ox.in(['readme', 'examples', 'doc'], current.page)) { + Ox.print('cp',current.page, current.item) + app.$ui[current.page].options({selected: current.item}); + } + (!current.page || !app.history.page ? app.animate : Ox.void)(function() { + //app.url.replace(url); + app.history = current; + Ox.print('CALLBACK, HISTORY', app.history) }); }, - user: Ox.localStorage('OxJS'), - void: function(callback) { - callback(); - } + user: Ox.localStorage('OxJS') }; app.init();