Merge pull request #59 from medialab-prado/18-create-comment

Create annotations and comments

app/assets/javascripts/legislation_annotatable.js.coffee

@@ -2,24 +2,100 @@ _t = (key) -> new Gettext().gettext(key)
 
 App.LegislationAnnotatable =
 
+  makeEditableAndHighlight: (colour) ->
+    sel = window.getSelection()
+    if sel.rangeCount and sel.getRangeAt
+      range = sel.getRangeAt(0)
+    document.designMode = 'on'
+    if range
+      sel.removeAllRanges()
+      sel.addRange range
+    # Use HiliteColor since some browsers apply BackColor to the whole block
+    if !document.execCommand('HiliteColor', false, colour)
+      document.execCommand 'BackColor', false, colour
+    document.designMode = 'off'
+    return
+
+  highlight: (colour) ->
+    if window.getSelection
+      # IE9 and non-IE
+      try
+        if !document.execCommand('BackColor', false, colour)
+          App.LegislationAnnotatable.makeEditableAndHighlight colour
+      catch ex
+        App.LegislationAnnotatable.makeEditableAndHighlight colour
+    else if document.selection and document.selection.createRange
+      # IE <= 8 case
+      range = document.selection.createRange()
+      range.execCommand 'BackColor', false, colour
+    return
+
+  remove_highlight: ->
+    $('[data-legislation-draft-version-id] span[style]').replaceWith(->
+      return $(this).contents()
+    )
+    return
+
   renderAnnotationComments: (event) ->
-    $('.comment-box').offset(top: event.offset)
+    $('#comments-box').css({top: event.offset - $('.calc-comments').offset().top})
     $.ajax
       method: "GET"
       url: event.annotation_url + "/annotations/" + event.annotation_id + "/comments"
       dataType: 'script'
 
+  onClick: (event) ->
+    event.preventDefault()
+    event.stopPropagation()
+
+    App.LegislationAllegations.show_comments()
+    $("#comments-box").show()
+    $.event.trigger
+      type: "renderLegislationAnnotation"
+      annotation_id: $(event.target).data("annotation-id")
+      annotation_url: $(event.target).closest(".legislation-annotatable").data("legislation-annotatable-base-url")
+      offset: $(event.target).offset()["top"]
+
   viewerExtension: (viewer) ->
     viewer._onHighlightMouseover = (event) ->
-      App.LegislationAllegations.show_comments()
-      $("#comments-box").show()
-      $.event.trigger
-        type: "renderLegislationAnnotation"
-        annotation_id: $(event.target).data("annotation-id")
-        annotation_url: $(event.target).closest(".legislation-annotatable").data("legislation-annotatable-base-url")
-        offset: $(event.target).offset()["top"]
+      return
 
+  customShow: (position) ->
+    $(@element).html ''
+    # Clean comments section and open it
+    $('#comments-box').html ''
+    App.LegislationAllegations.show_comments()
+    $('#comments-box').show()
 
+    annotation_url = $('[data-legislation-annotatable-base-url]').data('legislation-annotatable-base-url')
+    $.ajax(
+      method: 'GET'
+      url: annotation_url + '/annotations/new'
+      dataType: 'script').done (->
+        $('#new_legislation_annotation #legislation_annotation_quote').val(@annotation.quote)
+        $('#new_legislation_annotation #legislation_annotation_ranges').val(JSON.stringify(@annotation.ranges))
+        $('#comments-box').css({top: position.top - $('.calc-comments').offset().top})
+
+        App.LegislationAnnotatable.highlight('#7fff9a')
+        $('#comments-box textarea').focus()
+
+        $("#new_legislation_annotation").on("ajax:complete", (e, data, status, xhr) ->
+          if data.status == 200
+            App.LegislationAnnotatable.remove_highlight()
+            $("#comments-box").html("").hide()
+            $.ajax
+              method: "GET"
+              url: annotation_url + "/annotations/" + data.responseJSON.id + "/comments"
+              dataType: 'script'
+          else
+            $(e.target).find('label').addClass('error')
+            $('<small class="error">' + data.responseJSON[0] + '</small>').insertAfter($(e.target).find('textarea'))
+          return true
+        )
+        return
+    ).bind(this)
+
+  editorExtension: (editor) ->
+    editor.show = App.LegislationAnnotatable.customShow
 
   scrollToAnchor: ->
     annotationsLoaded: (annotations) ->
@@ -35,20 +111,17 @@ App.LegislationAnnotatable =
           offset: el.offset()["top"]
 
   initialize: ->
-    $(document).on("renderLegislationAnnotation", App.LegislationAnnotatable.renderAnnotationComments)
+    $(document).off("renderLegislationAnnotation").on("renderLegislationAnnotation", App.LegislationAnnotatable.renderAnnotationComments)
+    $(document).off('click', '[data-annotation-id]').on('click', '[data-annotation-id]', App.LegislationAnnotatable.onClick)
+    $(document).off('click', '[data-cancel-annotation]').on('click', '[data-cancel-annotation]', (e) ->
+      e.preventDefault()
+      $('#comments-box').html('')
+      $('#comments-box').hide()
+      App.LegislationAnnotatable.remove_highlight()
+      return
+    )
 
     current_user_id = $('html').data('current-user-id')
-    if current_user_id == ""
-      annotator.ui.editor.Editor.template = [
-        '<div class="annotator-outer annotator-editor annotator-hide">',
-        '  <form class="annotator-widget">',
-        '    ' + _t('Unregistered'),
-        '    <div class="annotator-controls">',
-        '      <a href="#cancel" class="annotator-cancel">' + _t('Cancel') + '</a>',
-        '    </div>',
-        '  </form>',
-        '</div>'
-      ].join('\n')
 
     $(".legislation-annotatable").each ->
       $this          = $(this)
@@ -62,7 +135,11 @@ App.LegislationAnnotatable =
             ann["legislation_draft_version_id"] = ann_id
             ann.permissions = ann.permissions || {}
             ann.permissions.admin = []
-        .include(annotator.ui.main, { element: this, viewerExtensions: [App.LegislationAnnotatable.viewerExtension] })
+        .include(annotator.ui.main, {
+          element: this,
+          viewerExtensions: [App.LegislationAnnotatable.viewerExtension],
+          editorExtensions: [App.LegislationAnnotatable.editorExtension]
+        })
         .include(App.LegislationAnnotatable.scrollToAnchor)
         .include(annotator.storage.http, { prefix: base_url, urls: { search: "/annotations/search" } })
 

app/assets/stylesheets/legislation_process.scss

@@ -877,7 +877,6 @@ $epigraph-font-size: rem-calc(15);
           textarea {
             border-radius: 0;
             box-shadow: none;
-            border-top: none;
             border-bottom: 1px solid #D0D0D0;
             border-right: 1px solid #D0D0D0;
             border-left: 1px solid #D0D0D0;

app/controllers/legislation/annotations_controller.rb

@@ -2,6 +2,7 @@ class Legislation::AnnotationsController < ApplicationController
   skip_before_action :verify_authenticity_token
 
   before_action :authenticate_user!, only: [:create]
+  before_action :convert_ranges_parameters, only: [:create]
 
   load_and_authorize_resource :process
   load_and_authorize_resource :draft_version, through: :process
@@ -30,7 +31,7 @@ class Legislation::AnnotationsController < ApplicationController
       track_event
       render json: @annotation.to_json
     else
-      render json: {}, status: :unprocessable_entity
+      render json: @annotation.errors.full_messages, status: :unprocessable_entity
     end
   end
 
@@ -44,11 +45,17 @@ class Legislation::AnnotationsController < ApplicationController
     @annotation = Legislation::Annotation.find(params[:annotation_id])
   end
 
+  def new
+    respond_to do |format|
+      format.js
+    end
+  end
+
   private
 
     def annotation_params
       params
-        .require(:annotation)
+        .require(:legislation_annotation)
         .permit(:quote, :text, ranges: [:start, :startOffset, :end, :endOffset])
     end
 
@@ -58,4 +65,11 @@ class Legislation::AnnotationsController < ApplicationController
                  "legislation_draft_version_id": @draft_version.id
     end
 
+    def convert_ranges_parameters
+      if params[:legislation_annotation] && params[:legislation_annotation][:ranges] && params[:legislation_annotation][:ranges].is_a?(String)
+        params[:legislation_annotation][:ranges] = JSON.parse(params[:legislation_annotation][:ranges])
+      end
+    rescue JSON::ParserError
+    end
+
 end

app/views/legislation/annotations/_form.html.erb

@@ -0,0 +1,36 @@
+<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>
+  <%= link_to '#' do %>
+    <span class="icon-expand" aria-hidden="true"></span>
+  <% end %>
+</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>
+
+        <%= 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 %>
+  </div>
+</div>
+

app/views/legislation/annotations/comments.js.erb

@@ -1,2 +1,2 @@
-$("#comments-box").html("<%= j render('comments_box', annotation: @annotation) %>");
+$("#comments-box").html("<%= j render('comments_box', annotation: @annotation) %>").show();
 

app/views/legislation/annotations/new.js.erb

@@ -0,0 +1,2 @@
+$("#comments-box").html("<%= j render('form') %>");
+

app/views/legislation/draft_versions/show.html.erb

@@ -54,6 +54,7 @@
           <section class="legislation-annotatable"
                    data-legislation-draft-version-id="<%= @draft_version.id %>"
                    data-legislation-annotatable-base-url="<%= legislation_process_draft_version_path(@process, @draft_version) %>"
+                   data-legislation-open-phase="<%= @process.open_phase?(:allegations) %>"
                    >
           <% end %>
             <%= @draft_version.body_html.html_safe %>