From 79fb1fb968734933259d0bb77530d5acf0cbe59e Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Mon, 16 Apr 2012 09:13:42 +0200
Subject: [PATCH] slightly more functional url controller

---
 index.js | 142 +++++++++++++++++++++++++++++--------------------------
 1 file changed, 75 insertions(+), 67 deletions(-)

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.$('<link>').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();