mirror of
https://github.com/status-im/consul.git
synced 2025-01-09 21:35:52 +00:00
2920f73ddd
`window` and `document` are easily injected anyhow, but this primarily this keeps everything dom related in the same place. Included here are changes to make all ember related objects use the dom service `document` and `viewport` instead of just `document` and `window`. Quote from a previous PR (#4924) which explains the thinking around this: > Now I have all these things in the dom service, it would make sense to get window from there also. I was thinking of making a viewport method, which would be a nice word whether window was a browser window, an iframe (not really a window) like when ember testing, or anything else. To me the viewport is what we are actually talking about here.
86 lines
2.9 KiB
JavaScript
86 lines
2.9 KiB
JavaScript
import Service from '@ember/service';
|
|
import { getOwner } from '@ember/application';
|
|
import { get } from '@ember/object';
|
|
|
|
// 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 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 $_;
|
|
const clickFirstAnchor = clickFirstAnchorFactory(closest);
|
|
export default Service.extend({
|
|
doc: document,
|
|
win: window,
|
|
init: function() {
|
|
this._super(...arguments);
|
|
$_ = getComponentFactory(getOwner(this));
|
|
},
|
|
document: function() {
|
|
return get(this, 'doc');
|
|
},
|
|
viewport: function() {
|
|
return get(this, 'win');
|
|
},
|
|
// TODO: should this be here? Needs a better name at least
|
|
clickFirstAnchor: clickFirstAnchor,
|
|
closest: closest,
|
|
sibling: sibling,
|
|
normalizeEvent: normalizeEvent,
|
|
listeners: createListeners,
|
|
root: function() {
|
|
return get(this, 'doc').documentElement;
|
|
},
|
|
// TODO: Should I change these to use the standard names
|
|
// even though they don't have a standard signature (querySelector*)
|
|
elementById: function(id) {
|
|
return get(this, 'doc').getElementById(id);
|
|
},
|
|
elementsByTagName: function(name, context) {
|
|
context = typeof context === 'undefined' ? get(this, 'doc') : context;
|
|
return context.getElementByTagName(name);
|
|
},
|
|
elements: function(selector, context) {
|
|
// don't ever be tempted to [...$$()] here
|
|
// it should return a NodeList
|
|
return $$(selector, context);
|
|
},
|
|
element: function(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: function(selector, context) {
|
|
// TODO: support passing a dom element, when we need to do that
|
|
return $_(this.element(selector, context));
|
|
},
|
|
components: function(selector, context) {
|
|
return [...this.elements(selector, context)]
|
|
.map(function(item) {
|
|
return $_(item);
|
|
})
|
|
.filter(function(item) {
|
|
return item != null;
|
|
});
|
|
},
|
|
});
|