aboutsummaryrefslogtreecommitdiff
path: root/src/main/webapp/textext/textext.plugin.autocomplete.js
diff options
context:
space:
mode:
authorGravatar Alex Bitney2016-02-07 00:00:41 +0200
committerGravatar Alex Bitney2016-02-07 00:00:41 +0200
commitc2d316449f85bd2b74ae9ffaa3d08b7a5ee282cf (patch)
treece808c6d65e4a61913497f5d397473f75fadc701 /src/main/webapp/textext/textext.plugin.autocomplete.js
parent1fffebc18bbdbe87b456e2b3bd66e9ce5a6afcb8 (diff)
added tags when posting new message
added templates engine (rythm engine) and moved something to it. WARNING: textext plugin does not work when minimized, and also I fixed bug in it.
Diffstat (limited to 'src/main/webapp/textext/textext.plugin.autocomplete.js')
-rw-r--r--src/main/webapp/textext/textext.plugin.autocomplete.js1110
1 files changed, 1110 insertions, 0 deletions
diff --git a/src/main/webapp/textext/textext.plugin.autocomplete.js b/src/main/webapp/textext/textext.plugin.autocomplete.js
new file mode 100644
index 00000000..fd493e4f
--- /dev/null
+++ b/src/main/webapp/textext/textext.plugin.autocomplete.js
@@ -0,0 +1,1110 @@
+/**
+ * jQuery TextExt Plugin
+ * http://textextjs.com
+ *
+ * @version 1.3.1
+ * @copyright Copyright (C) 2011 Alex Gorbatchev. All rights reserved.
+ * @license MIT License
+ */
+(function($)
+{
+ /**
+ * Autocomplete plugin brings the classic autocomplete functionality to the TextExt ecosystem.
+ * The gist of functionality is when user starts typing in, for example a term or a tag, a
+ * dropdown would be presented with possible suggestions to complete the input quicker.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete
+ */
+ function TextExtAutocomplete() {};
+
+ $.fn.textext.TextExtAutocomplete = TextExtAutocomplete;
+ $.fn.textext.addPlugin('autocomplete', TextExtAutocomplete);
+
+ var p = TextExtAutocomplete.prototype,
+
+ CSS_DOT = '.',
+ CSS_SELECTED = 'text-selected',
+ CSS_DOT_SELECTED = CSS_DOT + CSS_SELECTED,
+ CSS_SUGGESTION = 'text-suggestion',
+ CSS_DOT_SUGGESTION = CSS_DOT + CSS_SUGGESTION,
+ CSS_LABEL = 'text-label',
+ CSS_DOT_LABEL = CSS_DOT + CSS_LABEL,
+
+ /**
+ * Autocomplete plugin options are grouped under `autocomplete` when passed to the
+ * `$().textext()` function. For example:
+ *
+ * $('textarea').textext({
+ * plugins: 'autocomplete',
+ * autocomplete: {
+ * dropdownPosition: 'above'
+ * }
+ * })
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.options
+ */
+
+ /**
+ * This is a toggle switch to enable or disable the Autucomplete plugin. The value is checked
+ * each time at the top level which allows you to toggle this setting on the fly.
+ *
+ * @name autocomplete.enabled
+ * @default true
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.options.autocomplete.enabled
+ */
+ OPT_ENABLED = 'autocomplete.enabled',
+
+ /**
+ * This option allows to specify position of the dropdown. The two possible values
+ * are `above` and `below`.
+ *
+ * @name autocomplete.dropdown.position
+ * @default "below"
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.options.autocomplete.dropdown.position
+ */
+ OPT_POSITION = 'autocomplete.dropdown.position',
+
+ /**
+ * This option allows to specify maximum height of the dropdown. Value is taken directly, so
+ * if desired height is 200 pixels, value must be `200px`.
+ *
+ * @name autocomplete.dropdown.maxHeight
+ * @default "100px"
+ * @author agorbatchev
+ * @date 2011/12/29
+ * @id TextExtAutocomplete.options.autocomplete.dropdown.maxHeight
+ * @version 1.1
+ */
+ OPT_MAX_HEIGHT = 'autocomplete.dropdown.maxHeight',
+
+ /**
+ * This option allows to override how a suggestion item is rendered. The value should be
+ * a function, the first argument of which is suggestion to be rendered and `this` context
+ * is the current instance of `TextExtAutocomplete`.
+ *
+ * [Click here](/manual/examples/autocomplete-with-custom-render.html) to see a demo.
+ *
+ * For example:
+ *
+ * $('textarea').textext({
+ * plugins: 'autocomplete',
+ * autocomplete: {
+ * render: function(suggestion)
+ * {
+ * return '<b>' + suggestion + '</b>';
+ * }
+ * }
+ * })
+ *
+ * @name autocomplete.render
+ * @default null
+ * @author agorbatchev
+ * @date 2011/12/23
+ * @id TextExtAutocomplete.options.autocomplete.render
+ * @version 1.1
+ */
+ OPT_RENDER = 'autocomplete.render',
+
+ /**
+ * HTML source that is used to generate the dropdown.
+ *
+ * @name html.dropdown
+ * @default '<div class="text-dropdown"><div class="text-list"/></div>'
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.options.html.dropdown
+ */
+ OPT_HTML_DROPDOWN = 'html.dropdown',
+
+ /**
+ * HTML source that is used to generate each suggestion.
+ *
+ * @name html.suggestion
+ * @default '<div class="text-suggestion"><span class="text-label"/></div>'
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.options.html.suggestion
+ */
+ OPT_HTML_SUGGESTION = 'html.suggestion',
+
+ /**
+ * Autocomplete plugin triggers or reacts to the following events.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.events
+ */
+
+ /**
+ * Autocomplete plugin triggers and reacts to the `hideDropdown` to hide the dropdown if it's
+ * already visible.
+ *
+ * @name hideDropdown
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.events.hideDropdown
+ */
+ EVENT_HIDE_DROPDOWN = 'hideDropdown',
+
+ /**
+ * Autocomplete plugin triggers and reacts to the `showDropdown` to show the dropdown if it's
+ * not already visible.
+ *
+ * It's possible to pass a render callback function which will be called instead of the
+ * default `TextExtAutocomplete.renderSuggestions()`.
+ *
+ * Here's how another plugin should trigger this event with the optional render callback:
+ *
+ * this.trigger('showDropdown', function(autocomplete)
+ * {
+ * autocomplete.clearItems();
+ * var node = autocomplete.addDropdownItem('<b>Item</b>');
+ * node.addClass('new-look');
+ * });
+ *
+ * @name showDropdown
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.events.showDropdown
+ */
+ EVENT_SHOW_DROPDOWN = 'showDropdown',
+
+ /**
+ * Autocomplete plugin reacts to the `setSuggestions` event triggered by other plugins which
+ * wish to populate the suggestion items. Suggestions should be passed as event argument in the
+ * following format: `{ data : [ ... ] }`.
+ *
+ * Here's how another plugin should trigger this event:
+ *
+ * this.trigger('setSuggestions', { data : [ "item1", "item2" ] });
+ *
+ * @name setSuggestions
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.events.setSuggestions
+ */
+
+ /**
+ * Autocomplete plugin triggers the `getSuggestions` event and expects to get results by listening for
+ * the `setSuggestions` event.
+ *
+ * @name getSuggestions
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.events.getSuggestions
+ */
+ EVENT_GET_SUGGESTIONS = 'getSuggestions',
+
+ /**
+ * Autocomplete plugin triggers `getFormData` event with the current suggestion so that the the core
+ * will be updated with serialized data to be submitted with the HTML form.
+ *
+ * @name getFormData
+ * @author agorbatchev
+ * @date 2011/08/18
+ * @id TextExtAutocomplete.events.getFormData
+ */
+ EVENT_GET_FORM_DATA = 'getFormData',
+
+ /**
+ * Autocomplete plugin reacts to `toggleDropdown` event and either shows or hides the dropdown
+ * depending if it's currently hidden or visible.
+ *
+ * @name toggleDropdown
+ * @author agorbatchev
+ * @date 2011/12/27
+ * @id TextExtAutocomplete.events.toggleDropdown
+ * @version 1.1
+ */
+ EVENT_TOGGLE_DROPDOWN = 'toggleDropdown',
+
+ POSITION_ABOVE = 'above',
+ POSITION_BELOW = 'below',
+
+ DATA_MOUSEDOWN_ON_AUTOCOMPLETE = 'mousedownOnAutocomplete',
+
+ DEFAULT_OPTS = {
+ autocomplete : {
+ enabled : true,
+ dropdown : {
+ position : POSITION_BELOW,
+ maxHeight : '100px'
+ }
+ },
+
+ html : {
+ dropdown : '<div class="text-dropdown"><div class="text-list"/></div>',
+ suggestion : '<div class="text-suggestion"><span class="text-label"/></div>'
+ }
+ }
+ ;
+
+ /**
+ * Initialization method called by the core during plugin instantiation.
+ *
+ * @signature TextExtAutocomplete.init(core)
+ *
+ * @param core {TextExt} Instance of the TextExt core class.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.init
+ */
+ p.init = function(core)
+ {
+ var self = this;
+
+ self.baseInit(core, DEFAULT_OPTS);
+
+ var input = self.input(),
+ container
+ ;
+
+ if(self.opts(OPT_ENABLED) === true)
+ {
+ self.on({
+ blur : self.onBlur,
+ anyKeyUp : self.onAnyKeyUp,
+ deleteKeyUp : self.onAnyKeyUp,
+ backspaceKeyPress : self.onBackspaceKeyPress,
+ enterKeyPress : self.onEnterKeyPress,
+ escapeKeyPress : self.onEscapeKeyPress,
+ setSuggestions : self.onSetSuggestions,
+ showDropdown : self.onShowDropdown,
+ hideDropdown : self.onHideDropdown,
+ toggleDropdown : self.onToggleDropdown,
+ postInvalidate : self.positionDropdown,
+ getFormData : self.onGetFormData,
+
+ // using keyDown for up/down keys so that repeat events are
+ // captured and user can scroll up/down by holding the keys
+ downKeyDown : self.onDownKeyDown,
+ upKeyDown : self.onUpKeyDown
+ });
+
+ container = $(self.opts(OPT_HTML_DROPDOWN));
+ container.insertAfter(input);
+
+ self.on(container, {
+ mouseover : self.onMouseOver,
+ mousedown : self.onMouseDown,
+ click : self.onClick
+ });
+
+ container
+ .css('maxHeight', self.opts(OPT_MAX_HEIGHT))
+ .addClass('text-position-' + self.opts(OPT_POSITION))
+ ;
+
+ $(self).data('container', container);
+
+ $(document.body).click(function(e)
+ {
+ if (self.isDropdownVisible() && !self.withinWrapElement(e.target))
+ self.trigger(EVENT_HIDE_DROPDOWN);
+ });
+
+ self.positionDropdown();
+ }
+ };
+
+ /**
+ * Returns top level dropdown container HTML element.
+ *
+ * @signature TextExtAutocomplete.containerElement()
+ *
+ * @author agorbatchev
+ * @date 2011/08/15
+ * @id TextExtAutocomplete.containerElement
+ */
+ p.containerElement = function()
+ {
+ return $(this).data('container');
+ };
+
+ //--------------------------------------------------------------------------------
+ // User mouse/keyboard input
+
+ /**
+ * Reacts to the `mouseOver` event triggered by the TextExt core.
+ *
+ * @signature TextExtAutocomplete.onMouseOver(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onMouseOver
+ */
+ p.onMouseOver = function(e)
+ {
+ var self = this,
+ target = $(e.target)
+ ;
+
+ if(target.is(CSS_DOT_SUGGESTION))
+ {
+ self.clearSelected();
+ target.addClass(CSS_SELECTED);
+ }
+ };
+
+ /**
+ * Reacts to the `mouseDown` event triggered by the TextExt core.
+ *
+ * @signature TextExtAutocomplete.onMouseDown(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author adamayres
+ * @date 2012/01/13
+ * @id TextExtAutocomplete.onMouseDown
+ */
+ p.onMouseDown = function(e)
+ {
+ this.containerElement().data(DATA_MOUSEDOWN_ON_AUTOCOMPLETE, true);
+ };
+
+ /**
+ * Reacts to the `click` event triggered by the TextExt core.
+ *
+ * @signature TextExtAutocomplete.onClick(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onClick
+ */
+ p.onClick = function(e)
+ {
+ var self = this,
+ target = $(e.target)
+ ;
+
+ if(target.is(CSS_DOT_SUGGESTION) || target.is(CSS_DOT_LABEL))
+ self.trigger('enterKeyPress');
+
+ if (self.core().hasPlugin('tags'))
+ self.val('');
+ };
+
+ /**
+ * Reacts to the `blur` event triggered by the TextExt core.
+ *
+ * @signature TextExtAutocomplete.onBlur(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onBlur
+ */
+ p.onBlur = function(e)
+ {
+ var self = this,
+ container = self.containerElement(),
+ isBlurByMousedown = container.data(DATA_MOUSEDOWN_ON_AUTOCOMPLETE) === true
+ ;
+
+ // only trigger a close event if the blur event was
+ // not triggered by a mousedown event on the autocomplete
+ // otherwise set focus back back on the input
+ if(self.isDropdownVisible())
+ isBlurByMousedown ? self.core().focusInput() : self.trigger(EVENT_HIDE_DROPDOWN);
+
+ container.removeData(DATA_MOUSEDOWN_ON_AUTOCOMPLETE);
+ };
+
+ /**
+ * Reacts to the `backspaceKeyPress` event triggered by the TextExt core.
+ *
+ * @signature TextExtAutocomplete.onBackspaceKeyPress(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onBackspaceKeyPress
+ */
+ p.onBackspaceKeyPress = function(e)
+ {
+ var self = this,
+ isEmpty = self.val().length > 0
+ ;
+
+ if(isEmpty || self.isDropdownVisible())
+ self.getSuggestions();
+ };
+
+ /**
+ * Reacts to the `anyKeyUp` event triggered by the TextExt core.
+ *
+ * @signature TextExtAutocomplete.onAnyKeyUp(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onAnyKeyUp
+ */
+ p.onAnyKeyUp = function(e, keyCode)
+ {
+ var self = this,
+ isFunctionKey = self.opts('keys.' + keyCode) != null
+ ;
+
+ if(self.val().length > 0 && !isFunctionKey)
+ self.getSuggestions();
+ };
+
+ /**
+ * Reacts to the `downKeyDown` event triggered by the TextExt core.
+ *
+ * @signature TextExtAutocomplete.onDownKeyDown(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onDownKeyDown
+ */
+ p.onDownKeyDown = function(e)
+ {
+ var self = this;
+
+ self.isDropdownVisible()
+ ? self.toggleNextSuggestion()
+ : self.getSuggestions()
+ ;
+ };
+
+ /**
+ * Reacts to the `upKeyDown` event triggered by the TextExt core.
+ *
+ * @signature TextExtAutocomplete.onUpKeyDown(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onUpKeyDown
+ */
+ p.onUpKeyDown = function(e)
+ {
+ this.togglePreviousSuggestion();
+ };
+
+ /**
+ * Reacts to the `enterKeyPress` event triggered by the TextExt core.
+ *
+ * @signature TextExtAutocomplete.onEnterKeyPress(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onEnterKeyPress
+ */
+ p.onEnterKeyPress = function(e)
+ {
+ var self = this;
+
+ if(self.isDropdownVisible())
+ self.selectFromDropdown();
+ };
+
+ /**
+ * Reacts to the `escapeKeyPress` event triggered by the TextExt core. Hides the dropdown
+ * if it's currently visible.
+ *
+ * @signature TextExtAutocomplete.onEscapeKeyPress(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onEscapeKeyPress
+ */
+ p.onEscapeKeyPress = function(e)
+ {
+ var self = this;
+
+ if(self.isDropdownVisible())
+ self.trigger(EVENT_HIDE_DROPDOWN);
+ };
+
+ //--------------------------------------------------------------------------------
+ // Core functionality
+
+ /**
+ * Positions dropdown either below or above the input based on the `autocomplete.dropdown.position`
+ * option specified, which could be either `above` or `below`.
+ *
+ * @signature TextExtAutocomplete.positionDropdown()
+ *
+ * @author agorbatchev
+ * @date 2011/08/15
+ * @id TextExtAutocomplete.positionDropdown
+ */
+ p.positionDropdown = function()
+ {
+ var self = this,
+ container = self.containerElement(),
+ direction = self.opts(OPT_POSITION),
+ height = self.core().wrapElement().outerHeight(),
+ css = {}
+ ;
+
+ css[direction === POSITION_ABOVE ? 'bottom' : 'top'] = height + 'px';
+ container.css(css);
+ };
+
+ /**
+ * Returns list of all the suggestion HTML elements in the dropdown.
+ *
+ * @signature TextExtAutocomplete.suggestionElements()
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.suggestionElements
+ */
+ p.suggestionElements = function()
+ {
+ return this.containerElement().find(CSS_DOT_SUGGESTION);
+ };
+
+
+ /**
+ * Highlights specified suggestion as selected in the dropdown.
+ *
+ * @signature TextExtAutocomplete.setSelectedSuggestion(suggestion)
+ *
+ * @param suggestion {Object} Suggestion object. With the default `ItemManager` this
+ * is expected to be a string, anything else with custom implementations.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.setSelectedSuggestion
+ */
+ p.setSelectedSuggestion = function(suggestion)
+ {
+ if(!suggestion)
+ return;
+
+ var self = this,
+ all = self.suggestionElements(),
+ target = all.first(),
+ item, i
+ ;
+
+ self.clearSelected();
+
+ for(i = 0; i < all.length; i++)
+ {
+ item = $(all[i]);
+
+ if(self.itemManager().compareItems(item.data(CSS_SUGGESTION), suggestion))
+ {
+ target = item.addClass(CSS_SELECTED);
+ break;
+ }
+ }
+
+ target.addClass(CSS_SELECTED);
+ self.scrollSuggestionIntoView(target);
+ };
+
+ /**
+ * Returns the first suggestion HTML element from the dropdown that is highlighted as selected.
+ *
+ * @signature TextExtAutocomplete.selectedSuggestionElement()
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.selectedSuggestionElement
+ */
+ p.selectedSuggestionElement = function()
+ {
+ return this.suggestionElements().filter(CSS_DOT_SELECTED).first();
+ };
+
+ /**
+ * Returns `true` if dropdown is currently visible, `false` otherwise.
+ *
+ * @signature TextExtAutocomplete.isDropdownVisible()
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.isDropdownVisible
+ */
+ p.isDropdownVisible = function()
+ {
+ return this.containerElement().is(':visible') === true;
+ };
+
+ /**
+ * Reacts to the `getFormData` event triggered by the core. Returns data with the
+ * weight of 100 to be *less than the Tags plugin* data weight. The weights system is
+ * covered in greater detail in the [`getFormData`][1] event documentation.
+ *
+ * [1]: /manual/textext.html#getformdata
+ *
+ * @signature TextExtAutocomplete.onGetFormData(e, data, keyCode)
+ *
+ * @param e {Object} jQuery event.
+ * @param data {Object} Data object to be populated.
+ * @param keyCode {Number} Key code that triggered the original update request.
+ *
+ * @author agorbatchev
+ * @date 2011/08/22
+ * @id TextExtAutocomplete.onGetFormData
+ */
+ p.onGetFormData = function(e, data, keyCode)
+ {
+ var self = this,
+ val = self.val(),
+ inputValue = val,
+ formValue = val
+ ;
+ data[100] = self.formDataObject(inputValue, formValue);
+ };
+
+ /**
+ * Returns initialization priority of the Autocomplete plugin which is expected to be
+ * *greater than the Tags plugin* because of the dependencies. The value is 200.
+ *
+ * @signature TextExtAutocomplete.initPriority()
+ *
+ * @author agorbatchev
+ * @date 2011/08/22
+ * @id TextExtAutocomplete.initPriority
+ */
+ p.initPriority = function()
+ {
+ return 200;
+ };
+
+ /**
+ * Reacts to the `hideDropdown` event and hides the dropdown if it's already visible.
+ *
+ * @signature TextExtAutocomplete.onHideDropdown(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onHideDropdown
+ */
+ p.onHideDropdown = function(e)
+ {
+ this.hideDropdown();
+ };
+
+ /**
+ * Reacts to the 'toggleDropdown` event and shows or hides the dropdown depending if
+ * it's currently hidden or visible.
+ *
+ * @signature TextExtAutocomplete.onToggleDropdown(e)
+ *
+ * @param e {Object} jQuery event.
+ *
+ * @author agorbatchev
+ * @date 2011/12/27
+ * @id TextExtAutocomplete.onToggleDropdown
+ * @version 1.1.0
+ */
+ p.onToggleDropdown = function(e)
+ {
+ var self = this;
+ self.trigger(self.containerElement().is(':visible') ? EVENT_HIDE_DROPDOWN : EVENT_SHOW_DROPDOWN);
+ };
+
+ /**
+ * Reacts to the `showDropdown` event and shows the dropdown if it's not already visible.
+ * It's possible to pass a render callback function which will be called instead of the
+ * default `TextExtAutocomplete.renderSuggestions()`.
+ *
+ * If no suggestion were previously loaded, it will fire `getSuggestions` event and exit.
+ *
+ * Here's how another plugin should trigger this event with the optional render callback:
+ *
+ * this.trigger('showDropdown', function(autocomplete)
+ * {
+ * autocomplete.clearItems();
+ * var node = autocomplete.addDropdownItem('<b>Item</b>');
+ * node.addClass('new-look');
+ * });
+ *
+ * @signature TextExtAutocomplete.onShowDropdown(e, renderCallback)
+ *
+ * @param e {Object} jQuery event.
+ * @param renderCallback {Function} Optional callback function which would be used to
+ * render dropdown items. As a first argument, reference to the current instance of
+ * Autocomplete plugin will be supplied. It's assumed, that if this callback is provided
+ * rendering will be handled completely manually.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onShowDropdown
+ */
+ p.onShowDropdown = function(e, renderCallback)
+ {
+ var self = this,
+ current = self.selectedSuggestionElement().data(CSS_SUGGESTION),
+ suggestions = self._suggestions
+ ;
+
+ if(!suggestions)
+ return self.trigger(EVENT_GET_SUGGESTIONS);
+
+ if($.isFunction(renderCallback))
+ {
+ renderCallback(self);
+ }
+ else
+ {
+ self.renderSuggestions(self._suggestions);
+ self.toggleNextSuggestion();
+ }
+
+ self.showDropdown(self.containerElement());
+ self.setSelectedSuggestion(current);
+ };
+
+ /**
+ * Reacts to the `setSuggestions` event. Expects to recieve the payload as the second argument
+ * in the following structure:
+ *
+ * {
+ * result : [ "item1", "item2" ],
+ * showHideDropdown : false
+ * }
+ *
+ * Notice the optional `showHideDropdown` option. By default, ie without the `showHideDropdown`
+ * value the method will trigger either `showDropdown` or `hideDropdown` depending if there are
+ * suggestions. If set to `false`, no event is triggered.
+ *
+ * @signature TextExtAutocomplete.onSetSuggestions(e, data)
+ *
+ * @param data {Object} Data payload.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.onSetSuggestions
+ */
+ p.onSetSuggestions = function(e, data)
+ {
+ var self = this,
+ suggestions = self._suggestions = data.result
+ ;
+
+ if(data.showHideDropdown !== false)
+ self.trigger(suggestions === null || suggestions.length === 0 ? EVENT_HIDE_DROPDOWN : EVENT_SHOW_DROPDOWN);
+ };
+
+ /**
+ * Prepears for and triggers the `getSuggestions` event with the `{ query : {String} }` as second
+ * argument.
+ *
+ * @signature TextExtAutocomplete.getSuggestions()
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.getSuggestions
+ */
+ p.getSuggestions = function()
+ {
+ var self = this,
+ val = self.val()
+ ;
+
+ if(self._previousInputValue == val)
+ return;
+
+ // if user clears input, then we want to select first suggestion
+ // instead of the last one
+ if(val == '')
+ current = null;
+
+ self._previousInputValue = val;
+ self.trigger(EVENT_GET_SUGGESTIONS, { query : val });
+ };
+
+ /**
+ * Removes all HTML suggestion items from the dropdown.
+ *
+ * @signature TextExtAutocomplete.clearItems()
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.clearItems
+ */
+ p.clearItems = function()
+ {
+ this.containerElement().find('.text-list').children().remove();
+ };
+
+ /**
+ * Clears all and renders passed suggestions.
+ *
+ * @signature TextExtAutocomplete.renderSuggestions(suggestions)
+ *
+ * @param suggestions {Array} List of suggestions to render.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.renderSuggestions
+ */
+ p.renderSuggestions = function(suggestions)
+ {
+ var self = this;
+
+ self.clearItems();
+
+ $.each(suggestions || [], function(index, item)
+ {
+ self.addSuggestion(item);
+ });
+ };
+
+ /**
+ * Shows the dropdown.
+ *
+ * @signature TextExtAutocomplete.showDropdown()
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.showDropdown
+ */
+ p.showDropdown = function()
+ {
+ this.containerElement().show();
+ };
+
+ /**
+ * Hides the dropdown.
+ *
+ * @signature TextExtAutocomplete.hideDropdown()
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.hideDropdown
+ */
+ p.hideDropdown = function()
+ {
+ var self = this,
+ dropdown = self.containerElement()
+ ;
+
+ self._previousInputValue = null;
+ dropdown.hide();
+ };
+
+ /**
+ * Adds single suggestion to the bottom of the dropdown. Uses `ItemManager.itemToString()` to
+ * serialize provided suggestion to string.
+ *
+ * @signature TextExtAutocomplete.addSuggestion(suggestion)
+ *
+ * @param suggestion {Object} Suggestion item. By default expected to be a string.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.addSuggestion
+ */
+ p.addSuggestion = function(suggestion)
+ {
+ var self = this,
+ renderer = self.opts(OPT_RENDER),
+ node = self.addDropdownItem(renderer ? renderer.call(self, suggestion) : self.itemManager().itemToString(suggestion))
+ ;
+
+ node.data(CSS_SUGGESTION, suggestion);
+ };
+
+ /**
+ * Adds and returns HTML node to the bottom of the dropdown.
+ *
+ * @signature TextExtAutocomplete.addDropdownItem(html)
+ *
+ * @param html {String} HTML to be inserted into the item.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.addDropdownItem
+ */
+ p.addDropdownItem = function(html)
+ {
+ var self = this,
+ container = self.containerElement().find('.text-list'),
+ node = $(self.opts(OPT_HTML_SUGGESTION))
+ ;
+
+ node.find('.text-label').html(html);
+ container.append(node);
+ return node;
+ };
+
+ /**
+ * Removes selection highlight from all suggestion elements.
+ *
+ * @signature TextExtAutocomplete.clearSelected()
+ *
+ * @author agorbatchev
+ * @date 2011/08/02
+ * @id TextExtAutocomplete.clearSelected
+ */
+ p.clearSelected = function()
+ {
+ this.suggestionElements().removeClass(CSS_SELECTED);
+ };
+
+ /**
+ * Selects next suggestion relative to the current one. If there's no
+ * currently selected suggestion, it will select the first one. Selected
+ * suggestion will always be scrolled into view.
+ *
+ * @signature TextExtAutocomplete.toggleNextSuggestion()
+ *
+ * @author agorbatchev
+ * @date 2011/08/02
+ * @id TextExtAutocomplete.toggleNextSuggestion
+ */
+ p.toggleNextSuggestion = function()
+ {
+ var self = this,
+ selected = self.selectedSuggestionElement(),
+ next
+ ;
+
+ if(selected.length > 0)
+ {
+ next = selected.next();
+
+ if(next.length > 0)
+ selected.removeClass(CSS_SELECTED);
+ }
+ else
+ {
+ next = self.suggestionElements().first();
+ }
+
+ next.addClass(CSS_SELECTED);
+ self.scrollSuggestionIntoView(next);
+ };
+
+ /**
+ * Selects previous suggestion relative to the current one. Selected
+ * suggestion will always be scrolled into view.
+ *
+ * @signature TextExtAutocomplete.togglePreviousSuggestion()
+ *
+ * @author agorbatchev
+ * @date 2011/08/02
+ * @id TextExtAutocomplete.togglePreviousSuggestion
+ */
+ p.togglePreviousSuggestion = function()
+ {
+ var self = this,
+ selected = self.selectedSuggestionElement(),
+ prev = selected.prev()
+ ;
+
+ if(prev.length == 0)
+ return;
+
+ self.clearSelected();
+ prev.addClass(CSS_SELECTED);
+ self.scrollSuggestionIntoView(prev);
+ };
+
+ /**
+ * Scrolls specified HTML suggestion element into the view.
+ *
+ * @signature TextExtAutocomplete.scrollSuggestionIntoView(item)
+ *
+ * @param item {HTMLElement} jQuery HTML suggestion element which needs to
+ * scrolled into view.
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.scrollSuggestionIntoView
+ */
+ p.scrollSuggestionIntoView = function(item)
+ {
+ var itemHeight = item.outerHeight(),
+ dropdown = this.containerElement(),
+ dropdownHeight = dropdown.innerHeight(),
+ scrollPos = dropdown.scrollTop(),
+ itemTop = (item.position() || {}).top,
+ scrollTo = null,
+ paddingTop = parseInt(dropdown.css('paddingTop'))
+ ;
+
+ if(itemTop == null)
+ return;
+
+ // if scrolling down and item is below the bottom fold
+ if(itemTop + itemHeight > dropdownHeight)
+ scrollTo = itemTop + scrollPos + itemHeight - dropdownHeight + paddingTop;
+
+ // if scrolling up and item is above the top fold
+ if(itemTop < 0)
+ scrollTo = itemTop + scrollPos - paddingTop;
+
+ if(scrollTo != null)
+ dropdown.scrollTop(scrollTo);
+ };
+
+ /**
+ * Uses the value from the text input to finish autocomplete action. Currently selected
+ * suggestion from the dropdown will be used to complete the action. Triggers `hideDropdown`
+ * event.
+ *
+ * @signature TextExtAutocomplete.selectFromDropdown()
+ *
+ * @author agorbatchev
+ * @date 2011/08/17
+ * @id TextExtAutocomplete.selectFromDropdown
+ */
+ p.selectFromDropdown = function()
+ {
+ var self = this,
+ suggestion = self.selectedSuggestionElement().data(CSS_SUGGESTION)
+ ;
+
+ if(suggestion)
+ {
+ self.val(self.itemManager().itemToString(suggestion));
+ self.core().getFormData();
+ }
+
+ self.trigger(EVENT_HIDE_DROPDOWN);
+ };
+
+ /**
+ * Determines if the specified HTML element is within the TextExt core wrap HTML element.
+ *
+ * @signature TextExtAutocomplete.withinWrapElement(element)
+ *
+ * @param element {HTMLElement} element to check if contained by wrap element
+ *
+ * @author adamayres
+ * @version 1.3.0
+ * @date 2012/01/15
+ * @id TextExtAutocomplete.withinWrapElement
+ */
+ p.withinWrapElement = function(element)
+ {
+ return this.core().wrapElement().find(element).size() > 0;
+ }
+})(jQuery);