open-consul/ui/packages/consul-ui/app/services/dom.js

195 lines
5.3 KiB
JavaScript

import Service, { inject as service } from '@ember/service';
import { guidFor } from '@ember/object/internals';
// selecting
import qsaFactory from 'consul-ui/utils/dom/qsa-factory';
// TODO: sibling and closest seem to have 'PHP-like' guess the order arguments
// ie. one `string, element` and the other has `element, string`
// see if its possible to standardize
import sibling from 'consul-ui/utils/dom/sibling';
import closest from 'consul-ui/utils/dom/closest';
import isOutside from 'consul-ui/utils/dom/is-outside';
import getComponentFactory from 'consul-ui/utils/dom/get-component-factory';
// events
import normalizeEvent from 'consul-ui/utils/dom/normalize-event';
import createListeners from 'consul-ui/utils/dom/create-listeners';
import clickFirstAnchorFactory from 'consul-ui/utils/dom/click-first-anchor';
// ember-eslint doesn't like you using a single $ so use double
// use $_ for components
const $$ = qsaFactory();
let $_;
let inViewportCallbacks;
const clickFirstAnchor = clickFirstAnchorFactory(closest);
export default class DomService extends Service {
@service('-document') doc;
constructor(owner) {
super(...arguments);
inViewportCallbacks = new WeakMap();
$_ = getComponentFactory(owner);
}
willDestroy() {
super.willDestroy(...arguments);
inViewportCallbacks = null;
$_ = null;
}
document() {
return this.doc;
}
viewport() {
return this.doc.defaultView;
}
guid(el) {
return guidFor(el);
}
focus($el) {
if (typeof $el === 'string') {
$el = this.element($el);
}
if (typeof $el !== 'undefined') {
let previousIndex = $el.getAttribute('tabindex');
$el.setAttribute('tabindex', '0');
$el.focus();
if (previousIndex === null) {
$el.removeAttribute('tabindex');
} else {
$el.setAttribute('tabindex', previousIndex);
}
}
}
// TODO: should this be here? Needs a better name at least
clickFirstAnchor = clickFirstAnchor;
closest = closest;
sibling = sibling;
isOutside = isOutside;
normalizeEvent = normalizeEvent;
setEventTargetProperty(e, property, cb) {
const target = e.target;
return new Proxy(e, {
get: function(obj, prop, receiver) {
if (prop === 'target') {
return new Proxy(target, {
get: function(obj, prop, receiver) {
if (prop === property) {
return cb(e.target[property]);
}
return target[prop];
},
});
}
return Reflect.get(...arguments);
},
});
}
setEventTargetProperties(e, propObj) {
const target = e.target;
return new Proxy(e, {
get: function(obj, prop, receiver) {
if (prop === 'target') {
return new Proxy(target, {
get: function(obj, prop, receiver) {
if (typeof propObj[prop] !== 'undefined') {
return propObj[prop](e.target);
}
return target[prop];
},
});
}
return Reflect.get(...arguments);
},
});
}
listeners = createListeners;
root() {
return this.doc.documentElement;
}
// TODO: Should I change these to use the standard names
// even though they don't have a standard signature (querySelector*)
elementById(id) {
return this.doc.getElementById(id);
}
elementsByTagName(name, context) {
context = typeof context === 'undefined' ? this.doc : context;
return context.getElementsByTagName(name);
}
elements(selector, context) {
// don't ever be tempted to [...$$()] here
// it should return a NodeList
return $$(selector, context);
}
element(selector, context) {
if (selector.substr(0, 1) === '#') {
return this.elementById(selector.substr(1));
}
// TODO: This can just use querySelector
return [...$$(selector, context)][0];
}
// ember components aren't strictly 'dom-like'
// but if you think of them as a web component 'shim'
// then it makes more sense to think of them as part of the dom
// with traditional/standard web components you wouldn't actually need this
// method as you could just get to their methods from the dom element
component(selector, context) {
if (typeof selector !== 'string') {
return $_(selector);
}
return $_(this.element(selector, context));
}
components(selector, context) {
return [...this.elements(selector, context)]
.map(function(item) {
return $_(item);
})
.filter(function(item) {
return item != null;
});
}
isInViewport($el, cb, threshold = 0) {
inViewportCallbacks.set($el, cb);
let observer = new IntersectionObserver(
(entries, observer) => {
entries.map(item => {
const cb = inViewportCallbacks.get(item.target);
if (typeof cb === 'function') {
cb(item.isIntersecting);
}
});
},
{
rootMargin: '0px',
threshold: threshold,
}
);
observer.observe($el); // eslint-disable-line ember/no-observers
// observer.unobserve($el);
return () => {
observer.unobserve($el); // eslint-disable-line ember/no-observers
if (inViewportCallbacks) {
inViewportCallbacks.delete($el);
}
observer.disconnect(); // eslint-disable-line ember/no-observers
observer = null;
};
}
}