Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save shawn-simon/8447863 to your computer and use it in GitHub Desktop.
Save shawn-simon/8447863 to your computer and use it in GitHub Desktop.
Backbone loading spinner
var BaseView = Backbone.View.extend({
initialize: function(options) {
this.init_loader();
}
init_loader: function() {
this.loader = {};
Backbone.View.prototype.on('workstart', this.start_work, this);
Backbone.View.prototype.on('workcomplete', this.end_work, this);
this.loader = new LoaderView();
$('body').append(this.loader.render().el);
this.loader.tasks = 0;
this.loader.modalTasks = 0;
},
start_work: function(opt){
console.log(opt)
opt = opt || {};
if (opt.count == null) opt.count = 1;
if (opt.isModal == null) opt.isModal = false;
var originalTasks = this.loader.tasks;
var originalModalTasks = this.loader.modalTasks;
if (opt.isModal)
{
this.loader.modalTasks += opt.count;
if (originalModalTasks == 0 && this.loader.modalTasks > 0)
{
console.log('Displaying modal loader.')
this.loader.showModal();
}
}
else
{
this.loader.tasks += opt.count;
if (originalTasks == 0 && this.loader.tasks > 0)
{
console.log('Displaying spinner loader.')
this.loader.showSpinner();
}
}
console.log('Started ' + opt.count + ' work items. In queue: ' + (this.loader.tasks + this.loader.modalTasks));
},
end_work: function(opt)
{
opt = opt || {};
if (opt.count == null) opt.count = 1;
if (opt.isModal == null) opt.isModal = false;
var originalTasks = this.loader.tasks;
var originalModalTasks = this.loader.modalTasks;
if (opt.isModal)
{
this.loader.modalTasks -= opt.count;
if (originalModalTasks > 0 && this.loader.modalTasks == 0)
{
console.log('Hiding modal loader.')
this.loader.hideModal();
}
}
else
{
this.loader.tasks -= opt.count;
if (originalTasks > 0 && this.loader.tasks == 0)
{
console.log('Hiding spinner loader.')
this.loader.hideSpinner();
}
}
if (this.tasks < 0 || this.modalTasks < 0)
{
throw "Loader has a negative number of work items in its queue. This should never happen."
}
console.log('Ended ' + opt.count + ' work items. In queue: ' + (this.loader.tasks + this.loader.modalTasks));
}
}
var LoaderView = Backbone.View.extend({
template: "#base_loader_template",
tagName: "div",
id: "loader",
className: "hide",
showModal: function()
{
throw "Not implemented."
},
hideModal: function()
{
throw "Not implemented."
},
showSpinner: function()
{
this.$el.show();
},
hideSpinner: function()
{
this.$el.hide();
}
});
// Now to call it in code:
var selected_campaigns = this.get_selected_campaigns();
this.trigger('workstart', {count: selected_campaigns.length});
this.collection.move_campaigns_to_group(selected_campaigns, campaign_group_id, campaign_group_name, function() {
that.trigger('workcomplete');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment