diff --git a/index.js b/index.js index af1104be..a5d1d4e2 100644 --- a/index.js +++ b/index.js @@ -2,8 +2,8 @@ Ox.load(function() { var app = { $ui: {}, - animate: function(callback) { - var home = !app.url.get(); + animate: function() { + var home = app.url.get().page == ''; app.state.animating = true; if (home) { app.$ui.logo.attr({ @@ -13,7 +13,7 @@ Ox.load(function() { app.$ui.label.show(); app.$ui.menu.options({value: ''}).show(); } else { - app.$ui.menu.options({value: app.user('url').split('/')[0]}); + app.$ui.menu.options({value: app.user.page}); } app.$ui.panel.find('.OxButtonGroup').css({opacity: 0}); [ @@ -33,7 +33,6 @@ Ox.load(function() { app.$ui.menu.hide().options({value: ''}); } app.state.animating = false; - callback(); } : void 0 ); }); @@ -47,11 +46,17 @@ Ox.load(function() { {id: 'doc', title: 'Documentation'}, {id: 'downloads', title: 'Downloads'}, {id: 'development', title: 'Development'} - ] + ], + user: { + item: {doc: '', examples: '', readme: ''}, + page: '', + previousPage: 'about' + } }, + db: Ox.localStorage('OxJS'), getCSS: function(element) { var css = {}, - home = !app.url.get(), + home = app.url.get().page == '', center = Math.floor(window.innerWidth / 2), middle = Math.floor(window.innerHeight / 2); if (element == 'label') { @@ -114,8 +119,8 @@ Ox.load(function() { }, getSRC: function(element) { var src, - home = !app.url.get(), - theme = app.user('theme'); + home = app.url.get().page == '', + theme = app.user.theme; if (element == 'icon') { src = 'source/Ox.UI/themes/' + theme + '/png/icon16.png'; @@ -128,7 +133,6 @@ Ox.load(function() { } return src; }, - history: {}, html: {}, init: function() { app.loadScreen(function() { @@ -139,13 +143,14 @@ Ox.load(function() { }, load: function(browserSupported) { var url = app.url.get(); - if (url) { - app.user({url: url}) - } else if (!app.user('url')) { - app.user({url: 'about'}); + app.user = Ox.extend(app.data.user, app.db()) + app.user.page = url.page; + if (url.item && url.page in app.user.item) { + app.user.item[url.page] = url.item; } + app.db(app.user); app.$ui.panel = app.ui.panel() - .select(app.url.parse(app.user('url')).page) + .select(app.user.page) .appendTo(Ox.$body); // jqueryfy so that we can animate ['screen', 'logo', 'loading'].forEach(function(element) { @@ -166,7 +171,7 @@ Ox.load(function() { app.load(true); } }); - } else if (!url) { + } else if (!url.page) { app.$ui.logo .css({cursor: 'pointer'}) .bind({ @@ -222,7 +227,7 @@ Ox.load(function() { }); }, loadScreen: function(callback) { - app.setTheme(app.user('theme') || 'classic'); + app.setTheme(app.user.theme || 'classic'); app.$ui.screen = app.ui.screen(); app.$ui.loading = app.ui.loading(); app.$ui.logo = app.ui.logo() @@ -295,7 +300,8 @@ Ox.load(function() { }); }, setTheme: function(theme) { - app.user({theme: theme}); + app.user.theme = theme; + app.db(app.user); (Ox.$('#icon') || Ox.$('').attr({ id: 'icon', rel: 'shortcut icon', @@ -317,7 +323,14 @@ Ox.load(function() { }, toggle: function() { !app.state.animating && app.url.set( - app.url.get() ? '' : app.user('url') + app.url.get().page ? { + page: '', + item: '' + } : { + page: app.user.previousPage, + item: app.user.previousPage in app.user.item + ? app.user.item[app.user.previousPage] : '' + } ); }, ui: { @@ -341,13 +354,14 @@ Ox.load(function() { }, items: app.data.docItems || void 0, path: 'dev/', - replace: [app.re.code] + replace: [app.re.code], + selected: app.user.item.doc }) .bindEvent({ select: function(data) { - app.url.set( - 'doc' + (data.id ? '/' + data.id : '') - ) + app.user.item.doc = data.id; + app.db(app.user); + app.url.set(); } }) .bindEventOnce({ @@ -370,13 +384,13 @@ Ox.load(function() { path: 'examples/', replaceCode: [app.re.code], replaceComment: [app.re.comment], - selected: '' + selected: app.user.item.examples }) .bindEvent({ select: function(data) { - app.url.set( - 'examples' + (data.id ? '/' + data.id : '') - ) + app.user.item.examples = data.id; + app.db(app.user); + app.url.set(); } }); }, @@ -417,7 +431,9 @@ Ox.load(function() { .addClass('menu animate') .bindEvent({ change: function(data) { - data.value && app.url.set(data.value); + if (data.value) { + app.url.set({page: data.value}); + } } }) app.patchButtonGroup($menu); @@ -434,14 +450,19 @@ Ox.load(function() { panel: function() { var $panel = Ox.TabPanel({ content: function(id) { - return app.$ui[id] = 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: 36, tabs: app.data.pages }) .bindEvent({ change: function(data) { - app.state.loaded && app.url.set(data.selected); + if (app.state.loaded) { + app.user.page = data.selected; + app.db(app.user); + app.url.set(); + } } }), $buttonGroup = $panel.find('.OxButtonGroup').css({ @@ -488,7 +509,7 @@ Ox.load(function() { .html(Ox.formatDate(item.date, '%B %e, %Y', true)) .appendTo($item); }); - selectItem(self.options.selected); + selectItem(app.user.item.readme); function selectItem(id) { $('.readme .item.selected').removeClass('selected'); id && $('#readme_' + id).addClass('selected'); @@ -514,7 +535,9 @@ Ox.load(function() { ); }); }); - app.url.set('readme' + (id ? '/' + id : '')); + app.user.item.readme = id; + app.db(app.user); + app.url.set(); } self.setOption = function(key, value) { if (key == 'selected') { @@ -533,7 +556,7 @@ Ox.load(function() { {id: 'modern', title: 'Dark'} ], selectable: true, - value: app.user('theme') + value: app.user.theme }) .addClass('switch animate') .bindEvent({ @@ -557,51 +580,36 @@ Ox.load(function() { }, url: { get: function() { - return window.location.hash.substr(1); - }, - parse: function(url) { - var split = ( - url === void 0 ? app.url.get() : url - ).split('/'); + var split = window.location.hash.substr(1).split('/'); return {page: split[0], item: split[1] || ''}; }, - set: function(url) { - window.location.hash = '#' + url; + set: function(data) { + data = data || app.user; + window.location.hash = data.page + ( + data.item && data.item[data.page] ? '/' + data.item[data.page] : '' + ); return app; } }, urlchange: function() { - var url = app.url.get(), - current = app.url.parse(url); - url && app.user({url: url}); - 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); + var url = app.url.get(); + app.user.previousPage = app.user.page; + app.user.page = url.page; + if (url.item && url.page in app.user.item) { + app.user.item[url.page] = url.item; } - //if (current.item != app.history.item) { - if (current.item) { - Ox.print('setting selected!') - app.$ui[current.page].options({selected: current.item}); + app.db(app.user); + if (app.user.page != app.user.previousPage) { + app.$ui.panel.select(app.user.page); } - /* - if (Ox.in(['readme', 'examples', 'doc'], current.page)) { - Ox.print('cp',current.page, current.item) - app.$ui[current.page].options({selected: current.item}); + if (url.item) { + app.$ui[url.page].options({selected: url.item}); + } + if (!app.user.page || !app.user.previousPage) { + app.animate(); } - */ - (!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') + user: {} }; app.init();