consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show comment boxes for all annotations at the clicked point

Browse Source
This commit is contained in:
Amaia Castro
2017-02-24 13:43:32 +01:00
parent 83e4c2bd03
commit c7eaadb4b2
9 changed files with 137 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/legislation_annotatable.js.coffee
View File

@@ -37,7 +37,9 @@ App.LegislationAnnotatable =
return
renderAnnotationComments: (event) ->
$('#comments-box').css({top: event.offset - $('.calc-comments').offset().top})
if event.offset
$("#comments-box").css({top: event.offset - $('.calc-comments').offset().top})
if App.LegislationAnnotatable.isMobile()
return
@@ -58,17 +60,30 @@ App.LegislationAnnotatable =
$('[data-annotation-id]').removeClass('current-annotation')
target = $(this)
parents = target.parents('.annotator-hl')
parents_ids = parents.map (_, elem) ->
$(elem).data("annotation-id")
annotation_id = target.data('annotation-id')
$('[data-annotation-id="'+annotation_id+'"]').addClass('current-annotation')
$('#comments-box').html('')
App.LegislationAllegations.show_comments()
$("#comments-box").show()
$.event.trigger
type: "renderLegislationAnnotation"
annotation_id: target.data("annotation-id")
annotation_url: target.closest(".legislation-annotatable").data("legislation-annotatable-base-url")
offset: target.offset()["top"]
parents_ids.each (i, pid) ->
$.event.trigger
type: "renderLegislationAnnotation"
annotation_id: pid
annotation_url: target.closest(".legislation-annotatable").data("legislation-annotatable-base-url")
isMobile: () ->
return window.innerWidth <= 652

16
app/assets/stylesheets/legislation_process.scss
View File

@@ -827,14 +827,18 @@ $epigraph-line-height: rem-calc(22);
display: none;
}
#comments-box {
position: absolute;
top: 230px;
}
.comment-box {
width: 375px;
padding: 1rem;
background: #F9F9F9;
border: 1px solid $border;
display: block;
position: absolute;
top: 230px;
margin-bottom: 2rem;
.button {
font-size: $small-font-size;
@@ -986,14 +990,6 @@ $epigraph-line-height: rem-calc(22);
}
}
.comment-box:nth-child(4) {
top: 838px;
}
.comment-box:nth-child(5) {
top: 2035px;
}
.draft-panel {
background: #E5E5E5;
border-left: 1px solid #D4D4D4;

2
app/controllers/legislation/annotations_controller.rb
View File

@@ -73,7 +73,7 @@ class Legislation::AnnotationsController < ApplicationController
end
respond_to do |format|
format.js { render :comments }
format.js { render :new_comment }
end
end

118
app/views/legislation/annotations/_comments_box.html.erb
View File

@@ -1,70 +1,72 @@
<div class="comment-header">
<span class="icon-comment" aria-hidden="true"></span>
<div class="comment-number"><%= t('legislation.annotations.comments.comments_count', count: annotation.comments.roots.count) %></div>
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation) do %>
<span class="icon-expand" aria-hidden="true"></span>
<% end %>
</div>
<div class="comments-wrapper">
<% annotation.comments.roots.sort_by_most_voted.limit(Legislation::Annotation::COMMENTS_PAGE_SIZE).each do |comment| %>
<div class="comment">
<div class="comment-text">
<p><%= truncate comment.body, length: 250 %></p>
</div>
<div class="comment-meta">
<div class="comment-more-info">
<% if comment.body.length > 250 %>
<div class="comment-expand">
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation) do %>
<%= t('legislation.annotations.comments.see_complete') %>
<div class="comment-box" id="comments-box-<%= annotation.id %>">
<div class="comment-header">
<span class="icon-comment" aria-hidden="true"></span>
<div class="comment-number"><%= t('legislation.annotations.comments.comments_count', count: annotation.comments.roots.count) %></div>
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation) do %>
<span class="icon-expand" aria-hidden="true"></span>
<% end %>
</div>
<div class="comments-wrapper">
<% annotation.comments.roots.sort_by_most_voted.limit(Legislation::Annotation::COMMENTS_PAGE_SIZE).each do |comment| %>
<div class="comment">
<div class="comment-text">
<p><%= truncate comment.body, length: 250 %></p>
</div>
<div class="comment-meta">
<div class="comment-more-info">
<% if comment.body.length > 250 %>
<div class="comment-expand">
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation) do %>
<%= t('legislation.annotations.comments.see_complete') %>
<% end %>
</div>
<% end %>
<div class="comment-replies">
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation, anchor: "comment_#{comment.id}") do %>
<%= t('legislation.annotations.comments.replies_count', count: comment.children.size) %>
<% end %>
</div>
<% end %>
<div class="comment-replies">
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation, anchor: "comment_#{comment.id}") do %>
<%= t('legislation.annotations.comments.replies_count', count: comment.children.size) %>
<% end %>
</div>
</div>
<div class="comment-votes">
<div id="<%= dom_id(comment) %>_votes" class="comment-votes float-right">
<%= render 'comments/votes', comment: comment %>
<div class="comment-votes">
<div id="<%= dom_id(comment) %>_votes" class="comment-votes float-right">
<%= render 'comments/votes', comment: comment %>
</div>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
<div class="comment-footer">
<% if annotation.comments.roots.count > Legislation::Annotation::COMMENTS_PAGE_SIZE %>
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation), class: "button strong" do %>
<%= t('legislation.annotations.comments.see_all') %>
<div class="comment-footer">
<% if annotation.comments.roots.count > Legislation::Annotation::COMMENTS_PAGE_SIZE %>
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation), class: "button strong" do %>
<%= t('legislation.annotations.comments.see_all') %>
<% end %>
<% end %>
<% end %>
<% if @process.open_phase?(:allegations) %>
<a class="button strong publish-comment" href="#"><%= t('legislation.annotations.comments.publish_comment') %></a>
<% end %>
<% if @process.open_phase?(:allegations) %>
<% if user_signed_in? %>
<% css_id = parent_or_commentable_dom_id(nil, annotation) %>
<div id="js-comment-form-annotation" style="display:none" class="comment-form">
<%= form_for @comment, url: legislation_process_draft_version_annotation_new_comment_path(annotation.draft_version.process, annotation.draft_version, annotation), remote: true do |f| %>
<%= label_tag "comment-body-#{css_id}", leave_comment_text(annotation) %>
<%= f.text_area :body, id: "comment-body-#{css_id}", maxlength: Comment.body_max_length, label: false, rows: 8 %>
<%= f.submit comment_button_text(nil, annotation), class: "button" %>
<% end %>
</div>
<% else %>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.login_to_comment",
signin: link_to(t("legislation.annotations.form.signin"), new_user_session_path),
signup: link_to(t("legislation.annotations.form.signup"), new_user_registration_path)).html_safe %>
</div>
<% if @process.open_phase?(:allegations) %>
<a class="button strong publish-comment" href="#"><%= t('legislation.annotations.comments.publish_comment') %></a>
&nbsp;
<% end %>
<% end %>
</div>
<% if @process.open_phase?(:allegations) %>
<% if user_signed_in? %>
<% css_id = parent_or_commentable_dom_id(nil, annotation) %>
<div id="js-comment-form-annotation-<%= annotation.id %>" style="display:none" class="comment-form js-comment-form-annotation">
<%= form_for @comment, url: legislation_process_draft_version_annotation_new_comment_path(annotation.draft_version.process, annotation.draft_version, annotation), remote: true do |f| %>
<%= label_tag "comment-body-#{css_id}", leave_comment_text(annotation) %>
<%= f.text_area :body, id: "comment-body-#{css_id}", maxlength: Comment.body_max_length, label: false, rows: 8 %>
<%= f.submit comment_button_text(nil, annotation), class: "button" %>
<% end %>
</div>
<% else %>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.login_to_comment",
signin: link_to(t("legislation.annotations.form.signin"), new_user_session_path),
signup: link_to(t("legislation.annotations.form.signup"), new_user_registration_path)).html_safe %>
</div>
<% end %>
<% end %>
</div>
</div>

15
app/views/legislation/annotations/_comments_box_form.js.erb Normal file
View File

@@ -0,0 +1,15 @@
$('#comments-box-<%= annotation.id %> a.publish-comment').on({
click: function(e) {
e.preventDefault();
$('a.publish-comment').hide();
$('#js-comment-form-annotation-<%= annotation.id %>').toggle();
$('#js-comment-form-annotation-<%= annotation.id %> textarea').focus();
return;
}
});
<% if comment.errors.any? %>
$('#comments-box-<%= @annotation.id %> a.publish-comment').hide();
$('#js-comment-form-annotation-<%= annotation.id %>').toggle();
$('#js-comment-form-annotation-<%= annotation.id %> textarea').focus();
<% end %>

54
app/views/legislation/annotations/_form.html.erb
View File

@@ -1,33 +1,35 @@
<div class="comment-header">
<span class="icon-comment" aria-hidden="true"></span>
<div class="comment-number"><%= t('legislation.annotations.comments.comments_count', count: 0) %></div>
</div>
<div class="comment-box">
<div class="comment-header">
<span class="icon-comment" aria-hidden="true"></span>
<div class="comment-number"><%= t('legislation.annotations.comments.comments_count', count: 0) %></div>
</div>
<div class="comments-wrapper">
<div class="comment-input">
<% if !@process.open_phase?(:allegations) %>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.phase_not_open") %>
</div>
<% elsif user_signed_in? %>
<%= form_for Legislation::Annotation.new, url: legislation_process_draft_version_annotations_path(@process, @draft_version), remote: true do |f| %>
<%= f.text_area :text %>
<div class="comment-actions">
<a class="cancel-comment" href="#" data-cancel-annotation><%= t('legislation.annotations.comments.cancel') %></a>
<%= f.submit t('legislation.annotations.comments.publish_comment'), class: 'button strong publish-comment' %>
<div class="comments-wrapper">
<div class="comment-input">
<% if !@process.open_phase?(:allegations) %>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.phase_not_open") %>
</div>
<% elsif user_signed_in? %>
<%= form_for Legislation::Annotation.new, url: legislation_process_draft_version_annotations_path(@process, @draft_version), remote: true do |f| %>
<%= f.text_area :text %>
<%= f.hidden_field :quote %>
<%= f.hidden_field :ranges %>
<div class="comment-actions">
<a class="cancel-comment" href="#" data-cancel-annotation><%= t('legislation.annotations.comments.cancel') %></a>
<%= f.submit t('legislation.annotations.comments.publish_comment'), class: 'button strong publish-comment' %>
</div>
<%= f.hidden_field :quote %>
<%= f.hidden_field :ranges %>
<% end %>
<% else %>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.login_to_comment",
signin: link_to(t("legislation.annotations.form.signin"), new_user_session_path),
signup: link_to(t("legislation.annotations.form.signup"), new_user_registration_path)).html_safe %>
</div>
<% end %>
<% else %>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.login_to_comment",
signin: link_to(t("legislation.annotations.form.signin"), new_user_session_path),
signup: link_to(t("legislation.annotations.form.signup"), new_user_registration_path)).html_safe %>
</div>
<% end %>
</div>
</div>
</div>

18
app/views/legislation/annotations/comments.js.erb
View File

@@ -1,17 +1,3 @@
$("#comments-box").html("<%= j render('comments_box', annotation: @annotation) %>").show();
$("#comments-box").append("<%= j render('comments_box', annotation: @annotation) %>").show();
$('a.publish-comment').on({
click: function(e) {
e.preventDefault();
$('a.publish-comment').hide();
$('#js-comment-form-annotation').toggle();
$('#js-comment-form-annotation textarea').focus();
return;
}
});
<% if @comment.errors.any? %>
$('a.publish-comment').hide();
$('#js-comment-form-annotation').toggle();
$('#js-comment-form-annotation textarea').focus();
<% end %>
<%= render 'comments_box_form', comment: @comment, annotation: @annotation %>

3
app/views/legislation/annotations/new_comment.js.erb Normal file
View File

@@ -0,0 +1,3 @@
$("#comments-box-<%= @annotation.id %>").replaceWith("<%= j render('comments_box', annotation: @annotation) %>").show();
<%= render 'comments_box_form', comment: @comment, annotation: @annotation %>

10
app/views/legislation/draft_versions/_comments_panel.html.erb
View File

@@ -9,10 +9,12 @@
<span class="panel-title"><%= t('legislation.draft_versions.show.text_comments') %></span>
</div>
<div class="comment-box" id="comments-box" style="display: none;">
<div class="comment-header">
<span class="icon-comment" aria-hidden="true"></span>
<div class="comment-number"><%= t('legislation.draft_versions.show.loading_comments') %></div>
<div id="comments-box" style="display: none;">
<div class="comment-box">
<div class="comment-header">
<span class="icon-comment" aria-hidden="true"></span>
<div class="comment-number"><%= t('legislation.draft_versions.show.loading_comments') %></div>
</div>
</div>
</div>
</div>