Allow user to specify pre-existing dropdown element via options param

[fractaledmind]

A fixed version of #16781.

[LeaVerou]

I would rather not duplicate everything here. The options object can be a variable that is shared by both function calls.

[vlazar]

And both this.ul and this.dropdown are referring effectively to the same thing, so why have both?

[LeaVerou]

Thanks! See comment.

[vlazar]

Judging by name, I would expect this method is only for setting element properties/attributes. But it also adds elements to DOM sometimes https://github.com/smargh/awesomplete/blob/pr/dropdown/awesomplete.js#L316-L323

@LeaVerou I wonder, if there is really a need for a public API method, which only adds properties/attributes to the element (or also creates DOM nodes sometimes)?
What if this will be an internal helper, instead of a new public API method?

[LeaVerou]

I think it's a useful helper, very similar to what I have in other projects. In fact, I plan to clean up & release these helpers as a standalone library very soon :)
That said, if we have a $.set we don't really need a $.create, we can just use the native document.createElement if needed, then call $.set() on it. I think that will also simplify our code a bit, since we can just set this.dropdown to whatever, then call $.set() on it outside the conditional.

[vlazar]

Definitely +1 for modularization, might be a good time to take care off npm stuff as well. The build/release process can, and I think should be automated, so once done it won't take any time. Can send a PR, just let me know.

[LeaVerou]

I did release the helpers: https://github.com/leaverou/bliss
Not sure what you mean with the rest of your comment. Are you referring to adding gulp? In any case, PRs are welcome :)

[vlazar]

The main idea is that there are a lot of very useful things to have on any project, but usually no-one wants to take care of it. The solution is to automate, so it's ideally only done once.

I believe a lot of things can be improved. Some of them:

The package.json is still at "0.0.0" and no release on npm, and the 1.0 release was tagged on github a long time ago. Those need to be in sync. And the best way to have them in sync is to automate build/release process.

The version number. When someone opens a bug, it's very important to know the version they are referring to. Now it's like there is stable 1.0 and just latest. New version tag/release/whatever can be done with 1 command.

The changelog. It is always good to know about new features or which bugs are fixed in new version. I like how changelog generation is automated in Angular 2. They require commit messages in special format, so that it can be easily parsed. See https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit Do you think this might work for Awesomplete too?

I can start by replacing Makefile with gulp, so we'll have a base for other gulp tasks.

[vlazar]

I did release the helpers: https://github.com/leaverou/bliss

Does it mean it can be added to Awesomplete dependencies? So we just use bliss and remove everything it provides from Awesomplete?

[LeaVerou]

I don't know. I’ve been going back and forth on it. What do you think?

[vlazar]

I guess it depends on how much of Awesomplete is in Bliss now :) If you think all of Bliss code is not too big to be used for Awesomplete, then it's fine to use it.

If Awesomplete and Bliss will use ES6 modules one day, then the answer would be definitely yes. With ES6 modules it would be so much easier to include only the necessary parts of Bliss into Awesomplete build. Of course this can be done without ES6 modules, but it's kind of a hack.

[LeaVerou]

It’s this bit that we save if we make Bliss a dependency:

function $(expr, con) {
    return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
}

function $$(expr, con) {
    return slice.call((con || document).querySelectorAll(expr));
}

$.create = function(tag, o) {
    var element = document.createElement(tag);

    for (var i in o) {
        var val = o[i];

        if (i === "inside") {
            $(val).appendChild(element);
        }
        else if (i === "around") {
            var ref = $(val);
            ref.parentNode.insertBefore(element, ref);
            element.appendChild(ref);
        }
        else if (i in element) {
            element[i] = val;
        }
        else {
            element.setAttribute(i, val);
        }
    }

    return element;
};

$.bind = function(element, o) {
    if (element) {
        for (var event in o) {
            var callback = o[event];

            event.split(/\s+/).forEach(function (event) {
                element.addEventListener(event, callback);
            });
        }
    }
};

$.fire = function(target, type, properties) {
    var evt = document.createEvent("HTMLEvents");

    evt.initEvent(type, true, true );

    for (var j in properties) {
        evt[j] = properties[j];
    }

    target.dispatchEvent(evt);
};

[LeaVerou]

I opened a new issue: #16806

[fractaledmind]

@LeaVerou @vlazar

I have updated this PR to be up-to-date with HEAD. I've also taken some of the comments into consideration and changed the code. There is no longer a $.create method, only the $.set method. I have updated the tests accordingly. Also, the API is now using ul, not dropdown.

This PR is now fully mergable.