diff --git a/index.js b/index.js index fb6ee506..d8f18684 100644 --- a/index.js +++ b/index.js @@ -33,7 +33,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( var app = window.oxjs = { $ui: {}, animate: function() { - var home = app.url.get().page == ''; + var home = app.url.parse().page == ''; app.state.animating = true; if (home) { app.$ui.logo.attr({src: app.getSRC('logo')}); @@ -96,7 +96,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( db: Ox.localStorage('OxJS'), getCSS: function(element) { var css = {}, - home = app.url.get().page == '', + home = app.url.parse().page == '', center = Math.floor(window.innerWidth / 2), middle = Math.floor(window.innerHeight / 2); if (element == 'label') { @@ -174,16 +174,16 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( }); }, load: function(browserSupported) { - var url = app.url.get(); - app.user.page = url.page; - if (url.item && url.page in app.user.item) { - app.user.item[url.page] = url.item; + var data = app.url.parse(); + app.user.page = data.page; + if (data.item && data.page in app.user.item) { + app.user.item[data.page] = data.item; } app.db(app.user); app.$ui.panel = app.ui.panel() .select(app.user.page) .appendTo(Ox.$body); - // jqueryfy so that we can animate + // jquerify so that we can animate ['screen', 'logo', 'loading'].forEach(function(element) { app.$ui[element] = $('.' + element); }); @@ -202,7 +202,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( app.load(true); } }); - } else if (!url.page) { + } else if (!data.page) { app.$ui.logo .css({cursor: 'pointer'}) .on({click: app.toggle}); @@ -235,7 +235,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( .animate({opacity: 1}, 500); }); } - Ox.$window.on({hashchange: app.urlchange}); + Ox.$window.on({hashchange: app.url.change}); app.state.loaded = true; }, loadData: function(callback) { @@ -390,8 +390,8 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( loaded: false }, toggle: function() { - !app.state.animating && app.url.set( - app.url.get().page ? { + !app.state.animating && app.url.push( + app.url.parse().page ? { page: '', item: '' } : { @@ -434,15 +434,11 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( }) .bindEvent({ example: function(data) { - app.url.set({ - page: 'examples', - item: {examples: data.id} - }); + app.url.push({page: 'examples', item: data.id}); }, select: function(data) { app.user.item.doc = data.id; - app.db(app.user); - app.url.set(); + app.url.push(); } }) .bindEventOnce({ @@ -464,6 +460,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( }) .html(app.data.html.examples), examples: app.data.examples, + mode: app.url.parse().mode || 'source', path: 'examples/', references: /\b(Ox\.[\w\$]+(?=\W))/g, replaceCode: [app.re.code], @@ -471,10 +468,16 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( selected: app.user.item.examples }) .bindEvent({ + change: function(data) { + app.url.push({ + page: 'examples', + item: app.user.item.examples, + mode: data.value == 'live' ? 'live' : '' + }); + }, select: function(data) { app.user.item.examples = data.id; - app.db(app.user); - app.url.set(); + app.url.push(); } }); }, @@ -513,7 +516,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( .addClass('menu animate') .bindEvent({ change: function(data) { - data.value && app.url.set({page: data.value}); + data.value && app.url.push({page: data.value}); } }) ); @@ -540,8 +543,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( change: function(data) { if (app.state.loaded) { app.user.page = data.selected; - app.db(app.user); - app.url.set(); + app.url.push(); } } }); @@ -628,8 +630,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( }); }); app.user.item.readme = id; - app.db(app.user); - app.url.set(); + app.url.push(); } return $panel; }, @@ -659,33 +660,74 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( } }, url: { - get: function() { - var split = window.location.hash.slice(1).split('/'); - return {page: split[0], item: split[1] || ''}; + change: function() { + var data = app.url.parse(); + app.user.previousPage = app.user.page; + app.user.page = data.page; + if (data.page in app.user.item) { + app.user.item[data.page] = data.item; + } + app.db(app.user); + if (app.user.page != app.user.previousPage) { + app.$ui.panel.select(app.user.page); + } + if (app.user.page) { + app.$ui[app.user.page].options(Ox.extend({ + selected: data.item + }, app.user.page == 'examples' ? { + mode: data.mode || 'source' + } : {})); + } + if (!app.user.page || !app.user.previousPage) { + app.animate(); + } + Ox.print('URL CHANGE', JSON.stringify(data)); }, - set: function(data) { - data = data || app.user; - window.location.hash = data.page + ( - data.item && data.item[data.page] - ? '/' + data.item[data.page] : '' - ); + format: function(data) { + var hash = ''; + data = data || { + page: app.user.page, + item: app.user.item[app.user.page] || '' + }; + if (data.page) { + hash = '#' + data.page; + if (data.item && data.page in app.user.item) { + hash += '/' + data.item; + if (data.page == 'examples' && data.mode == 'live') { + hash += '/live'; + } + } + } + Ox.print('URL FORMAT', JSON.stringify(data), hash); + return hash; + }, + parse: function(hash) { + hash = hash || window.location.hash; + var data = {}, formattedHash, split = hash.slice(1).split('/'); + data.page = Ox.getObjectById(app.data.pages, split[0]) + ? split[0] : ''; + data.item = data.page in app.user.item && split[1] + ? split[1] : ''; + data.mode = data.page == 'examples' && split[2] == 'live' + ? 'live' : ''; + Ox.print('URL PARSE', hash, JSON.stringify(data)) + formattedHash = app.url.format(data); + hash != formattedHash && app.url.replace(formattedHash); + return data; + }, + push: function(data) { + Ox.print('PUSH', JSON.stringify(data)) + window.location.hash = app.url.format(data); + return app; + }, + replace: function(hash) { + var location = window.location; + if (history.replaceState) { + history.replaceState( + {}, '', location.origin + location.pathname + hash + ); + } return app; - } - }, - urlchange: function() { - 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; - } - app.db(app.user); - if (app.user.page != app.user.previousPage) { - app.$ui.panel.select(app.user.page); - } - url.page && app.$ui[url.page].options({selected: url.item}); - if (!app.user.page || !app.user.previousPage) { - app.animate(); } }, user: {}