From 9560a8ec61d6beb56979ea1f60e08a9c53508807 Mon Sep 17 00:00:00 2001 From: Florian Staudacher Date: Fri, 30 Aug 2013 01:56:26 +0200 Subject: [PATCH] create actual backbone view for publisher aspect selection --- app/assets/javascripts/app/router.js | 2 +- .../app/views/publisher/aspects_selector.js | 83 ------------------ .../publisher/publisher_aspect_selector.js | 87 +++++++++++++++++++ .../{services.js => publisher_services.js} | 0 .../javascripts/app/views/publisher_view.js | 20 +++-- 5 files changed, 103 insertions(+), 89 deletions(-) delete mode 100644 app/assets/javascripts/app/views/publisher/aspects_selector.js create mode 100644 app/assets/javascripts/app/views/publisher/publisher_aspect_selector.js rename app/assets/javascripts/app/views/publisher/{services.js => publisher_services.js} (100%) diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js index b4b74eb7f..169c1e32c 100644 --- a/app/assets/javascripts/app/router.js +++ b/app/assets/javascripts/app/router.js @@ -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}); diff --git a/app/assets/javascripts/app/views/publisher/aspects_selector.js b/app/assets/javascripts/app/views/publisher/aspects_selector.js deleted file mode 100644 index d3b364265..000000000 --- a/app/assets/javascripts/app/views/publisher/aspects_selector.js +++ /dev/null @@ -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( - '' - ); - } - }; -})(); diff --git a/app/assets/javascripts/app/views/publisher/publisher_aspect_selector.js b/app/assets/javascripts/app/views/publisher/publisher_aspect_selector.js new file mode 100644 index 000000000..49c0f6567 --- /dev/null +++ b/app/assets/javascripts/app/views/publisher/publisher_aspect_selector.js @@ -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( + '' + ); + } +}); diff --git a/app/assets/javascripts/app/views/publisher/services.js b/app/assets/javascripts/app/views/publisher/publisher_services.js similarity index 100% rename from app/assets/javascripts/app/views/publisher/services.js rename to app/assets/javascripts/app/views/publisher/publisher_services.js diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index 62260fada..9a8cd2ee3 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/app/assets/javascripts/app/views/publisher_view.js @@ -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) {