azu / wait-for-element.js

This library provide a function which wait until an element is visible.

wait-for-element.js

This library provide a function which wait until an element is visible.

Installation

npm install wait-for-element

Dependency

• Promise API

if you use it with non promise support browser, should load Promise polyfill like ES6-Promise.

• Element.matches()

if you use it with old browser.

if (Element && !Element.prototype.matches) {
    var proto = Element.prototype;
    proto.matches = proto.matchesSelector ||
    proto.mozMatchesSelector || proto.msMatchesSelector ||
    proto.oMatchesSelector || proto.webkitMatchesSelector;
}

or use polyfill.

• MutationObserver or SetTimeout polling

wait-for-element do feature detection and use either one of the two.

Usage

For details, please see Example.

/**
 * Wait until an element that is matched the selector is visible.
 * @param {string} selector the css selector
 * @param {number} timeout the timeout is millisecond. default:2000ms
 * @returns {Promise}
 */
var waitForElement = require("wait-for-element");
waitForElement("#js-element").then(function (element) {
    alert("Found #js-element");
}).catch(console.error.bind(console));

Tests

npm test

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT

wait-for-element.js's Issues

Can you add Typescript definition files?

Error in console

I am getting an error in the console if the element has not been created. How can I avoid this?

Why do you need to check for addedNode.matches === "function"

I exported this to my own codebase as its not npm friendly atm, but was wondering why you need
addedNode.matches === "function"

I notice that you can get added nodes match but it isn't a function, strange

Build failing, any chance of making it pass?

Want to use this but Build failing offputting.