From fed5ea8cdab3d69a2718a14651ac3597d702b2a0 Mon Sep 17 00:00:00 2001 From: Hincu Petru Date: Wed, 2 Apr 2014 15:56:06 +0000 Subject: [PATCH 1/2] Refactored poll_view.js --- .../app/models/poll_participation.js | 6 +- app/assets/javascripts/app/views/poll_view.js | 135 ++++++++---------- features/desktop/post_with_a_poll.feature | 16 ++- .../step_definitions/post_with_poll_steps.rb | 5 +- spec/javascripts/app/views/poll_view_spec.js | 22 +-- 5 files changed, 89 insertions(+), 95 deletions(-) diff --git a/app/assets/javascripts/app/models/poll_participation.js b/app/assets/javascripts/app/models/poll_participation.js index a31c35779..99b73645c 100644 --- a/app/assets/javascripts/app/models/poll_participation.js +++ b/app/assets/javascripts/app/models/poll_participation.js @@ -1,5 +1,5 @@ app.models.PollParticipation = Backbone.Model.extend({ - url : function(){ - "/poll_participations" + urlRoot: function(){ + return 'posts/' + this.get('post_id') + "/poll_participations"; } -}); \ No newline at end of file +}); diff --git a/app/assets/javascripts/app/views/poll_view.js b/app/assets/javascripts/app/views/poll_view.js index 9a1df2a88..18990c88d 100644 --- a/app/assets/javascripts/app/views/poll_view.js +++ b/app/assets/javascripts/app/views/poll_view.js @@ -1,94 +1,81 @@ app.views.Poll = app.views.Base.extend({ - templateName : "poll", + templateName: "poll", - events : { - "click .submit" : "vote", + events: { + "click .submit" : "clickSubmit", "click .toggle_result" : "toggleResult" }, - initialize : function(options) { + initialize: function(options) { + this.model.bind('change', this.render, this); + }, + + postRenderTemplate: function() { this.poll = this.model.attributes.poll; this.progressBarFactor = 3; - this.toggleMode = 0; - }, - - postRenderTemplate : function() { - if(this.poll) { - this.setProgressBar(); - } - }, - - removeForm : function() { - var cnt = this.$("form").contents(); - this.$("form").replaceWith(cnt); - this.$('input').remove(); - this.$('submit').remove(); - this.$('.toggle_result_wrapper').remove(); - }, - - setProgressBar : function() { - var answers = this.poll.poll_answers; - for(index = 0; index < answers.length; ++index) { - var percentage = 0; - if(this.poll.participation_count != 0) { - percentage = Math.round(answers[index].vote_count / this.poll.participation_count * 100); - } - var progressBar = this.$(".poll_progress_bar[data-answerid="+answers[index].id+"]"); - progressBar.parent().next().html(" - " + percentage + "%"); - var width = percentage * this.progressBarFactor; - progressBar.css("width", width + "px"); - } - }, - - toggleResult : function(e) { - this.$('.poll_progress_bar_wrapper').toggle(); - this.$('.percentage').toggle(); - if(this.toggleMode == 0) { - this.$('.toggle_result').html(Diaspora.I18n.t("poll.close_result")); - this.toggleMode = 1; - }else{ - this.$('.toggle_result').html(Diaspora.I18n.t("poll.show_result")); - this.toggleMode = 0; - } - return false; - }, - - refreshResult : function(answerId) { - this.updateCounter(answerId); this.setProgressBar(); }, - updateCounter : function(answerId) { - this.poll.participation_count++; - this.$('.poll_statistic').html(Diaspora.I18n.t("poll.count", {"count" : this.poll.participation_count})); + setProgressBar: function() { + if(!this.poll) return; + var answers = this.poll.poll_answers; - for(index = 0; index < answers.length; ++index) { - if(answers[index].id == answerId) { - answers[index].vote_count++; - return; + var participation_count = this.poll.participation_count; + var _this = this; + + _.each(answers, function(answer){ + var percent = 0; + if(participation_count > 0) { + percent = Math.round(answer.vote_count / participation_count * 100); } + + var progressBar = _this.$(".poll_progress_bar[data-answerid="+answer.id+"]"); + var width = percent * _this.progressBarFactor; + + progressBar.parent().next().html(" - " + percent + "%"); + progressBar.css("width", width + "px"); + }); + }, + + toggleResult: function(e) { + if(e) + e.preventDefault(); + + this.$('.poll_progress_bar_wrapper').toggle(); + this.$('.percentage').toggle(); + + var toggle_result = this.$('.toggle_result'); + + if(!this.toggleMode) { + toggle_result.html(Diaspora.I18n.t("poll.close_result")); + this.toggleMode = 1; + } + else { + toggle_result.html(Diaspora.I18n.t("poll.show_result")); + this.toggleMode = 0; } }, - vote : function(evt){ - var result = parseInt($(evt.target).parent().find("input[name=vote]:checked").val()); - var pollParticipation = new app.models.PollParticipation(); - var parent = this; - pollParticipation.save({ - "poll_answer_id" : result, - "poll_id" : this.poll.poll_id - },{ - url : "/posts/"+this.poll.post_id+"/poll_participations", - success : function(model, response) { - parent.removeForm(); - parent.refreshResult(result); - if(parent.toggleMode == 0) { - parent.toggleResult(null); - } + clickSubmit: function(evt) { + evt.preventDefault(); + var answer_id = parseInt($(evt.target).parent().find("input[name=vote]:checked").val()); + this.vote(answer_id); + }, + + vote: function(answer_id){ + var pollParticipation = new app.models.PollParticipation({ + poll_answer_id: answer_id, + poll_id: this.poll.poll_id, + post_id: this.poll.post_id, + }); + var _this = this; + + pollParticipation.save({},{ + success : function() { + _this.model.fetch(); } }); - return false; } -}); \ No newline at end of file +}); diff --git a/features/desktop/post_with_a_poll.feature b/features/desktop/post_with_a_poll.feature index 5d8b7b277..faed7efdd 100644 --- a/features/desktop/post_with_a_poll.feature +++ b/features/desktop/post_with_a_poll.feature @@ -62,4 +62,18 @@ Feature: posting with a poll And I press "Vote" within ".stream_element" Then I should see an element ".poll_progress_bar" And I should see an element ".percentage" - And I should see "1 vote so far" within ".poll_statistic" \ No newline at end of file + And I should see "1 vote so far" within ".poll_statistic" + + Scenario: click to show result + Given I expand the publisher + And I press the element "#poll_creator" + When I fill in the following: + | status_message_fake_text | I am eating yogurt | + | poll_question | What kind of yogurt do you like? | + And I fill in the following for the options: + | normal | + | not normal | + And I press "Share" + + And I press the element ".toggle_result" + Then I should see an element ".percentage" diff --git a/features/step_definitions/post_with_poll_steps.rb b/features/step_definitions/post_with_poll_steps.rb index 2ae5a78ba..e2ea6631a 100644 --- a/features/step_definitions/post_with_poll_steps.rb +++ b/features/step_definitions/post_with_poll_steps.rb @@ -19,14 +19,15 @@ When /^I fill in the following for the options:$/ do |table| end When /^I check the first option$/ do - sleep 1 + page.should have_css('.poll_form input') first(".poll_form input").click end And /^I press the element "([^"]*)"$/ do |selector| + page.should have_css(selector) find(selector).click end Then /^I should see an element "([^"]*)"$/ do |selector| page.should have_css(selector) -end \ No newline at end of file +end diff --git a/spec/javascripts/app/views/poll_view_spec.js b/spec/javascripts/app/views/poll_view_spec.js index 4ee1a2ef8..668d8dd85 100644 --- a/spec/javascripts/app/views/poll_view_spec.js +++ b/spec/javascripts/app/views/poll_view_spec.js @@ -21,25 +21,17 @@ describe("app.views.Poll", function(){ }) }); - describe("updateCounter", function(){ - it("updates the counter after a vote", function(){ - var pc = this.view.poll.participation_count; - var answerCount = this.view.poll.poll_answers[0].vote_count; - this.view.updateCounter(1); - expect(this.view.poll.participation_count).toBe(pc+1); - expect(this.view.poll.poll_answers[0].vote_count).toBe(answerCount+1); - }) - }); - describe("vote", function(){ it("checks the ajax call for voting", function(){ spyOn($, "ajax"); - var radio = this.view.$('input[name="vote"]:first'); - radio.attr('checked', true); - this.view.vote({'target' : radio}); + var answer = this.view.poll.poll_answers[0]; + var poll = this.view.poll; + + this.view.vote(answer.id); + var obj = JSON.parse($.ajax.mostRecentCall.args[0].data); - expect(obj.poll_id).toBe(this.view.poll.poll_id); - expect(obj.poll_answer_id).toBe(this.view.poll.poll_answers[0].id); + expect(obj.poll_id).toBe(poll.poll_id); + expect(obj.poll_answer_id).toBe(answer.id); }) }) }); From cee90e737c2c68725375e9cbb3c78726a060f333 Mon Sep 17 00:00:00 2001 From: Hincu Petru Date: Wed, 2 Apr 2014 22:25:03 +0000 Subject: [PATCH 2/2] Make poll to be compatible with bootstrap --- .../app/models/poll_participation.js | 2 +- .../app/views/poll_blueprint_view.js | 17 +++++ app/assets/javascripts/app/views/poll_view.js | 23 ++++--- .../single_post_content_view.js | 4 +- .../app/views/stream_post_views.js | 2 +- app/assets/stylesheets/new-templates.css.scss | 1 + app/assets/stylesheets/new_styles/_poll.scss | 35 ++++++++++ .../templates/poll_blueprint_tpl.jst.hbs | 32 ++++++++++ app/assets/templates/poll_tpl.jst.hbs | 64 +++++++++++-------- ...ew_spec.js => poll_blueprint_view_spec.js} | 4 +- 10 files changed, 143 insertions(+), 41 deletions(-) create mode 100644 app/assets/javascripts/app/views/poll_blueprint_view.js create mode 100644 app/assets/stylesheets/new_styles/_poll.scss create mode 100644 app/assets/templates/poll_blueprint_tpl.jst.hbs rename spec/javascripts/app/views/{poll_view_spec.js => poll_blueprint_view_spec.js} (91%) diff --git a/app/assets/javascripts/app/models/poll_participation.js b/app/assets/javascripts/app/models/poll_participation.js index 99b73645c..36b560dbe 100644 --- a/app/assets/javascripts/app/models/poll_participation.js +++ b/app/assets/javascripts/app/models/poll_participation.js @@ -1,5 +1,5 @@ app.models.PollParticipation = Backbone.Model.extend({ urlRoot: function(){ - return 'posts/' + this.get('post_id') + "/poll_participations"; + return '/posts/' + this.get('post_id') + "/poll_participations"; } }); diff --git a/app/assets/javascripts/app/views/poll_blueprint_view.js b/app/assets/javascripts/app/views/poll_blueprint_view.js new file mode 100644 index 000000000..ffb996961 --- /dev/null +++ b/app/assets/javascripts/app/views/poll_blueprint_view.js @@ -0,0 +1,17 @@ +//= require ./poll_view +app.views.PollBlueprint = app.views.Poll.extend({ + templateName: 'poll_blueprint', + + initialize: function(options) { + this.constructor.__super__.initialize.apply(this, options); + this.progressBarFactor = 3; + }, + setProgressBarData: function(progressBar, percent) { + progressBar.css('width', percent * this.progressBarFactor + 'px'); + progressBar.parent().next().html(" - " + percent + "%"); + }, + toggleElements: function() { + this.$('.poll_progress_bar_wrapper').toggle(); + this.$('.percentage').toggle(); + } +}); diff --git a/app/assets/javascripts/app/views/poll_view.js b/app/assets/javascripts/app/views/poll_view.js index 18990c88d..5b41f548c 100644 --- a/app/assets/javascripts/app/views/poll_view.js +++ b/app/assets/javascripts/app/views/poll_view.js @@ -12,7 +12,6 @@ app.views.Poll = app.views.Base.extend({ postRenderTemplate: function() { this.poll = this.model.attributes.poll; - this.progressBarFactor = 3; this.setProgressBar(); }, @@ -30,19 +29,20 @@ app.views.Poll = app.views.Base.extend({ } var progressBar = _this.$(".poll_progress_bar[data-answerid="+answer.id+"]"); - var width = percent * _this.progressBarFactor; - progressBar.parent().next().html(" - " + percent + "%"); - progressBar.css("width", width + "px"); + _this.setProgressBarData(progressBar, percent); }); }, - toggleResult: function(e) { - if(e) - e.preventDefault(); + setProgressBarData: function(progressBar, percent) { + progressBar.css("width", percent + "%"); + progressBar.parents('.result-row').find('.percentage').text(percent + "%"); + }, - this.$('.poll_progress_bar_wrapper').toggle(); - this.$('.percentage').toggle(); + toggleResult: function(evt) { + if(evt) evt.preventDefault(); + + this.toggleElements(); var toggle_result = this.$('.toggle_result'); @@ -56,6 +56,11 @@ app.views.Poll = app.views.Base.extend({ } }, + toggleElements: function() { + this.$('.percentage').toggle(); + this.$('.progress').toggle(); + }, + clickSubmit: function(evt) { evt.preventDefault(); diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js index 19545b84e..2bd252781 100644 --- a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js +++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js @@ -7,7 +7,8 @@ app.views.SinglePostContent = app.views.Base.extend({ '#real-post-content' : 'postContentView', ".oembed" : "oEmbedView", ".opengraph" : "openGraphView", - ".status-message-location" : "postLocationStreamView" + ".status-message-location" : "postLocationStreamView", + '.poll': 'pollView', }, initialize : function() { @@ -15,6 +16,7 @@ app.views.SinglePostContent = app.views.Base.extend({ this.oEmbedView = new app.views.OEmbed({model : this.model}); this.openGraphView = new app.views.OpenGraph({model : this.model}); this.postContentView = new app.views.ExpandedStatusMessage({model: this.model}); + this.pollView = new app.views.Poll({ model: this.model }); }, postLocationStreamView : function(){ diff --git a/app/assets/javascripts/app/views/stream_post_views.js b/app/assets/javascripts/app/views/stream_post_views.js index fb1d846d4..5088784bc 100644 --- a/app/assets/javascripts/app/views/stream_post_views.js +++ b/app/assets/javascripts/app/views/stream_post_views.js @@ -32,7 +32,7 @@ app.views.StreamPost = app.views.Post.extend({ this.commentStreamView = new app.views.CommentStream({model : this.model}); this.oEmbedView = new app.views.OEmbed({model : this.model}); this.openGraphView = new app.views.OpenGraph({model : this.model}); - this.pollView = new app.views.Poll({model : this.model}); + this.pollView = new app.views.PollBlueprint({model : this.model}); }, diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index 3219e81fa..cfc3795e4 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -27,6 +27,7 @@ @import 'bootstrap-headerfix'; @import 'opengraph'; @import 'single-post-view'; +@import 'new_styles/poll'; /* conversations */ @import 'conversations'; diff --git a/app/assets/stylesheets/new_styles/_poll.scss b/app/assets/stylesheets/new_styles/_poll.scss new file mode 100644 index 000000000..1f2fc69c5 --- /dev/null +++ b/app/assets/stylesheets/new_styles/_poll.scss @@ -0,0 +1,35 @@ +@import '../colors'; +@import '../mixins'; +@import 'new_mixins'; + +.poll_form { + border-top: 1px solid $border-grey; + border-bottom: 1px solid $border-grey; + margin: 10px 0px 10px 0px; + padding: 10px 0px 5px 0px; + + .poll_content { + margin-top: 5px; + } + .toggle_result_wrapper { + display: inline-block; + margin-top: 10px; + } + form { + margin-bottom: 0px; + } + + .progress { + background-image: none; + @include box-shadow(0, 0, 0); + margin-bottom: 5px; + height: 10px !important; + + .bar { + background-image: none; + background-color: $border-dark-grey; + color: $text-dark-grey; + text-align: left; + } + } +} diff --git a/app/assets/templates/poll_blueprint_tpl.jst.hbs b/app/assets/templates/poll_blueprint_tpl.jst.hbs new file mode 100644 index 000000000..ed9e18e7c --- /dev/null +++ b/app/assets/templates/poll_blueprint_tpl.jst.hbs @@ -0,0 +1,32 @@ +{{#if poll}} +
+

{{t "poll.count" count=poll.participation_count}}

+ {{poll.question}}
+ {{#unless already_participated_in_poll}} +
+ {{#poll.poll_answers}} + + + {{answer}} + +
+ {{/poll.poll_answers}} + +
+

+
{{t "poll.show_result"}}
+

+ {{else}} + {{#poll.poll_answers}} +
+
+
+ {{answer}} +

+
+ {{/poll.poll_answers}} + {{/unless}} +
+{{/if}} \ No newline at end of file diff --git a/app/assets/templates/poll_tpl.jst.hbs b/app/assets/templates/poll_tpl.jst.hbs index ed9e18e7c..6984a493d 100644 --- a/app/assets/templates/poll_tpl.jst.hbs +++ b/app/assets/templates/poll_tpl.jst.hbs @@ -1,32 +1,42 @@ {{#if poll}}
-

{{t "poll.count" count=poll.participation_count}}

- {{poll.question}}
- {{#unless already_participated_in_poll}} -
- {{#poll.poll_answers}} - -
-{{/if}} \ No newline at end of file +{{/if}} diff --git a/spec/javascripts/app/views/poll_view_spec.js b/spec/javascripts/app/views/poll_blueprint_view_spec.js similarity index 91% rename from spec/javascripts/app/views/poll_view_spec.js rename to spec/javascripts/app/views/poll_blueprint_view_spec.js index 668d8dd85..acac4e1b6 100644 --- a/spec/javascripts/app/views/poll_view_spec.js +++ b/spec/javascripts/app/views/poll_blueprint_view_spec.js @@ -1,7 +1,7 @@ -describe("app.views.Poll", function(){ +describe("app.views.PollBlueprint", function(){ beforeEach(function() { loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}}); - this.view = new app.views.Poll({ "model" : factory.postWithPoll()}); + this.view = new app.views.PollBlueprint({ model: factory.postWithPoll()}); this.view.render(); });