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

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; }