Commit 8e49b7db authored by Ryan Herbert's avatar Ryan Herbert

Replace jquery.autocomplete.js with jquery.atwho.js

Although the jquery plugin autocomplete.js was providing the basic
functionnality we needed, it was not natively able to display the list
of suggestions in the desired position for our textareas.

At.js is capable through the use of Caret.js of displaying a suggestion
box under the caret in a textarea.

This javascript code is heavily inspired by the code present in the
gitlab-ce project and allows us to have a nicely cached data-set to
limit database queries.
parent 016b984a
......@@ -2119,3 +2119,78 @@ label.highlight_label {
.widestBox {
min-width: @width_axisBox;
}
/* atwho css */
.atwho-view {
position:absolute;
top: 0;
left: 0;
display: none;
margin-top: 18px;
background: white;
color: black;
border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
min-width: 120px;
z-index: 11110 !important;
}
.atwho-view .atwho-header {
padding: 5px;
margin: 5px;
cursor: pointer;
border-bottom: solid 1px #eaeff1;
color: #6f8092;
font-size: 11px;
font-weight: bold;
}
.atwho-view .atwho-header .small {
color: #6f8092;
float: right;
padding-top: 2px;
margin-right: -5px;
font-size: 12px;
font-weight: normal;
}
.atwho-view .atwho-header:hover {
cursor: default;
}
.atwho-view .cur {
background: #3366FF;
color: white;
}
.atwho-view .cur small {
color: white;
}
.atwho-view strong {
color: #3366FF;
}
.atwho-view .cur strong {
color: white;
font:bold;
}
.atwho-view ul {
/* width: 100px; */
list-style:none;
padding:0;
margin:auto;
max-height: 200px;
overflow-y: auto;
}
.atwho-view ul li {
display: block;
padding: 5px 10px;
border-bottom: 1px solid #DDD;
cursor: pointer;
/* border-top: 1px solid #C8C8C8; */
}
.atwho-view small {
font-size: smaller;
color: #777;
font-weight: normal;
}
......@@ -13,7 +13,8 @@ require(["jquery",
"file",
"tsne",
"jstree.min",
"jquery.autocomplete"], function() {
"jquery.caret",
"jquery.atwho"], function() {
// Then config file (needed by Vidjil)
require(['../conf'], function() {
loadAfterConf()
......
......@@ -20,13 +20,147 @@
* along with "Vidjil". If not, see <http://www.gnu.org/licenses/>
*/
// This code is heavily inspired by the code produced for Gitlab's GfmAutoComplete
function init_autocomplete(elem, group_id) {
var service = 'tag/auto_complete';
var address = db.db_address + service;
$(elem).autocomplete({'serviceUrl': address,
'dataType': 'json',
'params': {'group_id': group_id},
'delimiter': /[,\.-_=+()$%^&*!@\[\]\{\}\"|'?\\\/><\s]/
function VidjilAutoComplete(datasource) {
if (typeof VidjilAutoComplete.instance === 'object') {
return VidjilAutoComplete.instance;
}
this.datasource = datasource;
this.isLoadingData = {};
this.cachedData = {};
this.loadedGroup = -1;
VidjilAutoComplete.instance = this;
return this;
}
// static methods
VidjilAutoComplete.defaultLoadingData = ['loading'];
VidjilAutoComplete.isLoading = function(data) {
dataToInspect = data;
if (data && data.length > 0) {
dataToInspect = data[0];
}
var loadingState = VidjilAutoComplete.defaultLoadingData[0];
return dataToInspect && (dataToInspect === loadingState || dataToInspect.name === loadingState);
}
// instance methods
VidjilAutoComplete.prototype = {
initCache : function(at) {
this.cachedData[at] = {};
},
clearCache : function() {
this.cachedData = {};
},
isLoaded : function(group_id) {
return this.loadedGroup == group_id;
},
setupAtWho: function(input) {
const $input = $(input);
if ($input.data('needs-atwho')) {
$input.off('focus.setupAtWho').on('focus.setupAtWho', this.setupTags.bind(this, $input));
$input.on('change.atwho', () => input.dispatchEvent(new Event('input')));
// This triggers at.js again
// Needed for quick actions with suffixes (ex: /label ~)
$input.on('inserted-commands.atwho', $input.trigger.bind($input, 'keyup'));
$input.on('clear-commands-cache.atwho', () => this.clearCache());
$input.data('needs-atwho', false);
// hackiness to get the autocompletion ready right away
$input.trigger('focus.setupAtWho');
}
},
setupTags : function($input) {
console.log("setup");
var self = this;
var at = '#';
this.initCache(at);
$input.atwho({
at: at,
alias: 'tags',
data: VidjilAutoComplete.defaultLoadingData,
callbacks: {
...self.getDefaultCallbacks()
},
searchKey: 'search',
});
},
getDefaultCallbacks : function() {
const fetchData = this.fetchData.bind(this);
const isLoaded = this.isLoaded.bind(this);
var callbacks = {
filter : function(query, data, searchKey) {
var group_id = this.$inputor.data('group-id');
if (VidjilAutoComplete.isLoading(data) || !isLoaded(group_id)) {
this.$inputor.atwho('load', this.at, VidjilAutoComplete.defaultLoadingData);
fetchData(this.$inputor, this.at, group_id);
return data;
}
return $.fn.atwho.default.callbacks.filter(query, data, searchKey);
},
beforeSave(tags) {
return $.map(tags, (i) => {
if (i.name == null) {
return i;
}
return {
id: i.id,
name: i.name,
search: `${i.id} ${i.name}`,
};
});
},
}
return callbacks;
},
fetchData : function($input, at, group_id) {
var self = this;
if (this.isLoadingData[at]) return;
this.isLoadingData[at] = true;
if (this.cachedData[at][group_id]) {
this.loadData($input, at, this.cachedData[at][group_id], group_id);
} else {
$.ajax({
type: "GET",
data: {
group_id: group_id
},
timeout: 5000,
crossDomain: true,
url: self.datasource,
success: function (data) {
var my_data = JSON.parse(data);
self.loadData($input, at, my_data, group_id);
},
error: function (request, status, error) {
self.isLoadingData[at] = false;
}
});
}
},
loadData : function($input, at, data, group_id) {
this.isLoadingData[at] = false;
this.cachedData[at][group_id] = data;
this.loadedGroup = group_id;
$input.atwho('load', at, data);
// This trigger at.js again
// otherwise we would be stuck with loading until the user types
return $input.trigger('keyup');
},
}
This diff is collapsed.
This diff is collapsed.
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(["jquery"], function ($) {
return (root.returnExportsGlobal = factory($));
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like enviroments that support module.exports,
// like Node.
module.exports = factory(require("jquery"));
} else {
factory(jQuery);
}
}(this, function ($) {
/*
Implement Github like autocomplete mentions
http://ichord.github.com/At.js
Copyright (c) 2013 chord.luo@gmail.com
Licensed under the MIT license.
*/
/*
本插件操作 textarea 或者 input 内的插入符
只实现了获得插入符在文本框中的位置,我设置
插入符的位置.
*/
"use strict";
var EditableCaret, InputCaret, Mirror, Utils, discoveryIframeOf, methods, oDocument, oFrame, oWindow, pluginName, setContextBy;
pluginName = 'caret';
EditableCaret = (function() {
function EditableCaret($inputor) {
this.$inputor = $inputor;
this.domInputor = this.$inputor[0];
}
EditableCaret.prototype.setPos = function(pos) {
var fn, found, offset, sel;
if (sel = oWindow.getSelection()) {
offset = 0;
found = false;
(fn = function(pos, parent) {
var node, range, _i, _len, _ref, _results;
_ref = parent.childNodes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
node = _ref[_i];
if (found) {
break;
}
if (node.nodeType === 3) {
if (offset + node.length >= pos) {
found = true;
range = oDocument.createRange();
range.setStart(node, pos - offset);
sel.removeAllRanges();
sel.addRange(range);
break;
} else {
_results.push(offset += node.length);
}
} else {
_results.push(fn(pos, node));
}
}
return _results;
})(pos, this.domInputor);
}
return this.domInputor;
};
EditableCaret.prototype.getIEPosition = function() {
return this.getPosition();
};
EditableCaret.prototype.getPosition = function() {
var inputor_offset, offset;
offset = this.getOffset();
inputor_offset = this.$inputor.offset();
offset.left -= inputor_offset.left;
offset.top -= inputor_offset.top;
return offset;
};
EditableCaret.prototype.getOldIEPos = function() {
var preCaretTextRange, textRange;
textRange = oDocument.selection.createRange();
preCaretTextRange = oDocument.body.createTextRange();
preCaretTextRange.moveToElementText(this.domInputor);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
return preCaretTextRange.text.length;
};
EditableCaret.prototype.getPos = function() {
var clonedRange, pos, range;
if (range = this.range()) {
clonedRange = range.cloneRange();
clonedRange.selectNodeContents(this.domInputor);
clonedRange.setEnd(range.endContainer, range.endOffset);
pos = clonedRange.toString().length;
clonedRange.detach();
return pos;
} else if (oDocument.selection) {
return this.getOldIEPos();
}
};
EditableCaret.prototype.getOldIEOffset = function() {
var range, rect;
range = oDocument.selection.createRange().duplicate();
range.moveStart("character", -1);
rect = range.getBoundingClientRect();
return {
height: rect.bottom - rect.top,
left: rect.left,
top: rect.top
};
};
EditableCaret.prototype.getOffset = function(pos) {
var clonedRange, offset, range, rect, shadowCaret;
if (oWindow.getSelection && (range = this.range())) {
if (range.endOffset - 1 > 0 && range.endContainer !== this.domInputor) {
clonedRange = range.cloneRange();
clonedRange.setStart(range.endContainer, range.endOffset - 1);
clonedRange.setEnd(range.endContainer, range.endOffset);
rect = clonedRange.getBoundingClientRect();
offset = {
height: rect.height,
left: rect.left + rect.width,
top: rect.top
};
clonedRange.detach();
}
if (!offset || (offset != null ? offset.height : void 0) === 0) {
clonedRange = range.cloneRange();
shadowCaret = $(oDocument.createTextNode("|"));
clonedRange.insertNode(shadowCaret[0]);
clonedRange.selectNode(shadowCaret[0]);
rect = clonedRange.getBoundingClientRect();
offset = {
height: rect.height,
left: rect.left,
top: rect.top
};
shadowCaret.remove();
clonedRange.detach();
}
} else if (oDocument.selection) {
offset = this.getOldIEOffset();
}
if (offset) {
offset.top += $(oWindow).scrollTop();
offset.left += $(oWindow).scrollLeft();
}
return offset;
};
EditableCaret.prototype.range = function() {
var sel;
if (!oWindow.getSelection) {
return;
}
sel = oWindow.getSelection();
if (sel.rangeCount > 0) {
return sel.getRangeAt(0);
} else {
return null;
}
};
return EditableCaret;
})();
InputCaret = (function() {
function InputCaret($inputor) {
this.$inputor = $inputor;
this.domInputor = this.$inputor[0];
}
InputCaret.prototype.getIEPos = function() {
var endRange, inputor, len, normalizedValue, pos, range, textInputRange;
inputor = this.domInputor;
range = oDocument.selection.createRange();
pos = 0;
if (range && range.parentElement() === inputor) {
normalizedValue = inputor.value.replace(/\r\n/g, "\n");
len = normalizedValue.length;
textInputRange = inputor.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
endRange = inputor.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
pos = len;
} else {
pos = -textInputRange.moveStart("character", -len);
}
}
return pos;
};
InputCaret.prototype.getPos = function() {
if (oDocument.selection) {
return this.getIEPos();
} else {
return this.domInputor.selectionStart;
}
};
InputCaret.prototype.setPos = function(pos) {
var inputor, range;
inputor = this.domInputor;
if (oDocument.selection) {
range = inputor.createTextRange();
range.move("character", pos);
range.select();
} else if (inputor.setSelectionRange) {
inputor.setSelectionRange(pos, pos);
}
return inputor;
};
InputCaret.prototype.getIEOffset = function(pos) {
var h, textRange, x, y;
textRange = this.domInputor.createTextRange();
pos || (pos = this.getPos());
textRange.move('character', pos);
x = textRange.boundingLeft;
y = textRange.boundingTop;
h = textRange.boundingHeight;
return {
left: x,
top: y,
height: h
};
};
InputCaret.prototype.getOffset = function(pos) {
var $inputor, offset, position;
$inputor = this.$inputor;
if (oDocument.selection) {
offset = this.getIEOffset(pos);
offset.top += $(oWindow).scrollTop() + $inputor.scrollTop();
offset.left += $(oWindow).scrollLeft() + $inputor.scrollLeft();
return offset;
} else {
offset = $inputor.offset();
position = this.getPosition(pos);
return offset = {
left: offset.left + position.left - $inputor.scrollLeft(),
top: offset.top + position.top - $inputor.scrollTop(),
height: position.height
};
}
};
InputCaret.prototype.getPosition = function(pos) {
var $inputor, at_rect, end_range, format, html, mirror, start_range;
$inputor = this.$inputor;
format = function(value) {
value = value.replace(/<|>|`|"|&/g, '?').replace(/\r\n|\r|\n/g, "<br/>");
if (/firefox/i.test(navigator.userAgent)) {
value = value.replace(/\s/g, '&nbsp;');
}
return value;
};
if (pos === void 0) {
pos = this.getPos();
}
start_range = $inputor.val().slice(0, pos);
end_range = $inputor.val().slice(pos);
html = "<span style='position: relative; display: inline;'>" + format(start_range) + "</span>";
html += "<span id='caret' style='position: relative; display: inline;'>|</span>";
html += "<span style='position: relative; display: inline;'>" + format(end_range) + "</span>";
mirror = new Mirror($inputor);
return at_rect = mirror.create(html).rect();
};
InputCaret.prototype.getIEPosition = function(pos) {
var h, inputorOffset, offset, x, y;
offset = this.getIEOffset(pos);
inputorOffset = this.$inputor.offset();
x = offset.left - inputorOffset.left;
y = offset.top - inputorOffset.top;
h = offset.height;
return {
left: x,
top: y,
height: h
};
};
return InputCaret;
})();
Mirror = (function() {
Mirror.prototype.css_attr = ["borderBottomWidth", "borderLeftWidth", "borderRightWidth", "borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle", "borderTopWidth", "boxSizing", "fontFamily", "fontSize", "fontWeight", "height", "letterSpacing", "lineHeight", "marginBottom", "marginLeft", "marginRight", "marginTop", "outlineWidth", "overflow", "overflowX", "overflowY", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "textAlign", "textOverflow", "textTransform", "whiteSpace", "wordBreak", "wordWrap"];
function Mirror($inputor) {
this.$inputor = $inputor;
}
Mirror.prototype.mirrorCss = function() {
var css,
_this = this;
css = {
position: 'absolute',
left: -9999,
top: 0,
zIndex: -20000
};
if (this.$inputor.prop('tagName') === 'TEXTAREA') {
this.css_attr.push('width');
}
$.each(this.css_attr, function(i, p) {
return css[p] = _this.$inputor.css(p);
});
return css;
};
Mirror.prototype.create = function(html) {
this.$mirror = $('<div></div>');
this.$mirror.css(this.mirrorCss());
this.$mirror.html(html);
this.$inputor.after(this.$mirror);
return this;
};
Mirror.prototype.rect = function() {
var $flag, pos, rect;
$flag = this.$mirror.find("#caret");
pos = $flag.position();
rect = {
left: pos.left,
top: pos.top,
height: $flag.height()
};
this.$mirror.remove();
return rect;
};
return Mirror;
})();
Utils = {
contentEditable: function($inputor) {
return !!($inputor[0].contentEditable && $inputor[0].contentEditable === 'true');
}
};
methods = {
pos: function(pos) {
if (pos || pos === 0) {
return this.setPos(pos);
} else {
return this.getPos();
}
},
position: function(pos) {
if (oDocument.selection) {
return this.getIEPosition(pos);
} else {
return this.getPosition(pos);