github.com/outbrain/consul@v1.4.5/ui-v2/app/services/dom.js (about)

     1  import Service from '@ember/service';
     2  import { getOwner } from '@ember/application';
     3  import { get } from '@ember/object';
     4  
     5  import qsaFactory from 'consul-ui/utils/dom/qsa-factory';
     6  // TODO: Move to utils/dom
     7  import getComponentFactory from 'consul-ui/utils/get-component-factory';
     8  import normalizeEvent from 'consul-ui/utils/dom/normalize-event';
     9  
    10  // ember-eslint doesn't like you using a single $ so use double
    11  // use $_ for components
    12  const $$ = qsaFactory();
    13  let $_;
    14  export default Service.extend({
    15    doc: document,
    16    init: function() {
    17      this._super(...arguments);
    18      $_ = getComponentFactory(getOwner(this));
    19    },
    20    normalizeEvent: function() {
    21      return normalizeEvent(...arguments);
    22    },
    23    root: function() {
    24      return get(this, 'doc').documentElement;
    25    },
    26    // TODO: Should I change these to use the standard names
    27    // even though they don't have a standard signature (querySelector*)
    28    elementById: function(id) {
    29      return get(this, 'doc').getElementById(id);
    30    },
    31    elementsByTagName: function(name, context) {
    32      context = typeof context === 'undefined' ? get(this, 'doc') : context;
    33      return context.getElementByTagName(name);
    34    },
    35    elements: function(selector, context) {
    36      return $$(selector, context);
    37    },
    38    element: function(selector, context) {
    39      if (selector.substr(0, 1) === '#') {
    40        return this.elementById(selector.substr(1));
    41      }
    42      // TODO: This can just use querySelector
    43      return [...$$(selector, context)][0];
    44    },
    45    // ember components aren't strictly 'dom-like'
    46    // but if you think of them as a web component 'shim'
    47    // then it makes more sense to think of them as part of the dom
    48    // with traditional/standard web components you wouldn't actually need this
    49    // method as you could just get to their methods from the dom element
    50    component: function(selector, context) {
    51      // TODO: support passing a dom element, when we need to do that
    52      return $_(this.element(selector, context));
    53    },
    54  });