How to use sizzle - 10 common examples
To help you get started, we’ve selected a few sizzle examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
instructure / instructure-ui / packages / ui-test-utils / src / utils / selectors.js View on Github 
// :withLabel(text)
Sizzle.selectors.pseudos.withLabel = createPseudo((text) => {
return (element) => {
return matchElementByLabel(element, text, options)
}
})
Sizzle.selectors.pseudos.label = Sizzle.selectors.pseudos.withLabel
// :withText(text)
Sizzle.selectors.pseudos.withText = createPseudo((text) => {
return (element) => {
return matchElementByText(element, text, options)
}
})
Sizzle.selectors.pseudos.textContent = Sizzle.selectors.pseudos.withText
// :withTitle(text)
Sizzle.selectors.pseudos.withTitle = createPseudo((text) => {
return (element) => {
return matchElementByTitle(element, text, options)
}
})
Sizzle.selectors.pseudos.title = Sizzle.selectors.pseudos.withTitle
// :clickable
Sizzle.selectors.pseudos.clickable = (element) => {
return clickable(element)
}
// :focusable
Sizzle.selectors.pseudos.focusable = (element) => {function addPseudos (
options = {
exact: true,
trim: true,
collapseWhitespace: true
}
) {
const { createPseudo } = Sizzle.selectors
// :withLabel(text)
Sizzle.selectors.pseudos.withLabel = createPseudo((text) => {
return (element) => {
return matchElementByLabel(element, text, options)
}
})
Sizzle.selectors.pseudos.label = Sizzle.selectors.pseudos.withLabel
// :withText(text)
Sizzle.selectors.pseudos.withText = createPseudo((text) => {
return (element) => {
return matchElementByText(element, text, options)
}
})
Sizzle.selectors.pseudos.textContent = Sizzle.selectors.pseudos.withTextfunction handleEvent(e){
var evt, target, match;
evt = e ? e : window.event;
// target = (evt.currentTarget) ? evt.currentTarget : (evt.srcElement || evt.target);
match = Sizzle.matches(selector, [evt.target]);
// https://github.com/jquery/sizzle/wiki
if (match.length) {
if ('click' === action && 'A' === evt.target.nodeName) {
return handleClickEvent(evt, evt.target, callback);
}
else if ('submit' === action && 'FORM' === evt.target.nodeName) {
return handleFormSubmit(evt, evt.target, callback);
}
else {
callback(evt);
}
}
else if ('window' === selector) {_converse.onMAMPreferences = function (iq, feature) {
/* Handle returned IQ stanza containing Message Archive
* Management (XEP-0313) preferences.
*
* XXX: For now we only handle the global default preference.
* The XEP also provides for per-JID preferences, which is
* currently not supported in converse.js.
*
* Per JID preferences will be set in chat boxes, so it'll
* probbaly be handled elsewhere in any case.
*/
const preference = sizzle(`prefs[xmlns="${Strophe.NS.MAM}"]`, iq).pop();
const default_pref = preference.getAttribute('default');
if (default_pref !== _converse.message_archiving) {
const stanza = $iq({'type': 'set'})
.c('prefs', {
'xmlns':Strophe.NS.MAM,
'default':_converse.message_archiving
});
Array.from(preference.children).forEach(child => stanza.cnode(child).up());
// XXX: Strictly speaking, the server should respond with the updated prefs
// (see example 18: https://xmpp.org/extensions/xep-0313.html#config)
// but Prosody doesn't do this, so we don't rely on it.
_converse.api.sendIQ(stanza)
.then(() => feature.save({'preferences': {'default':_converse.message_archiving}}))
.catch(_converse.onMAMError);
} else {return tpl_form_url({
'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent')
});
} else if (field.getAttribute('var') === 'username') {
return tpl_form_username({
'domain': ' @'+options.domain,
'name': field.getAttribute('var'),
'type': XFORM_TYPE_MAP[field.getAttribute('type')],
'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent'),
'required': !!field.querySelector('required')
});
} else if (field.getAttribute('var') === 'ocr') { // Captcha
const uri = field.querySelector('uri');
const el = sizzle('data[cid="'+uri.textContent.replace(/^cid:/, '')+'"]', stanza)[0];
return tpl_form_captcha({
'label': field.getAttribute('label'),
'name': field.getAttribute('var'),
'data': _.get(el, 'textContent'),
'type': uri.getAttribute('type'),
'required': !!field.querySelector('required')
});
} else {
const name = field.getAttribute('var');
return tpl_form_input({
'id': u.getUniqueId(),
'label': field.getAttribute('label') || '',
'name': name,
'fixed_username': options.fixed_username,
'autocomplete': getAutoCompleteProperty(name, options),
'placeholder': null,onDiscoItems (stanza) {
sizzle(`query[xmlns="${Strophe.NS.DISCO_ITEMS}"] item`, stanza).forEach(item => {
if (item.getAttribute("node")) {
// XXX: Ignore nodes for now.
// See: https://xmpp.org/extensions/xep-0030.html#items-nodes
return;
}
const jid = item.getAttribute('jid');
if (this.items.get(jid) === undefined) {
const entity = _converse.disco_entities.get(jid);
if (entity) {
this.items.add(entity);
} else {
this.items.create({'jid': jid});
}
}
});
},return isImage(url).then(img => {
const i = new Image();
i.src = img.src;
i.addEventListener('load', resolve);
// We also resolve (instead of reject) for non-images,
// otherwise the Promise.all resolves prematurely.
i.addEventListener('error', resolve);
const { __ } = _converse;
sizzle(`a[href="${url}"]`, el)
.forEach(a => (a.outerHTML = tpl_image({url, 'label_download': __('Download')})));
}).catch(resolve)
} else {async function onDomainDiscovered (response) {
const text = await response.text();
const xrd = (new window.DOMParser()).parseFromString(text, "text/xml").firstElementChild;
if (xrd.nodeName != "XRD" || xrd.namespaceURI != "http://docs.oasis-open.org/ns/xri/xrd-1.0") {
return log.warn("Could not discover XEP-0156 connection methods");
}
const bosh_links = sizzle(`Link[rel="urn:xmpp:alt-connections:xbosh"]`, xrd);
const ws_links = sizzle(`Link[rel="urn:xmpp:alt-connections:websocket"]`, xrd);
const bosh_methods = bosh_links.map(el => el.getAttribute('href'));
const ws_methods = ws_links.map(el => el.getAttribute('href'));
// TODO: support multiple endpoints
_converse.websocket_url = ws_methods.pop();
_converse.bosh_service_url = bosh_methods.pop();
if (bosh_methods.length === 0 && ws_methods.length === 0) {
log.warn(
"onDomainDiscovered: neither BOSH nor WebSocket connection methods have been specified with XEP-0156."
);
}
}return clsRe && tagRe;
}
} else if (id && !tag && !cls) {
filter = function(elem) {
return elem.id === id;
};
}
}
if (S.isFunction(filter)) {
ret = S.filter(elems, filter);
}
// 其它复杂 filter, 采用外部选择器
else if (filter && sizzle) {
ret = sizzle.matches(filter, elems);
}
// filter 为空或不支持的 selector
else {
error(filter);
}
return ret;
},first(selector, node = this.dom) {
const results = new Sizzle(selector, node);
if (results.length === 0) return undefined;
return results[0];
}sizzle
A pure-JavaScript, bottom-up CSS selector engine designed to be easily dropped in to a host library.
