From 2fdd4d56344a3b58cf556e7e4d93ff0f9a465f7a Mon Sep 17 00:00:00 2001
From: Jared Hancock <jared@osticket.com>
Date: Sat, 18 Apr 2015 17:57:35 -0500
Subject: [PATCH] typeahead: Show arrow for expandable variables
---
js/redactor-plugins.js | 21 +++++++++++++++++----
scp/css/typeahead.css | 7 ++++---
2 files changed, 21 insertions(+), 7 deletions(-)
diff --git a/js/redactor-plugins.js b/js/redactor-plugins.js
index 16da1f7e3..929a9feaf 100644
--- a/js/redactor-plugins.js
+++ b/js/redactor-plugins.js
@@ -1611,6 +1611,7 @@ RedactorPlugins.contexttypeahead = function() {
return {
typeahead: false,
context: false,
+ variables: false,
init: function() {
if (!this.$element.data('rootContext'))
@@ -1642,7 +1643,8 @@ RedactorPlugins.contexttypeahead = function() {
position = clientRects[0],
cursorAt = range.endOffset,
backTextLen = match[1].length - content.length + cursorAt,
- backText = match[1].substring(0, backTextLen);
+ backText = match[1].substring(0, backTextLen),
+ that = this.contexttypeahead;
if (backTextLen < 0)
return this.contexttypeahead.destroy();
@@ -1655,15 +1657,25 @@ RedactorPlugins.contexttypeahead = function() {
if (!this.contexttypeahead.typeahead) {
this.contexttypeahead.typeahead = $('<input type="text">')
.css({position: 'absolute', visibility: 'hidden'})
- .width(0).height(position.height)
+ .width(0).height(position.height - 4)
.appendTo(document.body)
.typeahead({
property: 'variable',
minLength: 0,
+ arrow: $('<span class="pull-right"><i class="icon-muted icon-chevron-right"></i></span>')
+ .css('padding', '0 0 0 6px'),
highlighter: function(variable, item) {
- var base = $.fn.typeahead.Constructor.prototype.highlighter.call(this, variable);
+ var base = $.fn.typeahead.Constructor.prototype.highlighter
+ .call(this, variable),
+ further = new RegExp(variable + '\\.'),
+ extendable = Object.keys(that.variables).some(function(v) {
+ return v.match(further);
+ }),
+ arrow = extendable ? this.options.arrow.clone() : '';
+
return base + $('<span class="faded"/>')
.text(' — ' + item.desc)
+ .append(arrow)
.wrap('<div>').parent().html();
},
source: this.contexttypeahead.getContext.bind(this),
@@ -1697,7 +1709,7 @@ RedactorPlugins.contexttypeahead = function() {
},
getContext: function(typeahead, query) {
- var dfd,
+ var dfd, that=this.contexttypeahead,
root = this.$element.data('rootContext');
if (!this.contexttypeahead.context) {
dfd = $.Deferred();
@@ -1707,6 +1719,7 @@ RedactorPlugins.contexttypeahead = function() {
var items = $.map(json, function(v,k) {
return {variable: k, desc: v};
});
+ that.variables = json;
dfd.resolve(items);
}
});
diff --git a/scp/css/typeahead.css b/scp/css/typeahead.css
index 80f67886d..03f5091d9 100644
--- a/scp/css/typeahead.css
+++ b/scp/css/typeahead.css
@@ -7,7 +7,7 @@
float: left;
display: none;
min-width: 160px;
- padding: 4px 0;
+ padding: 4px 0 2px;
margin: 0;
list-style: none;
background-color: #ffffff;
@@ -20,12 +20,13 @@
border-radius: 0 0 5px 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
+ opacity: 0.95;
}
.dropdown-menu.pull-right {
right: 0;
@@ -42,7 +43,7 @@
}
.dropdown-menu a {
display: block;
- padding: 3px 15px;
+ padding: 4px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
--
GitLab