Text in the token helper's columns are now wrapped, so longer token names or descriptions can be properly displayed. Fixes #3100.

This commit is contained in:
Lombiq
2016-04-30 00:47:01 +02:00
committed by Zoltán Lehóczky
parent b292269f2b
commit 34bd78a487
2 changed files with 64 additions and 48 deletions

View File

@@ -1,13 +1,13 @@
jQuery.fn.extend({
insertAtCaret: function (myValue) {
return this.each(function(i) {
return this.each(function (i) {
if (document.selection) {
//For browsers like Internet Explorer
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
} else if (this.selectionStart || this.selectionStart == '0') {
} else if (this.selectionStart || this.selectionStart === "0") {
//For browsers like Firefox and Webkit based
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
@@ -26,19 +26,19 @@
});
jQuery.fn.extend({
tokenized : function () {
tokenized: function () {
return $(this).each(function () {
var _this = $(this);
// add an icon to tokenized inputs
_this.wrap('<span class="token-wrapper"></span>');
var popup = $('<div><span class="tokenized-popup">&nbsp;</span></div>')
// Add an icon to tokenized inputs.
_this.wrap("<span class='token-wrapper'></span>");
var popup = $("<div><span class='tokenized-popup'>&nbsp;</span></div>");
_this.parent().prepend(popup);
// show the full list of tokens when the icon is clicked
popup.children('.tokenized-popup').click(function () {
// Show the full list of tokens when the icon is clicked.
popup.children(".tokenized-popup").click(function () {
var input = $(this).parent().next();
// pass empty string as value to search for, displaying all results
// Pass empty string as value to search for, displaying all results.
input.autocomplete("search", "");
input.focus();
});
@@ -51,14 +51,18 @@ jQuery.fn.extend({
return false;
}
}).each(function () {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
var result = item.value == '' ? $('<li class="accategory"></li>') : $("<li></li>");
$(this).data("ui-autocomplete")._renderItem = function (ul, item) {
var result = item.value === "" ? $("<li class='accategory'></li>") : $("<li></li>");
var desc = item.desc.length > 50 ? item.desc.substring(0, 50) + "..." : item.desc;
// Place invisible space characters inside long strings to prevent word-wrap to split words.
var value = item.value.replace(/\./g, "\.\u200B");
var label = item.label.replace(/,/g, ",\u200B");
return result
.data("ui-autocomplete-item", item)
.append('<a ><span class="aclabel">' + $('<div/>').text(item.label).html() + ' </span><span class="acvalue">' + $('<div/>').text(item.value).html() + ' </span><span class="acdesc">' + $('<div/>').text(desc).html() + "</span></a>")
.append("<a><div class='listitemtext aclabelmod'>" + $("<div/>").text(label).html()
+ "</div><div class='listitemtext acvaluemod'>" + $("<div/>").text(value).html()
+ "</div><div class='listitemtext acdescmod'>" + $("<div/>").text(item.desc).html() + "</div></a>")
.appendTo(ul);
};
});
@@ -66,14 +70,14 @@ jQuery.fn.extend({
},
});
$(function() {
$(function () {
$.tokens = {};
// provide autocomplete behavior to tokenized inputs
// tokensUrl is initialized from the view
// Provide autocomplete behavior to tokenized inputs.
// tokensUrl is initialized from the view.
$.get(tokensUrl, function (data) {
$.tokens = data;
$('.tokenized').tokenized();
$(".tokenized").tokenized();
});
});
});

View File

@@ -1,60 +1,54 @@
.tokenized-popup
{
position:absolute;
.tokenized-popup {
position: absolute;
background: url('images/tokensPopup.gif');
background-repeat: no-repeat;
width:10px;
height:10px;
width: 10px;
height: 10px;
cursor: pointer;
padding-right:8px;
margin-top:0.15em;
right:100%;
padding-right: 8px;
margin-top: 0.15em;
right: 100%;
}
.token-wrapper {
position:relative;
position: relative;
}
.token-wrapper > div {
float:left;
left:100%;
float: left;
left: 100%;
position: absolute;
margin-bottom: 0px;
margin-bottom: 0;
}
.token-wrapper span[role="status"] {
display: none;
}
.ui-autocomplete
{
max-height: 12em;
.token-wrapper span[role="status"] {
display: none;
}
.ui-autocomplete {
max-height: 12em;
background: white;
border: 1px solid #BDBCBC;
width: 700px;
overflow :auto;
overflow: auto;
}
.ui-autocomplete .acdesc
{
.ui-autocomplete .acdesc {
padding-right: 5px;
float: right;
}
.ui-autocomplete .acvalue
{
.ui-autocomplete .acvalue {
left: 150px;
position: absolute;
}
.ui-autocomplete .accategory
{
.ui-autocomplete .accategory {
font-weight: bold;
}
.ui-autocomplete li a {
padding-left: 5px;
padding-left: 1%;
background-color: transparent;
color: #333;
}
@@ -65,3 +59,21 @@
cursor: pointer;
}
.ui-autocomplete .listitemtext {
display: inline-block;
vertical-align: top;
padding-right: 1%;
word-wrap: break-word;
}
.ui-autocomplete .acdescmod {
width: 42%;
}
.ui-autocomplete .acvaluemod {
width: 28%;
}
.ui-autocomplete .aclabelmod {
width: 24%;
}