You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2013/10/28 17:14:07 UTC
[50/50] git commit: updated refs/heads/1853-fauxton-route-events to
b70b7ae
Fauxton: Add routeobject events
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/b70b7aea
Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/b70b7aea
Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/b70b7aea
Branch: refs/heads/1853-fauxton-route-events
Commit: b70b7aead8f8a931cb48920bfae020ef5cd1b95f
Parents: 6c1605c
Author: Garren Smith <ga...@gmail.com>
Authored: Mon Oct 28 17:02:27 2013 +0200
Committer: Garren Smith <ga...@gmail.com>
Committed: Mon Oct 28 17:02:27 2013 +0200
----------------------------------------------------------------------
src/fauxton/app/api.js | 167 +++++++++++++++++--------
src/fauxton/app/modules/fauxton/layout.js | 2 +-
src/fauxton/app/router.js | 6 +-
3 files changed, 117 insertions(+), 58 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb/blob/b70b7aea/src/fauxton/app/api.js
----------------------------------------------------------------------
diff --git a/src/fauxton/app/api.js b/src/fauxton/app/api.js
index 96d4586..6ad95f7 100644
--- a/src/fauxton/app/api.js
+++ b/src/fauxton/app/api.js
@@ -226,6 +226,43 @@ function(app, Fauxton) {
this.addEvents();
};
+ var broadcaster = {};
+ _.extend(broadcaster, Backbone.Events);
+
+ FauxtonAPI.RouteObject.on = function (eventName, fn) {
+ broadcaster.on(eventName, fn);
+ };
+
+ /* How Route Object events work
+ To listen to a specific route objects events:
+
+ myRouteObject = FauxtonAPI.RouteObject.extend({
+ events: {
+ "beforeRender": "beforeRenderEvent"
+ },
+
+ beforeRenderEvent: function (view, selector) {
+ console.log('Hey, beforeRenderEvent triggered',arguments);
+ },
+ });
+
+ It is also possible to listen to events triggered from all Routeobjects.
+ This is great for more general things like adding loaders, hooks.
+
+ FauxtonAPI.RouteObject.on('beforeRender', function (routeObject, view, selector) {
+ console.log('hey, this will trigger when any routeobject renders a view');
+ });
+
+ Current Events to subscribe to:
+ * beforeFullRender -- before a full render is being done
+ * beforeEstablish -- before the routeobject calls establish
+ * AfterEstablish -- after the routeobject has run establish
+ * beforeRender -- before a view is rendered
+ * afterRender -- a view is finished being rendered
+ * renderComplete -- all rendering is complete
+
+ */
+
// Piggy-back on Backbone's self-propagating extend function
FauxtonAPI.RouteObject.extend = Backbone.Model.extend;
@@ -249,15 +286,14 @@ function(app, Fauxton) {
}, {
renderWith: function(route, masterLayout, args) {
- var routeObject = this;
-
- // TODO: Can look at replacing this with events eg beforeRender, afterRender function and events
- this.route.call(this, route, args);
+ var routeObject = this,
+ triggerBroadcast = _.bind(this.triggerBroadcast, this);
// Only want to redo the template if its a full render
if (!this.renderedState) {
masterLayout.setTemplate(this.layout);
- $('#primary-navbar li').removeClass('active');
+ triggerBroadcast('beforeFullRender');
+ $('#primary-navbar li').removeClass('active');
if (this.selectedHeader) {
app.selectedHeader = this.selectedHeader;
@@ -274,61 +310,18 @@ function(app, Fauxton) {
}));
}
- if (!this.disableLoader){
- var opts = {
- lines: 16, // The number of lines to draw
- length: 8, // The length of each line
- width: 4, // The line thickness
- radius: 12, // The radius of the inner circle
- color: '#aaa', // #rbg or #rrggbb
- speed: 1, // Rounds per second
- trail: 10, // Afterglow percentage
- shadow: false // Whether to render a shadow
- };
-
- if (!$('.spinner').length) {
- $('<div class="spinner"></div>')
- .appendTo('#app-container');
- }
-
- var routeObjectSpinner = new Spinner(opts).spin();
- $('.spinner').append(routeObjectSpinner.el);
- }
-
+ triggerBroadcast('beforeEstablish');
FauxtonAPI.when(this.establish()).then(function(resp) {
+ triggerBroadcast('afterEstablish');
_.each(routeObject.getViews(), function(view, selector) {
if(view.hasRendered) { return; }
- if (!routeObject.disableLoader) {
- routeObjectSpinner.stop();
- $('.spinner').remove();
- }
-
- if (!view.disableLoader){
- var opts = {
- lines: 16, // The number of lines to draw
- length: 8, // The length of each line
- width: 4, // The line thickness
- radius: 12, // The radius of the inner circle
- color: '#ccc', // #rbg or #rrggbb
- speed: 1, // Rounds per second
- trail: 10, // Afterglow percentage
- shadow: false // Whether to render a shadow
- };
- var viewSpinner = new Spinner(opts).spin();
- $('<div class="spinner"></div>')
- .appendTo(selector)
- .append(viewSpinner.el);
- }
-
+ triggerBroadcast('beforeRender', view, selector);
FauxtonAPI.when(view.establish()).then(function(resp) {
masterLayout.setView(selector, view);
- if (!view.disableLoader){
- viewSpinner.stop();
- }
-
masterLayout.renderView(selector);
+ triggerBroadcast('afterRender', view, selector);
}, function(resp) {
view.establishError = {
error: true,
@@ -346,14 +339,14 @@ function(app, Fauxton) {
masterLayout.renderView(selector);
});
- var hooks = masterLayout.hooks[selector];
+ /*var hooks = masterLayout.hooks[selector];
var boundRoute = route;
_.each(hooks, function(hook){
if (_.any(hook.routes, function(route){return route == boundRoute;})){
hook.callback(view);
}
- });
+ });*/
});
}.bind(this), function (resp) {
if (!resp) { return; }
@@ -371,6 +364,15 @@ function(app, Fauxton) {
// Track that we've done a full initial render
this.renderedState = true;
+ triggerBroadcast('renderComplete');
+ },
+
+ triggerBroadcast: function (eventName) {
+ var args = Array.prototype.slice.call(arguments);
+ this.trigger.apply(this, args);
+
+ args.splice(0,1, eventName, this);
+ broadcaster.trigger.apply(broadcaster, args);
},
get: function(key) {
@@ -452,6 +454,63 @@ function(app, Fauxton) {
});
+ // We could look at moving the spinner code out to its own module
+ var routeObjectSpinner;
+ FauxtonAPI.RouteObject.on('beforeEstablish', function (routeObject) {
+ if (!routeObject.disableLoader){
+ var opts = {
+ lines: 16, // The number of lines to draw
+ length: 8, // The length of each line
+ width: 4, // The line thickness
+ radius: 12, // The radius of the inner circle
+ color: '#aaa', // #rbg or #rrggbb
+ speed: 1, // Rounds per second
+ trail: 10, // Afterglow percentage
+ shadow: false // Whether to render a shadow
+ };
+
+ if (!$('.spinner').length) {
+ $('<div class="spinner"></div>')
+ .appendTo('#app-container');
+ }
+
+ routeObjectSpinner = new Spinner(opts).spin();
+ $('.spinner').append(routeObjectSpinner.el);
+ }
+ });
+
+ var viewSpinner;
+ FauxtonAPI.RouteObject.on('beforeRender', function (routeObject, view, selector) {
+ if (!routeObject.disableLoader) {
+ routeObjectSpinner.stop();
+ $('.spinner').remove();
+ }
+
+ if (!view.disableLoader){
+ var opts = {
+ lines: 16, // The number of lines to draw
+ length: 8, // The length of each line
+ width: 4, // The line thickness
+ radius: 12, // The radius of the inner circle
+ color: '#ccc', // #rbg or #rrggbb
+ speed: 1, // Rounds per second
+ trail: 10, // Afterglow percentage
+ shadow: false // Whether to render a shadow
+ };
+
+ viewSpinner = new Spinner(opts).spin();
+ $('<div class="spinner"></div>')
+ .appendTo(selector)
+ .append(viewSpinner.el);
+ }
+ });
+
+ FauxtonAPI.RouteObject.on('afterRender', function (routeObject, view, selector) {
+ if (!view.disableLoader){
+ viewSpinner.stop();
+ }
+ });
+
var extensions = _.extend({}, Backbone.Events);
// Can look at a remove function later.
FauxtonAPI.registerExtension = function (name, view) {
http://git-wip-us.apache.org/repos/asf/couchdb/blob/b70b7aea/src/fauxton/app/modules/fauxton/layout.js
----------------------------------------------------------------------
diff --git a/src/fauxton/app/modules/fauxton/layout.js b/src/fauxton/app/modules/fauxton/layout.js
index 47281e7..1422241 100644
--- a/src/fauxton/app/modules/fauxton/layout.js
+++ b/src/fauxton/app/modules/fauxton/layout.js
@@ -37,7 +37,7 @@ function(Backbone) {
});
this.layoutViews = {};
- this.hooks = {};
+ //this.hooks = {};
this.el = this.layout.el;
};
http://git-wip-us.apache.org/repos/asf/couchdb/blob/b70b7aea/src/fauxton/app/router.js
----------------------------------------------------------------------
diff --git a/src/fauxton/app/router.js b/src/fauxton/app/router.js
index 509cff4..9dac80c 100644
--- a/src/fauxton/app/router.js
+++ b/src/fauxton/app/router.js
@@ -97,7 +97,7 @@ function(req, app, Initialize, FauxtonAPI, Fauxton, Layout, Databases, Documents
}, this);
},
- setAddonHooks: function() {
+ /*setAddonHooks: function() {
_.each(LoadAddons.addons, function(module) {
// This is updates to views by the addon
if (module && module.hooks){
@@ -110,7 +110,7 @@ function(req, app, Initialize, FauxtonAPI, Fauxton, Layout, Databases, Documents
}, this);
}
}, this);
- },
+ },*/
initialize: function() {
//TODO: It would be nice to handle this with a router
@@ -124,7 +124,7 @@ function(req, app, Initialize, FauxtonAPI, Fauxton, Layout, Databases, Documents
// NOTE: This must be below creation of the layout
// FauxtonAPI header links and others depend on existence of the layout
- this.setAddonHooks();
+ //this.setAddonHooks();
this.setModuleRoutes();
$("#app-container").html(this.masterLayout.el);