Migrate settings page to Backbone

This commit is contained in:
Ricardo Tomasi 2013-06-08 02:05:40 -03:00
parent c82e5976cc
commit e2b3c40a34
10 changed files with 376 additions and 300 deletions

2
app.js
View File

@ -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);

View File

@ -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'
}
});
}());

View File

@ -6,18 +6,25 @@
Ghost.Router = Backbone.Router.extend({
routes: {
'content/': 'blog',
'editor': 'editor',
'editor/': 'editor',
'editor/:id': 'editor'
'content/' : 'blog',
'settings/' : 'settings',
'settings(/:pane)' : 'settings',
'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) {

View File

@ -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));

View File

@ -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: {
}
});
}());

View File

@ -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'),

View File

@ -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>

View File

@ -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,191 +9,193 @@
<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="services"><a href="#">Connected Services</a></li>
<li class="plugins"><a href="#">Plugins</a></li>
<li class="appearance"><a href="#appearance">Appearance</a></li>
<li class="services"><a href="#services">Connected Services</a></li>
<li class="plugins"><a href="#plugins">Plugins</a></li>
</ul>
</nav>
</aside>
<section id="general" class="settings-content active">
<header>
<h2 class="title">General</h2>
<section class="page-actions">
<button class="button-save">Save</button>
<div class="settings-container">
<section id="general" class="settings-content active">
<header>
<h2 class="title">General</h2>
<section class="page-actions">
<button class="button-save">Save</button>
</section>
</header>
<section class="content">
{{#with settings}}
<form id="settings-general">
<fieldset>
<label>
<b>Blog Title</b>
<input id="blog-title" type="text" value="{{title}}" />
<p>How your blog name appears on the site</p>
</label>
<label>
<b>Blog Logo</b>
<img src="/core/admin/assets/img/logo.png" alt="logo" height="38" width="381"/>
<p>Display a logo on your site in place of blog title</p>
</label>
<label>
<b>Blog Icon</b>
<img src="/core/admin/assets/img/test-icon.png" alt="logo" height="38" width="38"/>
<p>The icon for your blog, used in your browser tab and elsewhere</p>
</label>
<label>
<b>Email Address</b>
<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
</label>
</label>
<label>
<b>URL Structure</b>
<select id="url-structure" name="general[urlstructure]">
<option value="post-name">Simple Post Name</option>
<option value="date-based">Date Based</option>
<option value="number based">Number Based</option>
<option value="custom">Custom...</option>
</select>
</label>
</fieldset>
<hr />
<fieldset>
<label>
<b>Time Zone</b>
<select id="url-structure" name="general[timezone]">
<option value="1">Vienna (UTC+1)</option>
</select>
</label>
</fieldset>
{{/with}}
</form>
</section>
</header>
<section class="content">
{{#with settings}}
<form id="settings-general">
<fieldset>
<label>
<b>Blog Title</b>
<input id="blog-title" type="text" value="{{title}}" />
<p>How your blog name appears on the site</p>
</label>
<label>
<b>Blog Logo</b>
<img src="/core/admin/assets/img/logo.png" alt="logo" height="38" width="381"/>
<p>Display a logo on your site in place of blog title</p>
</label>
<label>
<b>Blog Icon</b>
<img src="/core/admin/assets/img/test-icon.png" alt="logo" height="38" width="38"/>
<p>The icon for your blog, used in your browser tab and elsewhere</p>
</label>
<label>
<b>Email Address</b>
<input id="email-address" type="text" value="john@tryghost.org" />
<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
</label>
</label>
<label>
<b>URL Structure</b>
<select id="url-structure" name="general[urlstructure]">
<option value="post-name">Simple Post Name</option>
<option value="date-based">Date Based</option>
<option value="number based">Number Based</option>
<option value="custom">Custom...</option>
</select>
</label>
</fieldset>
<hr />
<fieldset>
<label>
<b>Time Zone</b>
<select id="url-structure" name="general[timezone]">
<option value="1">Vienna (UTC+1)</option>
</select>
</label>
</fieldset>
{{/with}}
</form>
</section>
</section>
<section id="content" class="settings-content">
<header>
<h2 class="title">Content</h2>
<section class="page-actions">
<button class="button-save">Save</button>
<section id="content" class="settings-content">
<header>
<h2 class="title">Content</h2>
<section class="page-actions">
<button class="button-save">Save</button>
</section>
</header>
<section class="content">
<form id="settings-general">
<fieldset>
<label>
<b>Typography</b>
<select id="url-structure" name="general[urlstructure]">
<option value="post-name">Lato (Light)</option>
</select>
<p>Sexy sans-serif font that will make your toes tickle.</p>
<label class="checkbox">
<input type="checkbox" value="1" /> Load fonts directly from Google
</label>
</label>
<label>
<b>Post Options</b>
<label class="checkbox">
<input type="checkbox" value="1" /> Display Post Meta
<p>Post Author / Date / Views</p>
</label>
<label class="checkbox">
<input type="checkbox" value="1" /> Show Author Box After Post
</label>
<label class="checkbox">
<input type="checkbox" value="1" /> Enable Comments
</label>
</label>
</fieldset>
<hr />
<fieldset>
<label>
<b>SEO Title Pattern</b>
<input id="seo-title" type="text" value="[Post Name] - [Site Title]" />
<p>The pattern used to display your title tags</p>
</label>
<label>
<b>SEO Description Pattern</b>
<input id="seo-description" type="text" value="Auto" />
<p>The pattern used to display your meta descriptions</p>
</label>
<label>
<b>Google+</b>
<label class="checkbox">
<input type="checkbox" value="1" /> Connect to author profile on Google
</label>
</label>
<label>
<b>Home Page Description</b>
<textarea></textarea>
<p>Display a logo on your site in place of blog title</p>
</label>
</fieldset>
</form>
</section>
</header>
<section class="content">
<form id="settings-general">
<fieldset>
<label>
<b>Typography</b>
<select id="url-structure" name="general[urlstructure]">
<option value="post-name">Lato (Light)</option>
</select>
<p>Sexy sans-serif font that will make your toes tickle.</p>
<label class="checkbox">
<input type="checkbox" value="1" /> Load fonts directly from Google
</label>
</label>
<label>
<b>Post Options</b>
<label class="checkbox">
<input type="checkbox" value="1" /> Display Post Meta
<p>Post Author / Date / Views</p>
</label>
<label class="checkbox">
<input type="checkbox" value="1" /> Show Author Box After Post
</label>
<label class="checkbox">
<input type="checkbox" value="1" /> Enable Comments
</label>
</label>
</fieldset>
<hr />
<fieldset>
<label>
<b>SEO Title Pattern</b>
<input id="seo-title" type="text" value="[Post Name] - [Site Title]" />
<p>The pattern used to display your title tags</p>
</label>
<label>
<b>SEO Description Pattern</b>
<input id="seo-description" type="text" value="Auto" />
<p>The pattern used to display your meta descriptions</p>
</label>
<label>
<b>Google+</b>
<label class="checkbox">
<input type="checkbox" value="1" /> Connect to author profile on Google
</label>
</label>
<label>
<b>Home Page Description</b>
<textarea></textarea>
<p>Display a logo on your site in place of blog title</p>
</label>
</fieldset>
</form>
</section>
</section>
<section id="users" class="settings-content">
<header>
<h2 class="title">Users</h2>
<section class="page-actions">
<button class="button-add">Add User</button>
<section id="users" class="settings-content">
<header>
<h2 class="title">Users</h2>
<section class="page-actions">
<button class="button-add">Add User</button>
</section>
</header>
<section class="content">
<h6 class="sub">Invited Users</h6>
<ul class="users">
<li class="clearfix">
<div class="user_image"></div>
<div class="user_info">
<span class="name">Some Name</span>
<span class="timestamp">Invitation Sent: 7 hours ago</span>
</div>
</li>
</ul>
<h6 class="sub">Active Users</h6>
<ul class="users">
<li class="clearfix">
<div class="user_image">
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
</div>
<div class="user_info">
<span class="name">Some Name</span>
<span class="timestamp">Last Seen: 7 hours ago</span>
</div>
<label class="admin">Admin</label>
</li>
<li class="clearfix">
<div class="user_image">
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
</div>
<div class="user_info">
<span class="name">Some Name</span>
<span class="timestamp">Last Seen: 2 days ago</span>
</div>
<label class="editor">Editor</label>
</li>
</ul>
</section>
</header>
<section class="content">
<h6 class="sub">Invited Users</h6>
<ul class="users">
<li class="clearfix">
<div class="user_image"></div>
<div class="user_info">
<span class="name">Some Name</span>
<span class="timestamp">Invitation Sent: 7 hours ago</span>
</div>
</li>
</ul>
<h6 class="sub">Active Users</h6>
<ul class="users">
<li class="clearfix">
<div class="user_image">
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
</div>
<div class="user_info">
<span class="name">Some Name</span>
<span class="timestamp">Last Seen: 7 hours ago</span>
</div>
<label class="admin">Admin</label>
</li>
<li class="clearfix">
<div class="user_image">
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
</div>
<div class="user_info">
<span class="name">Some Name</span>
<span class="timestamp">Last Seen: 2 days ago</span>
</div>
<label class="editor">Editor</label>
</li>
</ul>
</section>
</section>
</div>
</div>

View File

@ -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) {
return dataProvider.Setting.edit(options);
edit: function (settings) {
settings = settingsCollection(settings);
return dataProvider.Settings.edit(settings).then(settingsObject);
},
add: function (settings) {
settings = settingsCollection(settings);
return dataProvider.Settings.add(settings).then(settingsObject);
}
};

View File

@ -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
};
}());