Skip to content

container function to generate container element #17143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LeaVerou merged 1 commit into from
May 30, 2018
Merged

container function to generate container element #17143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions awesomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ var _ = function (input, o) {
this.input.setAttribute("aria-owns", "awesomplete_list_" + this.count);
this.input.setAttribute("role", "combobox");

o = o || {};
// store constructor options in case we need to distinguish
// between default and customized behavior later on
this.options = o = o || {};

configure(this, {
minChars: 2,
Expand All @@ -32,6 +34,7 @@ var _ = function (input, o) {
data: _.DATA,
filter: _.FILTER_CONTAINS,
sort: o.sort === false ? false : _.SORT_BYLENGTH,
container: _.CONTAINER,
item: _.ITEM,
replace: _.REPLACE
}, o);
Expand All @@ -40,10 +43,7 @@ var _ = function (input, o) {

// Create necessary elements

this.container = $.create("div", {
className: "awesomplete",
around: input
});
this.container = this.container(input);

@LeaVerou LeaVerou May 29, 2018

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do note that this means the this.container() function is overwritten and not accessible anymore. Are we sure we don't need to access it again?

@melitele melitele May 29, 2018 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I am reading the original code correctly, the container element is never re-created during the object life cycle. That's why I've let the function to be overwritten. I can change the field used for the container function - do you have a preference for the field name?

Thank you for looking at this PR.

@LeaVerou LeaVerou May 29, 2018

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah, I think container is a good name. Perhaps we can store the constructor options somewhere? Like this.options? Then we still have access to the function, so you can compare it to the default function in the check in destroy() instead of the less foolproof way you're checking now.

@melitele melitele May 30, 2018 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Added this.options to hold the original options passed to Awesomplete constructor. Checking this.options.container in destroy() and cleaning up the container element only when this.options.container is not set i.e. when container is originally created by Awesomplete.


this.ul = $.create("ul", {
hidden: "hidden",
Expand Down Expand Up @@ -203,11 +203,14 @@ _.prototype = {
$.unbind(this.input, this._events.input);
$.unbind(this.input.form, this._events.form);

//move the input out of the awesomplete container and remove the container and its children
var parentNode = this.container.parentNode;
// cleanup container if it was created by Awesomplete but leave it alone otherwise
if (!this.options.container) {
//move the input out of the awesomplete container and remove the container and its children
var parentNode = this.container.parentNode;

parentNode.insertBefore(this.input, this.container);
parentNode.removeChild(this.container);
parentNode.insertBefore(this.input, this.container);
parentNode.removeChild(this.container);
}

//remove autocomplete and aria-autocomplete attributes
this.input.removeAttribute("autocomplete");
Expand Down Expand Up @@ -351,6 +354,13 @@ _.SORT_BYLENGTH = function (a, b) {
return a < b? -1 : 1;
};

_.CONTAINER = function (input) {
return $.create("div", {
className: "awesomplete",
around: input
});
}

_.ITEM = function (text, input, item_id) {
var html = input.trim() === "" ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");
return $.create("li", {
Expand Down
6 changes: 6 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,12 @@ <h1>Extend</h1>
<td>Sort function (will be passed directly to <code>Array.prototype.sort()</code>) to sort the items after they have been filtered and before they are truncated and converted to HTML elements. If value is <code>false</code>, sorting will be disabled.</td>
<td>Sorted by length first, order second.</td>
</tr>
<tr>
<td><code>container</code></td>
<td>Controls how list container element is generated.</td>
<td>Function that takes one parameter, the user’s input and returns an element.</td>
<td>Generates <code>&lt;div></code> with class <code>awesomplete</code></td>
</tr>
<tr>
<td><code>item</code></td>
<td>Controls how list items are generated.</td>
Expand Down