Migrate settings page to Backbone

app.js

@@ -130,7 +130,7 @@
         ghost.app().get('/ghost/editor/:id', auth, admin.editor);
         ghost.app().get('/ghost/editor', auth, admin.editor);
         ghost.app().get('/ghost/content', auth, admin.content);
-        ghost.app().get('/ghost/settings', auth, admin.settings);
+        ghost.app().get('/ghost/settings*', auth, admin.settings);
         ghost.app().get('/ghost/debug', auth, admin.debug.index);
         ghost.app().get('/ghost/debug/db/delete/', auth, admin.debug.dbdelete);
         ghost.app().get('/ghost/debug/db/populate/', auth, admin.debug.dbpopulate);

core/admin/assets/js/models/settings.js

@@ -0,0 +1,16 @@
+/*global window, document, Ghost, $, Backbone, _ */
+(function () {
+    "use strict";
+
+    // Set the url manually and id to '0' to force PUT requests
+    Ghost.Models.Settings = Backbone.Model.extend({
+        url: '/api/v0.1/settings/',
+        id: "0",
+        defaults: {
+            title: 'My Blog',
+            description: '',
+            email: 'admin@tryghost.org'
+        }
+    });
+
+}());

core/admin/assets/js/router.js

@@ -6,18 +6,25 @@
     Ghost.Router = Backbone.Router.extend({
 
         routes: {
-            'content/': 'blog',
+            'content/'         : 'blog',
-            'editor': 'editor',
+            'settings/'        : 'settings',
-            'editor/': 'editor',
+            'settings(/:pane)' : 'settings',
-            'editor/:id': 'editor'
+            'editor/'          : 'editor',
+            'editor(/:id)'     : 'editor'
         },
 
         blog: function () {
             var posts = new Ghost.Collections.Posts();
-            posts.fetch({data: {status: 'all'}}).then(function () {
+            posts.fetch({ data: { status: 'all' } }).then(function () {
                 Ghost.currentView = new Ghost.Views.Blog({ el: '#main', collection: posts });
             });
+        },
 
+        settings: function (pane) {
+            var settings = new Ghost.Models.Settings();
+            settings.fetch().then(function () {
+                Ghost.currentView = new Ghost.Views.Settings({ el: '#main', model: settings, pane: pane });
+            });
         },
 
         editor: function (id) {

core/admin/assets/js/settings.js

@@ -1,60 +0,0 @@
-/*globals document, location, jQuery */
-(function ($) {
-    "use strict";
-
-    var changePage = function (e) {
-        var newPage = $(this).children('a').attr('href');
-
-        e.preventDefault();
-        $('.settings-menu .active').removeClass('active');
-        location.hash = $(this).attr('class'); // Placed here so never gets given the active attribute.
-        $(this).addClass('active');
-
-        $('.settings-content').fadeOut().delay(250);
-        $(newPage).fadeIn();
-
-    },
-
-        defaultSettings = {
-            title: 'My Blog',
-            description: ''
-        },
-
-        getSettings = function () {
-            return $.extend(defaultSettings, {
-                title       : $('#blog-title').val(),
-                description : $('#blog-description').val()
-            });
-        };
-
-    $(document).ready(function () {
-        if (location.hash) {
-            var page = $(".settings-menu li." + location.hash.replace('#', '')),
-                newPage = page.children('a').attr('href');
-            $('.settings-menu .active').removeClass('active');
-            page.addClass('active');
-
-            $('.settings-content').hide().delay(250);
-            $(newPage).show();
-        }
-        $('.settings-menu li').on('click', changePage);
-
-        $('input').iCheck({
-            checkboxClass: 'icheckbox_square-grey'
-        });
-
-        $('.button-save').click(function (e) {
-            e.preventDefault();
-            var data = getSettings();
-            $.ajax({
-                method: 'PUT',
-                url: '/api/v0.1/settings',
-                data: data,
-                success: function (res, xhr, c) {
-                    console.log(xhr, c);
-                }
-            });
-        });
-    });
-
-}(jQuery));

core/admin/assets/js/views/settings.js

@@ -0,0 +1,135 @@
+/*global window, document, Ghost, Backbone, $, _, alert */
+(function () {
+    "use strict";
+
+    var Settings = {};
+
+    // Base view
+    // ----------
+    Ghost.Views.Settings = Ghost.View.extend({
+        initialize: function (options) {
+            this.addSubview(new Settings.Sidebar({
+                el: '.settings-sidebar',
+                pane: options.pane,
+                model: this.model
+            }));
+
+            this.$('input').iCheck({
+                checkboxClass: 'icheckbox_square-grey'
+            });
+        }
+    });
+
+    // Sidebar (tabs)
+    // ---------------
+    Settings.Sidebar = Ghost.View.extend({
+        initialize: function (options) {
+            this.menu = this.$('.settings-menu');
+            this.showContent(options.pane || 'general');
+        },
+
+        events: {
+            'click .settings-menu li' : 'switchPane'
+        },
+
+        switchPane: function (e) {
+            e.preventDefault();
+            var item = $(e.currentTarget),
+                id = item.find('a').attr('href').substring(1);
+            this.showContent(id);
+        },
+
+        showContent: function (id) {
+            Backbone.history.navigate('/settings/' + id);
+            if (this.pane && '#' + id === this.pane.el) {
+                return;
+            }
+            _.result(this.pane, 'destroy');
+            this.setActive(id);
+            this.pane = new Settings[id]({ model: this.model });
+            this.pane.render();
+        },
+
+        setActive: function (id) {
+            this.menu.find('li').removeClass('active');
+            this.menu.find('a[href=#' + id + ']').parent().addClass('active');
+        }
+    });
+
+    // Content panes
+    // --------------
+    Settings.Pane = Ghost.View.extend({
+        destroy: function () {
+            this.$el.removeClass('active');
+        },
+
+        render: function () {
+            this.$el.addClass('active');
+        }
+    });
+
+    // TODO: render templates on the client
+    // TODO: use some kind of data-binding for forms
+
+    // ### General settings
+    Settings.general = Settings.Pane.extend({
+        el: '#general',
+        events: {
+            'click .button-save': 'saveSettings'
+        },
+
+        saveSettings: function () {
+            this.model.save({
+                title: this.$('#blog-title').val(),
+                email: this.$('#email-address').val()
+            }, {
+                success: function () {
+                    alert('Saved');
+                }
+            });
+        },
+
+        render: function () {
+            var settings = this.model.toJSON();
+            this.$('#blog-title').val(settings.title);
+            this.$('#email-address').val(settings.email);
+            Settings.Pane.prototype.render.call(this);
+        }
+    });
+
+    // ### Content settings
+    Settings.content = Settings.Pane.extend({
+        el: '#content',
+        events: {
+        }
+    });
+
+    // ### User settings
+    Settings.users = Settings.Pane.extend({
+        el: '#users',
+        events: {
+        }
+    });
+
+    // ### Appearance settings
+    Settings.appearance = Settings.Pane.extend({
+        el: '#appearance',
+        events: {
+        }
+    });
+
+    // ### Services settings
+    Settings.services = Settings.Pane.extend({
+        el: '#services',
+        events: {
+        }
+    });
+
+    // ### Plugins settings
+    Settings.plugins = Settings.Pane.extend({
+        el: '#plugins',
+        events: {
+        }
+    });
+
+}());

core/admin/controllers/index.js

@@ -144,8 +144,6 @@
         'settings': function (req, res) {
             api.settings.browse()
                 .then(function (settings) {
-                    settings = settings.toJSON();
-                    settings = _.object(_.pluck(settings, 'key'), _.pluck(settings, 'value'));
                     res.render('settings', {
                         bodyClass: 'settings',
                         adminNav: setSelected(adminNavbar, 'settings'),

core/admin/views/default.hbs

@@ -55,10 +55,12 @@
 
         <!-- // require '/core/admin/assets/js/models/*' -->
         <script src="/core/admin/assets/js/models/post.js"></script>
+        <script src="/core/admin/assets/js/models/settings.js"></script>
         <!-- // require '/core/admin/assets/js/views/*' -->
         <script src="/core/admin/assets/js/views/base.js"></script>
         <script src="/core/admin/assets/js/views/blog.js"></script>
         <script src="/core/admin/assets/js/views/editor.js"></script>
+        <script src="/core/admin/assets/js/views/settings.js"></script>
         <script src="/core/admin/assets/js/router.js"></script>
         {{{block "bodyScripts"}}}
         <script>

core/admin/views/settings.hbs

@@ -1,7 +1,3 @@
-{{#contentFor 'bodyScripts'}}
-    <script src="/core/admin/assets/js/settings.js"></script>
-{{/contentFor}}
-
 {{!< default}}
 <div class="wrapper">
     <aside class="settings-sidebar" role="complementary">
@@ -13,12 +9,13 @@
                 <li class="general active"><a href="#general">General</a></li>
                 <li class="publishing"><a href="#content">Content</a></li>
                 <li class="users"><a href="#users">Users</a></li>
-                <li class="appearance"><a href="#">Appearance</a></li>
+                <li class="appearance"><a href="#appearance">Appearance</a></li>
-                <li class="services"><a href="#">Connected Services</a></li>
+                <li class="services"><a href="#services">Connected Services</a></li>
-                <li class="plugins"><a href="#">Plugins</a></li>
+                <li class="plugins"><a href="#plugins">Plugins</a></li>
             </ul>
         </nav>
     </aside>
+    <div class="settings-container">
         <section id="general" class="settings-content active">
             <header>
                 <h2 class="title">General</h2>
@@ -50,7 +47,7 @@
 
                         <label>
                             <b>Email Address</b>
-                        <input id="email-address" type="text" value="john@tryghost.org" />
+                            <input id="email-address" type="text" value="{{email}}" />
                             <p>Address to use for <a href="#">admin notifications</a></p>
                             <label class="checkbox">
                                 <input type="checkbox" value="1" /> Show my email address on my public profile
@@ -200,4 +197,5 @@
                 </ul>
             </section>
         </section>
+    </div>
 </div>

core/shared/api.js

@@ -17,7 +17,9 @@
         posts,
         users,
         settings,
-        requestHandler;
+        requestHandler,
+        settingsObject,
+        settingsCollection;
 
     // # Posts
     posts = {
@@ -59,15 +61,38 @@
     };
 
     // # Settings
+
+    // Turn a settings collection into a single object/hashmap
+    settingsObject = function (settings) {
+        return (settings.toJSON ? settings.toJSON() : settings).reduce(function (res, item) {
+            if (item.toJSON) { item = item.toJSON(); }
+            if (item.key) { res[item.key] = item.value; }
+            return res;
+        }, {});
+    };
+    // Turn an object into a collection
+    settingsCollection = function (settings) {
+        return _.map(settings, function (value, key) {
+            return { key: key, value: value };
+        });
+    };
+
     settings = {
         browse: function (options) {
-            return dataProvider.Setting.browse(options);
+            return dataProvider.Settings.browse(options).then(settingsObject);
         },
         read: function (options) {
-            return dataProvider.Setting.read(options.key);
+            return dataProvider.Settings.read(options.key).then(function (setting) {
+                return _.pick(setting.toJSON(), 'key', 'value');
+            });
         },
-        edit: function (options) {
+        edit: function (settings) {
-            return dataProvider.Setting.edit(options);
+            settings = settingsCollection(settings);
+            return dataProvider.Settings.edit(settings).then(settingsObject);
+        },
+        add: function (settings) {
+            settings = settingsCollection(settings);
+            return dataProvider.Settings.add(settings).then(settingsObject);
         }
     };
 

core/shared/models/setting.js

@@ -1,45 +0,0 @@
-(function () {
-    "use strict";
-
-    var Setting,
-        Settings,
-        GhostBookshelf = require('./base'),
-        _ = require('underscore'),
-        when = require('when');
-
-    Setting = GhostBookshelf.Model.extend({
-
-        tableName: 'settings',
-
-        hasTimestamps: true
-
-    }, {
-
-        read: function (_key) {
-            // Allow for just passing the key instead of attributes
-            if (!_.isObject(_key)) {
-                _key = { key: _key };
-            }
-            return GhostBookshelf.Model.read.call(this, _key);
-        },
-
-        edit: function (_data) {
-            return when.all(_.map(_data, function (value, key) {
-                return this.forge({ key: key }).fetch().then(function (setting) {
-                    return setting.set('value', value).save();
-                });
-            }, this));
-        }
-
-    });
-
-    Settings = GhostBookshelf.Collection.extend({
-        model: Setting
-    });
-
-    module.exports = {
-        Setting: Setting,
-        Settings: Settings
-    };
-
-}());