Inline auto complete for issue (#) in wiki-edit fields (#31989).

Patch by Marius BALTEANU.


git-svn-id: http://svn.redmine.org/redmine/trunk@18444 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/helpers/application_helper.rb

@@ -1569,7 +1569,7 @@ module ApplicationHelper
 
   # Returns the javascript tags that are included in the html layout head
   def javascript_heads
-    tags = javascript_include_tag('jquery-2.2.4-ui-1.11.0-ujs-5.2.3', 'application', 'responsive')
+    tags = javascript_include_tag('jquery-2.2.4-ui-1.11.0-ujs-5.2.3', 'tribute-3.7.3.min', 'application', 'responsive')
     unless User.current.pref.warn_on_leaving_unsaved == '0'
       tags << "\n".html_safe + javascript_tag("$(window).on('load', function(){ warnLeavingUnsaved('#{escape_javascript l(:text_warn_on_leaving_unsaved)}'); });")
     end

app/helpers/custom_fields_helper.rb

@@ -80,13 +80,21 @@ module CustomFieldsHelper
   # Return custom field html tag corresponding to its format
   def custom_field_tag(prefix, custom_value)
     css = "#{custom_value.custom_field.field_format}_cf"
-    css += ' wiki-edit' if custom_value.custom_field.full_text_formatting?
+    data = nil
+    if custom_value.custom_field.full_text_formatting?
+      css += ' wiki-edit'
+      data = {
+        :auto_complete => true,
+        :issues_url => auto_complete_issues_path(:project_id => custom_value.customized.project, :q => '')
+      } if custom_value.customized && custom_value.customized.project
+    end
 
     custom_value.custom_field.format.edit_tag self,
       custom_field_tag_id(prefix, custom_value.custom_field),
       custom_field_tag_name(prefix, custom_value.custom_field),
       custom_value,
-      :class => css
+      :class => css,
+      :data => data
   end
 
   # Return custom field name tag

app/views/documents/_form.html.erb

@@ -3,7 +3,12 @@
 <div class="box tabular">
 <p><%= f.select :category_id, DocumentCategory.active.collect {|c| [c.name, c.id]} %></p>
 <p><%= f.text_field :title, :required => true, :size => 60 %></p>
-<p><%= f.text_area :description, :cols => 60, :rows => 15, :class => 'wiki-edit' %></p>
+<p><%= f.text_area :description, :cols => 60, :rows => 15, :class => 'wiki-edit',
+                  :data => {
+                      :auto_complete => true,
+                      :issues_url => auto_complete_issues_path(:project_id => @project, :q => '')
+                  }
+%></p>
 
 <% @document.custom_field_values.each do |value| %>
   <p><%= custom_field_tag_with_label :document, value %></p>

app/views/issues/_edit.html.erb

@@ -29,7 +29,12 @@
     <% end %>
     <% if @issue.notes_addable? %>
       <fieldset><legend><%= l(:field_notes) %></legend>
-      <%= f.text_area :notes, :cols => 60, :rows => 10, :class => 'wiki-edit', :no_label => true %>
+      <%= f.text_area :notes, :cols => 60, :rows => 10, :class => 'wiki-edit',
+            :data => {
+                :auto_complete => true,
+                :issues_url => auto_complete_issues_path(:project_id => @issue.project, :q => '')
+            },
+            :no_label => true %>
       <%= wikitoolbar_for 'issue_notes', preview_issue_path(:project_id => @project, :issue_id => @issue) %>
 
       <% if @issue.safe_attribute? 'private_notes' %>
@@ -76,4 +81,3 @@
     <%= hidden_field_tag 'issue_count', @issue_count if @issue_count %>
 
 <% end %>
-

app/views/issues/_form.html.erb

@@ -34,11 +34,12 @@
   <%= f.label_for_field :description, :required => @issue.required_attribute?('description') %>
   <%= link_to_function content_tag(:span, l(:button_edit), :class => 'icon icon-edit'), '$(this).hide(); $("#issue_description_and_toolbar").show()' unless @issue.new_record? %>
   <%= content_tag 'span', :id => "issue_description_and_toolbar", :style => (@issue.new_record? ? nil : 'display:none') do %>
-    <%= f.text_area :description,
-                   :cols => 60,
+    <%= f.text_area :description, :cols => 60, :accesskey => accesskey(:edit), :class => 'wiki-edit',
                    :rows => [[10, @issue.description.to_s.length / 50].max, 20].min,
-                   :accesskey => accesskey(:edit),
-                   :class => 'wiki-edit',
+                   :data => {
+                       :auto_complete => true,
+                       :issues_url => auto_complete_issues_path(:project_id => @issue.project, :q => '')
+                   },
                    :no_label => true %>
   <% end %>
 </p>

app/views/issues/bulk_edit.html.erb

@@ -194,7 +194,12 @@
 
 <fieldset>
 <legend><%= l(:field_notes) %></legend>
-<%= text_area_tag 'notes', @notes, :cols => 60, :rows => 10, :class => 'wiki-edit' %>
+<%= text_area_tag 'notes', @notes, :cols => 60, :rows => 10, :class => 'wiki-edit',
+                  :data => {
+                      :auto_complete => true,
+                      :issues_url => auto_complete_issues_path(:project_id => @project, :q => '')
+                  }
+%>
 <%= wikitoolbar_for 'notes' %>
 
 <% if @safe_attributes.include?('private_notes') %>

app/views/journals/_notes_form.html.erb

@@ -3,10 +3,13 @@
              :method => 'put',
              :id => "journal-#{@journal.id}-form") do %>
     <%= label_tag "notes", l(:description_notes), :class => "hidden-for-sighted", :for => "journal_#{@journal.id}_notes" %>
-    <%= text_area_tag 'journal[notes]', @journal.notes,
-          :id => "journal_#{@journal.id}_notes",
-          :class => 'wiki-edit',
-          :rows => (@journal.notes.blank? ? 10 : [[10, @journal.notes.length / 50].max, 100].min) %>
+    <%= text_area_tag 'journal[notes]', @journal.notes, :id => "journal_#{@journal.id}_notes", :class => 'wiki-edit',
+          :rows => (@journal.notes.blank? ? 10 : [[10, @journal.notes.length / 50].max, 100].min),
+          :data => {
+              :auto_complete => true,
+              :issues_url => auto_complete_issues_path(:project_id => @project, :q => '')
+          }
+    %>
     <% if @journal.safe_attribute? 'private_notes' %>
       <%= hidden_field_tag 'journal[private_notes]', '0' %>
       <%= check_box_tag 'journal[private_notes]', '1', @journal.private_notes, :id => "journal_#{@journal.id}_private_notes" %>

app/views/layouts/base.html.erb

@@ -9,7 +9,7 @@
 <meta name="keywords" content="issue,bug,tracker" />
 <%= csrf_meta_tag %>
 <%= favicon %>
-<%= stylesheet_link_tag 'jquery/jquery-ui-1.11.0', 'application', 'responsive', :media => 'all' %>
+<%= stylesheet_link_tag 'jquery/jquery-ui-1.11.0', 'tribute-3.7.3', 'application', 'responsive', :media => 'all' %>
 <%= stylesheet_link_tag 'rtl', :media => 'all' if l(:direction) == 'rtl' %>
 <%= javascript_heads %>
 <%= heads_for_theme %>

app/views/messages/_form.html.erb

@@ -23,7 +23,13 @@
 
 <p>
 <%= label_tag "message_content", l(:description_message_content), :class => "hidden-for-sighted" %>
-<%= f.text_area :content, :cols => 80, :rows => 15, :class => 'wiki-edit', :id => 'message_content' %></p>
+<%= f.text_area :content, :cols => 80, :rows => 15, :class => 'wiki-edit', :id => 'message_content',
+                :accesskey => accesskey(:edit),
+                :data => {
+                    :auto_complete => true,
+                    :issues_url => auto_complete_issues_path(:project_id => @project, :q => '')
+                }
+%></p>
 <%= wikitoolbar_for 'message_content', preview_board_message_path(:board_id => @board, :id => @message) %>
 <!--[eoform:message]-->
 

app/views/news/_form.html.erb

@@ -3,7 +3,12 @@
 <div class="box tabular">
 <p><%= f.text_field :title, :required => true, :size => 60 %></p>
 <p><%= f.text_area :summary, :cols => 60, :rows => 2 %></p>
-<p><%= f.text_area :description, :required => true, :cols => 60, :rows => 15, :class => 'wiki-edit' %></p>
+<p><%= f.text_area :description, :required => true, :cols => 60, :rows => 15, :class => 'wiki-edit',
+                   :data => {
+                       :auto_complete => true,
+                       :issues_url => auto_complete_issues_path(:project_id => @project, :q => '')
+                   }
+%></p>
 <p id="attachments_form"><label><%= l(:label_attachment_plural) %></label><%= render :partial => 'attachments/form', :locals => {:container => @news} %></p>
 </div>
 

app/views/news/show.html.erb

@@ -53,7 +53,12 @@
 <p><%= toggle_link l(:label_comment_add), "add_comment_form", :focus => "comment_comments" %></p>
 <%= form_tag({:controller => 'comments', :action => 'create', :id => @news}, :id => "add_comment_form", :style => "display:none;") do %>
 <div class="box">
-    <%= text_area 'comment', 'comments', :cols => 80, :rows => 15, :class => 'wiki-edit' %>
+    <%= text_area 'comment', 'comments', :cols => 80, :rows => 15, :class => 'wiki-edit',
+                  :data => {
+                    :auto_complete => true,
+                    :issues_url => auto_complete_issues_path(:project_id => @project, :q => '')
+                  }
+    %>
     <%= wikitoolbar_for 'comment_comments', preview_news_path(:project_id => @project, :id => @news) %>
 </div>
 <p><%= submit_tag l(:button_add) %></p>

app/views/wiki/edit.html.erb

@@ -13,8 +13,13 @@
 <%= error_messages_for 'content' %>
 
 <div class="box tabular">
-<%= text_area_tag 'content[text]', @text, :cols => 100, :rows => 25,
-                  :class => 'wiki-edit', :accesskey => accesskey(:edit) %>
+<%= text_area_tag 'content[text]', @text, :cols => 100, :rows => 25, :accesskey => accesskey(:edit),
+                  :class => 'wiki-edit',
+                  :data => {
+                      :auto_complete => true,
+                      :issues_url => auto_complete_issues_path(:project_id => @project, :q => '')
+                  }
+%>
 
 <% if @page.safe_attribute_names.include?('parent_id') && @wiki.pages.any? %>
   <%= fields_for @page do |fp| %>

public/javascripts/application.js

@@ -995,6 +995,7 @@ function setupAttachmentDetail() {
   $(window).resize(setFilecontentContainerHeight);
 }
 
+
 $(function () {
     $('[title]').tooltip({
         show: {
@@ -1006,6 +1007,51 @@ $(function () {
         }
     });
 });
+
+function inlineAutoComplete(element) {
+    'use strict';
+    // do not attach if Tribute is already initialized
+    if (element.dataset.tribute === 'true') {return;}
+
+    const issuesUrl = element.dataset.issuesUrl;
+    const usersUrl = element.dataset.usersUrl;
+
+    const remoteSearch = function(url, cb) {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = function ()
+      {
+        if (xhr.readyState === 4) {
+          if (xhr.status === 200) {
+            var data = JSON.parse(xhr.responseText);
+            cb(data);
+          } else if (xhr.status === 403) {
+            cb([]);
+          }
+        }
+      };
+      xhr.open("GET", url, true);
+      xhr.send();
+    };
+
+    const tribute = new Tribute({
+      trigger: '#',
+      values: function (text, cb) {
+        remoteSearch(issuesUrl + text, function (issues) {
+          return cb(issues);
+        });
+      },
+      lookup: 'label',
+      fillAttr: 'label',
+      requireLeadingSpace: true,
+      selectTemplate: function (issue) {
+        return '#' + issue.original.id;
+      }
+    });
+
+    tribute.attach(element);
+}
+
+
 $(document).ready(setupAjaxIndicator);
 $(document).ready(hideOnLoad);
 $(document).ready(addFormObserversForDoubleSubmit);
@@ -1013,3 +1059,6 @@ $(document).ready(defaultFocus);
 $(document).ready(setupAttachmentDetail);
 $(document).ready(setupTabs);
 $(document).ready(setupFilePreviewNavigation);
+$(document).on('focus', '[data-auto-complete=true]', function(event) {
+  inlineAutoComplete(event.target);
+});

public/stylesheets/application.css

@@ -1597,6 +1597,14 @@ img.filecontent.image {background-image: url(../images/transparent.png);}
 .ui-menu .ui-menu-item:hover {font-weight:normal; color:#555; background:#759FCF; color:#fff !important; border:1px solid #759FCF;}
 .ui-menu .ui-menu-item.ui-state-focus {font-weight:normal; color:#555; border-color:#759FCF;}
 
+/* Custom tribute styles */
+.tribute-container ul {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+}
+.tribute-container li.highlight {background-color: #759FCF; color:#fff;}
+
 /************* Rouge styles *************/
 /* generated by: pygmentize -f html -a .syntaxhl -S colorful */
 .syntaxhl .hll { background-color: #ffffcc }

public/stylesheets/tribute-3.7.3.css

@@ -0,0 +1,27 @@
+.tribute-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: auto;
+    max-height: 300px;
+    max-width: 500px;
+    overflow: auto;
+    display: block;
+    z-index: 999999; }
+.tribute-container ul {
+    margin: 0;
+    margin-top: 2px;
+    padding: 0;
+    list-style: none;
+    background: #efefef; }
+.tribute-container li {
+    padding: 5px 5px;
+    cursor: pointer; }
+.tribute-container li.highlight {
+    background: #ddd; }
+.tribute-container li span {
+    font-weight: bold; }
+.tribute-container li.no-match {
+    cursor: default; }
+.tribute-container .menu-highlighted {
+    font-weight: bold; }