Friendica/friendica-github
1
0
Fork 0
mirror of https://github.com/friendica/friendica synced 2025-04-19 05:50:10 +00:00
Code Issues Projects Releases Packages Wiki Activity

rework autocomplete: update jquery.textcomplete to v1.3.3

Browse source
This commit is contained in:
rabuzarus 2016-04-15 02:02:54 +02:00
parent 98b62b80f3
commit bbab3f590a
7 changed files with 671 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

308
library/jquery-textcomplete/jquery.textcomplete.js
View file

@ -149,7 +149,7 @@ if (typeof jQuery === 'undefined') {
this.views = [];
this.option = $.extend({}, Completer._getDefaults(), option);
if (!this.$el.is('input[type=text]') && !this.$el.is('textarea') && !element.isContentEditable && element.contentEditable != 'true') {
if (!this.$el.is('input[type=text]') && !this.$el.is('input[type=search]') && !this.$el.is('textarea') && !element.isContentEditable && element.contentEditable != 'true') {
throw new Error('textcomplete must be called on a Textarea or a ContentEditable.');
}
@ -196,7 +196,7 @@ if (typeof jQuery === 'undefined') {
if (this.option.adapter) {
Adapter = this.option.adapter;
} else {
if (this.$el.is('textarea') || this.$el.is('input[type=text]')) {
if (this.$el.is('textarea') || this.$el.is('input[type=text]') || this.$el.is('input[type=search]')) {
viewName = typeof element.selectionEnd === 'number' ? 'Textarea' : 'IETextarea';
} else {
viewName = 'ContentEditable';
@ -217,6 +217,12 @@ if (typeof jQuery === 'undefined') {
this.$el = this.adapter = this.dropdown = null;
},
deactivate: function () {
if (this.dropdown) {
this.dropdown.deactivate();
}
},
// Invoke textcomplete.
trigger: function (text, skipUnchangedTerm) {
if (!this.dropdown) { this.initialize(); }
@ -225,7 +231,7 @@ if (typeof jQuery === 'undefined') {
if (searchQuery.length) {
var term = searchQuery[1];
// Ignore shift-key, ctrl-key and so on.
if (skipUnchangedTerm && this._term === term) { return; }
if (skipUnchangedTerm && this._term === term && term !== "") { return; }
this._term = term;
this._search.apply(this, searchQuery);
} else {
@ -432,6 +438,7 @@ if (typeof jQuery === 'undefined') {
this.$el.off('.' + this.id);
this.$inputEl.off('.' + this.id);
this.clear();
this.$el.remove();
this.$el = this.$inputEl = this.completer = null;
delete dropdownViews[this.id]
},
@ -440,11 +447,18 @@ if (typeof jQuery === 'undefined') {
var contentsHtml = this._buildContents(zippedData);
var unzippedData = $.map(this.data, function (d) { return d.value; });
if (this.data.length) {
var strategy = zippedData[0].strategy;
if (strategy.id) {
this.$el.attr('data-strategy', strategy.id);
} else {
this.$el.removeAttr('data-strategy');
}
this._renderHeader(unzippedData);
this._renderFooter(unzippedData);
if (contentsHtml) {
this._renderContents(contentsHtml);
this._fitToBottom();
this._fitToRight();
this._activateIndexedItem();
}
this._setScroll();
@ -456,8 +470,6 @@ if (typeof jQuery === 'undefined') {
},
setPosition: function (pos) {
this.$el.css(this._applyPlacement(pos));
// Make the dropdown fixed if the input is also fixed
// This can't be done during init, as textcomplete may be used on multiple elements on the same page
// Because the same dropdown is reused behind the scenes, we need to recheck every time the dropdown is showed
@ -467,10 +479,13 @@ if (typeof jQuery === 'undefined') {
if($(this).css('position') === 'absolute') // The element has absolute positioning, so it's all OK
return false;
if($(this).css('position') === 'fixed') {
pos.top -= $window.scrollTop();
pos.left -= $window.scrollLeft();
position = 'fixed';
return false;
}
});
this.$el.css(this._applyPlacement(pos));
this.$el.css({ position: position }); // Update positioning
return this;
@ -774,6 +789,17 @@ if (typeof jQuery === 'undefined') {
}
},
_fitToRight: function() {
// We don't know how wide our content is until the browser positions us, and at that point it clips us
// to the document width so we don't know if we would have overrun it. As a heuristic to avoid that clipping
// (which makes our elements wrap onto the next line and corrupt the next item), if we're close to the right
// edge, move left. We don't know how far to move left, so just keep nudging a bit.
var tolerance = 30; // pixels. Make wider than vertical scrollbar because we might not be able to use that space.
while (this.$el.offset().left + this.$el.width() > $window.width() - tolerance) {
this.$el.offset({left: this.$el.offset().left - tolerance});
}
},
_applyPlacement: function (position) {
// If the 'placement' option set to 'top', move the position above the element.
if (this.placement.indexOf('top') !== -1) {
@ -843,6 +869,7 @@ if (typeof jQuery === 'undefined') {
search: null,
// Optional
id: null,
cache: false,
context: function () { return true; },
index: 2,
@ -932,11 +959,19 @@ if (typeof jQuery === 'undefined') {
},
// Returns the caret's relative coordinates from body's left top corner.
//
// FIXME: Calculate the left top corner of `this.option.appendTo` element.
getCaretPosition: function () {
var position = this._getCaretRelativePosition();
var offset = this.$el.offset();
// Calculate the left top corner of `this.option.appendTo` element.
var $parent = this.option.appendTo;
if ($parent) {
if (!($parent instanceof $)) { $parent = $($parent); }
var parentOffset = $parent.offsetParent().offset();
offset.top -= parentOffset.top;
offset.left -= parentOffset.left;
}
position.top += offset.top;
position.left += offset.left;
return position;
@ -962,6 +997,7 @@ if (typeof jQuery === 'undefined') {
// Suppress searching if it returns true.
_skipSearch: function (clickEvent) {
switch (clickEvent.keyCode) {
case 9: // TAB
case 13: // ENTER
case 40: // DOWN
case 38: // UP
@ -989,21 +1025,6 @@ if (typeof jQuery === 'undefined') {
this.initialize(element, completer, option);
}
Textarea.DIV_PROPERTIES = {
left: -9999,
position: 'absolute',
top: 0,
whiteSpace: 'pre-wrap'
}
Textarea.COPY_PROPERTIES = [
'border-width', 'font-family', 'font-size', 'font-style', 'font-variant',
'font-weight', 'height', 'letter-spacing', 'word-spacing', 'line-height',
'text-decoration', 'text-align', 'width', 'padding-top', 'padding-right',
'padding-bottom', 'padding-left', 'margin-top', 'margin-right',
'margin-bottom', 'margin-left', 'border-style', 'box-sizing', 'tab-size'
];
$.extend(Textarea.prototype, $.fn.textcomplete.Adapter.prototype, {
// Public methods
// --------------
@ -1024,56 +1045,38 @@ if (typeof jQuery === 'undefined') {
}
},
getTextFromHeadToCaret: function () {
return this.el.value.substring(0, this.el.selectionEnd);
},
// Private methods
// ---------------
// Returns the caret's relative coordinates from textarea's left top corner.
//
// Browser native API does not provide the way to know the position of
// caret in pixels, so that here we use a kind of hack to accomplish
// the aim. First of all it puts a dummy div element and completely copies
// the textarea's style to the element, then it inserts the text and a
// span element into the textarea.
// Consequently, the span element's position is the thing what we want.
_getCaretRelativePosition: function () {
var dummyDiv = $('<div></div>').css(this._copyCss())
.text(this.getTextFromHeadToCaret());
var span = $('<span></span>').text('.').appendTo(dummyDiv);
this.$el.before(dummyDiv);
var position = span.position();
position.top += span.height() - this.$el.scrollTop();
position.lineHeight = span.height();
dummyDiv.remove();
return position;
var p = $.fn.textcomplete.getCaretCoordinates(this.el, this.el.selectionStart);
return {
top: p.top + this._calculateLineHeight() - this.$el.scrollTop(),
left: p.left - this.$el.scrollLeft()
};
},
_copyCss: function () {
return $.extend({
// Set 'scroll' if a scrollbar is being shown; otherwise 'auto'.
overflow: this.el.scrollHeight > this.el.offsetHeight ? 'scroll' : 'auto'
}, Textarea.DIV_PROPERTIES, this._getStyles());
},
_getStyles: (function ($) {
var color = $('<div></div>').css(['color']).color;
if (typeof color !== 'undefined') {
return function () {
return this.$el.css(Textarea.COPY_PROPERTIES);
};
} else { // jQuery < 1.8
return function () {
var $el = this.$el;
var styles = {};
$.each(Textarea.COPY_PROPERTIES, function (i, property) {
styles[property] = $el.css(property);
});
return styles;
};
_calculateLineHeight: function () {
var lineHeight = parseInt(this.$el.css('line-height'), 10);
if (isNaN(lineHeight)) {
// http://stackoverflow.com/a/4515470/1297336
var parentNode = this.el.parentNode;
var temp = document.createElement(this.el.nodeName);
var style = this.el.style;
temp.setAttribute(
'style',
'margin:0px;padding:0px;font-family:' + style.fontFamily + ';font-size:' + style.fontSize
);
temp.innerHTML = 'test';
parentNode.appendChild(temp);
lineHeight = temp.clientHeight;
parentNode.removeChild(temp);
}
})($),
getTextFromHeadToCaret: function () {
return this.el.value.substring(0, this.el.selectionEnd);
return lineHeight;
}
});
@ -1168,9 +1171,28 @@ if (typeof jQuery === 'undefined') {
pre = pre.replace(strategy.match, newSubstr);
range.selectNodeContents(range.startContainer);
range.deleteContents();
var node = document.createTextNode(pre + post);
range.insertNode(node);
range.setStart(node, pre.length);
// create temporary elements
var preWrapper = document.createElement("div");
preWrapper.innerHTML = pre;
var postWrapper = document.createElement("div");
postWrapper.innerHTML = post;
// create the fragment thats inserted
var fragment = document.createDocumentFragment();
var childNode;
var lastOfPre;
while (childNode = preWrapper.firstChild) {
lastOfPre = fragment.appendChild(childNode);
}
while (childNode = postWrapper.firstChild) {
fragment.appendChild(childNode);
}
// insert the fragment & jump behind the last node in "pre"
range.insertNode(fragment);
range.setStartAfter(lastOfPre);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
@ -1223,5 +1245,155 @@ if (typeof jQuery === 'undefined') {
$.fn.textcomplete.ContentEditable = ContentEditable;
}(jQuery);
// The MIT License (MIT)
//
// Copyright (c) 2015 Jonathan Ong me@jongleberry.com
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
// associated documentation files (the "Software"), to deal in the Software without restriction,
// including without limitation the rights to use, copy, modify, merge, publish, distribute,
// sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all copies or
// substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
// NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// https://github.com/component/textarea-caret-position
(function () {
// The properties that we copy into a mirrored div.
// Note that some browsers, such as Firefox,
// do not concatenate properties, i.e. padding-top, bottom etc. -> padding,
// so we have to do every single property specifically.
var properties = [
'direction', // RTL support
'boxSizing',
'width', // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
'height',
'overflowX',
'overflowY', // copy the scrollbar for IE
'borderTopWidth',
'borderRightWidth',
'borderBottomWidth',
'borderLeftWidth',
'borderStyle',
'paddingTop',
'paddingRight',
'paddingBottom',
'paddingLeft',
// https://developer.mozilla.org/en-US/docs/Web/CSS/font
'fontStyle',
'fontVariant',
'fontWeight',
'fontStretch',
'fontSize',
'fontSizeAdjust',
'lineHeight',
'fontFamily',
'textAlign',
'textTransform',
'textIndent',
'textDecoration', // might not make a difference, but better be safe
'letterSpacing',
'wordSpacing',
'tabSize',
'MozTabSize'
];
var isBrowser = (typeof window !== 'undefined');
var isFirefox = (isBrowser && window.mozInnerScreenX != null);
function getCaretCoordinates(element, position, options) {
if(!isBrowser) {
throw new Error('textarea-caret-position#getCaretCoordinates should only be called in a browser');
}
var debug = options && options.debug || false;
if (debug) {
var el = document.querySelector('#input-textarea-caret-position-mirror-div');
if ( el ) { el.parentNode.removeChild(el); }
}
// mirrored div
var div = document.createElement('div');
div.id = 'input-textarea-caret-position-mirror-div';
document.body.appendChild(div);
var style = div.style;
var computed = window.getComputedStyle? getComputedStyle(element) : element.currentStyle; // currentStyle for IE < 9
// default textarea styles
style.whiteSpace = 'pre-wrap';
if (element.nodeName !== 'INPUT')
style.wordWrap = 'break-word'; // only for textarea-s
// position off-screen
style.position = 'absolute'; // required to return coordinates properly
if (!debug)
style.visibility = 'hidden'; // not 'display: none' because we want rendering
// transfer the element's properties to the div
properties.forEach(function (prop) {
style[prop] = computed[prop];
});
if (isFirefox) {
// Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
if (element.scrollHeight > parseInt(computed.height))
style.overflowY = 'scroll';
} else {
style.overflow = 'hidden'; // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
}
div.textContent = element.value.substring(0, position);
// the second special handling for input type="text" vs textarea: spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
if (element.nodeName === 'INPUT')
div.textContent = div.textContent.replace(/\s/g, '\u00a0');
var span = document.createElement('span');
// Wrapping must be replicated *exactly*, including when a long word gets
// onto the next line, with whitespace at the end of the line before (#7).
// The *only* reliable way to do that is to copy the *entire* rest of the
// textarea's content into the <span> created at the caret position.
// for inputs, just '.' would be enough, but why bother?
span.textContent = element.value.substring(position) || '.'; // || because a completely empty faux span doesn't render at all
div.appendChild(span);
var coordinates = {
top: span.offsetTop + parseInt(computed['borderTopWidth']),
left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
};
if (debug) {
span.style.backgroundColor = '#aaa';
} else {
document.body.removeChild(div);
}
return coordinates;
}
if (typeof module != 'undefined' && typeof module.exports != 'undefined') {
module.exports = getCaretCoordinates;
} else if(isBrowser){
window.$.fn.textcomplete.getCaretCoordinates = getCaretCoordinates;
}
}());
return jQuery;
}));