From aa11f7c2616d8fb592ae96bc5148cd7372e6c76e Mon Sep 17 00:00:00 2001 From: op48 Date: Mon, 4 Aug 2014 14:48:55 +0100 Subject: [PATCH 1/2] Poll answers are added dynamically on keypress Removed add option button poll option can be added dynamically & last option removed if empty upon submission Poll answer can be added dynamically by losing focus poll option can be added dynamically & last option removed if empty upon submission refractored to avoid repetition of publisher:sync event poll option can be added dynamically & last option removed if empty upon submission Added a missing semicolon --- .../app/views/publisher/poll_creator_view.js | 21 ++++++++++++------- .../javascripts/app/views/publisher_view.js | 7 +++++++ app/assets/templates/poll_creator_tpl.jst.hbs | 6 +----- features/desktop/post_with_a_poll.feature | 6 ++++-- .../step_definitions/post_with_poll_steps.rb | 15 +++++++++++-- 5 files changed, 39 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/app/views/publisher/poll_creator_view.js b/app/assets/javascripts/app/views/publisher/poll_creator_view.js index 158512e4a..f563485c9 100644 --- a/app/assets/javascripts/app/views/publisher/poll_creator_view.js +++ b/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(); - this.addAnswerInput(); - this.trigger('change'); + addAnswer: function(evt){ + if (!$(evt.target).val()) { + this.addAnswerInput(); + } }, addAnswerInput: function(){ @@ -47,6 +47,13 @@ app.views.PublisherPollCreator = app.views.Base.extend({ this.toggleRemoveAnswer(); }, + removeLastAnswer: function (){ + var inputs = this.$pollAnswers.find('input'); + if(inputs.length > 2) { + this.$el.find('.poll-answer:last').remove(); + } + }, + toggleRemoveAnswer: function(){ var inputs = this.$pollAnswers.find('input'); if(inputs.length < 3){ @@ -96,7 +103,7 @@ app.views.PublisherPollCreator = app.views.Base.extend({ var _this = this; return _.every(this.$('input:visible'), function(input){ - if(_this.isValidInput($(input))) + if(_this.isValidInput($(input))) return true; }); } diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index 6d983737d..01d495dae 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/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; }, @@ -150,6 +155,7 @@ app.views.Publisher = Backbone.View.extend({ var self = this; if(evt){ evt.preventDefault(); } + this.view_poll_creator.removeLastAnswer(); //add missing mentions at end of post: this.handleTextchange(); @@ -179,6 +185,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()); diff --git a/app/assets/templates/poll_creator_tpl.jst.hbs b/app/assets/templates/poll_creator_tpl.jst.hbs index e8d50a84d..95e5cfcd4 100644 --- a/app/assets/templates/poll_creator_tpl.jst.hbs +++ b/app/assets/templates/poll_creator_tpl.jst.hbs @@ -17,8 +17,4 @@ -
-
- {{t 'publisher.add_option' }} -
-
+ diff --git a/features/desktop/post_with_a_poll.feature b/features/desktop/post_with_a_poll.feature index f2f64cd67..807ec908f 100644 --- a/features/desktop/post_with_a_poll.feature +++ b/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 diff --git a/features/step_definitions/post_with_poll_steps.rb b/features/step_definitions/post_with_poll_steps.rb index 60fb3eeb7..7dd3abba1 100644 --- a/features/step_definitions/post_with_poll_steps.rb +++ b/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 -Then /^I should see an element "([^"]*)"$/ do |selector| + +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 From 66fcfcfcbcb41e1d535784d5fc6c8d5bfa985f90 Mon Sep 17 00:00:00 2001 From: op48 Date: Thu, 7 Aug 2014 11:28:22 +0100 Subject: [PATCH 2/2] Ignoring validation for last poll answer input last input field is only deleted if there are more than three input fields and the last one is empty poll is validated only if the last input is empty, and the first three have been filled Removed duplicate remove last answer. Dont need to check that the last value is populated as we are ignoring last value Fixing poll step Placeholder text edited Fixed translations for poll answer placeholder text Removed numbers on publisher option Removed numbers in placeholder for poll answers --- .../app/views/publisher/poll_creator_view.js | 31 ++++++++----------- .../javascripts/app/views/publisher_view.js | 9 +++--- app/assets/templates/poll_creator_tpl.jst.hbs | 4 +-- config/locales/javascript/javascript.en.yml | 4 +-- .../step_definitions/post_with_poll_steps.rb | 2 +- 5 files changed, 23 insertions(+), 27 deletions(-) diff --git a/app/assets/javascripts/app/views/publisher/poll_creator_view.js b/app/assets/javascripts/app/views/publisher/poll_creator_view.js index f563485c9..ebc6755aa 100644 --- a/app/assets/javascripts/app/views/publisher/poll_creator_view.js +++ b/app/assets/javascripts/app/views/publisher/poll_creator_view.js @@ -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(); @@ -49,7 +45,7 @@ app.views.PublisherPollCreator = app.views.Base.extend({ removeLastAnswer: function (){ var inputs = this.$pollAnswers.find('input'); - if(inputs.length > 2) { + if(inputs.length > 2 && !inputs[inputs.length - 1].value) { this.$el.find('.poll-answer:last').remove(); } }, @@ -70,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'); }, @@ -94,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; } - }); diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index 01d495dae..a975522de 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/app/assets/javascripts/app/views/publisher_view.js @@ -155,6 +155,10 @@ app.views.Publisher = Backbone.View.extend({ var self = this; 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: @@ -454,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; }, diff --git a/app/assets/templates/poll_creator_tpl.jst.hbs b/app/assets/templates/poll_creator_tpl.jst.hbs index 95e5cfcd4..f71d46f01 100644 --- a/app/assets/templates/poll_creator_tpl.jst.hbs +++ b/app/assets/templates/poll_creator_tpl.jst.hbs @@ -6,13 +6,13 @@
- +
- +
diff --git a/config/locales/javascript/javascript.en.yml b/config/locales/javascript/javascript.en.yml index a8e9ea909..a413d01d6 100644 --- a/config/locales/javascript/javascript.en.yml +++ b/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*" diff --git a/features/step_definitions/post_with_poll_steps.rb b/features/step_definitions/post_with_poll_steps.rb index 7dd3abba1..2b3725c3c 100644 --- a/features/step_definitions/post_with_poll_steps.rb +++ b/features/step_definitions/post_with_poll_steps.rb @@ -39,6 +39,6 @@ When(/^I lose focus$/) do find("#publisher-poll-creator").click end -Then /^I should see an element '([^"]*)'$/ do |selector| +Then /^I should see an element "([^"]*)"$/ do |selector| page.should have_css(selector) end