Merge pull request #5109 from wegotcoders/4886-auto-add-poll-answer

4886 auto add poll answer

Changelog.md

@@ -26,6 +26,7 @@
 * Change minimal birth year for the birthday field to 1910 [#5083](https://github.com/diaspora/diaspora/pull/5083)
 * Add scrolling thumbnail switcher in the lightbox [#5102](https://github.com/diaspora/diaspora/pull/5102)
 * Add help section about keyboard shortcuts [#5100](https://github.com/diaspora/diaspora/pull/5100)
+* Automatically add poll answers as needed [#5109](https://github.com/diaspora/diaspora/pull/5109)
 
 # 0.4.0.1
 

app/assets/javascripts/app/views/publisher/poll_creator_view.js

@@ -2,7 +2,7 @@ app.views.PublisherPollCreator = app.views.Base.extend({
   templateName: "poll_creator",
   
   events: {
-    'click .add-answer .button': 'clickAddAnswer',
+    'keypress input:last': 'addAnswer',
     'click .remove-answer': 'removeAnswer',
     'blur input': 'validate',
     'input input': 'validate'
@@ -12,13 +12,13 @@ app.views.PublisherPollCreator = app.views.Base.extend({
     this.$pollAnswers = this.$('.poll-answers');
     this.inputCount = 2;
     this.trigger('change');
+    this.bind('publisher:sync', this.render, this);
   },
 
-  clickAddAnswer: function(evt){
-    evt.preventDefault();
-
+  addAnswer: function(evt){
+    if (!$(evt.target).val()) {
       this.addAnswerInput();
-    this.trigger('change');
+    }
   },
   
   addAnswerInput: function(){
@@ -26,11 +26,7 @@ app.views.PublisherPollCreator = app.views.Base.extend({
     var input_wrapper = this.$('.poll-answer:first').clone();
     var input = input_wrapper.find('input');
 
-    var text = Diaspora.I18n.t('publisher.option', {
-      nr: this.inputCount
-    });
-
-    input.attr('placeholder', text);
+    input.attr('placeholder', Diaspora.I18n.t('publisher.add_option'));
     input.val('');
     this.$pollAnswers.append(input_wrapper);
     this.toggleRemoveAnswer();
@@ -47,6 +43,13 @@ app.views.PublisherPollCreator = app.views.Base.extend({
     this.toggleRemoveAnswer();
   },
 
+  removeLastAnswer: function (){
+    var inputs = this.$pollAnswers.find('input');
+    if(inputs.length > 2 && !inputs[inputs.length - 1].value) {
+      this.$el.find('.poll-answer:last').remove();
+    }
+  },
+
   toggleRemoveAnswer: function(){
     var inputs = this.$pollAnswers.find('input');
     if(inputs.length < 3){
@@ -63,7 +66,7 @@ app.views.PublisherPollCreator = app.views.Base.extend({
 
   validate: function(evt){
     var input = $(evt.target);
-    this.validateInput(input);
+    this.validatePoll();
     this.trigger('change');
   },
 
@@ -87,18 +90,17 @@ app.views.PublisherPollCreator = app.views.Base.extend({
 
   validatePoll: function() {
     var _this = this;
-    _.each(this.$('input:visible'), function(input){
-      _this.validateInput($(input));
-    });
-  },
+    var inputs = this.$('input:visible');
+    var pollValid = true;
 
-  isValidPoll: function(){
-    var _this = this;
-
-    return _.every(this.$('input:visible'), function(input){
-      if(_this.isValidInput($(input))) 
-        return true;
-    });
+    _.each(inputs, function(input, i){
+      // Validate the input unless it is the last one, or there are only the
+      // question field and two options
+      if( i !== inputs.length - 1 || inputs.length <= 3) {
+        if(_this.validateInput($(input)) == false) pollValid = false;
+      }      
+    });
+
+    return pollValid;
   }
-
 });

app/assets/javascripts/app/views/publisher_view.js

@@ -82,6 +82,11 @@ app.views.Publisher = Backbone.View.extend({
       this.showSpinner(false);
     });
 
+    // resetting the poll view 
+    this.on('publisher:sync', function() {
+      this.view_poll_creator.render();
+    });
+
     this.initSubviews();
     return this;
   },
@@ -151,6 +156,11 @@ app.views.Publisher = Backbone.View.extend({
 
     if(evt){ evt.preventDefault(); }
 
+    // Auto-adding a poll answer always leaves an empty box when the user starts
+    // typing in the last box. We'll delete the last one to avoid submitting an 
+    // empty poll answer and failing validation.
+    this.view_poll_creator.removeLastAnswer();
+
     //add missing mentions at end of post:
     this.handleTextchange();
 
@@ -179,6 +189,7 @@ app.views.Publisher = Backbone.View.extend({
         if( app.publisher ) {
           app.publisher.$el.trigger('ajax:success');
           app.publisher.trigger('publisher:sync');
+          self.view_poll_creator.trigger('publisher:sync');
         }
 
         if(app.stream) app.stream.addNow(statusMessage.toJSON());
@@ -447,10 +458,7 @@ app.views.Publisher = Backbone.View.extend({
   _submittable: function() {
     var onlyWhitespaces = ($.trim(this.el_input.val()) === ''),
         isPhotoAttached = (this.el_photozone.children().length > 0),
-        isValidPoll = this.view_poll_creator.isValidPoll();
-
-    // show poll errors
-    this.view_poll_creator.validatePoll();
+        isValidPoll = this.view_poll_creator.validatePoll();
 
     return (!onlyWhitespaces || isPhotoAttached) && isValidPoll && !this.disabled;
   },

app/assets/templates/poll_creator_tpl.jst.hbs

@@ -6,19 +6,15 @@
 <div class="poll-answers">
   <div class="poll-answer control-group">
     <div class="controls">
-      <input type="text" name="poll_answers[]" placeholder="{{t 'publisher.option' nr=1}}">
+      <input type="text" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
       <div class="remove-answer icons-deletelabel"></div>
     </div>
   </div>
   <div class="poll-answer control-group">
     <div class="controls">
-      <input type="text" name="poll_answers[]" placeholder="{{t 'publisher.option' nr=2}}">
+      <input type="text" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
       <div class="remove-answer icons-deletelabel"></div>
     </div>
   </div>
 </div>
-<div class="control-group add-answer">
-  <div href="#" class="button creation">
-    {{t 'publisher.add_option' }}
-  </div>
-</div>
+

config/locales/javascript/javascript.en.yml

@@ -50,8 +50,8 @@ en:
       limited: "Limited - your post will only be seen by people you are sharing with"
       public: "Public - your post will be visible to everyone and found by search engines"
       near_from: "Posted from: <%= location %>"
-      option: "Option <%= nr %>"
-      add_option: "Add option"
+      option: "Answer"
+      add_option: "Add an answer"
       question: "Question"
     bookmarklet:
       post_something: "Post to diaspora*"

features/desktop/post_with_a_poll.feature

@@ -23,14 +23,16 @@ Feature: posting with a poll
       Given "#publisher-poll-creator" is hidden
       When I expand the publisher
       And I press the element "#poll_creator"
-      And I press the element ".add-answer .button.creation"
+      And I fill in values for the first two options
+      And I lose focus 
       Then I should see 3 options
 
     Scenario: delete an option
       Given "#publisher-poll-creator" is hidden
       When I expand the publisher
       And I press the element "#poll_creator"
-      And I press the element ".add-answer .button.creation"
+      And I fill in values for the first two options
+      And I lose focus 
       And I delete the last option
       Then I should see 2 option
       And I should not see a remove icon

features/step_definitions/post_with_poll_steps.rb

@@ -23,11 +23,22 @@ When /^I check the first option$/ do
   first(".poll_form input").click
 end
 
-And /^I press the element "([^"]*)"$/ do |selector|
+When(/^I press the element "(.*?)"$/) do |selector|
   page.should have_css(selector)
   find(selector).click
 end
 
+
+When(/^I fill in values for the first two options$/) do
+  all(".poll-answer input").each_with_index do |answer, i|
+    answer.set "answer option #{i}"
+  end
+end
+
+When(/^I lose focus$/) do
+  find("#publisher-poll-creator").click
+end
+
 Then /^I should see an element "([^"]*)"$/ do |selector|
   page.should have_css(selector)
 end