create actual backbone view for publisher aspect selection
This commit is contained in:
Florian Staudacher
parent
253ab23f5e
commit
9560a8ec61
5 changed files with 103 additions and 89 deletions
|
|
@ -99,7 +99,7 @@ app.Router = Backbone.Router.extend({
|
|||
|
||||
app.page = new app.views.Stream({model : app.stream});
|
||||
app.publisher = app.publisher || new app.views.Publisher({collection : app.stream.items});
|
||||
app.publisher.updateAspectsSelector(ids);
|
||||
app.publisher.setSelectedAspects(ids);
|
||||
|
||||
var streamFacesView = new app.views.StreamFaces({collection : app.stream.items});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
/* Copyright (c) 2010-2012, Diaspora Inc. This file is
|
||||
* licensed under the Affero General Public License version 3 or later. See
|
||||
* the COPYRIGHT file.
|
||||
*/
|
||||
|
||||
(function(){
|
||||
// mixin-object, used in conjunction with the publisher to provide the
|
||||
// functionality for selecting aspects
|
||||
app.views.PublisherAspectsSelector = {
|
||||
|
||||
// event handler for aspect selection
|
||||
toggleAspect: function(evt) {
|
||||
var el = $(evt.target);
|
||||
var btn = el.parent('.dropdown').find('.button');
|
||||
|
||||
// visually toggle the aspect selection
|
||||
if( el.is('.radio') ) {
|
||||
AspectsDropdown.toggleRadio(el);
|
||||
} else {
|
||||
AspectsDropdown.toggleCheckbox(el);
|
||||
}
|
||||
|
||||
// update the selection summary
|
||||
this._updateAspectsNumber(el);
|
||||
|
||||
this._updateSelectedAspectIds();
|
||||
},
|
||||
|
||||
updateAspectsSelector: function(ids){
|
||||
var el = this.$("ul.dropdown_list");
|
||||
this.$('.dropdown_list > li').each(function(){
|
||||
var el = $(this);
|
||||
var aspectId = el.data('aspect_id');
|
||||
if (_.contains(ids, aspectId)) {
|
||||
el.addClass('selected');
|
||||
}
|
||||
else {
|
||||
el.removeClass('selected');
|
||||
}
|
||||
});
|
||||
|
||||
this._updateAspectsNumber(el);
|
||||
this._updateSelectedAspectIds();
|
||||
},
|
||||
|
||||
// take care of the form fields that will indicate the selected aspects
|
||||
_updateSelectedAspectIds: function() {
|
||||
var self = this;
|
||||
|
||||
// remove previous selection
|
||||
this.$('input[name="aspect_ids[]"]').remove();
|
||||
|
||||
// create fields for current selection
|
||||
this.$('.dropdown .dropdown_list li.selected').each(function() {
|
||||
var el = $(this);
|
||||
var aspectId = el.data('aspect_id');
|
||||
|
||||
self._addHiddenAspectInput(aspectId);
|
||||
|
||||
// close the dropdown when a radio item was selected
|
||||
if( el.is('.radio') ) {
|
||||
el.closest('.dropdown').removeClass('active');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_updateAspectsNumber: function(el){
|
||||
AspectsDropdown.updateNumber(
|
||||
el.closest(".dropdown_list"),
|
||||
null,
|
||||
el.parent().find('li.selected').length,
|
||||
''
|
||||
);
|
||||
},
|
||||
|
||||
_addHiddenAspectInput: function(id) {
|
||||
var uid = _.uniqueId('aspect_ids_');
|
||||
this.$('.content_creation form').append(
|
||||
'<input id="'+uid+'" name="aspect_ids[]" type="hidden" value="'+id+'">'
|
||||
);
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
/* Copyright (c) 2010-2012, Diaspora Inc. This file is
|
||||
* licensed under the Affero General Public License version 3 or later. See
|
||||
* the COPYRIGHT file.
|
||||
*/
|
||||
|
||||
// Aspects view for the publisher.
|
||||
// Provides the ability to specify the visibility of posted content as public
|
||||
// or limited to selected aspects
|
||||
app.views.PublisherAspectSelector = Backbone.View.extend({
|
||||
|
||||
events: {
|
||||
"click .dropdown_list > li": "toggleAspect"
|
||||
},
|
||||
|
||||
// event handler for aspect selection
|
||||
toggleAspect: function(evt) {
|
||||
var el = $(evt.target);
|
||||
var btn = el.parent('.dropdown').find('.button');
|
||||
|
||||
// visually toggle the aspect selection
|
||||
if( el.is('.radio') ) {
|
||||
AspectsDropdown.toggleRadio(el);
|
||||
} else {
|
||||
AspectsDropdown.toggleCheckbox(el);
|
||||
}
|
||||
|
||||
// update the selection summary
|
||||
this._updateAspectsNumber(el);
|
||||
|
||||
this._updateSelectedAspectIds();
|
||||
},
|
||||
|
||||
// select a (list of) aspects in the dropdown selector by the given list of ids
|
||||
updateAspectsSelector: function(ids){
|
||||
var el = this.$("ul.dropdown_list");
|
||||
this.$('.dropdown_list > li').each(function(){
|
||||
var el = $(this);
|
||||
var aspectId = el.data('aspect_id');
|
||||
if (_.contains(ids, aspectId)) {
|
||||
el.addClass('selected');
|
||||
}
|
||||
else {
|
||||
el.removeClass('selected');
|
||||
}
|
||||
});
|
||||
|
||||
this._updateAspectsNumber(el);
|
||||
this._updateSelectedAspectIds();
|
||||
},
|
||||
|
||||
// take care of the form fields that will indicate the selected aspects
|
||||
_updateSelectedAspectIds: function() {
|
||||
var self = this;
|
||||
|
||||
// remove previous selection
|
||||
this.options.form.find('input[name="aspect_ids[]"]').remove();
|
||||
|
||||
// create fields for current selection
|
||||
this.$('.dropdown_list li.selected').each(function() {
|
||||
var el = $(this);
|
||||
var aspectId = el.data('aspect_id');
|
||||
|
||||
self._addHiddenAspectInput(aspectId);
|
||||
|
||||
// close the dropdown when a radio item was selected
|
||||
if( el.is('.radio') ) {
|
||||
el.closest('.dropdown').removeClass('active');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_updateAspectsNumber: function(el){
|
||||
AspectsDropdown.updateNumber(
|
||||
el.closest(".dropdown_list"),
|
||||
null,
|
||||
el.parent().find('li.selected').length,
|
||||
''
|
||||
);
|
||||
},
|
||||
|
||||
_addHiddenAspectInput: function(id) {
|
||||
var uid = _.uniqueId('aspect_ids_');
|
||||
this.options.form.append(
|
||||
'<input id="'+uid+'" name="aspect_ids[]" type="hidden" value="'+id+'">'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -3,13 +3,12 @@
|
|||
* the COPYRIGHT file.
|
||||
*/
|
||||
|
||||
//= require ./publisher/services
|
||||
//= require ./publisher/aspects_selector
|
||||
//= require ./publisher/publisher_services
|
||||
//= require ./publisher/publisher_aspect_selector
|
||||
//= require ./publisher/getting_started
|
||||
//= require jquery.textchange
|
||||
|
||||
app.views.Publisher = Backbone.View.extend(_.extend(
|
||||
app.views.PublisherAspectsSelector,
|
||||
app.views.PublisherGettingStarted, {
|
||||
|
||||
el : "#publisher",
|
||||
|
|
@ -21,7 +20,6 @@ app.views.Publisher = Backbone.View.extend(_.extend(
|
|||
"submit form" : "createStatusMessage",
|
||||
"click .post_preview_button" : "createPostPreview",
|
||||
"textchange #status_message_fake_text": "handleTextchange",
|
||||
"click .dropdown .dropdown_list li": "toggleAspect",
|
||||
"click #locator" : "showLocation",
|
||||
"click #hide_location" : "destroyLocation",
|
||||
"keypress #location_address" : "avoidEnter"
|
||||
|
|
@ -72,11 +70,23 @@ app.views.Publisher = Backbone.View.extend(_.extend(
|
|||
},
|
||||
|
||||
initSubviews: function() {
|
||||
var form = this.$('.content_creation form');
|
||||
|
||||
this.view_services = new app.views.PublisherServices({
|
||||
el: this.$('#publisher_service_icons'),
|
||||
input: this.el_input,
|
||||
form: this.$('.content_creation form')
|
||||
form: form
|
||||
});
|
||||
|
||||
this.view_aspect_selector = new app.views.PublisherAspectSelector({
|
||||
el: this.$('.public_toggle > .dropdown'),
|
||||
form: form
|
||||
});
|
||||
},
|
||||
|
||||
// set the selected aspects in the dropdown by their ids
|
||||
setSelectedAspects: function(ids) {
|
||||
this.view_aspect_selector.updateAspectsSelector(ids);
|
||||
},
|
||||
|
||||
createStatusMessage : function(evt) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue