mirror of
https://github.com/OrchardCMS/Orchard.git
synced 2025-10-21 19:34:40 +08:00
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:
@@ -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"> </span></div>')
|
||||
// Add an icon to tokenized inputs.
|
||||
_this.wrap("<span class='token-wrapper'></span>");
|
||||
var popup = $("<div><span class='tokenized-popup'> </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();
|
||||
});
|
||||
});
|
||||
});
|
@@ -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%;
|
||||
}
|
Reference in New Issue
Block a user