A simple DOM component (for angular and angular-ecs)

DOM_element.js

// Detect Vendor Prefix with JavaScript
// by By David Walsh
// from http://davidwalsh.name/vendor-prefix
var prefix = (function () {
  var styles = window.getComputedStyle(document.documentElement, ''),
    pre = (Array.prototype.slice
      .call(styles)
      .join('') 
      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
    )[1],
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
  return {
    dom: dom,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  };
})();

var TRANSFORM = prefix.css+'transform';

// Wraps a raw DOM element or HTML string as a jqLite element.
function Dom(selector) {
  this.selector = selector || null;
  
  if (angular.isString(selector) && selector.charAt(0) != '<') {
    selector = document.querySelector(selector);
  }

  angular.element.call(this, selector);
}

// Allow constructions from state object
// see https://github.com/Hypercubed/angular-ecs/wiki/Components#registered-components-using-a-class-constructor-with-inject
Dom.$inject = ['selector'];

// Maybe want to use prefix later
Dom.prefix = prefix;

// inherits angular.element
// provides angular's jqLite methods
// see https://docs.angularjs.org/api/ng/function/angular.element
Dom.prototype = new angular.element();

// fastest way to set style
// see http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Dom.prototype.setPosition = function(x,y) {
  this[0].style[TRANSFORM] = 'translate3d('+(x)+'px,'+(y)+'px,0)';
}